D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jqtrde
Full window
Github gist
ey gurl
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.3.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.3.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <style> #features { position:absolute; top:0; right:0; bottom:0; width:300px; overflow:auto; background:rgba(255, 255, 255, 0.8); } </style> <div id='map'></div> <pre id='features'></pre> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiamFjcXVlcyIsImEiOiJuRm9TWGYwIn0.ndryRT8IT0U94pHV6o0yng'; mapboxgl.util.getJSON('https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v5.json', function (err, style) { if (err) throw err; style.layers.forEach(function(layer) { layer.interactive = true; }); var map = new mapboxgl.Map({ container: 'map', style: style, center: [37.8, -96], zoom: 3 }); map.on('hover', function(e) { map.featuresAt(e.point, {}, function(err, features) { if (err) throw err; document.getElementById('features').innerHTML = JSON.stringify(features, null, 2); }); document.getElementById('info').innerHTML = // e.point is the x, y coordinates of the hover event relative // to the top-left corner of the map JSON.stringify(e.point) + '<br />' + // using map.unproject() we can turn that point into a latitude, longitude // geographical position JSON.stringify(map.unproject(e.point)); }); }); </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.3.1/mapbox-gl.js