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.