<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Sync Demo - with three maps listening</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; }
#map, #container { width: 50%; height: 100%; }
#map { float: left; }
#container { float: right; }
#container .map { width: 100%; height: 50%; }
</style>
</head>
<body>
<div id="map"></div>
<div id="container">
<div id="mapA" class="map"></div>
<div id="mapB" class="map"></div>
</div>
<script src="../L.Map.Sync.js"></script>
<script type="text/javascript">
var center = [52.517, 13.388];
var options = {
attribution: '<a href="http://openstreetmap.org/copyright">© OpenStreetmap and Contributors</a>',
subdomains: 'abc',
minZoom: 0,
maxZoom: 20
};
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', options);
var osmfr = L.tileLayer('http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', options);
var osmbw = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', options);
var mapA = L.map('mapA', {
layers: [osmfr],
center: center,
zoom: 14,
zoomControl: false
});
var mapB = L.map('mapB', {
layers: [osmbw],
center: center,
zoom: 14,
zoomControl: false
});
var map = L.map('map', {
layers: [osm],
center: center,
zoom: 14
});
map.sync(mapA, {offsetFn: L.Sync.offsetHelper([1, 0], [0, 0])});
map.sync(mapB, {offsetFn: L.Sync.offsetHelper([1, 1], [0, 1])});
var doAll = false;
var doA = false;
var doB = false;
var p = location.search;
if (p != '') {
var params = p.substring(1).split('&');
for (var i = 0; i < params.length; i++) {
var param = params[i].split('=');
switch (param[0]) {
case 'all':
doAll = parseInt(param[1]);
break;
case 'a':
doA = parseInt(param[1]);
break;
case 'b':
doB = parseInt(param[1]);
break;
}
}
}
// If you want interaction with mapA|B to be synchronized on map,
// add other links as well
// or add ?all=1 to the url.
if (doAll || doA) {
mapA.sync(map, {offsetFn: L.Sync.offsetHelper([0, 0], [1, 0])});
mapA.sync(mapB, {offsetFn: L.Sync.offsetHelper([0, 1], [0, 0])});
}
if (doAll || doB) {
mapB.sync(map, {offsetFn: L.Sync.offsetHelper([0, 1], [1, 1])});
mapB.sync(mapA, {offsetFn: L.Sync.offsetHelper([0, 0], [0, 1])});
}
</script>
</body>
</html>
natto