d3.geoZoom

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

import d3GeoZoom from 'd3-geo-zoom';

or using a script tag

<script src="//unpkg.com/d3-geo-zoom"></script>

then

d3.geoZoom()
    .projection(<mapProjection>)
    .onMove(<callbackFn>)
    (<mapDomNode>);

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. | - |