### developers

## MapBox.js v1.5.0

# Build maps the way you want

Using the powerful MapBox Javascript API

Basic Markers Storytelling Data Visualizations

    <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.
Map Code

    <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.
Map Code

    <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".
Map Code

    <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.
Map Code

## 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?

### MapBox.js standalone

A standalone version of MapBox.js is also available without Leaflet included. Add the following in your HTML document:

    <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.standalone.css' rel='stylesheet' />
    <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.standalone.js'></script>

Note: Leaflet 0.7 or greater is required.