D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ajzeigert
Full window
Github gist
Test of mapbox gl js builidng extrusion with Bend lidar test data
<!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.26.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.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.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ'; // This is all pretty shamelessly copied from the GL JS docs site: // https://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/ var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v9', center: [-121.3, 44.05], zoom: 14, pitch: 40, bearing: 20 }); map.on('load', function() { map.addSource("buildings", { 'type': 'geojson', 'data': 'buildings_sample.geojson' }); map.addLayer({ 'id': 'buildings', 'type': 'fill', 'source': 'buildings', 'paint': { // See the Mapbox Style Spec for details on property functions // https://www.mapbox.com/mapbox-gl-style-spec/#types-function 'fill-color': '#666', 'fill-extrude-height': { // Get fill-extrude-height from the source 'buildheigh' property. 'property': 'buildheigh', 'type': 'identity' }, 'fill-extrude-base': 0, 'fill-opacity': 0.5 } }); map.addControl(new mapboxgl.NavigationControl({position: 'top-left'})); }); </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js