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

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

@@ -0,0 +1,122 @@
+// 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 {LineLayer} from '@deck.gl/layers';
+import GL from '@luma.gl/constants';
+import {editShader} from 'deckgl-layers/layer-utils/shader-utils';
+
+const defaultProps = {
+  ...LineLayer.defaultProps,
+  getTargetColor: x => x.color || [0, 0, 0, 255]
+};
+
+function addInstanceColorShader(vs) {
+  const targetColorVs = editShader(
+    vs,
+    'line target color vs',
+    'attribute vec4 instanceColors;',
+    'attribute vec4 instanceColors; attribute vec4 instanceTargetColors;'
+  );
+
+  return editShader(
+    targetColorVs,
+    'line color vs',
+    'vColor = vec4(instanceColors.rgb, instanceColors.a * opacity);',
+    `vec4 color = mix(instanceColors, instanceTargetColors, positions.x);` +
+      `vColor = vec4(color.rgb, color.a * opacity);`
+  );
+}
+
+function addElevationScale(vs) {
+  let elevationVs = editShader(
+    vs,
+    'line elevation scale 1 vs',
+    'uniform float widthMaxPixels;',
+    `uniform float widthMaxPixels;
+     uniform float elevationScale;`
+  );
+
+  elevationVs = editShader(
+    elevationVs,
+    'line elevation scale 2 vs',
+    `geometry.worldPosition = instanceSourcePositions;
+  geometry.worldPositionAlt = instanceTargetPositions;`,
+    `vec3 sourcePosAdjusted = instanceSourcePositions;
+     vec3 targetPosAdjusted = instanceTargetPositions;
+     sourcePosAdjusted.z *= elevationScale;
+     targetPosAdjusted.z *= elevationScale;
+     
+     geometry.worldPosition = sourcePosAdjusted;
+     geometry.worldPositionAlt = sourcePosAdjusted;`
+  );
+
+  elevationVs = editShader(
+    elevationVs,
+    'line elevation scale 3 vs',
+    'vec4 source = project_position_to_clipspace(source_world, source_world_64low, vec3(0.), source_commonspace);',
+    'vec4 source = project_position_to_clipspace(sourcePosAdjusted, instanceSourcePositions64Low, vec3(0.), source_commonspace);'
+  );
+
+  elevationVs = editShader(
+    elevationVs,
+    'line elevation scale 4 vs',
+    'vec4 target = project_position_to_clipspace(target_world, target_world_64low, vec3(0.), target_commonspace);',
+    'vec4 target = project_position_to_clipspace(targetPosAdjusted, instanceTargetPositions64Low, vec3(0.), target_commonspace);'
+  );
+
+  return elevationVs;
+}
+
+export default class EnhancedLineLayer extends LineLayer {
+  getShaders() {
+    const shaders = super.getShaders();
+
+    let vs = addInstanceColorShader(shaders.vs);
+    vs = addElevationScale(vs);
+
+    return {
+      ...shaders,
+      vs
+    };
+  }
+
+  draw({uniforms}) {
+    const {elevationScale} = this.props;
+    super.draw({uniforms: {...uniforms, elevationScale}});
+  }
+
+  initializeState() {
+    super.initializeState();
+    const {attributeManager} = this.state;
+    attributeManager.addInstanced({
+      instanceTargetColors: {
+        size: this.props.colorFormat.length,
+        type: GL.UNSIGNED_BYTE,
+        normalized: true,
+        transition: true,
+        accessor: 'getTargetColor',
+        defaultValue: [0, 0, 0, 255]
+      }
+    });
+  }
+}
+
+EnhancedLineLayer.layerName = 'EnhancedLineLayer';
+EnhancedLineLayer.defaultProps = defaultProps;

package/src/deckgl-layers/svg-icon-layer/scatterplot-icon-layer.js

@@ -0,0 +1,57 @@
+// 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 {Geometry, Model} from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+
+const DEFAULT_POS = [-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0];
+export default class ScatterplotIconLayer extends ScatterplotLayer {
+  _getModel(gl) {
+    // use default scatterplot shaders
+    const shaders = this.getShaders();
+
+    const {iconGeometry} = this.props;
+
+    const geometry = iconGeometry
+      ? new Geometry({
+          drawMode: GL.TRIANGLES,
+          attributes: {
+            positions: new Float32Array(iconGeometry)
+          }
+        })
+      : new Geometry({
+          drawMode: GL.TRIANGLE_FAN,
+          attributes: {
+            positions: new Float32Array(DEFAULT_POS)
+          }
+        });
+
+    return new Model(gl, {
+      ...shaders,
+      id: this.props.id,
+      geometry,
+      isInstanced: true,
+      shaderCache: this.context.shaderCache
+    });
+  }
+}
+
+ScatterplotIconLayer.layerName = 'ScatterplotIconLayer';

