## developers

# mapbox.js v1.0.0

### Leaflet.draw

Using the Leaflet.draw plugin
Select all Edit

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Leaflet.draw</title>
      <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
      <script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
      <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
      <!--[if lte IE 8]>
        <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
      <![endif]-->
      <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      </style>
    </head>
    <body>

    <!--
      Include Leaflet.draw's CSS and JavaScript assets.
      Unlike mapbox.js, these are not hosted by MapBox; you will
      need to download and host them yourself.
    -->
    <link rel="stylesheet" href="/mapbox.js/assets/leaflet.draw.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="/mapbox.js/assets/leaflet.draw.ie.css" />
    <![endif]-->
    <script src="/mapbox.js/assets/leaflet.draw.js"></script>

    <div id='map'></div>

    <script type='text/javascript'>
      var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
          .setView([38.89399, -77.03659], 17);

      var featureGroup = L.featureGroup().addTo(map);

      // Define circle options
      // http://leafletjs.com/reference.html#circle
      var circle_options = {
          color: '#fff',      // Stroke color
          opacity: 1,         // Stroke opacity
          weight: 10,         // Stroke weight
          fillColor: '#000',  // Fill color
          fillOpacity: 0.6    // Fill opacity
      };

      var circle_one = L.circle([38.89415, -77.03738], 20, circle_options).addTo(featureGroup);
      var circle_two = L.circle([38.89415, -77.03578], 20, circle_options).addTo(featureGroup);

      // Create array of lat,lon points
      var line_points = [
          [38.893596444352134, -77.0381498336792],
          [38.89337933372204, -77.03792452812195],
          [38.89316222242831, -77.03761339187622],
          [38.893028615148424, -77.03731298446655],
          [38.892920059048464, -77.03691601753235],
          [38.892903358095296, -77.03637957572937],
          [38.89301191422077, -77.03592896461487],
          [38.89316222242831, -77.03549981117249],
          [38.89340438498248, -77.03514575958252],
          [38.893596444352134, -77.0349633693695]
      ];

      // Define polyline options
      // http://leafletjs.com/reference.html#polyline
      var polyline_options = {
          color: '#000'
      };

      // Defining a polygon here instead of a polyline will connect the
      // endpoints and fill the path.
      // http://leafletjs.com/reference.html#polygon
      var polyline = L.polyline(line_points, polyline_options).addTo(featureGroup);

      var drawControl = new L.Control.Draw({
        edit: {
          featureGroup: featureGroup
        }
      }).addTo(map);

      map.on('draw:created', function(e) {
          featureGroup.addLayer(e.layer);
      });
    </script>

# Browse all examples

### Animation

Linking to external data Centering Markers

### Geocoding

Initially Position Map With Geocode Geocoding Geocoder keepOpen

### Handlers

Zoom to Double Click External Layers Disable Zooming and Panning

### Layers

Zoom Lens WMS Theme Markers As Links Layers Control Layers Custom Popup Compositing

### Legend

Legend in a Custom Position Legend Custom Legend

### Markers

Single Marker Show Tooltips on Hover Retina Point in Polygon Open Popup Programmatically Marker Tooltips with Image Slideshow Loading CSV into Markers Marker Tooltips Outside the Map Marker Movement GeoJSON Marker from URL Filtering Markers Searching for Points Draggable Marker Using L.divIcon to create markers with HTML Cycling Through Markers Change Marker Color on Click Centering Markers

### Plugins

Leaflet.markercluster Leaflet.draw

### Tooltips

Show Tooltips on Hover Marker Tooltips with Image Slideshow

### User Interface

Zoom Control Position Zoom Bar YouTube Toggling UI A Simple Map Scale Control Pan and Vertical Zoom Opacity control Movetip Mouse Position Markers Only At One Zoom Level Map Navigation to Places Listing Markers Interactivity Outside of Map Geolocation Geocoding Custom Marker Tooltips Custom Marker Icons

### Vector Overlays

Polylines Non-Exclusive Markers Line from Markers Dynamically Drawing a Line Line Crossing the Date Line Move Marker Along Line

### Zoom

paddingTopLeft - Reserve space on the map for content Change Zoom Control Location
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.