Using the powerful MapBox Javascript API
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
<style>#map { position:absolute; width:100%; height:100%; }</style>
</head>
<body><div id='map-basic'></div>
<script>
var map = L.mapbox.map('map-basic', 'examples.map-9ijuk24y')
.setView([37.8, -96], 4);
map.addControl(L.mapbox.geocoderControl('examples.map-9ijuk24y'))
map.addControl(L.mapbox.shareControl())
</script>
</body>
</html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
<style>#map { position:absolute; width:100%; height:100%; }</style>
</head>
<body><div id='map-markers'></div>
<script>
var geojson = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978,38.913188059745586]
},
"properties": {
"title": "MapBox DC",
"description": "1714 14th St NW, Washington DC",
"marker-color": "#fc4353",
"marker-size": "large",
"marker-symbol": "monument"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "MapBox SF",
"description": "155 9th St, San Francisco",
"marker-color": "#fc4353",
"marker-size": "large",
"marker-symbol": "harbor"
}
}
];
L.mapbox.map('map-markers', 'examples.map-9ijuk24y')
.setView([37.8, -96], 4)
.markerLayer.setGeoJSON(geojson);
</script>
</body>
</html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
<style>#map { position:absolute; width:100%; height:100%; }</style>
</head>
<body><div id='map-storytelling'></div>
<script>
var mapstories = L.mapbox.map('map-storytelling', 'examples.map-9ijuk24y');
var markers = L.mapbox.markerLayer()
.loadURL('/mapbox.js/examples/storytelling.geojson')
.addTo(mapstories);
mapstories.markerLayer.on('ready', function(e) {
var chapters = [];
markers.eachLayer(function(chapter) {
chapters.push(chapter);
});
cycle(chapters);
});
function cycle(chapters) {
var i = 0;
function run() {
if (++i > chapters.length - 1) i = 0;
var c = chapters[i].feature.geometry.coordinates;
mapstories.setView([c[1], c[0]], 13);
chapters[i].openPopup();
window.setTimeout(run, 3000);
}
run();
}
</script>
</body>
</html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
<style>#map { position:absolute; width:100%; height:100%; }</style>
</head>
<body><div id='map-dataviz'></div>
<style>
.map-legend .swatch {
width:20px;
height:20px;
float:left;
margin-right:10px;
}
.leaflet-popup-close-button {
display: none;
}
.leaflet-popup-content-wrapper {
pointer-events: none;
}
</style>
<script src='./examples/us-states.js'></script>
<script>
var mapdataviz = L.mapbox.map('map-dataviz', 'examples.map-9ijuk24y')
.setView([37.8, -96], 4);
var popup = new L.Popup({ autoPan: false });
// statesData comes from the 'us-states.js' script included above
var statesLayer = L.geoJson(statesData, {
style: getStyle,
onEachFeature: onEachFeature
}).addTo(mapdataviz);
function getStyle(feature) {
return {
weight: 2,
opacity: 0.1,
color: 'black',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#8c2d04' :
d > 500 ? '#cc4c02' :
d > 200 ? '#ec7014' :
d > 100 ? '#fe9929' :
d > 50 ? '#fec44f' :
d > 20 ? '#fee391' :
d > 10 ? '#fff7bc' :
'#ffffe5';
}
function onEachFeature(feature, layer) {
layer.on({
mousemove: mousemove,
mouseout: mouseout,
click: zoomToFeature
});
}
var closeTooltip;
function mousemove(e) {
var layer = e.target;
popup.setLatLng(e.latlng);
popup.setContent('<div class="marker-title">' + layer.feature.properties.name + '</div>' +
layer.feature.properties.density + ' people per square mile');
if (!popup._map) popup.openOn(mapdataviz);
window.clearTimeout(closeTooltip);
// highlight feature
layer.setStyle({
weight: 3,
opacity: 0.3,
fillOpacity: 0.9
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function mouseout(e) {
statesLayer.resetStyle(e.target);
closeTooltip = window.setTimeout(function() {
mapdataviz.closePopup();
}, 100);
}
function zoomToFeature(e) {
mapdataviz.fitBounds(e.target.getBounds());
}
mapdataviz.legendControl.addLegend(getLegendHTML());
function getLegendHTML() {
var grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<li><span class="swatch" style="background:' + getColor(from + 1) + '"></span> ' +
from + (to ? '–' + to : '+')) + '</li>';
}
return '<span>People per square mile</span><ul>' + labels.join('') + '</ul>';
}
</script>
</body>
</html>
MapBox.js is built on top of Leaflet — an open-source mapping library. Leaflet's API handles much of the fundamental operations of using maps. MapBox.js documentation should be read in conjunction with the Leaflet API reference.
Have a question? Ask in support.mapbox.com: we are here to help.
MapBox.js is optimized for mobile devices and small screens by default. For additional tools for managing mobile maps, check out the Mobile section in the documentation.
MapBox.js is compatible with IE8+ and modern browsers like Chrome, Firefox, and Safari.
MapBox.js is hosted on the same reliable and speedy CDN that powers MapBox tiles. There's no API key to use it. All that's needed is a reference to the script & CSS in your HTML.
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>