This tries to accompish the same interaction I had done with a L.Composite layer, but without taking the time to build a spatial index.
This operates through a UTFGrid that provide the GeoJSON geometry for the feature that is hovered over.
The "trick" is that my source data has GeoJSON written into its attribute table.
Easier, less code, more cacheable, and you can build this way easily in TileMill to visualize with Mapbox.js.
| <!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> |