d3-geo-zoom

Interactive demo of D3 geographic projection zooming and panning

Examples

Basic Usage

import { GeoZoom } from '@fxi/d3-geo-zoom';
import { select } from 'd3-selection';
import { geoOrthographic, geoPath } from 'd3-geo';

// Create SVG element
const svg = select('#map')
  .append('svg')
  .attr('width', 800)
  .attr('height', 600);

// Setup projection
const projection = geoOrthographic()
  .scale(250)
  .translate([400, 300]);

// Create path generator
const path = geoPath()
  .projection(projection);

// Initialize and configure zoom behavior
const zoom = new GeoZoom(svg.node());
zoom
  .setProjection(projection)
  .setNorthUp(true)
  .onMove(() => {
    // Update map on zoom/pan
    svg.selectAll('path').attr('d', path);
  });

API Reference

new GeoZoom(element)

Creates a new GeoZoom instance for the provided DOM element (typically an SVG element).

Methods

  • setProjection(projection) - Sets the D3 geographic projection to use
  • rotateTo(rotation) - Smoothly rotates to specified [lambda, phi, gamma] angles
  • move(direction, step) - Moves in specified direction ('left', 'right', 'up', 'down', 'north')
  • reset() - Resets zoom and rotation to initial state
  • setNorthUp(enabled) - Enables/disables north-up constraint
  • setScaleExtent([min, max]) - Sets allowed scale range
  • setTransitionDuration(duration) - Sets duration for smooth transitions
  • onMove(callback) - Sets callback for projection changes
  • getZoom() - Gets the underlying D3 zoom behavior

Callback Parameters

The onMove callback receives an object with:

  • scale - Current projection scale
  • rotation - Current rotation as [lambda, phi, gamma]