Banner

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. 


5 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

Md. Azizul Alam said...

Hello,
Is it possible to sync three or more maps?

Bjørn Sandvik said...

Yes, you can sync three or more maps.