Skip to content

Instantly share code, notes, and snippets.

@rclark rclark/index.html
Last active Dec 25, 2015

Embed
What would you like to do?
Hover interactions
<!doctype html>
<html>
<head>
<title>grid-interaction</title>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' />
<style>
html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// Make a map, set the center
var map = L.mapbox.map('map', 'rclark.h2jc29lj', {
gridControl: false,
tileLayer: { detectRetina: true }
}).setView([36.18111, -110.44555], 9);
// Make a grid layer and an empty GeoJSON layer
var grid = L.mapbox.gridLayer('rclark.h2jc29lj');
var geojson = L.geoJson(null);
// Add those layers to the map
geojson.addTo(map);
grid.addTo(map);
// When your mouse is over the gridlayer, read the GeoJSON that you put
// into your dataset oh so tricky-like.
// See https://a.tiles.mapbox.com/v3/rclark.h2jc29lj/page.html to have
// a look at what this would look like with a "vanilla" L.mapbox.gridControl
grid.on('mouseover', function (evt) {
if (evt.data) {
var geo = JSON.parse(evt.data.geo);
geojson.clearLayers();
geojson.addData(geo);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.