How to do Heatmap on custom Image using React-leaflet

Before Directly jumping into coding, let’s get some basic idea of what we use in the development

Leaflet — Leaflet is one of the popular JavaScript libraries used for interactive web and it is a Mobile-friendly mapping library

Heatmap — Heatmap is a graphical representation of two-dimensional data using colors. It widely used to do analytics for websites, population maps, etc.

Heatmap on the custom image is used for Mainly used for projects related to the indoor environment mapping, computer games, and manufacturing bays.

Kicking It Off 🎬

Let’s create a React application, Let’s do that by typing the following command on the command prompt

create-react-app react_leaflet_heatmap_on_custom_image

Before getting started let’s do a small clean up in the src folder by deleting the following files

1. App.test.js
2. Index.css
3. Logo.svg

And remove the import of index.css from index.js

Then, change the content of App.js to the following:

// /src/App.js
import React from "react";
import "./App.css";
const App = () => {
return <div>let's do it </div>;
};
export default App;

Type npm start in the command line and you can see now our React application is up and running.

Now we can start working on implementing Heatmap on custom Image.

Let’s install some dependencies that we will be using, type this into the command line.

npm i leaflet
npm i react-leaflet
npm i react-leaflet-heatmap-layer

Create an asset/ image folder inside the src and place the map image inside it

src
    |_Assets
       |_Images
           |_gtaMap.png

Now it’s time for us to write some code.

Import the Installed packages in the App.js

By now Your App.js should look like this

import React from "react";
import L from "leaflet";
import { Map, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";
const App = () => {
return <div>let's do it </div>;
};
export default App;

Inside our component let’s create a Map component with CRS, bounds, zoom as props.

CRS — coordinate reference system

For custom maps, the value of CRS should be L.CRS.Simple

bounds — coordinates of map position [ x and y]

For custom maps, you can choose any values, but not 0 for both values, You can use

var bounds = [[100, 0],[0, 100]];

The first array value [100, 0] is for top-left position and the second value [0,100] is for bottom-right position

Zoom — Map zoom value

<Map
crs={L.CRS.Simple}
bounds={bounds}
zoom={0}>

our base layer map is set

Now let’s move to the custom image on Map

The leaflet has few API

The API we are going to use is Image-overlay

Get to know about the other API’s from the below link — https://leafletjs.com/reference-1.6.0.html

Image overlay will take URL and bounds as props

URL — image URL

bounds — position of the image on the map

Now your function should look like this

var bounds = [[100, 0],[0, 100]];
const App = () => {
return (
<div>
<Map
crs={L.CRS.Simple}
bounds={bounds}
zoom={0}
>
<ImageOverlay
 url={require("./Assets/Images/gtaMap.png")}
bounds={[[100, 0],[0, 125],]}
/>
</Map>
</div>
);
};

For ImageOverlay bounds, values need to give based on the top-left position [100,0] and bottom left values [0,125]

In App.css

.leaflet-container {
height: 90vh;
width: 100%;
background: white;
}

Before diving into Heatmap visualization let’s create some fake data

create a new file in Data.js and add these lines

export const dataPoints = [];
for (let i = 0; i < 300; i++) {
let data = {
coordinates: [Math.ceil(Math.random() * 30), Math.ceil(Math.random() * 30)],
};
dataPoints.push(data);
}

Now it’s time for us to import the plugin for Heatmap visualization and the Data.js in App.js

import HeatmapLayer from "react-leaflet-heatmap-layer";
import { dataPoints } from "./Data.js";

The leaflet comes with serval plugins

To know more the leaflet plugins visit the below link — https://leafletjs.com/plugins.html

Now just before the ImageOverlay let’s add HeatmapLayer

<HeatmapLayer
points={dataPoints}
longitudeExtractor={(m) => m.coordinates[0]}
latitudeExtractor={(m) => m.coordinates[1]}
intensityExtractor={(m) => 100}
/>

Coordinates in CRS.Simple take the form of [y, x] instead of [x, y], in the same way, Leaflet uses [lat, lng] instead of [lng, lat].

Bravo, You have done Heatmap on a custom image in react using leaflet 💪.

Working demo

Source code