A Datamaps plugin that enables zooming to arbitrary coordinates at an arbitrary zoom level.
npm install datamaps-zoomto
git. Dependencies can be installed with yarn install,grunt will build the source code. The original and minifiedbuild directory.yarn install datamaps-zoomto. The source will then be located innode_modules/datamaps-zoomto/build.``javascript
// 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:
lng:
// 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:
// scale:
// }
// 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.
It is also pretty easy to use this plugin in a Webpack bundle. See
the webpack-example directory for details.
`javascript
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
}
});
`