Switch from Terrain layer to Satellite layer using Mapbox

Question

I'm using Mapbox for a dynamic map on a social website.

I added a satellite toggle button but I can't find any way in the API docs on how to switch from terrain view to satellite view like Google Maps does?

Is it hidden somewhere? I know I have to subscribe and I will but I need to know I can switch from terrain to satellite in realtime without losing my markers, etc.

Let's say I have a simple map:

var initialLocation = [40.97, 64.07];
var initialZoomLevel = 2;

var map = L.mapbox.map('map_container').setView(initialLocation, initialZoomLevel);

How could I switch from terrain to satellite?

Any suggestions?

Thanks!

Answer 1

Its pretty easy to add a satellite view - just not very well documented. A prerequisite though is you must have a paid account (UPDATE: you used to need a paid account - that no longer seems to be the case) and have setup your own map in your account over there with the satellite imagery selected.

var initialLocation = [40.97, 64.07];
var initialZoomLevel = 2;

var map = L.mapbox.map('map_container').setView(initialLocation, initialZoomLevel);
L.control.layers({  
    "Street": map.tileLayer,
    "Satellite": L.mapbox.tileLayer("my satellite imagery map id")
}, null).addTo(map);

This adds a control in the upper right (by default) that allows you to select between the default map and your satellite map.

Answer 2

With MapBox there is no concept of "modes", just different maps each with their own Map ID. So create a map at http://tiles.mapbox.com/newmap based on terrain, then another based on satellite imagery. Switch between them with the second argument to L.mapbox.map (see http://www.mapbox.com/mapbox.js/api/#L.mapbox.map) using their respective IDs.