D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
almccon
Full window
Github gist
MapboxGL extrusions
Built with
blockbuilder.org
<!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>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js