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

package/src/layers/h3-hexagon-layer/h3-hexagon-layer.js

@@ -0,0 +1,264 @@
+// 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 Layer from '../base-layer';
+import {findDefaultColorField} from 'utils/dataset-utils';
+import {GeoJsonLayer} from '@deck.gl/layers';
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
+import EnhancedColumnLayer from 'deckgl-layers/column-layer/enhanced-column-layer';
+import {getCentroid, idToPolygonGeo, h3IsValid, getHexFields, getVertices} from './h3-utils';
+import H3HexagonLayerIcon from './h3-hexagon-layer-icon';
+import {CHANNEL_SCALES, HIGHLIGH_COLOR_3D} from 'constants/default-settings';
+import {getLatLngBounds} from 'utils/data-utils';
+
+const DEFAULT_LINE_SCALE_VALUE = 8;
+
+export const hexIdRequiredColumns = ['hex_id'];
+export const hexIdAccessor = ({hex_id}) => dc => d => dc.valueAt(d.index, hex_id.fieldIdx);
+
+export const defaultElevation = 500;
+export const defaultCoverage = 1;
+
+export const HexagonIdVisConfigs = {
+  opacity: 'opacity',
+  colorRange: 'colorRange',
+  coverage: 'coverage',
+  enable3d: 'enable3d',
+  sizeRange: 'elevationRange',
+  coverageRange: 'coverageRange',
+  elevationScale: 'elevationScale',
+  enableElevationZoomFactor: 'enableElevationZoomFactor'
+};
+
+export default class HexagonIdLayer extends Layer {
+  constructor(props) {
+    super(props);
+    this.registerVisConfig(HexagonIdVisConfigs);
+    this.getPositionAccessor = dataContainer => hexIdAccessor(this.config.columns)(dataContainer);
+  }
+
+  get type() {
+    return 'hexagonId';
+  }
+
+  get name() {
+    return 'H3';
+  }
+
+  get requiredLayerColumns() {
+    return hexIdRequiredColumns;
+  }
+
+  get layerIcon() {
+    // use hexagon layer icon for now
+    return H3HexagonLayerIcon;
+  }
+
+  get visualChannels() {
+    const visualChannels = super.visualChannels;
+    return {
+      color: {
+        ...visualChannels.color,
+        accessor: 'getFillColor'
+      },
+      size: {
+        ...visualChannels.size,
+        property: 'height',
+        accessor: 'getElevation',
+        nullValue: 0,
+        condition: config => config.visConfig.enable3d,
+        defaultValue: defaultElevation
+      },
+      coverage: {
+        property: 'coverage',
+        field: 'coverageField',
+        scale: 'coverageScale',
+        domain: 'coverageDomain',
+        range: 'coverageRange',
+        key: 'coverage',
+        channelScaleType: CHANNEL_SCALES.radius,
+        accessor: 'getCoverage',
+        nullValue: 0,
+        defaultValue: defaultCoverage
+      }
+    };
+  }
+
+  setInitialLayerConfig(dataset) {
+    const defaultColorField = findDefaultColorField(dataset);
+
+    if (defaultColorField) {
+      this.updateLayerConfig({
+        colorField: defaultColorField
+      });
+      this.updateLayerVisualChannel(dataset, 'color');
+    }
+
+    return this;
+  }
+
+  static findDefaultLayerProps({fields = [], dataContainer}) {
+    const hexFields = getHexFields(fields, dataContainer);
+    if (!hexFields.length) {
+      return {props: []};
+    }
+
+    return {
+      props: hexFields.map(f => ({
+        isVisible: true,
+        label: f.displayName || f.name,
+        columns: {
+          hex_id: {
+            value: f.name,
+            fieldIdx: fields.findIndex(fid => fid.name === f.name)
+          }
+        }
+      }))
+    };
+  }
+
+  getDefaultLayerConfig(props = {}) {
+    return {
+      ...super.getDefaultLayerConfig(props),
+
+      // add height visual channel
+      coverageField: null,
+      coverageDomain: [0, 1],
+      coverageScale: 'linear'
+    };
+  }
+
+  calculateDataAttribute({dataContainer, filteredIndex}, getHexId) {
+    const data = [];
+
+    for (let i = 0; i < filteredIndex.length; i++) {
+      const index = filteredIndex[i];
+      const id = getHexId({index});
+      const centroid = this.dataToFeature.centroids[index];
+
+      if (centroid) {
+        data.push({
+          index,
+          id,
+          centroid
+        });
+      }
+    }
+    return data;
+  }
+
+  // TODO: fix complexity
+  /* eslint-disable complexity */
+  formatLayerData(datasets, oldLayerData, opt = {}) {
+    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const getHexId = this.getPositionAccessor(dataContainer);
+    const {data} = this.updateData(datasets, oldLayerData);
+    const accessors = this.getAttributeAccessors({dataContainer});
+
+    return {
+      data,
+      getHexId,
+      getFilterValue: gpuFilter.filterValueAccessor(dataContainer)(),
+      ...accessors
+    };
+  }
+  /* eslint-enable complexity */
+
+  updateLayerMeta(dataContainer, getHexId) {
+    const validHexagonIds = dataContainer.map((d, index) => getHexId({index})).filter(h3IsValid);
+
+    // save a reference of centroids to dataToFeature
+    // so we don't have to re calculate it again
+    const centroids = validHexagonIds.map(id => getCentroid({id}));
+    this.dataToFeature = {centroids};
+
+    const vertices = validHexagonIds.map(id => getVertices({id})).flat();
+    // using the same way to compute bounds as in base-layer.js, even if it's complicated and not very efficient
+    const latBounds = getLatLngBounds(vertices, 1, [-90, 90]);
+    const lngBounds = getLatLngBounds(vertices, 0, [-180, 180]);
+
+    const bounds =
+      !latBounds || !lngBounds ? null : [lngBounds[0], latBounds[0], lngBounds[1], latBounds[1]];
+    this.updateMeta({bounds});
+  }
+
+  renderLayer(opts) {
+    const {data, gpuFilter, objectHovered} = opts;
+    const {config} = this;
+    const {visConfig} = config;
+    const updateTriggers = this.getVisualChannelUpdateTriggers();
+
+    const h3HexagonLayerTriggers = {
+      getHexagon: this.config.columns,
+      getFillColor: updateTriggers.getFillColor,
+      getElevation: updateTriggers.getElevation,
+      getFilterValue: gpuFilter.filterValueUpdateTriggers
+    };
+
+    const columnLayerTriggers = {
+      getCoverage: updateTriggers.getCoverage
+    };
+
+    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    return [
+      new H3HexagonLayer({
+        ...defaultLayerProps,
+        ...data,
+        wrapLongitude: false,
+
+        getHexagon: x => x.id,
+
+        // coverage
+        coverage: config.coverageField ? 1 : visConfig.coverage,
+
+        // highlight
+        autoHighlight: visConfig.enable3d,
+        highlightColor: HIGHLIGH_COLOR_3D,
+
+        // elevation
+        extruded: visConfig.enable3d,
+        elevationScale: visConfig.elevationScale,
+
+        // render
+        updateTriggers: h3HexagonLayerTriggers,
+        _subLayerProps: {
+          'hexagon-cell': {
+            type: EnhancedColumnLayer,
+            getCoverage: data.getCoverage,
+            updateTriggers: columnLayerTriggers
+          }
+        }
+      }),
+      ...(hoveredObject && !config.sizeField
+        ? [
+            new GeoJsonLayer({
+              ...this.getDefaultHoverLayerProps(),
+              data: [idToPolygonGeo(hoveredObject)],
+              getLineColor: config.highlightColor,
+              lineWidthScale: DEFAULT_LINE_SCALE_VALUE,
+              wrapLongitude: false
+            })
+          ]
+        : [])
+    ];
+  }
+}

