Skip to content

Instantly share code, notes, and snippets.

@almccon

almccon/.block

Last active July 2, 2017 20:25
Show Gist options
  • Save almccon/99bea5c6b1ef8a73080dec5faf1d426a to your computer and use it in GitHub Desktop.
Save almccon/99bea5c6b1ef8a73080dec5faf1d426a to your computer and use it in GitHub Desktop.
Download ZIP
MapboxGL extrusions
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2FzdG1hcCIsImEiOiJjajNkZGg0bHgwMDBhMzFyc2w5djV1ajBjIn0.3eCl2b5ASQ9KiaxDxNNYJA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/castmap/cj4kh761652312ro5l6st5hkx',
center: [-122.404, 37.787],
zoom: 16,
pitch: 45,
bearing: -17.6
});
map.on('load', function() {
map.addLayer({
'id': 'parcels',
'source': {
type: 'vector',
url: 'mapbox://castmap.1avtkb7p'
},
'source-layer': 'arts_orgs_parcels-6me37z',
'type': 'fill',
'minzoom': 10,
'maxzoom': 20,
'paint': {
'fill-color': 'hsl(49, 100%, 51%)',
'fill-opacity': 0.2
}
});
map.addLayer({
'id': 'extruded_buildings',
'source': {
type: 'vector',
url: 'mapbox://castmap.9s8movza'
},
'source-layer': 'arts_orgs_buildings-6tr0jv',
'type': 'fill-extrusion',
'minzoom': 10,
'maxzoom': 20,
'paint': {
'fill-extrusion-color': 'hsl(49, 100%, 51%)',
'fill-extrusion-height': {
'type': 'identity',
'property': 'height'
},
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 0.5
}
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment