Merge pull request #461 from act-org/dependabot/npm_and_yarn/mapbox-g…

…l-3.6.0 feat: build(deps): bump mapbox-gl from 3.4.0 to 3.6.0
act-org · Oct 1, 2024 · ece3468 · ece3468
2 parents 358839c + 7870341
commit ece3468
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "deepmerge": "^4.3.1",
     "json-parse-safe": "^2.0.0",
     "lodash": "^4.17.21",
-    "mapbox-gl": "~3.4.0",
+    "mapbox-gl": "~3.6.0",
     "mdi-material-ui": "^7.9.2",
     "moment": "^2.30.1",
     "notistack": "^3.0.1",
@@ -41,9 +41,9 @@
     "@babel/plugin-proposal-export-default-from": "7.24.7",
     "@babel/plugin-transform-class-properties": "7.25.4",
     "@babel/plugin-transform-nullish-coalescing-operator": "7.24.7",
-    "@babel/plugin-transform-private-methods": "7.25.4",
     "@babel/plugin-transform-object-rest-spread": "7.24.7",
     "@babel/plugin-transform-optional-chaining": "7.24.8",
+    "@babel/plugin-transform-private-methods": "7.25.4",
     "@babel/plugin-transform-runtime": "7.25.4",
     "@babel/preset-env": "7.25.4",
     "@babel/preset-react": "7.24.7",
@@ -142,8 +142,8 @@
   "name": "@actinc/dls",
   "peerDependencies": {
     "@mui/material": "6.x",
-    "@mui/x-data-grid": "7.x",
     "@mui/system": "6.x",
+    "@mui/x-data-grid": "7.x",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"
   },

diff --git a/src/components/HeatMap/index.stories.tsx b/src/components/HeatMap/index.stories.tsx
@@ -19,6 +19,9 @@ export default {
   args: {
     data: finalData,
     mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
+    mapProps: {
+      color: 'red',
+    },
   },
   argTypes: Playground({}, HeatMap),
   component: HeatMap,

diff --git a/src/components/HeatMap/index.tsx b/src/components/HeatMap/index.tsx
@@ -8,13 +8,9 @@
 import { grey } from '@mui/material/colors';
 import { useThemeProps } from '@mui/material/styles';
 import Color from 'color';
+import { CircleLayerSpecification, HeatmapLayerSpecification } from 'mapbox-gl';
 import React from 'react';
-import {
-  CircleLayer,
-  HeatmapLayer,
-  Layer,
-  ViewStateChangeEvent,
-} from 'react-map-gl/dist/es5';
+import { Layer, ViewStateChangeEvent } from 'react-map-gl/dist/es5';
 
 import Map, { FeatureHoverProps, MapProps } from '~/components/Map';
 import MapPopup, { MapPopupProps } from '~/components/MapPopup';
@@ -23,6 +19,7 @@ import DLS_COMPONENT_NAMES from '~/constants/DLS_COMPONENT_NAMES';
 import type GeoJSON from 'geojson';
 
 const MIN_ZOOM = 12;
+const MAX_ZOOM = 16;
 
 export interface HeatMapProps {
   color?: string;
@@ -64,48 +61,54 @@ export const HeatMap: React.FC<HeatMapProps> = (
   const finalHoverInfo = onHoverInfo || hoverInfo;
   const setFinalOnHoverInfo = setOnHoverInfo || setHoverInfo;
 
-  const heatMapDataLayer = React.useMemo((): HeatmapLayer => {
+  const heatMapDataLayer = React.useMemo((): HeatmapLayerSpecification => {
     return {
-      id: 'data',
-      maxzoom: 16,
+      id: 'heatmap',
+      maxzoom: MAX_ZOOM,
       paint: {
-        'heatmap-intensity': {
-          stops: [
-            [5, 1],
-            [10, 2],
-            [12, 3],
-          ],
-        },
-        'heatmap-opacity': {
-          default: 1,
-          stops: [
-            [12, 1],
-            [13, 0],
-          ],
-        },
-        'heatmap-radius': {
-          stops: [
-            [5, 3.5],
-            [7, 8],
-            [9, 12],
-            [12, 20],
-          ],
-        },
-        'heatmap-weight': {
-          property: 'value',
-          stops: [
-            [1, 0],
-            [50, 0.5],
-            [100, 1],
-          ],
-          type: 'exponential',
-        },
+        'heatmap-intensity': [
+          'interpolate',
+          ['linear'],
+          ['zoom'],
+          5,
+          1,
+          10,
+          2,
+          12,
+          3,
+        ],
+        'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 12, 1, 13, 0],
+        'heatmap-radius': [
+          'interpolate',
+          ['linear'],
+          ['zoom'],
+          5,
+          3.5,
+          7,
+          8,
+          9,
+          12,
+          12,
+          20,
+        ],
+        'heatmap-weight': [
+          'interpolate',
+          ['linear'],
+          ['get', 'value'],
+          1,
+          0,
+          50,
+          0.5,
+          100,
+          1,
+        ],
       },
+      source: sourceId,
       type: 'heatmap',
     };
   }, []);
 
-  const circleDataLayer = React.useMemo((): CircleLayer => {
+  const circleDataLayer = React.useMemo((): CircleLayerSpecification => {
     return {
       id: 'circle-data',
       minzoom: MIN_ZOOM,
@@ -189,25 +192,25 @@ export const HeatMap: React.FC<HeatMapProps> = (
             ],
           ],
         },
-        'circle-opacity': {
-          stops: [
-            [12, 0],
-            [13, 1],
-          ],
-        },
-        'circle-radius': {
-          property: 'quantity',
-          stops: [
-            [{ value: 1, zoom: 15 }, 5],
-            [{ value: 62, zoom: 15 }, 10],
-            [{ value: 1, zoom: 22 }, 20],
-            [{ value: 62, zoom: 22 }, 50],
-          ],
-          type: 'exponential',
-        },
+        'circle-opacity': ['interpolate', ['linear'], ['zoom'], 12, 0, 13, 1],
+        'circle-radius': [
+          'interpolate',
+          ['exponential'],
+          ['get', 'value'],
+          ['zoom'],
+          { value: 1, zoom: 15 },
+          5,
+          { value: 62, zoom: 15 },
+          10,
+          { value: 1, zoom: 22 },
+          20,
+          { value: 62, zoom: 22 },
+          50,
+        ],
         'circle-stroke-color': 'white',
         'circle-stroke-width': 1,
       },
+      source: sourceId,
       type: 'circle',
     };
   }, [color, mapProps]);