package/src/deckgl-layers/svg-icon-layer/svg-icon-layer.js

@@ -0,0 +1,85 @@
+// 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 {CompositeLayer} from '@deck.gl/core';
+import ScatterplotIconLayer from './scatterplot-icon-layer';
+
+// default icon geometry is a square
+const DEFAULT_ICON_GEOMETRY = [1, 1, 0, 1, -1, 0, -1, -1, 0, -1, -1, 0, -1, 1, 0, 1, 1, 0];
+
+const defaultProps = {
+  getIconGeometry: iconId => DEFAULT_ICON_GEOMETRY,
+  getIcon: d => d.icon
+};
+
+export default class SvgIconLayer extends CompositeLayer {
+  // Must be defined
+  initializeState() {
+    this.state = {
+      data: {}
+    };
+  }
+
+  updateState({changeFlags}) {
+    if (changeFlags.dataChanged) {
+      this._extractSublayers();
+    }
+  }
+
+  _extractSublayers() {
+    const {data, getIconGeometry, getIcon} = this.props;
+
+    const iconLayers = {};
+    for (let i = 0; i < data.length; i++) {
+      const iconId = getIcon(data[i]);
+      iconLayers[iconId] = iconLayers[iconId] || {
+        id: iconId,
+        geometry: getIconGeometry(iconId) || DEFAULT_ICON_GEOMETRY,
+        data: []
+      };
+      iconLayers[iconId].data.push(data[i]);
+    }
+    this.setState({
+      data: Object.values(iconLayers)
+    });
+  }
+
+  renderLayers() {
+    const layerId = this.props.id;
+
+    const layers =
+      this.state.data &&
+      this.state.data.length &&
+      this.state.data.map(
+        ({id, data, geometry}) =>
+          new ScatterplotIconLayer({
+            ...this.props,
+            id: `${layerId}-${id}`,
+            data,
+            iconGeometry: geometry
+          })
+      );
+
+    return layers && layers.length > 0 ? layers : null;
+  }
+}
+
+SvgIconLayer.layerName = 'SvgIconLayer';
+SvgIconLayer.defaultProps = defaultProps;

package/src/index.js

@@ -0,0 +1,52 @@
+// 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.
+
+// Reducers
+export * from 'reducers';
+
+// Schemas
+export * from './schemas';
+
+// Actions
+export * from './actions';
+
+// Constants
+export * from './constants';
+
+// Processors
+export * from './processors';
+
+// Components
+export * from './components';
+
+// Layers
+export * from './layers';
+
+// Styles
+export * from './styles';
+
+// Middleware
+export * from './middleware';
+
+// Utils
+export * from './utils';
+
+// Default export
+export {default} from './components';

package/src/layers/aggregation-layer.js

