Sync maps

Create two maps that follow each other's zoom levels and centerpoints

<!DOCTYPE html>
<meta charset=utf-8 />
<title>Sync maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src=''></script>
<link href='' rel='stylesheet' />
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
<div id='map1'></div>
<div id='map2'></div>
  #map1 { position:absolute; top:0; bottom:0; left:0; right:50%; }
  #map2 { position:absolute; top:0; bottom:0; left:50%; right:0; }
L.mapbox.accessToken = '<your access token here>';
// Instead of our usual one map, we will create two in this example to make
// things interesting.
var map1 ='map1', 'mapbox.streets')
    .setView([40, -74.50], 9);
var map2 ='map2', 'mapbox.emerald')
    .setView([40, -74.50], 9);

// when either map finishes moving, trigger an update on the other one.
map1.on('moveend', follow).on('zoomend', follow);
map2.on('moveend', follow).on('zoomend', follow);

// quiet is a cheap and dirty way of avoiding a problem in which one map
// syncing to another leads to the other map syncing to it, and so on
// ad infinitum. this says that while we are calling sync, do not try to 
// loop again and sync other maps
var quiet = false;
function follow(e) {
    if (quiet) return;
    quiet = true;
    if ( === map1) sync(map2, e);
    if ( === map2) sync(map1, e);
    quiet = false;

// sync simply steals the settings from the moved map (
// and applies them to the other map.
function sync(map, e) {
    map.setView(,, {
        animate: false,
        reset: true
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example