jdlubrano/datamaps-zoomto-plugin

A Datamaps plugin to zoom to coordinates on a Datamaps svg.

Datamaps Zoom-to Plugin

Contributors

• Joel Lubrano

Description

This project provides a plugin for zooming to arbitrary coordinates on a D3/Datamaps svg.

Getting Started

Git

Clone the project via git. Dependencies can be installed with yarn install, and running grunt will build the source code. The original and minified versions will be present in the build directory.

Yarn

Run yarn install datamaps-zoomto. The source will then be located in node_modules/datamaps-zoomto/build.

Sample Usage

// Create a Datamap instance
var dm = new Datamap({
    element: document.getElementById('map')
});

// Setup the options for the zoom (defaults given)
var zoomOpts = {
    scaleFactor: 1, // The amount to zoom
    center: {
        lat: <the center of your original map>, // latitude of the point to which you wish to zoom
        lng: <the center of your orignal map>, // longitude of the point to which you wish to zoom
        // NOTE: You cannot specify lat without lng or lng without lat.  It's all or nothing.
    },
    transition: {
        duration: 1000 // milliseconds
    },
    onZoomComplete: function (zoomData) {
      // Called after zoomto completes.  Bound to the Datamaps instance.
      // Passes one argument, zoomData.
      // zoomData = {
      //   translate: { x: <number>, y: <number> },
      //   scale: <number>
      // }
      // no-op by default
    }
};

// perform the zoom
dm.zoomto(zoomOpts);

// Of course, using the default zoom will not actually zoom due to a 1:1 scale
// and the center of the map not changing.

Also see examples/basic.html.

Using with Webpack

It is also pretty easy to use this plugin in a Webpack bundle. See the webpack-example directory for details.

const Datamaps = require('datamaps');
require('datamaps-zoomto');

var dm = new Datamaps({
  element: document.getElementById('map')
});

dm.zoomto({
  scaleFactor: 2,
  transition: {
    duration: 1000
  }
});

// or using ES6 import syntax

import Datamaps from 'datamaps';
import zoomto from 'datamaps-zoomto';

var dm = new Datamaps({
  element: document.getElementById('map')
});

dm.addPlugin('zoomto', zoomto);

dm.zoomto({
  scaleFactor: 2,
  transition: {
    duration: 1000
  }
});

Dependencies

See package.json.

datamaps-zoomto-plugin's Issues

how to get the new scale and translate after a zoom?

Hi, very cool plugin.
One question I have is, once I call the zoomto function, and the map correctly zooms, once I go to zoom in and out with the mousewheel, the translate and scale reset to original size, instead of maintaining the new zoom.

What would be the best way to set the new translate and scale so there is no reset?

Thanks

If no lat and lng given only zoom

Thank you for this great tiny plugin. However, I would wish that if no lat and lng are specified, the values 0 are not used automatically. I think it would be better to just zoom in or out and not to move to center.

/ Create a Datamap instance
var dm = new Datamap({
    element: document.getElementById('map')
});

// Setup the options for the zoom (defaults given)
var zoomOpts = {
    scaleFactor: 2, // The amount to zoom
    transition: {
        duration: 1000 // milliseconds
    },
};

// perform a zoom in only
dm.zoomto(zoomOpts);

Readme snippet missing `addPlugin`

I stumbled across your plugin earlier, which saved me from quite a few headaches due to me messing up the lat/long => svg translate logic in my code. Thanks for sharing it! I'm new to datamaps, so I might have missed something, but do the snippets in the readme work as is? I think they might be missing map.addPlugin, at least when working with the latest version of datamaps (with webpack).

import Datamap from "datamaps";
import zoomto from "datamaps-zoomto";
const map = new Datamap({ /* ... */ });
map.addPlugin("zoomto", zoomto); // <- this
map.zoomto({ /* ... */ });