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:


Fullscreen

This is the JavaScript code needed to create this map:

var layer1 = L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/...'); 

var layer2 = L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/...', {
    attribution: '© Kartverket'
});

var map1 = L.map('map1', {
    layers: [layer1],
    center: [59.336, 5.967],
    zoom: 14            
});

var map2 = L.map('map2', {
    layers: [layer2],
    center: [59.336, 5.967],
    zoom: 14,
    zoomControl: false                     
});

map1.sync(map2);
map2.sync(map1);

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. 


9 comments:

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 https://github.com/shramov/leaflet-plugins, 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 http://1871.by/demo/

Bjørn Sandvik said...

Please report issues on GitHub: https://github.com/turban/Leaflet.Sync/issues

Unknown said...

Hello,
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.

Anonymous said...

Hey! First of all, congrats for the great work on the provided example.

I'm trying to persist the synchronization status for retrieving the same views after rebooting, have you tried already the same thing in any way? Thanks

Cheers,
Chris

kawando said...

Lovely plugin!
Could it be possible for you to tell me what the license is?