MapboxGL extrusions by almccon

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>