d3-geo-zoom - npm explorer

d3.geoZoom
==============

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]

Apply zoom and pan user interactions to D3 spherical map projections in the same fashion as d3-zoom for regular cartesian coordinates. Generally used with Azimuthal projections, but also works for other projection types as long as scaling and rotation is supported.

Heavily based in previous work by Jason Davies' Rotate the World and Mike Bostock's Versor Dragging.
Makes use of Fil's versors package for translating mouse coordinates to the sphere.

See the included examples (canvas and svg).

Quick start

``js import d3GeoZoom from 'd3-geo-zoom';`or using a script tag`html`then`js d3.geoZoom() .projection() .onMove() ();`

`API reference`

| Method | Description | Default | | ------------------ | -------------------------------------------------------------------------------------------------------------------------- |:-------------:| | projection([object]) | Getter/setter for the D3 projection object whose position settings are modified according to the zoom/pan user interactions. The projection should support thescale and rotatemethods. | - | | northUp([boolean]) | Getter/setter for whether to maintain a north pointing upwards orientation or allow free rotation in all directions. | false | | scaleExtent([array]) | Getter/setter for the scale extent ([min, max]) to restrict the zoom interaction to. | [0.1, 1000]` |
| onMove([fn({ scale, rotation })]) | Callback function for when the projection object is updated due to a user interaction. This is a convenient place to bind the render function that redraws the map component elements according to the current projection settings. The callback function includes a single object parameter that contains the new scale and rotation values. | - |

[npm-img]: https://img.shields.io/npm/v/d3-geo-zoom
[npm-url]: https://npmjs.org/package/d3-geo-zoom
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-geo-zoom
[build-size-url]: https://bundlephobia.com/result?p=d3-geo-zoom
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-geo-zoom
[npm-downloads-url]: https://www.npmtrends.com/d3-geo-zoom

API reference

| Method | Description | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |:-------------:|
| projection([object]) | Getter/setter for the D3 projection object whose position settings are modified according to the zoom/pan user interactions. The projection should support the

scale and rotate

 methods. | - |
| northUp([boolean]) | Getter/setter for whether to maintain a north pointing upwards orientation or allow free rotation in all directions. | false |
| scaleExtent([array]) | Getter/setter for the scale extent (

[min, max]) to restrict the zoom interaction to. | [0.1, 1000]` |
| onMove([fn({ scale, rotation })]) | Callback function for when the projection object is updated due to a user interaction. This is a convenient place to bind the render function that redraws the map component elements according to the current projection settings. The callback function includes a single object parameter that contains the new scale and rotation values. | - |