Skip to content

Instantly share code, notes, and snippets.

@chelm
Last active February 2, 2017 18:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save chelm/37cf6c0b34eacce2389fed6aa015f8ea to your computer and use it in GitHub Desktop.
<!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.28.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.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.eyJ1IjoiY2hlbG0iLCJhIjoiY2lyNjk0dnJiMDAyNGk5bmZnMTk4dDNnaiJ9.BSE3U0yfeyD6jtSf4t8xzQ';
var style = {
"version": 8,
"sources": {
"osm": {
"type": "vector",
"tiles": ["https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4"]
},
"json_grid": {
"type": "geojson",
"data": "https://d6sz7s8ggohy1.cloudfront.net/15grid.json"
}
},
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#555555"
}
}, {
"id": "water",
"type": "fill",
"source": "osm",
"source-layer": "water",
"filter": ["==", "$type", "Polygon"],
"paint": {
"fill-color": "#222222"
}
}, {
"id": "grid",
"type": "fill-extrusion",
"source": "json_grid",
"paint": {
'fill-extrusion-color': {
property: 'total',
type: 'exponential',
stops: [
[1, '#fcde9c'],
[50, '#b9257a'],
[500, '#f0746e'],
]
},
'fill-extrusion-height': {
property: 'total',
type: 'exponential',
stops: [
[1, 10000],
[50, 100000],
[500, 500000]
]
},
'fill-extrusion-base': 0,
'fill-extrusion-opacity': .5
}
}
]
};
var map = new mapboxgl.Map({
container: 'map',
style: style,
zoom: 4,
center: [-99, 38]
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment