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.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.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', null)
  .setView([40.21, -97.47], 4);

  // The visible tile layer
  L.mapbox.tileLayer('examples.1fjyxmhi').addTo(map);

  // Load interactivity data into the map with a gridLayer
  var myGridLayer = L.mapbox.gridLayer('examples.1fjyxmhi').addTo(map);

// 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');

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