| license: mit |
Getting started with Mapbox-gl
Adapted from the mapbox-gl example. Built with blockbuilder.org
NOTE: here we placed the labels on top of the GeoJSON layer. More info about how to do that is here
forked from enjalot's block: WWSD #3: Getting started Mapbox-gl
| <!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="//d3js.org/d3.v3.min.js"></script> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1Ijoic3RhbWVuIiwiYSI6IlpkZEtuS1EifQ.jiH_c9ShtBwtqH9RdG40mw'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/stamen/cj3j7r760002q2sp5p9m1kntf', | |
| center: [-0.1, 53], | |
| zoom: 5 | |
| }); | |
| map.on('load', function () { | |
| var url = "http://enjalot.github.io/wwsd/data/UK/counties.geojson" | |
| d3.json(url, function(err, counties) { | |
| map.addSource('counties', { | |
| 'type': 'geojson', | |
| 'data': counties | |
| }); | |
| map.addLayer({ | |
| 'id': 'counties', | |
| 'type': 'fill', | |
| 'source': 'counties', | |
| 'layout': {}, | |
| 'paint': { | |
| 'fill-outline-color': '#111', | |
| 'fill-color': '#99feff', | |
| 'fill-opacity': 0.8 | |
| } | |
| },'aerialway'); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
