Designer. Geek. Beer addict. Data queen.
deck.gl Shader Injectiondeck.gl Tutorial: Subclassing A LayerGetting Started with deck.gldeck.gl Tutorial: Custom Primitive Layer
deck.gl Tutorial: Custom Composite Layer
container = html `<div style="height:450px;"></div>`
defaultProps = {
const {GeoJsonLayer} = deck;
return {
// Inherit all of GeoJsonLayer's props
...GeoJsonLayer.defaultProps,
// Label for each feature
getLabel: {type: 'accessor', value: x => x.text},
// Label size for each feature
getLabelSize: {type: 'accessor', value: 32},
// Label color for each feature
getLabelColor: {type: 'accessor', value: [0, 0, 0, 255]},
// Label always facing the camera
billboard: true,
// Label size units
labelSizeUnits: 'pixels',
// Label background color
labelBackground: {type: 'color', value: null, optional: true},
// Label font
fontFamily: 'Monaco, monospace'
}
}
layer0 = {
const {CompositeLayer} = deck;
// Our custom layer class
class LabeledGeoJsonLayer extends CompositeLayer {
updateState() {
// TODO
}
renderLayers() {
// TODO
}
}
LabeledGeoJsonLayer.layerName = 'LabeledGeoJsonLayer';
LabeledGeoJsonLayer.defaultProps = defaultProps;
return new LabeledGeoJsonLayer({
id: `countries-${Date.now()}`,
data,
filled: false,
getLineColor: [180, 180, 180],
getLabel: f => f.properties.name,
getLabelSize: 32,
lineWidthMinPixels: 1
});
}
layer0.props.labelSizeUnits
layer1 = {
const {CompositeLayer, GeoJsonLayer} = deck;
// Our custom layer class
class LabeledGeoJsonLayer extends CompositeLayer {
updateState() {
// TODO
}
renderLayers() {
return [
new GeoJsonLayer(this.props, this.getSubLayerProps({id: 'geojson'}), {
data: this.props.data
})
];
}
}
LabeledGeoJsonLayer.layerName = 'LabeledGeoJsonLayer';
LabeledGeoJsonLayer.defaultProps = defaultProps;
return new LabeledGeoJsonLayer({
id: `countries-${Date.now()}`,
data,
filled: false,
getLineColor: [180, 180, 180],
getLabel: f => f.properties.name,
getLabelSize: 32,
lineWidthMinPixels: 1
});
}
getLabelAnchors = {
// Extract anchor positions from features. We will be placing labels at these positions.
return function(feature) {
const {type, coordinates} = feature.geometry;
switch (type) {
case 'Point':
return [coordinates];
case 'MultiPoint':
return coordinates;
case 'Polygon':
return [turf.centerOfMass(feature).geometry.coordinates];
case 'MultiPolygon':
let polygons = coordinates.map(rings => turf.polygon(rings));
const areas = polygons.map(turf.area);
const maxArea = Math.max.apply(null, areas);
// Filter out the areas that are too small
return polygons.filter((f, index) => areas[index] > maxArea * 0.5)
.map(f => turf.centerOfMass(f).geometry.coordinates);
default:
return [];
}
}
}
layer2 = {
const {CompositeLayer, GeoJsonLayer, TextLayer} = deck;
class LabeledGeoJsonLayer extends CompositeLayer {
updateState({changeFlags}) {
const {data} = this.props;
if (changeFlags.dataChanged && data) {
const labelData = (data.features || data)
.flatMap((feature, index) => {
const labelAnchors = getLabelAnchors(feature);
return labelAnchors.map(p => this.getSubLayerRow({position: p}, feature, index));
});
this.setState({labelData});
}
}
renderLayers() {
const {
getLabel,
getLabelSize,
getLabelColor,
labelSizeUnits,
labelBackground,
billboard,
fontFamily
} = this.props;
return [
new GeoJsonLayer(this.props, this.getSubLayerProps({id: 'geojson'}), {
data: this.props.data
}),
new TextLayer(this.getSubLayerProps({id: 'text'}), {
data: this.state.labelData,
billboard,
sizeUnits: labelSizeUnits,
backgroundColor: labelBackground,
getPosition: d => d.position,
getText: this.getSubLayerAccessor(getLabel),
getSize: this.getSubLayerAccessor(getLabelSize),
getColor: this.getSubLayerAccessor(getLabelColor)
})
];
}
}
LabeledGeoJsonLayer.layerName = 'LabeledGeoJsonLayer';
LabeledGeoJsonLayer.defaultProps = defaultProps;
const layer = new LabeledGeoJsonLayer({
id: `countries-${Date.now()}`,
data,
filled: false,
billboard: false,
getLineColor: [180, 180, 180],
getLabel: f => f.properties.name,
getLabelSize: f => Math.pow(2, Math.log10(turf.area(f))) * 20,
getLabelColor: [0, 64, 128],
labelSizeUnits: 'meters',
lineWidthMinPixels: 1
});
deckgl.setProps({layers: [layer]});
return layer;
}
layer2.state.labelData;
layer2.getSubLayers();
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.