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

package/src/layers/point-layer/point-layer.js

@@ -0,0 +1,414 @@
+// 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 {BrushingExtension} from '@deck.gl/extensions';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {IconLayer} from '@deck.gl/layers';
+
+import Layer from '../base-layer';
+import {hexToRgb} from 'utils/color-utils';
+import {negateAccessor} from 'utils/layer-utils';
+import {findDefaultColorField} from 'utils/dataset-utils';
+import PointLayerIcon from './point-layer-icon';
+import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES, UNKNOWN_COLOR} from 'constants/default-settings';
+
+import {formatTextLabelData} from '../layer-text-label';
+
+export const pointPosAccessor = ({lat, lng, altitude}) => dc => d => [
+  dc.valueAt(d.index, lng.fieldIdx),
+  dc.valueAt(d.index, lat.fieldIdx),
+  altitude && altitude.fieldIdx > -1 ? dc.valueAt(d.index, altitude.fieldIdx) : 0
+];
+
+export const pointRequiredColumns = ['lat', 'lng'];
+export const pointOptionalColumns = ['altitude'];
+
+const brushingExtension = new BrushingExtension();
+
+export const pointVisConfigs = {
+  radius: 'radius',
+  customMarkers: 'customMarkers',
+  customMarkersUrl: 'customMarkersUrl',
+  customMarkersRange: 'customMarkersRange',
+  opacity: 'opacity',
+  outline: 'outline',
+  thickness: 'thickness',
+  strokeColor: 'strokeColor',
+  colorRange: 'colorRange',
+  strokeColorRange: 'strokeColorRange',
+  radiusRange: 'radiusRange',
+  filled: {
+    type: 'boolean',
+    label: 'layer.fillColor',
+    defaultValue: true,
+    property: 'filled'
+  }
+};
+
+export default class PointLayer extends Layer {
+  constructor(props) {
+    super(props);
+
+    this.registerVisConfig(pointVisConfigs);
+    this.getPositionAccessor = dataContainer =>
+      pointPosAccessor(this.config.columns)(dataContainer);
+  }
+
+  get type() {
+    return 'point';
+  }
+
+  get isAggregated() {
+    return false;
+  }
+
+  get layerIcon() {
+    return PointLayerIcon;
+  }
+  get requiredLayerColumns() {
+    return pointRequiredColumns;
+  }
+
+  get optionalColumns() {
+    return pointOptionalColumns;
+  }
+
+  get columnPairs() {
+    return this.defaultPointColumnPairs;
+  }
+
+  get noneLayerDataAffectingProps() {
+    return [...super.noneLayerDataAffectingProps, 'radius'];
+  }
+
+  get visualChannels() {
+    return {
+      color: {
+        ...super.visualChannels.color,
+        accessor: 'getFillColor',
+        condition: config => config.visConfig.filled,
+        defaultValue: config => config.color
+      },
+      strokeColor: {
+        property: 'strokeColor',
+        key: 'strokeColor',
+        field: 'strokeColorField',
+        scale: 'strokeColorScale',
+        domain: 'strokeColorDomain',
+        range: 'strokeColorRange',
+        channelScaleType: CHANNEL_SCALES.color,
+        accessor: 'getLineColor',
+        condition: config => config.visConfig.outline,
+        defaultValue: config => config.visConfig.strokeColor || config.color
+      },
+      size: {
+        ...super.visualChannels.size,
+        property: 'radius',
+        range: 'radiusRange',
+        channelScaleType: 'radius',
+        accessor: 'getRadius',
+        defaultValue: 1
+      },
+      customMarkers: {
+        property: 'customMarkers',
+        key: 'customMarkers',
+        field: 'customMarkersField',
+        scale: 'customMarkersScale',
+        domain: 'customMarkersDomain',
+        range: 'customMarkersRange',
+        fixed: 'customMarkersUrl',
+        channelScaleType: CHANNEL_SCALES.customMarker,
+        accessor: 'getIconUrl',
+        supportedFieldTypes: ['string'],
+        defaultValue: config => config.visConfig.customMarkersUrl,
+        condition: config => config.visConfig.customMarkers
+      },
+      rotation: {
+        property: 'rotation',
+        key: 'rotation',
+        field: 'rotationField',
+        channelScaleType: CHANNEL_SCALES.identity,
+        accessor: 'getRotation',
+        supportedFieldTypes: ['float', 'integer', 'real', 'number'],
+        defaultValue: () => 0,
+        nullValue: 0,
+        condition: config => config.rotationField
+      }
+    };
+  }
+
+  setInitialLayerConfig(dataset) {
+    const defaultColorField = findDefaultColorField(dataset);
+
+    if (defaultColorField) {
+      this.updateLayerConfig({
+        colorField: defaultColorField
+      });
+      this.updateLayerVisualChannel(dataset, 'color');
+    }
+
+    return this;
+  }
+
+  static findDefaultLayerProps({fieldPairs = []}) {
+    const props = [];
+
+    // Make layer for each pair
+    fieldPairs.forEach(pair => {
+      const latField = pair.pair.lat;
+      const lngField = pair.pair.lng;
+      const layerName = pair.defaultName;
+
+      const prop = {
+        label: layerName.length ? layerName : 'Point'
+      };
+
+      // default layer color for begintrip and dropoff point
+      if (latField.value in DEFAULT_LAYER_COLOR) {
+        prop.color = hexToRgb(DEFAULT_LAYER_COLOR[latField.value]);
+      }
+
+      // set the first layer to be visible
+      if (props.length === 0) {
+        prop.isVisible = true;
+      }
+
+      prop.columns = {
+        lat: latField,
+        lng: lngField,
+        altitude: {value: null, fieldIdx: -1, optional: true}
+      };
+
+      props.push(prop);
+    });
+
+    return {props};
+  }
+
+  getDefaultLayerConfig(props = {}) {
+    return {
+      ...super.getDefaultLayerConfig(props),
+
+      // add stroke color visual channel
+      strokeColorField: null,
+      strokeColorDomain: [0, 1],
+      strokeColorScale: 'quantile',
+
+      customMarkersField: null,
+      customMarkersScale: 'ordinal'
+    };
+  }
+
+  calculateDataAttribute({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({
+          position: pos,
+          index
+        });
+      }
+    }
+    return data;
+  }
+
+  formatLayerData(datasets, oldLayerData) {
+    const {textLabel} = this.config;
+    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const {data, triggerChanged} = this.updateData(datasets, oldLayerData);
+    const getPosition = this.getPositionAccessor(dataContainer);
+
+    // get all distinct characters in the text labels
+    const textLabels = formatTextLabelData({textLabel, dataContainer});
+
+    const accessors = this.getAttributeAccessors({dataContainer});
+
+    return {
+      data,
+      getPosition,
+      getFilterValue: gpuFilter.filterValueAccessor(dataContainer)(),
+      textLabels,
+      ...accessors
+    };
+  }
+  /* eslint-enable complexity */
+
+  updateLayerMeta(dataContainer) {
+    const getPosition = this.getPositionAccessor(dataContainer);
+    const bounds = this.getPointsBounds(dataContainer, getPosition);
+    this.updateMeta({bounds});
+  }
+
+  isLayerHovered(objectInfo) {
+    return (
+      (objectInfo?.picked && objectInfo?.layer?.props?.id === this.id) ||
+      objectInfo?.layer?.props?.id === `${this.id}-icon`
+    );
+  }
+
+  // eslint-disable-next-line complexity, max-statements
+  renderLayer(opts) {
+    const {data, gpuFilter, objectHovered, interactionConfig} = opts;
+    const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
+
+    const radiusScale = this.getRadiusScale();
+
+    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
+    const brushingProps = this.getBrushingExtensionProps(interactionConfig);
+    const extensions = [...defaultLayerProps.extensions, brushingExtension];
+
+    const updateTriggers = {
+      getPosition: this.config.columns,
+      getFilterValue: gpuFilter.filterValueUpdateTriggers,
+      ...this.getVisualChannelUpdateTriggers()
+    };
+
+    const sharedProps = {
+      getFilterValue: data.getFilterValue,
+      extensions,
+      filterRange: defaultLayerProps.filterRange,
+      maskId: defaultLayerProps.maskId,
+      visible: defaultLayerProps.visible,
+      ...brushingProps
+    };
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    const textLabelLayer = this.renderTextLabelLayer(
+      {
+        getPosition: data.getPosition,
+        sharedProps,
+        // TODO remove this scaling by half here and elsewhere
+        radiusScale: customMarkers ? radiusScale / 2 : radiusScale,
+        getRadius: data.getRadius,
+        updateTriggers
+      },
+      opts
+    );
+    const commonLayerProps = {
+      ...defaultLayerProps,
+      parameters: {
+        // circles will be flat on the map when the altitude column is not used
+        depthTest: this.config.columns.altitude?.fieldIdx > -1
+      }
+    };
+
+    const customMarkersField = this.config.customMarkersField;
+    const customMarkersConfigured =
+      customMarkers && Boolean(customMarkersUrl || (customMarkersField && customMarkersRange));
+    const customMarkersMisConfigured = customMarkers && !customMarkersConfigured;
+
+    if (customMarkersConfigured) {
+      const maxIconSize = this.getMaxMarkerSize();
+      const useMask = Boolean(this.config.visConfig.filled);
+      const iconLayerProps = {
+        getIcon: this.getCustomMarkerIconAccessor(data.getIconUrl, useMask),
+        getPosition: data.getPosition,
+        getSize: data.getRadius,
+        getAngle: negateAccessor(data.getRotation),
+        sizeScale: radiusScale,
+        sizeUnits: 'pixels',
+        loadOptions: {
+          image: {
+            type: 'imagebitmap'
+          },
+          imagebitmap: {
+            resizeWidth: maxIconSize,
+            resizeHeight: maxIconSize,
+            resizeQuality: 'high'
+          }
+        }
+      };
+
+      return [
+        new IconLayer({
+          ...commonLayerProps,
+          ...iconLayerProps,
+          id: `${defaultLayerProps.id}-icon`,
+          data: data.data,
+          getColor: this.config.visConfig.filled ? data.getFillColor : UNKNOWN_COLOR,
+          getFilterValue: data.getFilterValue,
+          updateTriggers: {
+            getFilterValue: updateTriggers.getFilterValue,
+            getColor: {...updateTriggers.getFillColor, filled: this.config.visConfig.filled},
+            getIcon: {...updateTriggers.getIconUrl, maxIconSize, useMask},
+            getSize: updateTriggers.getRadius,
+            getAngle: updateTriggers.getRotation
+          }
+        }),
+        ...(hoveredObject
+          ? [
+              new IconLayer({
+                ...iconLayerProps,
+                ...this.getDefaultHoverLayerProps(),
+                id: `${defaultLayerProps.id}-icon-hovered`,
+                data: [hoveredObject],
+                getColor: this.config.highlightColor
+              })
+            ]
+          : []),
+        ...textLabelLayer
+      ];
+    }
+
+    const scatterPlotLayerProps = {
+      stroked: this.config.visConfig.outline,
+      filled: this.config.visConfig.filled,
+      lineWidthScale: this.config.visConfig.thickness,
+      // TODO: invent better way to render something when customMarkers are not yet configured
+      radiusScale: customMarkersMisConfigured ? radiusScale / 2 : radiusScale,
+      radiusMaxPixels: 500
+    };
+
+    return [
+      new ScatterplotLayer({
+        ...brushingProps,
+        ...data,
+        ...commonLayerProps,
+        ...scatterPlotLayerProps,
+        radiusUnits: 'pixels',
+        lineWidthUnits: 'pixels',
+        updateTriggers,
+        extensions
+      }),
+      // hover layer
+      ...(hoveredObject
+        ? [
+            new ScatterplotLayer({
+              ...this.getDefaultHoverLayerProps(),
+              ...scatterPlotLayerProps,
+              data: [hoveredObject],
+              getLineColor: this.config.highlightColor,
+              getFillColor: this.config.highlightColor,
+              getRadius: data.getRadius,
+              getPosition: data.getPosition
+            })
+          ]
+        : []),
+      // text label layer
+      ...textLabelLayer
+    ];
+  }
+}

