<!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('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var layer2 = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
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);
map2.sync(map1);
</script>
</body>
</html>
natto