package/src/layers/h3-hexagon-layer/h3-utils.js

@@ -0,0 +1,65 @@
+// 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 {h3GetResolution, h3IsValid, h3ToGeo, h3ToGeoBoundary} from 'h3-js';
+import {ALL_FIELD_TYPES} from 'constants/default-settings';
+import {notNullorUndefined} from 'utils/data-utils';
+
+export {h3GetResolution, h3IsValid};
+
+// get vertices should return [lon, lat]
+export function getVertices({id}) {
+  // always reverse it
+  return h3ToGeoBoundary(id, true);
+}
+
+// get centroid should return [lon, lat]
+export function getCentroid({id}) {
+  // always reverse it to [lng, lat]
+  return h3ToGeo(id).reverse();
+}
+
+export function idToPolygonGeo(object, properties) {
+  if (!object || !object.id) {
+    return null;
+  }
+
+  const vertices = getVertices(object);
+
+  return {
+    geometry: {
+      coordinates: vertices,
+      type: 'LineString'
+    },
+    properties
+  };
+}
+
+export const isHexField = (field, fieldIdx, dataContainer) => {
+  if (field.type !== ALL_FIELD_TYPES.string) {
+    return false;
+  }
+
+  const firstDP = dataContainer.find(d => notNullorUndefined(d.valueAt(fieldIdx)), true);
+  return firstDP && h3IsValid(firstDP.valueAt(fieldIdx));
+};
+
+export const getHexFields = (fields, dataContainer) =>
+  fields.filter((f, i) => isHexField(f, i, dataContainer));

