Linking to external data

Hover over countries to view UTFGrid data along with data from an external source.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Linking to external data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#currency {
  position:absolute;
  bottom:10px;
  left:10px;
  z-index:1000;
  }
  #currency p {
    font-size:36px;
    font-weight:bold;
    background:#fff;
    display:block;
    padding:20px;
    }
</style>
<div id='map'>
  <div id='currency'></div>
</div>

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'examples.map-zmy97flj')
  .setView([40.21, -97.47], 4);

// 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.
map.gridLayer
    .on('mousemove',function(o) {
        if (o.data && currencies[o.data.admin]) {
          currency.innerHTML = '<p>' + currencies[o.data.admin] + '</p>';
        } else {
          currency.innerHTML = '';
        }
    }).on('mouseout', function(o) {
        currency.innerHTML = '';
    });
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example