Build maps the way you want

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>
With just a few lines of code, embed your own map with customizable controls like search and share.
<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>
Use GeoJSON, a simple specification for adding data to create points of interest on a map and much more.
<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>
Tell stories like a walk through of locations told in Doyle's Sherlock Holmes short narrative, "The Adventure of the Bruce-Partington Plans".
<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 ? '&ndash;' + to : '+')) + '</li>';
      }

      return '<span>People per square mile</span><ul>' + labels.join('') + '</ul>';
    }

</script>
</body>
</html>
Create choropleths from data using Leaflet's L.geoJson.

Leaflet built-in

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.

Open

The source code is open source and available on GitHub. It takes advantage of open specifications like TileJSON, UTFGrid and GeoJSON.

A community to help

Have a question? Ask in support.mapbox.com: we are here to help.

Optimized for mobile

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.

Browser tested & supported

MapBox.js is compatible with IE8+ and modern browsers like Chrome, Firefox, and Safari.

Get started fast

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>
Need MapBox.js without Leaflet bundled?