## developers

# mapbox.js v0.6.7

Viewing an older version of mapbox.js. Check out v1.4.0 for the latest.

### Marker Tooltips Outside of the Map

Select all Edit

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Marker Tooltips Outside of the Map</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>

    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; right:300px; left:0; }
      #alert {
          position:absolute; top: 0; right: 0;
          bottom: 0; width: 260px; background:#e8e8e8;
          padding:20px;
      }
      h1 { margin-top:0; }
    </style>

    <div id='map'></div>
    <div id='alert'></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.
      map.addLayer(markerLayer);

      var alert = document.getElementById('alert');

      markerLayer.factory(function(f) {
          var elem = mapbox.markers.simplestyle_factory(f);
          MM.addEvent(elem, 'click', function(e) {
              // clear the alert box
              alert.innerHTML = '';
              // add a header and paragraph, and fill them with content
              // from the feature, which we've stored as the variable 'f'
              var h1 = alert.appendChild(document.createElement('h1'));
              var p = alert.appendChild(document.createElement('p'));
              // pull the title and description attributes of the feature.
              // you could customize this to pull other attributes
              h1.innerHTML = f.properties.title;
              p.innerHTML = f.properties.description;
              // prevent this event from bubbling down to the map and clearing
              // the content
              e.stopPropagation();
          });
          return elem;
      });

      // clear the content of alert when the user clicks on a map area other
      // than a tooltip
      MM.addEvent(map.parent, 'click', function() {
          alert.innerHTML = '';
      });

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

      // See the 'adding a single marker example for help with adding a marker
      markerLayer.add_feature({
          geometry: {
              coordinates: [-77, 37.9]
          },
          properties: {
              '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>

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