Interactivity outside the map

Show UTFGrid data from an HTML element outside the map container.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Interactivity outside the map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#map {
  right:25%;
  }
.ui-control {
  font:bold 12px/20px 'Helvetica', sans-serif;
  background:#404040;
  color:#fff;
  position:absolute;
  top:0;right:0;bottom:0;
  z-index:100;
  width:25%;
  padding:10px;
  }
  .ui-control label {
    text-transform:uppercase;
    display:block;
    font-weight:bold;
    color:rgba(255,255,255,0.5);
    margin-bottom:5px;
    }
  .ui-control strong {
    font-size:32px;
    line-height:38px;
    }
</style>
<div id='map' class='dark'></div>
<div id='count' class='ui-control'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
var count = document.getElementById('count');
var map = L.mapbox.map('map', 'examples.map-8ced9urs', {
    gridControl: false // Disable default gridControl interactivity.
}).setView([40.85, -75.94], 3);

map.gridLayer
    .on('mousemove',function(o) {
        if (o.data && o.data.count) {
          count.innerHTML = '<label>Number of bird species</label><strong>' + o.data.count + '</strong>';
        } else {
          count.innerHTML = '';
        }
    }).on('mouseout', function(o) {
        count.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