## developers

# mapbox.js v0.6.7

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

### Linking to external data

Hover over countries to view data in interactivity along with data from an external source.
Select all Edit

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Linking to external data</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>
    #map { position:absolute; top:0; bottom:0; width:100%; }
    #currency {
      z-index:9999;
      position:absolute;
      bottom:10px;
      left:10px;
      font-size:36px;
      font-weight:bold;
      }
    </style>
    <div id='currency'></div>
    <div id='map'></div>
    <script>
    // This is example 'external data'. It's obviously very much an example,
    // and in practice you'll want to use jQuery's .ajax to pull in data or
    // you already have it in some other form. The important part is that
    // this data has a key, like 'Canada', which exactly matches part of the
    // data in the tileset - here it's that the key is the same as o.data.admin
    var currencies = {
        'United States of America': 'USD',
        'Canada': 'CAD',
        'Mexico': 'MXN'
    };
    var currency = document.getElementById('currency');
    // This tileset, Geography Class, has interactivity defined in TileMill
    // and displayed in its tooltips. If you're creating a new tileset to use
    // with this technique, see the documentation on defining tooltips:
    // > http://mapbox.com/tilemill/docs/crashcourse/tooltips/
    // and you'll need to use fields for them to be available here -
    // to hide them in tooltips but use them here, you can use something like
    //
    //   <span style='display:none'>}</span>
    //
    // in the tooltip content to get TileMill to detect that the field }
    // should be available in interaction.
    mapbox.load('mapbox.geography-class', function(o) {
        var map = mapbox.map('map');
        wax.u.sanitize = function(x) { return x; };
        map.addLayer(o.layer).zoom(3).center({ lat: 48, lon: -100 });
        map.interaction.auto();
        // This is the interactivity API. It is documented in full
        // over at Wax: http://mapbox.com/wax/tooltips.html
        // But basically we need to pay attention to the object coming in,
        // which has `o.data` - the non-formatted data of the hovered-over feature
        // and `o.e`, the event object
        map.interaction.on({
            on: function(o) {
                // This will only listen to mousemoves. You can also look
                // for clicks or any other event or combination of events.
                if (o.e.type === 'mousemove') {
                    // If the external datasource matches the interacted-with
                    // feature, use it.
                    if (currencies[o.data.admin]) {
                        currency.innerHTML = currencies[o.data.admin];
                    } else {
                        currency.innerHTML = '?';
                    }
                }
            },
            // When the mouse leaves the feature, clear this bit of
            // interactivity
            off: function() {
                currency.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.