<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Sync Demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" crossorigin=""></script>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; }
#map1, #map2 { width: 49.5%; height: 100%; }
#map1 { float: left; }
#map2 { float: right; }
</style>
</head>
<body>
<div id="map1"></div>
<div id="map2"></div>
<script src="../L.Map.Sync.js"></script>
<script type="text/javascript">
var center = [59.336, 5.967];
var layer1 = L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart&zoom={z}&x={x}&y={y}');
var layer2 = L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo2&zoom={z}&x={x}&y={y}', {
attribution: '© Kartverket'
});
var map1 = L.map('map1', {
layers: [layer1],
center: center,
zoom: 14
});
map1.attributionControl.setPrefix('');
var map2 = L.map('map2', {
layers: [layer2],
center: center,
zoom: 14,
zoomControl: false
});
map1.sync(map2, {syncCursor: true});
map2.sync(map1, {syncCursor: true});
// unsync after 5s.
setTimeout(function () {
map1.unsync(map2);
map2.unsync(map1);
}, 5000);
</script>
</body>
</html>
natto