package/src/layers/heatmap-layer/heatmap-layer-icon.js

@@ -0,0 +1,64 @@
+// 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 React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+export default class HeatmapLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'heatmap-layer-icon',
+    totalColor: 3
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path
+          d="M51.87,21C49.55,16.67,43.77,15.29,39,18a11.42,11.42,0,0,0-1.65,1.13c-2.73,2.14-2.12,3-6,4.89-2.27,1.07-3.42,1.08-6.88,1.4l-2.24.21a14,14,0,0,0-2.86.84c-6.64,2.73-10.11,9.86-7.76,15.94s9.63,8.79,16.27,6.07A14,14,0,0,0,31.77,46l0,0,.06-.07c.43-.4.8-.78,1.14-1.14a2.66,2.66,0,0,0,.32-.36l.17-.19c3-3.53,2-5,4.9-7.39,2.38-1.93,5.41-.95,9-3C52.19,31.15,54.19,25.43,51.87,21ZM26,44.59a8.7,8.7,0,0,1-2.26.59A7.16,7.16,0,0,1,16,40.85c-1.44-3.72.68-8.08,4.73-9.74A8.33,8.33,0,0,1,23,30.53a7.15,7.15,0,0,1,7.71,4.32C32.19,38.57,30.06,42.93,26,44.59Z"
+          className="cr2"
+          style={{opacity: 0.8}}
+        />
+        <path
+          d="M57,18.18A14.56,14.56,0,0,0,42.25,10.7a16.62,16.62,0,0,0-6.12,2,17.35,17.35,0,0,0-2.39,1.65,20.15,20.15,0,0,0-2.83,2.73,4.52,4.52,0,0,1-2,1.45,5.88,5.88,0,0,1-2.26.63l-1.45.14-1.27.12-2.33.22-.2,0-.18,0a18.88,18.88,0,0,0-4,1.18c-9.6,3.93-14.51,14.57-11,23.71A17.59,17.59,0,0,0,24.81,55.4,20.19,20.19,0,0,0,30,54.05a20,20,0,0,0,5.26-3.19l.82-.71.05-.08,1-1c.21-.22.41-.45.59-.66l.13-.15a20,20,0,0,0,3.39-5.48c.36-.87.36-.87.68-1.14a9.09,9.09,0,0,1,1.56-.32,18.79,18.79,0,0,0,6.69-2.19,16.56,16.56,0,0,0,7.88-9.9A14.93,14.93,0,0,0,57,18.18ZM47.63,34.27a13.93,13.93,0,0,1-5.06,1.61,7.75,7.75,0,0,0-3.86,1.36,7.06,7.06,0,0,0-2.33,3.24,14.17,14.17,0,0,1-2.51,4.09l-.1.11a5.11,5.11,0,0,1-.43.47c-.31.35-.7.73-1.14,1.14l-.09.09-.12.09a14.4,14.4,0,0,1-4,2.44,14.73,14.73,0,0,1-3.84,1c-5.87.69-11.13-2.27-13.08-7.35-2.45-6.32,1.16-13.76,8-16.59a15,15,0,0,1,3-.87l2.29-.22.9-.07,2-.2a10.88,10.88,0,0,0,3.85-1.08,9.43,9.43,0,0,0,3.77-2.76A14.75,14.75,0,0,1,37,18.71a11.5,11.5,0,0,1,1.71-1.17,11.08,11.08,0,0,1,4.16-1.36,9.26,9.26,0,0,1,9.42,4.64C54.75,25.42,52.65,31.47,47.63,34.27Z"
+          className="cr1"
+          style={{opacity: 0.36}}
+        />
+        <path
+          d="M33,44.79a9.53,9.53,0,0,1-1.13,1.14C32.3,45.53,32.67,45.15,33,44.79Z"
+          className="cr1"
+          style={{opacity: 0.36}}
+        />
+        <path
+          d="M25.83,44.13c-3.82,1.55-8,0-9.33-3.46s.65-7.55,4.45-9.1,8,0,9.33,3.46S29.63,42.57,25.83,44.13Z"
+          className="cr3"
+        />
+        <path d="M31.81,46a.09.09,0,0,1,0,0h0Z" className="cr3" />
+      </Base>
+    );
+  }
+}

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

