## developers

# mapbox.js v1.0.0

### Custom Legend

Adding a custom legend
The Title or Explanation of your Map

- 0 - 20%
- 40%
- 60%
- 80%
- 100%

Source: Name of source
Select all Edit

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Custom Legend</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>

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

    <div id='legend-content' style='display: none;'>
      <div class='my-legend'>
      <div class='legend-title'>The Title or Explanation of your Map</div>
      <div class='legend-scale'>
        <ul class='legend-labels'>
          <li><span style='background:#F1EEF6;'></span>0 - 20%</li>
          <li><span style='background:#BDC9E1;'></span>40%</li>
          <li><span style='background:#74A9CF;'></span>60%</li>
          <li><span style='background:#2B8CBE;'></span>80%</li>
          <li><span style='background:#045A8D;'></span>100%</li>
        </ul>
      </div>
      <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div>
      </div>

      <style type='text/css'>
        .my-legend .legend-title {
          text-align: left;
          margin-bottom: 8px;
          font-weight: bold;
          font-size: 90%;
          }
        .my-legend .legend-scale ul {
          margin: 0;
          padding: 0;
          float: left;
          list-style: none;
          }
        .my-legend .legend-scale ul li {
          display: block;
          float: left;
          width: 50px;
          margin-bottom: 6px;
          text-align: center;
          font-size: 80%;
          list-style: none;
          }
        .my-legend ul.legend-labels li span {
          display: block;
          float: left;
          height: 15px;
          width: 50px;
          }
        .my-legend .legend-source {
          font-size: 70%;
          color: #999;
          clear: both;
          }
        .my-legend a {
          color: #777;
          }
      </style>
    </div>

    <script>
      var map = L.mapbox.map('map', 'examples.map-y7l23tes');
      map.legendControl.addLegend(document.getElementById('legend-content').innerHTML);
    </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.