Viewing an older version of MapBox.js. Check out v1.5.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
<!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>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.