@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/deckgl-layers/cluster-layer/cluster-layer.js

@@ -0,0 +1,255 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {_AggregationLayer as AggregationLayer} from '@deck.gl/aggregation-layers';
+
+import geoViewport from '@mapbox/geo-viewport';
+import CPUAggregator, {
+  defaultColorDimension,
+  getDimensionScale
+} from '../layer-utils/cpu-aggregator';
+import {getDistanceScales} from 'viewport-mercator-project';
+import {max} from 'd3-array';
+
+import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
+import {SCALE_TYPES} from 'constants/default-settings';
+import {DEFAULT_COLOR_RANGE} from 'constants/color-ranges';
+import ClusterBuilder, {getGeoJSON} from '../layer-utils/cluster-utils';
+
+const defaultRadius = LAYER_VIS_CONFIGS.clusterRadius.defaultValue;
+const defaultRadiusRange = LAYER_VIS_CONFIGS.clusterRadiusRange.defaultValue;
+
+const defaultGetColorValue = points => points.length;
+const defaultGetRadiusValue = cell =>
+  cell.filteredPoints ? cell.filteredPoints.length : cell.points.length;
+
+function processGeoJSON(step, props, aggregation, {viewport}) {
+  const {data, getPosition, filterData} = props;
+  const geoJSON = getGeoJSON(data, getPosition, filterData);
+  const clusterBuilder = new ClusterBuilder();
+
+  this.setState({geoJSON, clusterBuilder});
+}
+
+function getClusters(step, props, aggregation, {viewport}) {
+  const {geoJSON, clusterBuilder} = this.state;
+  const {clusterRadius, zoom, width, height} = props;
+  const {longitude, latitude} = viewport;
+
+  // zoom needs to be an integer for the different map utils. Also helps with cache key.
+  const bbox = geoViewport.bounds([longitude, latitude], zoom, [width, height]);
+  const clusters = clusterBuilder.clustersAtZoom({bbox, clusterRadius, geoJSON, zoom});
+
+  this.setState({
+    layerData: {data: clusters}
+  });
+}
+
+function getSubLayerRadius(dimensionState, dimension, layerProps) {
+  return cell => {
+    const {getRadiusValue} = layerProps;
+    const {scaleFunc} = dimensionState;
+    return scaleFunc(getRadiusValue(cell));
+  };
+}
+
+export const clusterAggregation = {
+  key: 'position',
+  updateSteps: [
+    {
+      key: 'geojson',
+      triggers: {
+        position: {
+          prop: 'getPosition',
+          updateTrigger: 'getPosition'
+        },
+        filterData: {
+          prop: 'filterData',
+          updateTrigger: 'filterData'
+        }
+      },
+      updater: processGeoJSON
+    },
+    {
+      key: 'clustering',
+      triggers: {
+        clusterRadius: {
+          prop: 'clusterRadius'
+        },
+        zoom: {
+          prop: 'zoom'
+        },
+        width: {
+          prop: 'width'
+        },
+        height: {
+          prop: 'height'
+        }
+      },
+      updater: getClusters
+    }
+  ]
+};
+
+function getRadiusValueDomain(step, props, dimensionUpdater) {
+  const {key} = dimensionUpdater;
+  const {getRadiusValue} = props;
+  const {layerData} = this.state;
+
+  const valueDomain = [0, max(layerData.data, getRadiusValue)];
+  this._setDimensionState(key, {valueDomain});
+}
+
+const clusterLayerDimensions = [
+  defaultColorDimension,
+  {
+    key: 'radius',
+    accessor: 'getRadius',
+    nullValue: 0,
+    updateSteps: [
+      {
+        key: 'getDomain',
+        triggers: {
+          value: {
+            prop: 'getRadiusValue',
+            updateTrigger: 'getRadiusValue'
+          }
+        },
+        updater: getRadiusValueDomain
+      },
+      {
+        key: 'getScaleFunc',
+        triggers: {
+          domain: {prop: 'radiusDomain'},
+          range: {prop: 'radiusRange'},
+          scaleType: {prop: 'radiusScaleType'}
+        },
+        updater: getDimensionScale
+      }
+    ],
+    getSubLayerAccessor: getSubLayerRadius,
+    getPickingInfo: (dimensionState, cell, layerProps) => {
+      const radiusValue = layerProps.getRadiusValue(cell);
+      return {radiusValue};
+    }
+  }
+];
+
+const defaultProps = {
+  clusterRadius: defaultRadius,
+  colorDomain: null,
+  colorRange: DEFAULT_COLOR_RANGE,
+  colorScaleType: SCALE_TYPES.quantize,
+  radiusScaleType: SCALE_TYPES.sqrt,
+  radiusRange: defaultRadiusRange,
+  getPosition: {type: 'accessor', value: x => x.position},
+  getColorValue: {type: 'accessor', value: defaultGetColorValue},
+  getRadiusValue: {type: 'accessor', value: defaultGetRadiusValue}
+};
+
+export default class ClusterLayer extends AggregationLayer {
+  initializeState() {
+    const cpuAggregator = new CPUAggregator({
+      aggregation: clusterAggregation,
+      dimensions: clusterLayerDimensions
+    });
+
+    this.state = {
+      cpuAggregator,
+      aggregatorState: cpuAggregator.state
+    };
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {size: 3, accessor: 'getPosition'}
+    });
+  }
+
+  updateState({oldProps, props, changeFlags}) {
+    this.setState({
+      // make a copy of the internal state of cpuAggregator for testing
+      aggregatorState: this.state.cpuAggregator.updateState(
+        {oldProps, props, changeFlags},
+        {
+          viewport: this.context.viewport,
+          attributes: this.getAttributes(),
+          numInstances: this.getNumInstances(props)
+        }
+      )
+    });
+  }
+
+  getPickingInfo({info}) {
+    return this.state.cpuAggregator.getPickingInfo({info}, this.props);
+  }
+
+  _getSublayerUpdateTriggers() {
+    return this.state.cpuAggregator.getUpdateTriggers(this.props);
+  }
+
+  _getSubLayerAccessors() {
+    return {
+      getRadius: this.state.cpuAggregator.getAccessor('radius', this.props),
+      getFillColor: this.state.cpuAggregator.getAccessor('fillColor', this.props)
+    };
+  }
+
+  renderLayers() {
+    // for subclassing, override this method to return
+    // customized sub layer props
+    const {id, radiusScale} = this.props;
+    const {cpuAggregator} = this.state;
+
+    // base layer props
+    const {
+      visible,
+      opacity,
+      pickable,
+      autoHighlight,
+      highlightColor,
+      maskId,
+      extensions
+    } = this.props;
+    const updateTriggers = this._getSublayerUpdateTriggers();
+    const accessors = this._getSubLayerAccessors();
+
+    const distanceScale = getDistanceScales(this.context.viewport);
+    const metersPerPixel = distanceScale.metersPerPixel[0];
+
+    // return props to the sublayer constructor
+    return new ScatterplotLayer({
+      id: `${id}-cluster`,
+      data: cpuAggregator.state.layerData.data,
+      radiusScale: metersPerPixel * radiusScale,
+      visible,
+      opacity,
+      pickable,
+      autoHighlight,
+      highlightColor,
+      updateTriggers,
+      ...accessors,
+      maskId,
+      extensions
+    });
+  }
+}
+
+ClusterLayer.layerName = 'ClusterLayer';
+ClusterLayer.defaultProps = defaultProps;

package/src/deckgl-layers/column-layer/enhanced-column-layer.js

@@ -0,0 +1,63 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {ColumnLayer} from '@deck.gl/layers';
+import {editShader} from 'deckgl-layers/layer-utils/shader-utils';
+
+function addInstanceCoverage(vs) {
+  const addDecl = editShader(
+    vs,
+    'hexagon cell vs add instance',
+    'in vec3 instancePickingColors;',
+    `in vec3 instancePickingColors;
+     in float instanceCoverage;`
+  );
+
+  return editShader(
+    addDecl,
+    'hexagon cell vs add instance',
+    'float dotRadius = radius * coverage * shouldRender;',
+    'float dotRadius = radius * coverage * instanceCoverage * shouldRender;'
+  );
+}
+
+// TODO: export all deck.gl layers from kepler.gl
+class EnhancedColumnLayer extends ColumnLayer {
+  getShaders() {
+    const shaders = super.getShaders();
+
+    return {
+      ...shaders,
+      vs: addInstanceCoverage(shaders.vs)
+    };
+  }
+
+  initializeState() {
+    super.initializeState();
+
+    this.getAttributeManager().addInstanced({
+      instanceCoverage: {size: 1, accessor: 'getCoverage'}
+    });
+  }
+}
+
+EnhancedColumnLayer.layerName = 'EnhancedColumnLayer';
+
+export default EnhancedColumnLayer;

package/src/deckgl-layers/grid-layer/enhanced-cpu-grid-layer.js

