map = {
let map, container = this;
if (container){
map = container._map;
}else{
yield container = html`<div style='height:400px;'></div>`;
map = container._map = new mapboxgl.Map({
container,
center: [
-74.0066,
40.7135
],
zoom: 15.5,
pitch: 45,
bearing: -17.6,
style: 'mapbox://styles/mapbox/light-v9'
});
}
map.on('load',function(){
var layers = map.getStyle().layers;
var labelLayerId;
for (var i = 0; i < layers.length; i++){
if (layers[i].type === 'symbol' && layers[i].layout['text-field']){
labelLayerId = layers[i].id;
break;
}
}
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color':'#aaaaaa',
'fill-extrusion-height':[
"interpolate",["linear"],["zoom"],
15,0,
15.05,["get","height"]
],
'fill-extrusion-base':[
"interpolate", ["linear"], ["zoom"],
15, 0,
15.05, ["get", "min_height"]
],
'fill-extrusion-opacity':.6
}
},labelLayerId);
});
}