This example demonstrates the general implementation for interactive overlays using:
| <!DOCTYPE html> | |
| <!--Source: http://danzel.github.io/Leaflet.utfgrid/example/map.html//--> | |
| <html> | |
| <head> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css" /> | |
| <script src="http://danzel.github.io/Leaflet.utfgrid/src/leaflet.utfgrid.js"></script> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| var map = L.map('map'); | |
| var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.png', {attribution: 'Map data © 2013 Natural Earth | Data © 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>', maxZoom: 5}).addTo(map); | |
| var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.openstreetmap.org/'>© | OpenStreetMap </a>contributers"}); | |
| var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', {attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>", maxZoom: 8}); | |
| var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', { | |
| attribution: 'Map data © 2011 OpenStreetMap contributors | Imagery © 2011 CloudMade | Data © 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>', | |
| key: 'BC9A493B41014CAABB98F0471D759707', | |
| styleId: 22677 | |
| }); | |
| var utfGrid = new L.UtfGrid('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.grid.json?callback={cb}', { | |
| resolution: 4, | |
| maxZoom: 5 | |
| }); | |
| utfGrid.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();}).on('mousemove', function (e) { console.log(e); }) | |
| var info = L.control(); | |
| info.options.position = 'bottomright'; | |
| info.onAdd = function (map) { | |
| this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" | |
| this.update(); | |
| return this._div; | |
| }; | |
| info.update = function (props) { | |
| this._div.innerHTML = "<h4>Press Freedom in the world</h4>" + (props ? | |
| "<values><b>" + props.data.name + "</b><br />Ranking position: <rank>" + props.data.rank+"</rank></values>" | |
| : 'Hover over a state'); | |
| }; | |
| var baseLayers = { | |
| "Press Freedom - Mapbox" : mapbox, | |
| "OSM - Mapnik" : osm, | |
| "OSM - Cloudmade": cloudmade, | |
| "World Physical - ESRI" : esri | |
| }; | |
| var layerControl = L.control.layers(baseLayers); | |
| map.setView([30,0], 2) | |
| .addLayer(utfGrid) | |
| .addControl(info) | |
| .addControl(layerControl); | |
| </script> | |
| </body> | |
| </html> |
| #map { | |
| height: 500px; | |
| width:960px; | |
| cursor: pointer; | |
| } | |
| .info { | |
| color:#555; | |
| padding: 6px 8px; | |
| font: 14px/16px Arial, Helvetica, sans-serif; | |
| background: rgba(255,255,255,0.6); | |
| box-shadow: 0 0 15px rgba(0,0,0,0.7); | |
| border-radius: 10px; | |
| } | |
| .info h4 { | |
| margin: 0 0 5px; | |
| color: #000; | |
| } | |
| .info rank { | |
| color: #f00; | |
| font-style:italic; | |
| } | |
| body { | |
| background: #555; | |
| margin: 1em auto 4em auto; | |
| width: 960px; | |
| } |