Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
106 lines (92 sloc) 3.32 KB
---
layout: page
header: Zoom Multiple Map Views Together
---
{% include JB/setup %}
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
/*body { margin:20; padding:0; }*/
#slider { margin: 10px; width:500px;}
#zoom {position:absolute; height:450px; width:120px;}
#map1 { height:450px; width:450px; }
#map2 { height:450px; width:450px; }
</style>
</head>
<body>
<h3>Synchronized Map Zooming</h3>
<p>Type a place name in each map's search box. Select one of the results in each map, then change the slider position to see the locations at a common scale.</p>
<p><a href="https://github.com/mwfrost/mwfrost.github.com/blob/master/ZoomSync.html">Source code.</a></p>
<div id="slider"></div>
<p>
<label for="zoomlevel">Zoom Level:</label>
<input type="text" id="zoomlevel" readonly style="border:0; font-weight:bold;">
</p>
<div class="row">
<div class="col-md-5">
<div id='map1'></div>
<pre id='location1' class='ui-output'>New York</pre>
</div>
<div class="col-md-5">
<div id='map2'></div>
<pre id='location2' class='ui-output'>Vancouver</pre>
</div>
</div>
<script>
$(function() {
$( "#location1" ).val( "New York" );
$( "#location2" ).val( "Vancouver" );
});
zoomlevel = 5;
coords1 = [40.7833, -73.9667];
coords2 = [49.3, -123.14];
L.mapbox.accessToken = 'pk.eyJ1IjoibXdmcm9zdCIsImEiOiJLam9XNG9zIn0.jD_jyAQ0DoFpmeNLdTn-YQ';
map1 = L.mapbox.map('map1', 'mapbox.streets', {
zoomControl: false
}
).setView(coords1, 5);
geocoder1 = L.mapbox.geocoderControl('mapbox.places',{
autocomplete: false
});
geocoder1.addTo(map1);
L.mapbox.accessToken = 'pk.eyJ1IjoibXdmcm9zdCIsImEiOiJLam9XNG9zIn0.jD_jyAQ0DoFpmeNLdTn-YQ';
map2 = L.mapbox.map('map2', 'mapbox.streets', {
zoomControl: false
})
.setView(coords2, 5);
geocoder2 = L.mapbox.geocoderControl('mapbox.places',{
autocomplete: false
});
geocoder2.addTo(map2);
$(function() {
$( "#slider" ).slider({
value:8,
min: 1,
max: 18,
step: 1,
slide: function( event, ui ) {
zoomlevel = $( "#zoomlevel" ).val( ui.value );
map1.setView(coords1, zoomlevel.val());
map2.setView(coords2, zoomlevel.val());
}
});
});
// Listen for the `found` result and display the first result
// in the output container. For all available events, see
// https://www.mapbox.com/mapbox.js/api/v2.1.5/l-mapbox-geocodercontrol/#section-geocodercontrol-on
geocoder1.on('select', function(res) {
coords1 = [res.feature.center[1],res.feature.center[0]];
location1.innerHTML = JSON.stringify(coords1);
map1.setView(coords1, zoomlevel.val());
map2.setView(coords2, zoomlevel.val());
});
geocoder2.on('select', function(res) {
coords2 = [res.feature.center[1],res.feature.center[0]];
location2.innerHTML = JSON.stringify(coords2);
map1.setView(coords1, zoomlevel.val());
map2.setView(coords2, zoomlevel.val());
});
</script>