feat: add HeatmapLayer

Author: pyjun01

README.md

@@ -16,7 +16,7 @@ Google map react componentize project
 - [x] Circle
 - [ ] AdvancedMarkerView
 - [x] MarkerClusterer
-- [ ] HeatmapLayer
+- [x] HeatmapLayer
 
 ## DEMO
 

src/components/GoogleMap/GoogleMapApiLoader.tsx

@@ -1,6 +1,11 @@
 import { PropsWithChildren, useEffect } from 'react';
 
-import { LoadingStatus, coreStore, useCoreStore } from '../../store/core';
+import {
+  LoadingStatus,
+  coreStore,
+  useApiLoadingStatus,
+  useCoreStore,
+} from '../../store/core';
 import { ApiLoadConfig } from '../../types';
 import { appendLibImportScript } from '../../utils/appendScript';
 
@@ -22,7 +27,7 @@ export function GoogleMapApiLoader({
 }: GoogleMapApiLoaderProps) {
   appendLibImportScript(apiLoadConfig);
 
-  const status = useCoreStore((state) => state.status);
+  const status = useApiLoadingStatus();
 
   const importCoreLibrary = () =>
     promise ||

src/components/HeatmapLayer/index.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+
+import { passRef } from '../../utils/passRef';
+import { useMapContext } from '../Provider/MapProvider';
+import { HeatmapLayerProps } from './type';
+import { useImportLibrary } from '../../hooks/useImportLibrary';
+
+export const HeatmapLayer = forwardRef<
+  google.maps.visualization.HeatmapLayer,
+  HeatmapLayerProps
+>(function HeatmapLayer(
+  {
+    data,
+    dissipating,
+    gradient,
+    maxIntensity,
+    opacity,
+    radius,
+    hidden = false,
+  },
+  ref,
+) {
+  const map = useMapContext();
+  const visualizationLib = useImportLibrary('visualization');
+  const [heatmap, setHeatmap] =
+    useState<google.maps.visualization.HeatmapLayer | null>(null);
+
+  useEffect(() => {
+    if (!visualizationLib?.HeatmapLayer) {
+      return;
+    }
+
+    const heatmap = new visualizationLib.HeatmapLayer({
+      map,
+      data,
+      dissipating,
+      gradient,
+      maxIntensity,
+      opacity,
+      radius,
+    });
+
+    setHeatmap(heatmap);
+    passRef(ref, heatmap);
+
+    return () => {
+      heatmap.setMap(null);
+    };
+  }, [visualizationLib?.HeatmapLayer]);
+
+  useEffect(() => {
+    if (data) {
+      heatmap?.setData(data);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    heatmap?.setMap(hidden ? null : map);
+  }, [hidden]);
+
+  useEffect(() => {
+    heatmap?.setOptions({
+      gradient,
+    });
+  }, [gradient]);
+
+  useEffect(() => {
+    heatmap?.setOptions({
+      dissipating,
+      maxIntensity,
+      opacity,
+      radius,
+    });
+  }, [dissipating, gradient, maxIntensity, opacity, radius]);
+
+  return null;
+});

src/components/HeatmapLayer/type.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface HeatmapLayerProps
+  extends Omit<google.maps.visualization.HeatmapLayerOptions, 'map'> {
+  children?: ReactNode;
+  hidden?: boolean;
+}

src/components/MarkerClusterer/type.ts

@@ -2,6 +2,6 @@ import { MarkerClustererOptions } from '@googlemaps/markerclusterer';
 import { ReactNode } from 'react';
 
 export interface MarkerClustererProps
-  extends Omit<MarkerClustererOptions, 'markers' | 'map' | ''> {
+  extends Omit<MarkerClustererOptions, 'markers' | 'map'> {
   children?: ReactNode;
 }

src/components/index.ts

@@ -18,6 +18,8 @@ export * from './Rectangle/index';
 export * from './Rectangle/type';
 export * from './Circle/index';
 export * from './Circle/type';
+export * from './HeatmapLayer/index';
+export * from './HeatmapLayer/type';
 export * from './Provider/MapProvider';
 export * from './Provider/MarkerProvider';
 export * from './Provider/CustomMarkerProvider';

src/index.ts

@@ -5,6 +5,7 @@ import {
   Polygon,
   Rectangle,
   Circle,
+  HeatmapLayer,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -20,6 +21,7 @@ import type {
   PolygonProps,
   RectangleProps,
   CircleProps,
+  HeatmapLayerProps,
   CustomMarkerProps,
   InfoWindowProps,
   GoogleMapProps,
@@ -41,6 +43,7 @@ export {
   Polygon,
   Rectangle,
   Circle,
+  HeatmapLayer,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -61,6 +64,7 @@ export type {
   PolygonProps,
   RectangleProps,
   CircleProps,
+  HeatmapLayerProps,
   InfoWindowProps,
   CustomMarkerProps,
   GoogleMapProps,
@@ -81,6 +85,7 @@ export default {
   Polygon,
   Rectangle,
   Circle,
+  HeatmapLayer,
   CustomMarker,
   InfoWindow,
   GoogleMap,