Skip to content

Instantly share code, notes, and snippets.

@anandthakker
Created September 22, 2015 21:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anandthakker/52d26ae7b71b7e23c279 to your computer and use it in GitHub Desktop.
Save anandthakker/52d26ae7b71b7e23c279 to your computer and use it in GitHub Desktop.
Data driven style example with 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='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#color-map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='color-map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJnUi1mbkVvIn0.018aLhX0Mb0tdtaT2QNe2Q';
var choroStyle = {
version: 8,
name: 'Basic',
sources: {
'us-counties': {
'type': 'vector',
'url': 'mapbox://devseed.us-counties'
}
},
sprite: '',
glyphs: '',
layers: [{
id: 'background',
type: 'background',
paint: { 'background-color': '#000' }
}]
}
var breaks = [0, 4, 16, 64, 256, 1024, 4096, 16384, 65536]
for (var p = 0; p < breaks.length; p++) {
var filters
if (p < breaks.length - 1) {
filters = [ 'all',
[ '>=', 'pop_density', breaks[p] ],
[ '<', 'pop_density', breaks[p + 1] ]
]
} else {
filters = [ 'all',
[ '>=', 'pop_density', breaks[p] ]
]
}
choroStyle.layers.push({
id: 'counties-pop-' + p,
type: 'fill',
source: 'us-counties',
'source-layer': 'counties',
paint: {
'fill-color': '#5b6b6b',
'fill-opacity': (p + 1) / breaks.length
},
filter: filters
})
}
var choro = new mapboxgl.Map({
container: 'color-map',
style: choroStyle,
center: [-90, 38.5],
zoom: 3 // starting zoom
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment