DEV Community

Cover image for Easiest Way to Implement Heatmaps in your React applications
roopantj
roopantj

Posted on

Easiest Way to Implement Heatmaps in your React applications

To implement Heatmaps visualization in react apps, we need

  1. Google Maps API key
  2. 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
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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.
]
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)