docs: use deckgl for heatmap example

examples/heatmap/README.md → examples/deckgl-heatmap/README.md

@@ -1,7 +1,7 @@
-# Heatmap
+# Deck.gl Heatmap
 
-This uses the `useMapsLibrary` hook showing earthquake magnitude data in a
-heatmap.
+This uses deck.gl's `HeatmapLayer` and `GoogleMapsOverlay` to show earthquake
+magnitude data in a heatmap.
 
 ## Google Maps Platform API key
 

examples/heatmap/index.html → examples/deckgl-heatmap/index.html

@@ -5,7 +5,7 @@
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, user-scalable=no" />
-    <title>Heatmap</title>
+    <title>deck.gl Heatmap</title>
 
     <style>
       body {

examples/heatmap/package.json → examples/deckgl-heatmap/package.json

@@ -1,8 +1,11 @@
 {
   "type": "module",
   "dependencies": {
+    "@deck.gl/aggregation-layers": "9.3.3",
+    "@deck.gl/google-maps": "9.3.3",
     "@types/geojson": "^7946.0.14",
     "@vis.gl/react-google-maps": "latest",
+    "deck.gl": "9.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0"

examples/heatmap/src/app.tsx → examples/deckgl-heatmap/src/app.tsx

@@ -4,7 +4,7 @@ import {createRoot} from 'react-dom/client';
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
 import ControlPanel from './control-panel';
-import Heatmap from './heatmap';
+import DeckGlHeatmap from './deckgl-heatmap';
 import {EarthquakesGeojson, loadEarthquakeGeojson} from './earthquakes';
 
 const API_KEY =
@@ -28,16 +28,15 @@ const App = () => {
         defaultCenter={{lat: 40.7749, lng: -130.4194}}
         defaultZoom={3}
         gestureHandling={'greedy'}
-        disableDefaultUI={true}
-      />
-
-      {earthquakesGeojson && (
-        <Heatmap
-          geojson={earthquakesGeojson}
-          radius={radius}
-          opacity={opacity}
-        />
-      )}
+        disableDefaultUI={true}>
+        {earthquakesGeojson && (
+          <DeckGlHeatmap
+            geojson={earthquakesGeojson}
+            radius={radius}
+            opacity={opacity}
+          />
+        )}
+      </Map>
 
       <ControlPanel
         radius={radius}

examples/heatmap/src/control-panel.tsx → examples/deckgl-heatmap/src/control-panel.tsx

@@ -15,11 +15,11 @@ function ControlPanel({
 }: Props) {
   return (
     <div className="control-panel">
-      <h3>Heatmap</h3>
+      <h3>deck.gl Heatmap</h3>
       <p>
-        This uses the <code>useMapsLibrary()</code> hook and the{' '}
-        <code>google.maps.visualization</code> library to show earthquake
-        magnitude data in a heatmap.
+        This uses deck.gl&apos;s <code>HeatmapLayer</code> with a{' '}
+        <code>GoogleMapsOverlay</code> to show earthquake magnitude data on top
+        of the map.
       </p>
 
       {/* Circle Controls */}
@@ -60,13 +60,13 @@ function ControlPanel({
 
       <div className="links">
         <a
-          href="https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/heatmap"
+          href="https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/deckgl-heatmap"
           target="_new">
           Try on CodeSandbox ↗
         </a>
 
         <a
-          href="https://github.com/visgl/react-google-maps/tree/main/examples/heatmap"
+          href="https://github.com/visgl/react-google-maps/tree/main/examples/deckgl-heatmap"
           target="_new">
           View Code ↗
         </a>

examples/deckgl-heatmap/src/deckgl-heatmap.tsx

@@ -0,0 +1,35 @@
+import React, {useMemo} from 'react';
+
+import {HeatmapLayer} from '@deck.gl/aggregation-layers';
+
+import {DeckGlOverlay} from './deckgl-overlay';
+import {EarthquakesGeojson} from './earthquakes';
+
+type HeatmapProps = {
+  geojson: EarthquakesGeojson;
+  radius: number;
+  opacity: number;
+};
+
+type EarthquakeFeature = EarthquakesGeojson['features'][number];
+
+const DeckGlHeatmap = ({geojson, radius, opacity}: HeatmapProps) => {
+  const layers = useMemo(
+    () => [
+      new HeatmapLayer({
+        id: 'earthquake-heatmap',
+        data: geojson.features,
+        radiusPixels: radius,
+        opacity,
+        getPosition: (feature: EarthquakeFeature) =>
+          feature.geometry.coordinates,
+        getWeight: (feature: EarthquakeFeature) => feature.properties?.mag ?? 0
+      })
+    ],
+    [geojson, opacity, radius]
+  );
+
+  return <DeckGlOverlay layers={layers} />;
+};
+
+export default DeckGlHeatmap;

examples/deckgl-heatmap/src/deckgl-overlay.ts

@@ -0,0 +1,25 @@
+import {useMap} from '@vis.gl/react-google-maps';
+import {useEffect, useMemo} from 'react';
+
+import {GoogleMapsOverlay} from '@deck.gl/google-maps';
+
+import type {LayersList} from '@deck.gl/core';
+
+export type DeckGlOverlayProps = {layers?: LayersList};
+
+export const DeckGlOverlay = ({layers}: DeckGlOverlayProps) => {
+  const deck = useMemo(() => new GoogleMapsOverlay({interleaved: true}), []);
+
+  const map = useMap();
+  useEffect(() => {
+    deck.setMap(map);
+
+    return () => deck.setMap(null);
+  }, [deck, map]);
+
+  useEffect(() => {
+    deck.setProps({layers});
+  }, [deck, layers]);
+
+  return null;
+};

examples/deckgl-overlay/package.json

@@ -1,10 +1,10 @@
 {
   "type": "module",
   "dependencies": {
-    "@deck.gl/google-maps": "^9.1.0",
+    "@deck.gl/google-maps": "9.3.3",
     "@types/geojson": "^7946.0.14",
     "@vis.gl/react-google-maps": "latest",
-    "deck.gl": "^9.1.0",
+    "deck.gl": "9.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0"

website/src/examples-sidebar.js

@@ -20,13 +20,13 @@ const sidebars = {
         'marker-clustering',
         'custom-marker-clustering',
         'geometry',
-        'heatmap',
         'drawing',
         'terra-draw',
         'autocomplete',
         'directions',
         'routes-api',
         'deckgl-overlay',
+        'deckgl-heatmap',
         'map-3d',
         'map-3d-markers',
         'extended-component-library',

website/src/examples/deckgl-heatmap.mdx

@@ -0,0 +1,5 @@
+# Deck.gl Heatmap
+
+import App from 'website-examples/deckgl-heatmap/src/app';
+
+<App />