A UTFGrid interaction implementation for Leaflet that is super small.
Example: http://danzel.github.com/Leaflet.utfgrid/example/map.html
See the included example for the plugin in action.
Create a new L.UtfGrid, optionally specifying the resolution (The default is 4)
var utfGrid = new L.UtfGrid('http://{s}.tiles.mapbox.com/v3/mapbox.geography-class/{z}/{x}/{y}.grid.json?callback={cb}', {
resolution: 2
});?callback={cb} is required when using utfgrids in JSONP mode.
Add event listeners to it
utfGrid.on('click', function (e) {
//click events are fired with e.data==null if an area with no hit is clicked
if (e.data) {
alert('click: ' + e.data.admin);
} else {
alert('click: nothing');
}
});
utfGrid.on('mouseover', function (e) {
console.log('hover: ' + e.data.admin);
});
utfGrid.on('mousemove', function (e) {
console.log('move: ' + e.data.admin);
});
utfGrid.on('mouseout', function (e) {
console.log('unhover: ' + e.data.admin);
});The callback object in all cases is:
{
latlng: L.LatLng
data: Data object for the grid (whatever you are returning in the grid json)
}We use JSONP by default which requires the query string part of the url to contain callback={cb}.
To use an ajax query instead you need to set useJsonP:false in the L.UtfGrid options.
Your grid json provider must return raw json to support this functionality.
var utfGrid = new L.UtfGrid('http://myserver/amazingness/{z}/{x}/{y}.grid.json', {
useJsonP: false
});- pointerCursor: changes the mouse cursor to a pointer when hovering over an interactive part of the grid. (Default: true)
- maxRequests: Maximum number of requests sent at once to the utfgrid tile server. Increasing this will get more processing done at once, however it means your utfgrid tiles will get priority over your visual tiles (as browsers tend to prioritize javascript/json requests). Increasing this will also reduce the number of requests that may get dropped early when users pan the map. There is little point to have this higher than 8. (Default: 4)
- requestTimeout: number of milliseconds after which a request for a tile is considered to have timed out. (Default: 60000)
You can add and remove the UtfGrid layer from your map as per normal, even within a layers control.
Example: http://danzel.github.com/Leaflet.utfgrid/example/layers.html
Spec: https://github.com/mapbox/utfgrid-spec
OpenLayers:
- http://openlayers.org/dev/examples/utfgrid_twogrids.html
- https://github.com/perrygeo/openlayers/blob/utfgrid/lib/OpenLayers/Tile/UTFGrid.js
Wax:
- http://mapbox.com/wax/interaction-leaf-native.html (Doesn't work correctly in webkit)
- https://github.com/mapbox/wax
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent