Published
Edited
Jan 28, 2021
2 forks
deckgl_map = {
// // Default Map View
// //////////////////////////////////
// var deckgl = new deck.DeckGL({
// container,
// // views:[view],
// mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
// initialViewState: {
// longitude: lng,
// latitude: lat,
// zoom: 11,
// maxZoom: 21,
// // pitch: 30,
// bearing: 0
// },
// controller: true,
// });
// Orthographic View
// //////////////////////////////////
const view = new deck.OrthographicView({id: 'ortho'})
var INITIAL_VIEW_STATE = ({
target: [lng, lat, 0],
zoom: 11
})
var deckgl = new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({object}) => {
return object && ` ${object.x}, ${object['y']}
`},
});
return deckgl
}
{
const polygonLayer = new deck.PolygonLayer({
id: 'PolygonLayer',
data: polygon_map_data,
getFillColor: [80, 80, 80],
getLineColor: [80, 80, 80],
getLineWidth: d => 0.0001,
getPolygon: d => d.contour,
stroked: false,
wireframe: false,
pickable: true,
opacity:0.1
});
deckgl_map.setProps({layers: [polygonLayer]});
}
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
height = 500
lat = 49.25
lng = -123.1
polygon_map_data = polygon_map_data_ini.features.map(x => ({'contour': x.geometry.coordinates[0]}) )
polygon_map_data_ini = JSON.parse(map_response.body)
map_response = {
const response = await fetch(polygon_map_url);
return {
ok: response.ok,
body: await response.text()
};
}
// polygon_map_url = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json'
polygon_map_url = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json"
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.
