D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ajzeigert
Full window
Github gist
Simple Mapbox GL example with a custom vector tile
<!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.11.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #features { position: absolute; top: 0; right: 10px; padding: 10px; text-align: right; overflow: auto; background: rgba(255, 255, 255, 0.8); } </style> </head> <body> <div id='map'></div> <pre id='features'></pre> <script> mapboxgl.accessToken = 'pk.eyJ1Ijoic21hcnRtaW5lIiwiYSI6Imt6TUp0cEEifQ.9MrwD6GRlEGj9OTNN-bsRw'; // Basic check for GL support if ( !mapboxgl.supported() ) { alert('Your browser does not support Mapbox GL'); // Should add a regular leaflet map here just in case } else { var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/light-v8', //stylesheet location center: [-121.3, 44.05], // starting position zoom: 11, // starting zoom minzoom: 11 }); map.on('style.load', function() { // map.addSource('terrain-data', { // type: 'vector', // url: 'mapbox://mapbox.mapbox-terrain-v2' // }); // map.addLayer({ // "id": "terrain-data", // "type": "line", // "source": "terrain-data", // "source-layer": "contour", // "layout": { // "line-join": "round", // "line-cap": "round" // }, // "paint": { // "line-color": "#ff69b4", // "line-width": 1 // } // }) map.addSource('deschutes-taxlots', { type: 'vector', url: 'mapbox://smartmine.5tf8jd3t' }); var taxlots = map.addLayer({ "id": "deschutes-taxlots", "source": "deschutes-taxlots", "source-layer": "Taxlots", "type": "fill", "paint": { "fill-color": "rgb(122, 160, 180)", "fill-opacity": 0.5, "fill-line-width": 1.5, "fill-outline-color": "#fff" }, "interactive": true }); console.log(taxlots); taxlots.on('mousemove', function (e) { taxlots.featuresAt(e.point, {radius: 1}, function (err, features) { if (err) throw err; // console.log(features); document.getElementById('features').innerHTML = features.length == 0 ? "No taxlot" : "Taxlot: " + features[0].properties.TAXLOT; // JSON.stringify(features, null, 2); }); }); }); // End mapbox GL section } </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js