package/src/layers/s2-geometry-layer/s2-geometry-layer.js

@@ -0,0 +1,265 @@
+// 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 {S2Layer} from '@deck.gl/geo-layers';
+import {HIGHLIGH_COLOR_3D, CHANNEL_SCALES} from 'constants/default-settings';
+import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
+import {createDataContainer} from 'utils/table-utils';
+import Layer from '../base-layer';
+import S2LayerIcon from './s2-layer-icon';
+import {getS2Center} from './s2-utils';
+
+export const S2_TOKEN_FIELDS = {
+  token: ['s2', 's2_token']
+};
+
+export const s2RequiredColumns = ['token'];
+export const S2TokenAccessor = ({token}) => dc => d => dc.valueAt(d.index, token.fieldIdx);
+
+export const defaultElevation = 500;
+export const defaultLineWidth = 1;
+
+export const S2VisConfigs = {
+  // Filled color
+  opacity: 'opacity',
+  colorRange: 'colorRange',
+  filled: {
+    type: 'boolean',
+    label: 'Fill Color',
+    defaultValue: true,
+    property: 'filled'
+  },
+
+  // stroke
+  thickness: {
+    ...LAYER_VIS_CONFIGS.thickness,
+    defaultValue: 0.5
+  },
+  strokeColor: 'strokeColor',
+  strokeColorRange: 'strokeColorRange',
+  sizeRange: 'strokeWidthRange',
+  stroked: 'stroked',
+
+  // height
+  enable3d: 'enable3d',
+  elevationScale: 'elevationScale',
+  enableElevationZoomFactor: 'enableElevationZoomFactor',
+  heightRange: 'elevationRange',
+
+  // wireframe
+  wireframe: 'wireframe'
+};
+
+export default class S2GeometryLayer extends Layer {
+  constructor(props) {
+    super(props);
+    this.registerVisConfig(S2VisConfigs);
+    this.getPositionAccessor = dataContainer => S2TokenAccessor(this.config.columns)(dataContainer);
+  }
+
+  get type() {
+    return 's2';
+  }
+
+  get name() {
+    return 'S2';
+  }
+
+  get requiredLayerColumns() {
+    return s2RequiredColumns;
+  }
+
+  get layerIcon() {
+    return S2LayerIcon;
+  }
+
+  get visualChannels() {
+    const visualChannels = super.visualChannels;
+    return {
+      color: {
+        ...visualChannels.color,
+        accessor: 'getFillColor'
+      },
+      size: {
+        ...visualChannels.size,
+        property: 'stroke',
+        accessor: 'getLineWidth',
+        condition: config => config.visConfig.stroked,
+        defaultValue: defaultLineWidth
+      },
+      strokeColor: {
+        property: 'strokeColor',
+        field: 'strokeColorField',
+        scale: 'strokeColorScale',
+        domain: 'strokeColorDomain',
+        range: 'strokeColorRange',
+        key: 'strokeColor',
+        channelScaleType: CHANNEL_SCALES.color,
+        accessor: 'getLineColor',
+        condition: config => config.visConfig.stroked,
+        nullValue: visualChannels.color.nullValue,
+        defaultValue: config => config.visConfig.strokeColor || config.color
+      },
+      height: {
+        property: 'height',
+        field: 'heightField',
+        scale: 'heightScale',
+        domain: 'heightDomain',
+        range: 'heightRange',
+        key: 'height',
+        channelScaleType: CHANNEL_SCALES.size,
+        accessor: 'getElevation',
+        condition: config => config.visConfig.enable3d,
+        nullValue: 0,
+        defaultValue: defaultElevation
+      }
+    };
+  }
+
+  getDefaultLayerConfig(props = {}) {
+    return {
+      ...super.getDefaultLayerConfig(props),
+
+      // add height visual channel
+      heightField: null,
+      heightDomain: [0, 1],
+      heightScale: 'linear',
+
+      // add stroke color visual channel
+      strokeColorField: null,
+      strokeColorDomain: [0, 1],
+      strokeColorScale: 'quantile'
+    };
+  }
+
+  static findDefaultLayerProps({fields = []}) {
+    const foundColumns = this.findDefaultColumnField(S2_TOKEN_FIELDS, fields);
+    if (!foundColumns || !foundColumns.length) {
+      return {props: []};
+    }
+
+    return {
+      props: foundColumns.map(columns => ({
+        isVisible: true,
+        label: 'S2',
+        columns
+      }))
+    };
+  }
+
+  calculateDataAttribute({dataContainer, filteredIndex}, getS2Token) {
+    const data = [];
+    for (let i = 0; i < filteredIndex.length; i++) {
+      const index = filteredIndex[i];
+      const token = getS2Token({index});
+
+      if (token) {
+        data.push({
+          index,
+          token
+        });
+      }
+    }
+    return data;
+  }
+
+  updateLayerMeta(dataContainer, getS2Token) {
+    // add safe row flag
+    const centroids = dataContainer.reduce(
+      (acc, entry, index) => {
+        const s2Token = getS2Token({index});
+        if (s2Token) {
+          acc.push(getS2Center(s2Token));
+        }
+        return acc;
+      },
+      [],
+      true
+    );
+
+    const centroidsDataContainer = createDataContainer(centroids);
+    const bounds = this.getPointsBounds(centroidsDataContainer, (d, dc) => [
+      dc.valueAt(d.index, 0),
+      dc.valueAt(d.index, 1)
+    ]);
+    this.dataToFeature = {centroids};
+    this.updateMeta({bounds});
+  }
+
+  formatLayerData(datasets, oldLayerData, opt = {}) {
+    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const getS2Token = this.getPositionAccessor(dataContainer);
+    const {data} = this.updateData(datasets, oldLayerData);
+
+    const accessors = this.getAttributeAccessors({dataContainer});
+
+    return {
+      data,
+      getS2Token,
+      getFilterValue: gpuFilter.filterValueAccessor(dataContainer)(),
+      ...accessors
+    };
+  }
+
+  renderLayer(opts) {
+    const {data, gpuFilter, interactionConfig} = opts;
+
+    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
+    const {config} = this;
+    const {visConfig} = config;
+
+    const updateTriggers = {
+      ...this.getVisualChannelUpdateTriggers(),
+      getFilterValue: gpuFilter.filterValueUpdateTriggers
+    };
+
+    return [
+      new S2Layer({
+        ...defaultLayerProps,
+        ...interactionConfig,
+        ...data,
+        getS2Token: d => d.token,
+
+        autoHighlight: visConfig.enable3d,
+        highlightColor: HIGHLIGH_COLOR_3D,
+
+        // stroke
+        lineWidthScale: visConfig.thickness,
+        stroked: visConfig.stroked,
+        lineMiterLimit: 2,
+
+        // Filled color
+        filled: visConfig.filled,
+        opacity: visConfig.opacity,
+        wrapLongitude: false,
+
+        // Elevation
+        elevationScale: visConfig.elevationScale,
+        extruded: visConfig.enable3d,
+
+        wireframe: visConfig.wireframe,
+
+        pickable: true,
+
+        updateTriggers
+      })
+    ];
+  }
+}