Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/README.md

Last active June 21, 2016 04:15
Show Gist options
  • Save enjalot/b81e02d752855d106f88a9c0e42e65a0 to your computer and use it in GitHub Desktop.
Save enjalot/b81e02d752855d106f88a9c0e42e65a0 to your computer and use it in GitHub Desktop.
Download ZIP
WWSD #3: Getting started Mapbox-gl
Raw
README.md
Raw
index.html
<!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.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
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': '#088',
'fill-opacity': 0.8
}
});
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment