Viewing an older version of MapBox.js. Check out v1.5.0 for the latest.

Adding a Single Marker

Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Adding a Single Marker</title>
  
  <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
  
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<div id='map'></div>
<script>
  var map = mapbox.map('map');
  map.addLayer(mapbox.layer().id('examples.map-20v6611k'));

  // Create an empty markers layer
  var markerLayer = mapbox.markers.layer();

  // Add interaction to this marker layer. This
  // binds tooltips to each marker that has title
  // and description defined.
  mapbox.markers.interaction(markerLayer);
  map.addLayer(markerLayer);

  map.zoom(5).center({ lat: 37, lon: -77 });

  // Add a single feature to the markers layer.
  // You can use .features() to add multiple features.
  markerLayer.add_feature({
      geometry: {
          // The order of coordinates here is lon, lat. This is because
          // we use the GeoJSON specification for all marker features.
          // (lon, lat is also the internal order of KML and other geographic formats)
          coordinates: [-77, 37.9]
      },
      properties: {
          // these properties customize the look of the marker
          // see the simplestyle-spec for a full reference:
          // https://github.com/mapbox/simplestyle-spec
          'marker-color': '#000',
          'marker-symbol': 'star-stroked',
          title: 'Example Marker',
          description: 'This is a single marker.'
      }
  });

  // Attribute map
  map.ui.attribution.add()
      .content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.