https://github.com/vasturiano/d3-geo-zoom
Zoom and pan D3 geo projections
https://github.com/vasturiano/d3-geo-zoom
Last synced: about 2 months ago
JSON representation
Zoom and pan D3 geo projections
- Host: GitHub
- URL: https://github.com/vasturiano/d3-geo-zoom
- Owner: vasturiano
- License: mit
- Created: 2017-11-12T10:54:42.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-12-13T22:14:31.000Z (10 months ago)
- Last Synced: 2025-04-02T09:11:15.298Z (7 months ago)
- Language: JavaScript
- Homepage: https://vasturiano.github.io/d3-geo-zoom/example/canvas/
- Size: 225 KB
- Stars: 31
- Watchers: 3
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/d3/d3-zoom) for regular cartesian coordinates. Generally used with [Azimuthal projections](https://github.com/d3/d3-geo#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](https://www.jasondavies.com/maps/rotate/) and Mike Bostock's [Versor Dragging](https://observablehq.com/@d3/versor-dragging).
Makes use of Fil's [versors package](https://github.com/Fil/versor) for translating mouse coordinates to the sphere.
See the included examples ([canvas](https://vasturiano.github.io/d3-geo-zoom/example/canvas/) and [svg](https://vasturiano.github.io/d3-geo-zoom/example/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](https://github.com/d3/d3-geo#projections) 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. | - |
[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