@@ -0,0 +1,226 @@
+// 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 {createSelector} from 'reselect';
+import memoize from 'lodash.memoize';
+import {CHANNEL_SCALES, SCALE_FUNC, ALL_FIELD_TYPES} from 'constants/default-settings';
+import {hexToRgb} from 'utils/color-utils';
+import MapboxGLLayer from '../mapboxgl-layer';
+import HeatmapLayerIcon from './heatmap-layer-icon';
+
+export const MAX_ZOOM_LEVEL = 18;
+
+export const pointPosAccessor = ({lat, lng}) => dc => d => [
+  dc.valueAt(d.index, lng.fieldIdx),
+  dc.valueAt(d.index, lat.fieldIdx)
+];
+
+export const pointColResolver = ({lat, lng}) => `${lat.fieldIdx}-${lng.fieldIdx}`;
+
+export const heatmapVisConfigs = {
+  opacity: 'opacity',
+  colorRange: 'colorRange',
+  radius: 'heatmapRadius'
+};
+
+/**
+ *
+ * @param {Object} colorRange
+ * @return {Array} [
+ *  0, "rgba(33,102,172,0)",
+ *  0.2, "rgb(103,169,207)",
+ *  0.4, "rgb(209,229,240)",
+ *  0.6, "rgb(253,219,199)",
+ *  0.8, "rgb(239,138,98)",
+ *  1, "rgb(178,24,43)"
+ * ]
+ */
+const heatmapDensity = colorRange => {
+  const scaleFunction = SCALE_FUNC.quantize;
+
+  const colors = ['#000000', ...colorRange.colors];
+
+  const scale = scaleFunction()
+    .domain([0, 1])
+    .range(colors);
+
+  const colorDensity = scale.range().reduce((bands, level) => {
+    const invert = scale.invertExtent(level);
+    return [
+      ...bands,
+      invert[0], // first value in the range
+      `rgb(${hexToRgb(level).join(',')})` // color
+    ];
+  }, []);
+  colorDensity[1] = 'rgba(0,0,0,0)';
+  return colorDensity;
+};
+
+class HeatmapLayer extends MapboxGLLayer {
+  constructor(props) {
+    super(props);
+    this.registerVisConfig(heatmapVisConfigs);
+    this.getPosition = memoize(pointPosAccessor, pointColResolver);
+  }
+
+  get type() {
+    return 'heatmap';
+  }
+
+  get visualChannels() {
+    return {
+      weight: {
+        property: 'weight',
+        field: 'weightField',
+        scale: 'weightScale',
+        domain: 'weightDomain',
+        key: 'weight',
+        // supportedFieldTypes can be determined by channelScaleType
+        // or specified here
+        defaultMeasure: 'property.density',
+        supportedFieldTypes: [ALL_FIELD_TYPES.real, ALL_FIELD_TYPES.integer],
+        channelScaleType: CHANNEL_SCALES.size
+      }
+    };
+  }
+
+  get layerIcon() {
+    return HeatmapLayerIcon;
+  }
+
+  getVisualChannelDescription(channel) {
+    return channel === 'color'
+      ? {
+          label: 'property.color',
+          measure: 'property.density'
+        }
+      : {
+          label: 'property.weight',
+          measure: this.config.weightField ? this.config.weightField.name : 'property.density'
+        };
+  }
+
+  getDefaultLayerConfig(props = {}) {
+    // mapbox heatmap layer color is always based on density
+    // no need to set colorField, colorDomain and colorScale
+    /* eslint-disable no-unused-vars */
+    const {colorField, colorDomain, colorScale, ...layerConfig} = {
+      ...super.getDefaultLayerConfig(props),
+
+      weightField: null,
+      weightDomain: [0, 1],
+      weightScale: 'linear'
+    };
+    /* eslint-enable no-unused-vars */
+
+    return layerConfig;
+  }
+
+  getPositionAccessor(dataContainer) {
+    return this.getPosition(this.config.columns)(dataContainer);
+  }
+
+  updateLayerMeta(dataContainer) {
+    const getPosition = this.getPositionAccessor(dataContainer);
+    const bounds = this.getPointsBounds(dataContainer, getPosition);
+    this.updateMeta({bounds});
+  }
+
+  columnsSelector = config => pointColResolver(config.columns);
+  visConfigSelector = config => config.visConfig;
+  weightFieldSelector = config => (config.weightField ? config.weightField.name : null);
+  weightDomainSelector = config => config.weightDomain;
+
+  paintSelector = createSelector(
+    this.visConfigSelector,
+    this.weightFieldSelector,
+    this.weightDomainSelector,
+    (visConfig, weightField, weightDomain) => ({
+      'heatmap-weight': weightField
+        ? ['interpolate', ['linear'], ['get', weightField], weightDomain[0], 0, weightDomain[1], 1]
+        : 1,
+      'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, MAX_ZOOM_LEVEL, 3],
+      'heatmap-color': [
+        'interpolate',
+        ['linear'],
+        ['heatmap-density'],
+        ...heatmapDensity(visConfig.colorRange)
+      ],
+      'heatmap-radius': [
+        'interpolate',
+        ['linear'],
+        ['zoom'],
+        0,
+        2,
+        MAX_ZOOM_LEVEL,
+        visConfig.radius // radius
+      ],
+      'heatmap-opacity': visConfig.opacity
+    })
+  );
+
+  computeHeatmapConfiguration = createSelector(
+    this.sourceSelector,
+    this.filterSelector,
+    this.paintSelector,
+    (source, filter, paint) => {
+      return {
+        type: 'heatmap',
+        id: this.id,
+        source,
+        layout: {
+          visibility: 'visible'
+        },
+        maxzoom: MAX_ZOOM_LEVEL,
+        paint,
+        ...(this.isValidFilter(filter) ? {filter} : {})
+      };
+    }
+  );
+
+  getGeometry(position) {
+    return position.every(Number.isFinite)
+      ? {
+          type: 'Point',
+          coordinates: position
+        }
+      : null;
+  }
+
+  formatLayerData(datasets, oldLayerData) {
+    const {weightField} = this.config;
+    const {dataContainer} = datasets[this.config.dataId];
+    const getPosition = this.getPositionAccessor(dataContainer);
+    const {data} = this.updateData(datasets, oldLayerData);
+
+    const newConfig = this.computeHeatmapConfiguration(this.config, datasets);
+    newConfig.id = this.id;
+
+    return {
+      columns: this.config.columns,
+      config: newConfig,
+      data,
+      weightField,
+      getPosition
+    };
+  }
+}
+
+export default HeatmapLayer;

