The avatar for @pessimistress
Xiaoji Chen
Designer. Geek. Beer addict. Data queen.
Public
SIGSPATIAL 22
Edited
Nov 1, 2022
2 forks
2 stars
2
SIGSPATIAL 22
deck.gl Custom Composite Layerdeck.gl Custom Layer by Subclassing
Getting Started with deck.gl: Stacking
Getting Started with deck.gl: Layers
Insert cell
Insert cell
Insert cell
Insert cell
deckgl = new deck.DeckGL({
container,
views: new deck.MapView({repeat: true}),
controller: true,
initialViewState: {
longitude: 0,
latitude: 0,
zoom: 0
}
});
Insert cell
Insert cell
Insert cell
cableGeo = FileAttachment("cable-geo.json").json()
Insert cell
landingPointGeo = FileAttachment("landing-point-geo.json").json()
Insert cell
Insert cell
Insert cell
landingPointsLayer = new deck.GeoJsonLayer({
id: 'landing-points',
data: landingPointGeo,
pointType: 'circle',
pointRadiusMinPixels: 2
})
Insert cell
cableLayer = new deck.GeoJsonLayer({
id: 'cables',
data: cableGeo,
lineWidthMinPixels: 1,
getLineColor: f => {
const hex = f.properties.color
const rgb = d3.color(hex)
return [rgb.r, rgb.g, rgb.b]
}
})
Insert cell
bitmapLayer = new deck.BitmapLayer({
id: 'terrain',
image: color_etopo1_ice_720p,
bounds: [-180, -90, 180, 90],
_imageCoordinateSystem: deck.COORDINATE_SYSTEM.LNGLAT
})
Insert cell
deckgl.setProps({
layers: [bitmapLayer, landingPointsLayer, cableLayer]
})
Insert cell
Insert cell
Insert cell
Insert cell
color_etopo1_ice_720p = FileAttachment("color_etopo1_ice_720p.jpg").image()
Insert cell

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.
Learn more