@@ -0,0 +1,356 @@
+// 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 memoize from 'lodash.memoize';
+import Layer from './base-layer';
+import {getMaskExtensionProps} from 'utils/layer-utils';
+import {hexToRgb} from 'utils/color-utils';
+import {aggregate} from 'utils/aggregate-utils';
+import {
+  HIGHLIGH_COLOR_3D,
+  CHANNEL_SCALES,
+  FIELD_OPTS,
+  DEFAULT_AGGREGATION
+} from 'constants/default-settings';
+
+export const pointPosAccessor = ({lat, lng}) => dc => d => [
+  dc.valueAt(d.index, lng.fieldIdx),
+  dc.valueAt(d.index, lat.fieldIdx)
+];
+
+export const pointPosResolver = ({lat, lng}) => `${lat.fieldIdx}-${lng.fieldIdx}`;
+
+export const getValueAggrFunc = (field, aggregation) => {
+  return points => {
+    return field
+      ? aggregate(
+          points.map(p => {
+            return field.valueAccessor(p.source ? p.source : p);
+          }),
+          aggregation
+        )
+      : points.length;
+  };
+};
+
+export const getFilterDataFunc = (filterRange, getFilterValue) => pt =>
+  getFilterValue(pt).every((val, i) => val >= filterRange[i][0] && val <= filterRange[i][1]);
+
+const getLayerColorRange = colorRange => {
+  const {colorMap} = colorRange;
+
+  if (colorMap) {
+    return colorMap.map(cMap => hexToRgb(cMap[1]));
+  }
+  return colorRange.colors.map(hexToRgb);
+};
+
+const getLayerColorDomain = colorDomain => {
+  const {colorMap} = colorDomain;
+
+  if (colorMap) {
+    return colorMap.map(cMap => cMap[0]);
+  }
+  return null;
+};
+
+export const aggregateRequiredColumns = ['lat', 'lng'];
+
+export default class AggregationLayer extends Layer {
+  constructor(props) {
+    super(props);
+
+    this.getPositionAccessor = dataContainer =>
+      pointPosAccessor(this.config.columns)(dataContainer);
+    this.getColorRange = memoize(getLayerColorRange);
+    this.getColorDomain = memoize(getLayerColorDomain);
+  }
+
+  get isAggregated() {
+    return true;
+  }
+
+  get requiredLayerColumns() {
+    return aggregateRequiredColumns;
+  }
+
+  get columnPairs() {
+    return this.defaultPointColumnPairs;
+  }
+
+  get noneLayerDataAffectingProps() {
+    return [
+      ...super.noneLayerDataAffectingProps,
+      'enable3d',
+      'colorRange',
+      'colorDomain',
+      'sizeRange',
+      'sizeScale',
+      'sizeDomain',
+      'percentile',
+      'coverage',
+      'elevationPercentile',
+      'elevationScale',
+      'enableElevationZoomFactor'
+    ];
+  }
+
+  get visualChannels() {
+    return {
+      color: {
+        aggregation: 'colorAggregation',
+        channelScaleType: CHANNEL_SCALES.colorAggr,
+        defaultMeasure: 'property.pointCount',
+        domain: 'colorDomain',
+        field: 'colorField',
+        key: 'color',
+        property: 'color',
+        range: 'colorRange',
+        scale: 'colorScale'
+      },
+      size: {
+        aggregation: 'sizeAggregation',
+        channelScaleType: CHANNEL_SCALES.sizeAggr,
+        condition: config => config.visConfig.enable3d,
+        defaultMeasure: 'property.pointCount',
+        domain: 'sizeDomain',
+        field: 'sizeField',
+        key: 'size',
+        property: 'height',
+        range: 'sizeRange',
+        scale: 'sizeScale'
+      }
+    };
+  }
+
+  /**
+   * Get the description of a visualChannel config
+   * @param key
+   * @returns {{label: string, measure: (string|string)}}
+   */
+  getVisualChannelDescription(key) {
+    // e.g. label: Color, measure: Average of ETA
+    const {range, field, defaultMeasure, aggregation} = this.visualChannels[key];
+    const fieldConfig = this.config[field];
+    return {
+      label: this.visConfigSettings[range].label,
+      measure: fieldConfig
+        ? `${this.config.visConfig[aggregation]} of ${fieldConfig.displayName || fieldConfig.name}`
+        : defaultMeasure
+    };
+  }
+
+  getHoverData(object) {
+    // return aggregated object
+    return object;
+  }
+
+  /**
+   * Aggregation layer handles visual channel aggregation inside deck.gl layer
+   */
+  updateLayerVisualChannel({data, dataContainer}, channel) {
+    this.validateVisualChannel(channel);
+  }
+
+  /**
+   * Validate aggregation type on top of basic layer visual channel validation
+   * @param channel
+   */
+  validateVisualChannel(channel) {
+    // field type decides aggregation type decides scale type
+    this.validateFieldType(channel);
+    this.validateAggregationType(channel);
+    this.validateScale(channel);
+  }
+
+  /**
+   * Validate aggregation type based on selected field
+   */
+  validateAggregationType(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, aggregation} = visualChannel;
+    const aggregationOptions = this.getAggregationOptions(channel);
+
+    if (!aggregation) {
+      return;
+    }
+
+    if (!aggregationOptions.length) {
+      // if field cannot be aggregated, set field to null
+      this.updateLayerConfig({[field]: null});
+    } else if (!aggregationOptions.includes(this.config.visConfig[aggregation])) {
+      // current aggregation type is not supported by this field
+      // set aggregation to the first supported option
+      this.updateLayerVisConfig({[aggregation]: aggregationOptions[0]});
+    }
+  }
+
+  getAggregationOptions(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, channelScaleType} = visualChannel;
+
+    return Object.keys(
+      this.config[field]
+        ? FIELD_OPTS[this.config[field].type].scale[channelScaleType]
+        : DEFAULT_AGGREGATION[channelScaleType]
+    );
+  }
+
+  /**
+   * Get scale options based on current field and aggregation type
+   * @param {string} channel
+   * @returns {string[]}
+   */
+  getScaleOptions(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, aggregation, channelScaleType} = visualChannel;
+    const aggregationType = this.config.visConfig[aggregation];
+    return this.config[field]
+      ? // scale options based on aggregation
+        FIELD_OPTS[this.config[field].type].scale[channelScaleType][aggregationType]
+      : // default scale options for point count
+        DEFAULT_AGGREGATION[channelScaleType][aggregationType];
+  }
+
+  /**
+   * Aggregation layer handles visual channel aggregation inside deck.gl layer
+   */
+  updateLayerDomain(datasets, newFilter) {
+    return this;
+  }
+
+  updateLayerMeta(dataContainer, getPosition) {
+    // get bounds from points
+    const bounds = this.getPointsBounds(dataContainer, getPosition);
+
+    this.updateMeta({bounds});
+  }
+
+  calculateDataAttribute({dataContainer, filteredIndex}, getPosition) {
+    const data = [];
+
+    for (let i = 0; i < filteredIndex.length; i++) {
+      const index = filteredIndex[i];
+      const pos = getPosition({index});
+
+      // if doesn't have point lat or lng, do not add the point
+      // deck.gl can't handle position = null
+      if (pos.every(Number.isFinite)) {
+        data.push({
+          index
+        });
+      }
+    }
+
+    return data;
+  }
+
+  formatLayerData(datasets, oldLayerData) {
+    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const getPosition = this.getPositionAccessor(dataContainer);
+
+    const getColorValue = getValueAggrFunc(
+      this.config.colorField,
+      this.config.visConfig.colorAggregation
+    );
+
+    const getElevationValue = getValueAggrFunc(
+      this.config.sizeField,
+      this.config.visConfig.sizeAggregation
+    );
+    const hasFilter = Object.values(gpuFilter.filterRange).some(arr => arr.some(v => v !== 0));
+
+    const getFilterValue = gpuFilter.filterValueAccessor(dataContainer)();
+    const filterData = hasFilter
+      ? getFilterDataFunc(gpuFilter.filterRange, getFilterValue)
+      : undefined;
+
+    const {data} = this.updateData(datasets, oldLayerData);
+
+    return {
+      data,
+      getPosition,
+      _filterData: filterData,
+      ...(getColorValue ? {getColorValue} : {}),
+      ...(getElevationValue ? {getElevationValue} : {})
+    };
+  }
+
+  getDefaultDeckLayerProps(opts) {
+    const baseProp = super.getDefaultDeckLayerProps(opts);
+    const maskExtensionProps = getMaskExtensionProps(opts.maskPolygon);
+
+    return {
+      ...baseProp,
+      ...maskExtensionProps,
+      highlightColor: HIGHLIGH_COLOR_3D,
+      // gpu data filtering is not supported in aggregation layer
+      extensions: [...maskExtensionProps.extensions],
+      autoHighlight: this.config.visConfig.enable3d
+    };
+  }
+
+  getDefaultAggregationLayerProp(opts) {
+    const {gpuFilter, layerCallbacks = {}} = opts;
+    const {visConfig} = this.config;
+
+    const updateTriggers = {
+      getColorValue: {
+        colorField: this.config.colorField,
+        colorAggregation: this.config.visConfig.colorAggregation
+      },
+      getElevationValue: {
+        sizeField: this.config.sizeField,
+        sizeAggregation: this.config.visConfig.sizeAggregation
+      },
+      _filterData: {
+        filterRange: gpuFilter.filterRange,
+        ...gpuFilter.filterValueUpdateTriggers
+      }
+    };
+
+    return {
+      ...this.getDefaultDeckLayerProps(opts),
+      coverage: visConfig.coverage,
+
+      // color
+      colorRange: this.getColorRange(visConfig.colorRange),
+      colorDomain: this.getColorDomain(visConfig.colorRange),
+      colorScaleType: this.config.colorScale,
+      upperPercentile: visConfig.percentile[1],
+      lowerPercentile: visConfig.percentile[0],
+      colorAggregation: visConfig.colorAggregation,
+
+      // elevation
+      extruded: visConfig.enable3d,
+      elevationScale: visConfig.elevationScale,
+      elevationScaleType: this.config.sizeScale,
+      elevationRange: visConfig.sizeRange,
+      elevationLowerPercentile: visConfig.elevationPercentile[0],
+      elevationUpperPercentile: visConfig.elevationPercentile[1],
+
+      // updateTriggers
+      updateTriggers,
+
+      // callbacks
+      onSetColorDomain: layerCallbacks.onSetLayerDomain
+    };
+  }
+}