{
const MVTLayer = new deck.MVTLayer({
id: 'MVTLayer',
data: [
// `https://a.tiles.mapbox.com/v4/cornhundred.cbj3cddp/{z}/{x}/{y}.vector.pbf?access_token=${mapbox_token}`
`https://raw.githubusercontent.com/cornhundred/vector_tile_pbf_test/master/RhodesIsland/{z}/{x}/{y}.pbf`
],
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});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {mapbox_token} from "@cornhundred/citibike-clustergrammer-gl-and-deck-gl"
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: -71.31,
latitude: 41.49,
zoom: 8,
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.
