Synchronized view of two maps. Tested with Leaflet 0.7.x and Leaflet 0.8-dev (48677f2).
More information in original blog post by @turban
Using npm for browserify npm install leaflet.sync (and require('leaflet.sync')), or just download L.Map.Sync.js and add a script tag for it in you html.
With two map objects, mapA and mapB, call mapA.sync(mapB) to sync interactions on mapA with mapB.
In order to make the other direction work, you should make another call: mapB.sync(mapA)
When in need to unsync maps simply call mapA.unsync(mapB) to release sync interactions on mapB and mapB.unsync(mapA) to release mapA.
Just make more calls to map.sync(), with different map objects. Interaction will be synced to all of them. If you want the actions to be synced vice-versa, you should synchronize all directions.
// synchronize three maps
mapA.sync(mapB);
mapA.sync(mapC);
mapB.sync(mapA);
mapB.sync(mapC);
mapC.sync(mapA);
mapC.sync(mapB);Replays all interaction on mapA on mapB to keep their views synchronised. Initially applies the view of mapA to mapB.
Optional options map:
{
noInitialSync: true // disables initial synchronisation of the maps.
}Removes synchronisation.
- Dragging is not propagated more than one level (In a
a.sync(b.sync(c))situation, dragging onawill not result in change onc).
Install dependencies and run tests:
npm install && npm test
or load test/index.html in your browser after installing the dependencies by running npm install.