{
const MVTLayer = new deck.MVTLayer({
id: 'MVTLayer',
data: [
'https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt'
],
getLineColor: [192, 192, 192],
getFillColor: [140, 170, 180],
getLineWidth: f => {
switch (f.properties.class) {
case 'street':
return 6;
case 'motorway':
return 10;
default:
return 1;
}
},
lineWidthMinPixels: 1,
// 14 seems to be the max zoom that works
maxZoom: 14,//23,
minZoom: 0,
});
var layers = [MVTLayer]
deckgl.setProps({layers: layers});
}
deckgl = {
// This is an Observable hack: clear previously generated content
// reference: https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
container.innerHTML = '';
return new deck.DeckGL({
container,
initialViewState: {
longitude: -122.4,
latitude: 37.74,
zoom: 11,
maxZoom: 20,
// pitch: 30,
bearing: 0
},
controller: true,
});
}
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
loaders = deck && window.loaders
inst_height = 850
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.
