Easiest Way to Implement Heatmaps in your React applications

roopantj — Sun, 26 Dec 2021 19:39:38 +0000

To implement Heatmaps visualization in react apps, we need

Google Maps API key
google-map-react package

To get Google Maps API key, visit this page and follow the instructions.

As mentioned above, we use google-map-react package.
You can install it by running,

npm i google-map-react

To get more info about this package, visit --><--

Now lets create a Heatmaps.js component.
Heatmaps.js

const Heatmaps = () => {
  return (
    <GoogleMapReact
      bootstrapURLKeys={{ key: YOUR_API_KEY }}
      defaultCenter={{ lat: DEFAULT_LAT, lng: DEFAULT_LNG }}
      defaultZoom={4}
      heatmap={{ positions: LIST_OF_POINTS, options: {} }}
      heatmapLibrary={true}
    ></GoogleMapReact>
  );
};

Pass the coordinates data in heatmap props and don't forget to set heatmapLibrary props true.

The LIST_OF_POINTS passed to positions[in heatmap prop] is an array of coordinates. Export coordinates array by creating a new file HeatmapPoints.js.
HeatmapPoints.js

export const LIST_OF_POINTS = [
  {
    lat: 9.9256235,
    lng: 78.1177802,
  },
  {
    lat: 9.920991599999999,
    lng: 78.1118825,
  },
  {
    lat: 9.9206833,
    lng: 78.1123521,
  },
  //Add as many coordinates you want.
]

Note
Make sure the container element of Heatmaps components has width and height. The map will fill the parent container, but if the container has no size, it will be collapsed.

Hope you find this useful!

DEV Community: roopantj

Easiest Way to Implement Heatmaps in your React applications