At a minimum, a map should have the following controls or features.
Icon | Feature | Position on Map |
---|---|---|
|
Zoom | top left above layers control |
|
Layers
Maps should have 3 base layers:
|
top left below zoom control |
10 km
5 mi
|
Scale | bottom right corner above attribution |
Attribution
Include the map name in the attribution after the organization name (FCC). Example |
bottom right corner below scale |
<div id="map-container"></div>
#map-container {
height: 400px;
width:100%;
}
/* Add zoom control */
L.control.zoom({
position: 'topleft'
});
/* 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);
/* Add scale */
L.control.scale({
position: 'bottomright'
}).addTo(map);
/* Add attribution */
map.attributionControl.addAttribution('FCC [Name of Map]');