FOSS4G 2017 TOKAI LEAFLET HANDS ON

// twomaps.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Leaflet Hands On</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css"/>
    <link rel="stylesheet" href="./css/mystyle.css">
    <script src="./leaflet/leaflet.js"></script>
</head>
<body>
    <div id="map1" class="twomaps"></div>
    <div id="map2" class="twomaps"></div>
    <script src="./js/twomaps.js"></script>
</body>
</html>


// mystyle.css
.twomaps{
    width:49vw;
    height:100vh;
    float:left;
    border-right:2px solid #000;
}

//twomaps.js
var options = {
 center : [35.1611,136.8842],
 zoom : 16
}

var map1 = L.map('map1',options);
var osm_j_baselayer = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',{
    attribution:'map data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map1);

var map2 = L.map('map2',options);
var gis_baselayer = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution:
"<a href=\"http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\" target=\"_blank\">国土地理院</a>"
}).addTo(map2);

var moveOtherMap = function(target, center, zoom){
    offHandler(target);
    target.setView(center, zoom);
};

var offHandler = function(target){
    target.off("move");
};

var onHandler = function(this_map){
    var other_map;
    if (this_map == map1){
        other_map = map2;
    }else{
        other_map = map1;
    }

    this_map.on("move", function(e){
        moveOtherMap(other_map, this.getCenter(), this.getZoom());
    }, this_map);

};

L.DomEvent.on(map1.getContainer(), "mouseover touchstart", function(e){
    onHandler(this);
}, map1);

L.DomEvent.on(map2.getContainer(), "mouseover touchstart", function(e){
    onHandler(this);
}, map2);