{
// Non-Residential Layer
const nr_layer = new deck.MVTLayer({
id: 'nr_layer',
data: [
`https://raw.githubusercontent.com/cornhundred/vector_tile_pbf_test/master/NR2019-pC-PBF/{z}/{x}/{y}.pbf`
],
getLineColor: [0, 0, 255],
getFillColor:[0, 0, 255],
lineWidthMinPixels: 1,
// lineWidthPixels:0,
// radiusMinPixels: 10,
getRadius:20,
pickable: true,
});
// Residential Layer
const re_layer = new deck.MVTLayer({
id: 're_layer',
data: [
`https://raw.githubusercontent.com/cornhundred/vector_tile_pbf_test/master/RE2019-pC-PBF/{z}/{x}/{y}.pbf`
],
getLineColor: [255, 0, 0],
getFillColor:[255,0, 0],
lineWidthMinPixels: 1,
// lineWidthPixels:0,
// radiusMinPixels: 10,
getRadius:10,
pickable: true,
});
var layers = [nr_layer, re_layer]
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: {
// Calgary
longitude: -114,
latitude: 51,
// // New Hampshire
// longitude: -71.31,
// latitude: 41.49,
zoom: 10,
maxZoom: 16, //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.
