Public
Edited
May 20, 2018
Insert cell
Insert cell
Insert cell
html`<style>
.labeled::after {
margin-left: 2em;
white-space: nowrap;
content: attr(aria-label);
}
</style>`
Insert cell
html`<link href='https://unpkg.com/mapbox-gl@0.44.0/dist/mapbox-gl.css' rel='stylesheet' />`
Insert cell
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
//-84.38996644629806,
//33.754258188157365
],
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);
});

}


Insert cell
mapboxgl = {
let mapboxgl = await require('mapbox-gl@0.44.0');
mapboxgl.accessToken = 'pk.eyJ1IjoibW94eXBlZCIsImEiOiJjaWgydGpwdmYweHJydnFtMzZzOXpmNjg3In0.5TXWYv0Z7nsOZHneIQOhxg';
return mapboxgl;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more