Published
Edited
Nov 12, 2021
1 fork
EditableGeoJsonLayer = nebula_layers.EditableGeoJsonLayer
// nebula_edit = require('https://bundle.run/@nebula.gl/edit-modes@0.21.1')
nebula_edit = require('https://bundle.run/@nebula.gl/edit-modes@0.23.8')
DrawPolygonMode = nebula_edit.DrawPolygonMode
myFeatureCollection = ({
type: "FeatureCollection",
features: []
})
// layers = [scatter_layer, text_layer] //, lasso_layer]
layers = [scatter_layer, lasso_layer]
deckgl.setProps({layers: layers});
data
scatter_layer = new deck.ScatterplotLayer({
data:data,
getPosition: d => d.position,
getFillColor: d => d.color,
getRadius: d => d.radius,
opacity: 0.5
})
text_layer = new deck.TextLayer({
data: data,
getPosition: d => d.position,
getText: d => d.text
})
editableGeoJsonLayer = lasso_layer
lasso_layer = new EditableGeoJsonLayer({
id: "nebula",
data: [],
selectedFeatureIndexes: [],
// RuntimeError: DrawPolygonMode is not defined
// mode: 'drawPolygon',
mode: DrawPolygonMode,
// Styles
filled: true,
pointRadiusMinPixels: 2,
pointRadiusScale: 2000,
extruded: true,
getElevation: 1000,
getFillColor: [200, 0, 80, 180],
// Interactive props
pickable: true,
autoHighlight: true,
onEdit: ({ updatedData, editType, featureIndexes, editContext }) => {
var myFeatureCollection = updatedData;
console.log('here')
// deck.setProps({ layers: layers });
}
})
deckgl = {
return new deck.DeckGL({
container,
initialViewState: {
longitude: inst_lng,
latitude: inst_lat,
zoom: inst_zoom,
},
controller: true,
getCursor: editableGeoJsonLayer.getCursor.bind(editableGeoJsonLayer)
});
}
data = [{
position: [inst_lng, inst_lat],
color: [0, 0, 255],
radius: 1000,
opacity: 0.5,
}]
// nebula
// nebula_layers = require('https://bundle.run/@nebula.gl/layers@0.21.1')
// nebula_layers = require('https://bundle.run/@nebula.gl/layers@0.21.1')
// require('nebula.gl@0.22.3/dist/index.js').catch(() => window["_style"])
nebula_layers = require('https://bundle.run/@nebula.gl/layers@0.23.8')
// nebula_layers = require('https://bundle.run/@nebula.gl/layers@0.21.1')
// version used in code sandbox
// nebula_layers = require('https://bundle.run/@nebula.gl/layers@0.19.2')
// needed to switch to this version of deck.gl in order to not have
// version conflict with nebula
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.6.3/dist.min.js')
// })('deck.gl@8.4.13/dist.min.js')
// })('deck.gl@8.2.4/dist.min.js')
// })('deck.gl@8.3.7/dist.min.js')
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.