@@ -0,0 +1,70 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {CPUGridLayer} from '@deck.gl/aggregation-layers';
+import CPUAggregator, {getAggregatedData} from '../layer-utils/cpu-aggregator';
+
+export const gridAggregation = {
+  key: 'position',
+  updateSteps: [
+    {
+      key: 'aggregate',
+      triggers: {
+        cellSize: {
+          prop: 'cellSize'
+        },
+        position: {
+          prop: 'getPosition',
+          updateTrigger: 'getPosition'
+        },
+        aggregator: {
+          prop: 'gridAggregator'
+        }
+      },
+      updater: getAggregatedData
+    }
+  ]
+};
+
+const defaultProps = {
+  // Avoid state changes by marking the callback as compare: false
+  onSetColorDomain: {type: 'function', optional: true, compare: false}
+};
+
+export default class ScaleEnhancedGridLayer extends CPUGridLayer {
+  static defaultProps = defaultProps;
+
+  initializeState() {
+    const cpuAggregator = new CPUAggregator({
+      aggregation: gridAggregation
+    });
+
+    this.state = {
+      cpuAggregator,
+      aggregatorState: cpuAggregator.state
+    };
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {size: 3, accessor: 'getPosition'}
+    });
+  }
+}
+
+ScaleEnhancedGridLayer.layerName = 'ScaleEnhancedGridLayer';

package/src/deckgl-layers/hexagon-layer/enhanced-hexagon-layer.js

@@ -0,0 +1,70 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {HexagonLayer} from '@deck.gl/aggregation-layers';
+import CPUAggregator, {getAggregatedData} from '../layer-utils/cpu-aggregator';
+
+export const hexagonAggregation = {
+  key: 'position',
+  updateSteps: [
+    {
+      key: 'aggregate',
+      triggers: {
+        cellSize: {
+          prop: 'radius'
+        },
+        position: {
+          prop: 'getPosition',
+          updateTrigger: 'getPosition'
+        },
+        aggregator: {
+          prop: 'hexagonAggregator'
+        }
+      },
+      updater: getAggregatedData
+    }
+  ]
+};
+
+const defaultProps = {
+  // Avoid state changes by marking the callback as compare: false
+  onSetColorDomain: {type: 'function', optional: true, compare: false}
+};
+
+export default class ScaleEnhancedHexagonLayer extends HexagonLayer {
+  static defaultProps = defaultProps;
+
+  initializeState() {
+    const cpuAggregator = new CPUAggregator({
+      aggregation: hexagonAggregation
+    });
+
+    this.state = {
+      cpuAggregator,
+      aggregatorState: cpuAggregator.state
+    };
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {size: 3, accessor: 'getPosition'}
+    });
+  }
+}
+
+ScaleEnhancedHexagonLayer.layerName = 'ScaleEnhancedHexagonLayer';

package/src/deckgl-layers/layer-utils/cluster-utils.js

@@ -0,0 +1,76 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import Supercluster from 'supercluster';
+import memoize from 'lodash.memoize';
+
+export function getGeoJSON(data, getPosition, filterData) {
+  const raw = typeof filterData === 'function' ? data.filter(filterData) : data;
+
+  return raw
+    .map(d => ({
+      type: 'Point',
+      properties: {
+        data: d,
+        points: [d],
+        point_count: 1,
+        point_count_abbreviated: '1'
+      },
+      geometry: {
+        coordinates: getPosition(d)
+      }
+    }))
+    .filter(d => d.geometry.coordinates.every(Number.isFinite));
+}
+
+const clusterResolver = ({clusterRadius}) => `${clusterRadius}`;
+
+const getClusterer = ({clusterRadius, geoJSON}) =>
+  new Supercluster({
+    maxZoom: 20,
+    radius: clusterRadius,
+    reduce: (accumulated, props) => {
+      accumulated.points = [...accumulated.points, ...props.points];
+    },
+    map: props => ({points: [props.data]})
+  }).load(geoJSON);
+
+export default class ClusterBuilder {
+  constructor() {
+    this.clusterer = memoize(getClusterer, clusterResolver);
+  }
+
+  clustersAtZoom({bbox, clusterRadius, geoJSON, zoom}) {
+    const clusterer = this.clusterer({clusterRadius, geoJSON});
+
+    // map clusters to formatted bins to be passed to deck.gl bin-sorter
+    const clusters = clusterer.getClusters(bbox, zoom).map((c, i) => ({
+      points: c.properties.points,
+      position: c.geometry.coordinates,
+      index: i
+    }));
+
+    return clusters;
+  }
+
+  clearClustererCache() {
+    this.clusterer.cache.clear();
+  }
+}