Heatmap using the react-google-maps library?

[queensk]

How can I create a heatmap using the react-google-maps library?

[usefulthink]

You can use either google.maps.visualization.HeatmapLayer or the HeatmapLayer from deck.gl for this.

(note that I'm writing the sample code below off the top of my head and untested)

In the former case, this would look roughly like this:

import React, { useMemo, useEffect } from "react";
import { Map, useMap, useMapsLibrary } from "@vis.gl/react-google-maps";

type HeatmapProps = {
  data: Array<google.maps.LatLng | google.maps.visualization.WeightedLocation>;
};

/**
 * The <Heatmap> component renders a heatmap from data specified as a list of
 * google.maps.LatLng or google.maps.visualization.WeightedLocation objects.
 */
const Heatmap = ({ data }: HeatmapProps) => {
  const map = useMap();
  const visualizationLib = useMapsLibrary("visualization");

  // create heatmap once the visualization-library is loaded
  const heatmap = useMemo(() => {
    if (!visualizationLib) return null;

    return new visualizationLib.HeatmapLayer({
      radius: 10,
      opacity: 0.6,
    });
  }, [visualizationLib]);

  // assign heatmap to map when heatmap is created
  useEffect(() => {
    if (!heatmap) return;

    heatmap.setMap(map);

    return () => heatmap.setMap(null);
  }, [heatmap, map]);

  // set and update data
  useEffect(() => {
    if (!heatmap) return;

    heatmap.setData(data);
  }, [heatmap, data]);

  return null;
};

const MapWithHeatmap = ({ mapProps, heatmapData }) => {
  return (
    <Map {...mapProps}>
      <Heatmap data={heatmapData} />
    </Map>
  );
};

And for deck.gl, you can use the DeckGlOverlay component from here and add the heatmap-layer like this:

import React, { useMemo } from "react";
import { Map } from "@vis.gl/react-google-maps";
import { HeatmapLayer } from "@deck.gl/aggregation-layers";

import { DeckGlOverlay } from "./deckgl-overlay";

export const MapWithHeatmap = ({ mapProps, heatmapData }) => {
  const heatmapLayer = useMemo(
    () =>
      new HeatmapLayer({
        data,
        aggregation: "SUM",
        getPosition: (d) => [d.lng, d.lat],
      }),
    [heatmapData]
  );
  return (
    <Map {...mapProps}>
      <DeckGlOverlay layers={[heatmapLayer]} />
    </Map>
  );
};

The main differences:

• The google maps approach doesn't need any extra bundled libraries and should be easier to understand if you're not already familiar with deck.gl. Downside is that you are very limited in how the data has to be provided (it's less memory and time-efficient in that regard)
• The deck.gl version has a far greater flexibility in terms of styling (you can also easily switch to other types of visualization) and allows you to provide the data in the most efficient format you have. But it's another library you'll have to learn and bundle with your application.

If you ask me: you're already at the point of needing to render a heatmap, so it would make sense to invest that bit of time to learn how to do that with deck.gl, since that will allow you to do so much more with your data in the future.

[queensk]

@usefulthink I tested the code, but the heatmap doesn't appear on the map.

import React, { useEffect, useMemo, useState } from "react";
import {
  APIProvider,
  Map,
  Marker,
  useMap,
  useMapsLibrary,
} from "@vis.gl/react-google-maps";
const ApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;

const HeatmapWithMap = ({ data }) => {
  const map = useMap();
  const visualization = useMapsLibrary("visualization");

  const heatmap = useMemo(() => {
    if (!map || !visualization) return null;

    return new google.maps.visualization.HeatmapLayer({
      data,
      map,
      radius: 10,
      opacity: 0.6,
    });
  }, [map, visualization, data]);

  useEffect(() => {
    if (heatmap) {
      heatmap.setMap(map);
    }
  }, [heatmap, map]);

  return null;
};

const MapComponent = () => {
  const [zoom, setZoom] = useState(7);
  const Coordinates = {
    lat: 0.06389,
    lng: 36.817223,
  };

  // Sample heatmap data
  const heatmapData = [
    new google.maps.LatLng(37.782, -122.447),
    new google.maps.LatLng(37.885, -122.645),
    new google.maps.LatLng(37.985, -122.445),
  ];

  const handleZoomChange = (newZoom) => {
    setZoom(newZoom);
  };

  return (
    <div style={{ height: "90vh", width: "100%" }}>
      <APIProvider apiKey={ApiKey}>
        <Map zoom={zoom} center={Coordinates} onZoomChanged={handleZoomChange}>
          {/* Add other markers or components here */}
          <HeatmapWithMap data={heatmapData} />
        </Map>
      </APIProvider>
    </div>
  );
};

export default MapComponent;

[usefulthink]

I think the main problem could be that the google.maps.LatLng class is not yet loaded when the MapComponent is first rendered

[usefulthink]

Have a look here, it was almost there: https://codesandbox.io/p/devbox/adoring-stonebraker-vts4z9?file=%2Fsrc%2Fapp.tsx%3A47%2C1

What I did is storing the data in google.maps.LatLngLiteral format, and only convert that to google.maps.LatLng when passing it into the HeatmapLayer (at that point we can be sure that google.maps.LatLng is defined)

[usefulthink]

here's the Heatmap component for reference

const Heatmap = ({ data }) => {
  const map = useMap();
  const visualization = useMapsLibrary("visualization");

  const heatmap = useMemo(() => {
    if (!visualization) return null;

    return new google.maps.visualization.HeatmapLayer({
      radius: 10,
      opacity: 0.6,
    });
  }, [visualization]);

  useEffect(() => {
    if (!heatmap) return;

    heatmap.setData(data.map((p) => new google.maps.LatLng(p.lat, p.lng)));
  }, [heatmap, data]);

  useEffect(() => {
    if (!heatmap) return;

    heatmap.setMap(map);
  }, [heatmap, map]);

  return null;
};