Base map

A base map should include the following three layers:

  • street (default)
  • satellite
  • terrain

Add a layers button to allow users to switch between the different layers. The layer options should display when the user hovers the cursor over the button.

Layers
Layers menu
Example & Code
<div id="map-container"></div>

#map-container { 
  height: 400px; 
  width:100%; 
}

/* Define base layers */
var baseStreet = L.mapbox.tileLayer(streetLayerURL),
    baseSatellite = L.mapbox.tileLayer(satelliteLayerURL),
    baseTerrain = L.mapbox.tileLayer(terrainLayerURL),

/* Add layers toggle button and layer switch */
L.control.layers({
        'Street': baseStreet,
        'Satellite': baseSatellite,
        'Terrain': baseTerrain
    }, 
    null, 
    {
        position: 'topleft'
    }
).addTo(map);