package/src/layers/hexagon-layer/hexagon-layer-icon.js

@@ -0,0 +1,74 @@
+// 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 React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+export default class HexagonLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'hexagon-layer-icon',
+    totalColor: 6
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <polygon
+          className="cr1"
+          points="23.9,10 30.9,14 30.9,22.1 23.9,26.2 16.8,22.1 16.8,14 "
+          style={{opacity: 0.6}}
+        />
+        <polygon
+          className="cr2"
+          points="23.9,37.8 30.9,41.9 30.9,50 23.9,54 16.8,50 16.8,41.9 "
+          style={{opacity: 0.4}}
+        />
+        <polygon className="cr6" points="40.1,10 47.2,14 47.2,22.1 40.1,26.2 33.1,22.1 33.1,14 " />
+        <polygon
+          className="cr3"
+          points="40.1,37.8 47.2,41.9 47.2,50 40.1,54 33.1,50 33.1,41.9 "
+          style={{opacity: 0.8}}
+        />
+        <polygon
+          className="cr1"
+          points="15.8,23.9 22.8,27.9 22.8,36.1 15.8,40.1 8.7,36.1 8.7,27.9 "
+        />
+        <polygon
+          className="cr4"
+          points="32,23.9 39,27.9 39,36.1 32,40.1 25,36.1 25,27.9 "
+          style={{opacity: 0.8}}
+        />
+        <polygon
+          className="cr5"
+          points="48.2,23.9 55.3,27.9 55.3,36.1 48.2,40.1 41.2,36.1 41.2,27.9 "
+          style={{opacity: 0.4}}
+        />
+      </Base>
+    );
+  }
+}