Created
May 16, 2013 14:25
-
-
Save Hoedic/5592094 to your computer and use it in GitHub Desktop.
Mapbox switcher. Generates a drop down that allow switching a mapbox (or any leaflet map) to another.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id='map-ui'> | |
<select onchange="switchMap()" id="maplist";> | |
</select> | |
</div> | |
<div id='map'></div> | |
<!--div id='map2'></div--> | |
<script type='text/javascript'> | |
//Default center and zoom | |
var myCenter = [45.50, -73.60]; | |
var myZoom = 13; | |
//Content to load value list. The first one will be load by default | |
var _config = [ | |
["Orange", "hoedic.map-p73mkntm"], | |
["Green", "hoedic.map-6hd2ib5z"] | |
]; | |
$.each(_config, function (index, value) { | |
$('#maplist').append($('<option>', { | |
value: value[1], | |
text : value[0] | |
})); | |
}); | |
var map = L.mapbox.map('map', _config[0][1]) | |
.setView(myCenter, myZoom); | |
map.on('drag', function (){updateViewPort(map)}); | |
map.on('viewreset', function (){updateViewPort(map)}); | |
//Follow when the user moves the map and track the center and zoom | |
function updateViewPort(map){ | |
myCenter = map.getCenter(); | |
myZoom = map.getZoom(); | |
//console.log(myCenter + "/" + myZoom); | |
} | |
function switchMap(){ | |
var mapId = $("#maplist").val(); | |
//Leaflet map container has to be deleted in order to load new map | |
oldMapContainer = document.getElementById('map'); | |
var mapContainerParent = oldMapContainer.parentNode; | |
mapContainerParent.removeChild(oldMapContainer); | |
var newMapContainer = document.createElement('div'); | |
newMapContainer.setAttribute("id", "map"); | |
mapContainerParent.appendChild(newMapContainer); | |
var map = L.mapbox.map('map', mapId) | |
.setView(myCenter, myZoom) | |
.on('drag', function (){updateViewPort(map)}) | |
.on('viewreset', function (){updateViewPort(map)}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment