Merge pull request #82 from aodn/features/5735-heatmap-layer

Features/5735 heatmap layer

package.json

@@ -39,6 +39,7 @@
     "@types/wellknown": "^0.5.8",
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
+    "events": "3.3.0",
     "geojson": "0.5.0",
     "http-proxy-middleware": "^2.0.6",
     "lodash": "^4.17.21",

src/components/common/utils.tsx

@@ -0,0 +1,10 @@
+import { merge } from "lodash";
+
+const mergeWithDefaults = <T extends object>(
+  defaults: T,
+  props?: Partial<T>
+): T => {
+  return merge({}, defaults, props);
+};
+
+export { mergeWithDefaults };

src/components/map/mapbox/Map.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Map, MapboxEvent, Style } from "mapbox-gl";
 import MapContext from "./MapContext";
 import "mapbox-gl/dist/mapbox-gl.css";
 import ERSIWorldImagery from "./styles/ESRIWorldImagery.json";
+import loadash from "lodash";
 
 interface MapProps {
   centerLongitude?: number;
@@ -54,6 +55,9 @@ const styles = [
 
 const defaultStyle = 3;
 
+// Magic number, try and error by experience
+const DEBOUNCE_BEFORE_EVENT_FIRE = 1250;
+
 const ReactMap = ({
   panelId,
   centerLongitude = 147.3353554138993,
@@ -66,6 +70,31 @@ const ReactMap = ({
 }: React.PropsWithChildren<MapProps>) => {
   const [map, setMap] = useState<Map | null>(null);
 
+  // Debouce to make the map transit smoother
+  const debounceOnZoomEvent = useRef(
+    loadash.debounce(
+      useCallback(
+        async (
+          event: MapboxEvent<MouseEvent | WheelEvent | TouchEvent | undefined>
+        ) => onZoomEvent && onZoomEvent(event),
+        [onZoomEvent]
+      ),
+      DEBOUNCE_BEFORE_EVENT_FIRE
+    )
+  ).current;
+
+  const debounceOnMoveEvent = useRef(
+    loadash.debounce(
+      useCallback(
+        async (
+          event: MapboxEvent<MouseEvent | WheelEvent | TouchEvent | undefined>
+        ) => onMoveEvent && onMoveEvent(event),
+        [onMoveEvent]
+      ),
+      DEBOUNCE_BEFORE_EVENT_FIRE
+    )
+  ).current;
+
   useEffect(() => {
     setMap((m) =>
       m === null
@@ -82,20 +111,23 @@ const ReactMap = ({
     );
 
     if (map !== null) {
-      const zoomEvent = (
-        e: MapboxEvent<MouseEvent | WheelEvent | TouchEvent | undefined>
-      ) => onZoomEvent && onZoomEvent(e);
+      // const zoomEvent = (
+      //   e: MapboxEvent<MouseEvent | WheelEvent | TouchEvent | undefined>
+      // ) => onZoomEvent && onZoomEvent(e);
 
-      const moveEvent = (
-        e: MapboxEvent<MouseEvent | WheelEvent | TouchEvent | undefined>
-      ) => onMoveEvent && onMoveEvent(e);
+      // const moveEvent = (
+      //   e: MapboxEvent<MouseEvent | WheelEvent | TouchEvent | undefined>
+      // ) => onMoveEvent && onMoveEvent(e);
 
       map.setProjection(projection);
       // Stop drag cause map to rotate.
       map.dragRotate.disable();
 
-      map.on("zoomend", zoomEvent);
-      map.on("moveend", moveEvent);
+      map.on("movestart", () => debounceOnZoomEvent.cancel());
+      map.on("zoomestart", () => debounceOnZoomEvent.cancel());
+
+      map.on("zoomend", debounceOnZoomEvent);
+      map.on("moveend", debounceOnMoveEvent);
 
       // Create a resize observer to the canvas so we know if its size have changed
       // and we need to redraw the map
@@ -107,8 +139,8 @@ const ReactMap = ({
 
       return () => {
         resizeObserver.unobserve(map.getContainer());
-        map.off("zoomend", zoomEvent);
-        map.off("moveend", moveEvent);
+        map.off("zoomend", debounceOnZoomEvent);
+        map.off("moveend", debounceOnMoveEvent);
 
         // This cleanup all associated resources include controls, so no need to
         // call removeControl()
@@ -125,6 +157,8 @@ const ReactMap = ({
     map,
     onZoomEvent,
     onMoveEvent,
+    debounceOnZoomEvent,
+    debounceOnMoveEvent,
   ]);
 
   return (