gridLayer and gridControl

Load interactivity from a TileMill map manually with gridLayer.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>gridLayer and gridControl</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>
<div id='map' class='dark'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
// Define a map without a Map ID so we
// have to add each part of it manually.
var map = L.mapbox.map('map', undefined);

// The visible tile layer
L.mapbox.tileLayer('examples.map-8ced9urs').addTo(map);

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

// And use that interactivity to drive a control the user can see.
var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);

// Finally, center the map.
map.setView([37, -80], 3);
</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