Deck.gl Moon TileLayer ExampleDeck.gl MVT LayerDeck.gl MVT Layer - NRUSDA Nutrients UMAP-Heatmap
Deck.gl MVT Layer - GitHub PBF Files
{
const MVTLayer = new deck.MVTLayer({
id: 'MVTLayer',
data: [
data_url
],
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: 13,//23,
minZoom: 0,
});
var layers = [MVTLayer]
deckgl.setProps({layers: layers});
}
data_url = `https://raw.githubusercontent.com/cornhundred/vector_tile_pbf_test/master/RhodesIslandDC/{z}/{x}/{y}.pbf`
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: 15, //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.
