Sync map

by DoubleYo

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<div id="france1"></div>
<div id="france2"></div>
<div id="sync" class="">][</div>

CSS

#france1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    border-right: solid thin black;
}
#france2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    border-left: solid thin black;
}

#sync {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -30px;
    margin-left: -30px;
    background: red;
    border-radius: 50%;
    border: solid 10px white;
    box-shadow: black 0 0 10px;
    
    font-size: 25px;
    color: white;
    line-height: 40px;
    text-align: center;
    
    cursor: pointer;
}

JavaScript

var map_sync = false;

france1 = L.map("france1", {
    center: [46.8, 2.5],
    zoom: 8,
    minZoom: 5,
    maxZoom: 12,
    maxBounds: [
        [20, -40],
        [70, 40]
    ]
});

france2 = L.map("france2", {
    center: [44, 4],
    zoom: 5,
    minZoom: 5,
    maxZoom: 12,
    maxBounds: [
        [20, -40],
        [70, 40]
    ]
});

L.tileLayer('http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(france1);

L.tileLayer('http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(france2);


france1_move = function() {
    france2.off("moveend");
    france2.setView(france1.getCenter(), france1.getZoom());
    france2.on("moveend", france2_move);
};

france2_move = function() {
    france1.off("moveend");
    france1.setView(france2.getCenter(), france2.getZoom());
    france1.on("moveend", france1_move);
};


$("#sync").on("click", function() {
    map_sync = $(this).hasClass("sync");
    if (map_sync) {
        france1.off("moveend");
        france2.off("moveend");
        $(this).removeClass("sync");
        $(this).text("][");
    } else {
        france1.on("moveend", france1_move);
        france2.on("moveend", france2_move);
        $(this).addClass("sync");
        $(this).text("[]");
    }
});