Friday, 21 June 2013

Creating a synchronized view of two maps or images with Leaflet

In my last blog post, we created a Leaflet plugin capable of showing zoomable high-resolution images with Leaflet. Now, I need to compare two images side-by-side, and I've decided to create a generic plugin which can be used for maps as well.

The Leaflet.Sync plugin is just a few lines of code, but it took some time to figure out the inner workings of Leaflet. Here is a synchronized view of two maps of Foldøy island where I'm currently staying:


This is the JavaScript code needed to create this map:

var layer1 = L.tileLayer(''); 

var layer2 = L.tileLayer('', {
    attribution: '© Kartverket'

var map1 ='map1', {
    layers: [layer1],
    center: [59.336, 5.967],
    zoom: 14            

var map2 ='map2', {
    layers: [layer2],
    center: [59.336, 5.967],
    zoom: 14,
    zoomControl: false                     


Create the maps as your normally do, and synchronize the maps with the sync method. You can synchronize one-way of two-way as above.

The plugin is not tested on different devices, so please report any issues on Github.

My new acquired friends on Foldøy. 


Anonymous said...

Hi! Is it possible to create two synchronized maps but with different coordinates offset? I'm thinking of google maps example, where a small patch of the map is showing a synchronized view of the main map but with a different tile layer.

kingstakh said...

Hi! Nice plugin, but have one problem. For adding Google tile layer use this Plugin, but Google layer is not draggable in Sync mode. If drag Google layer - OSM layer dragging, if drag OSM - Google layer frized and change position only after change zoom level up/down. Demo here

Bjørn Sandvik said...

Please report issues on GitHub:

Md. Azizul Alam said...

Is it possible to sync three or more maps?

Bjørn Sandvik said...

Yes, you can sync three or more maps.

Marc Oller said...

I would like to use Leaflet.Sync as a switch. I.e switch a views with one map to a dual view. Is there any example of this implementation?

JW said...

Is it possible to sync the responsiveness of geojson layers? eg click on a feature on one side, and it does the same on the other.