Mapbox switcher. Generates a drop down that allow switching a mapbox (or any leaflet map) to another.

gistfile1.html

<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>