---
title: "Map in React JS create a heatmap | React | JavaScript maps SDK"
description: "Create heatmap visualizations in React JS maps using MapTiler."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Map in React JS create a heatmap

## Maps in React series

In this series, we will learn how to create a map app in React with popups, a visualization switcher, geocoding control, 3D terrain, and a sidebar.

-   Episode 0: [Map in React JS with Material UI](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/)
-   Episode 1: [Map in React JS point data from geojson data](https://docs.maptiler.com/react/sdk-js/geojson-points/)
-   **Episode 2: Map in React JS create a heatmap**
-   Episode 3: [Map in React js with popup and sidebar](https://docs.maptiler.com/react/sdk-js/popup-sidebar/)
-   Episode 4: [Map in React js with geocoding control](https://docs.maptiler.com/react/sdk-js/geocoding-control/)
-   Episode 5: [3D Map in React js with geocoding control](https://docs.maptiler.com/react/sdk-js/3d-map/)

This example is the **Episode 2** of the Maps in React series. In this step-by-step tutorial, you’ll learn how to create a heatmap in your React JS map using the MapTiler SDK JS [heatmap helper](https://docs.maptiler.com/sdk-js/api/helpers/#heatmap).

In this example, I’ll show you how to create a heatmap visualization of a point dataset and how to switch between this and the points.

By the end of this tutorial, you will be able to create a heatmap. With your newfound knowledge, you will be able to create visually stunning maps with React + Heatmap + MapTiler SDK. Take a look at the final output of this tutorial below:

1.  This tutorial builds on [Map in React JS point data from geojson data](https://docs.maptiler.com/react/sdk-js/geojson-points/) code. (That tutorial shows how to build a simple full-screen map application with hundreds of points.) Heatmap is a visualization method that shows the spatial density of point data based on attribute weight or simply by spatial distribution.
    
2.  Create a new layer with the heatmap helper. Open the `/src/components/Map/map.jsx` file and add the highlighted lines:
    
    ```jsx
    map.current.on("load", () => {
       maptilersdk.helpers.addPoint(map.current, {
         data: geodata,
         pointColor: maptilersdk.ColorRampCollection.COOL.scale(0, 30).reverse(),
         property: "minimum_nights",
         pointOpacity: 0.5,
         showLabel: true,
         labelColor: "black",
         pointRadius: 12,
       });
    
       maptilersdk.helpers.addHeatmap(map.current, {
         data: geodata,
       });
     });
    ```
    
3.  When use the heatmap visualization on the accommodation dataset for Hawaii, it shows that most of the accommodation is concentrated around the coast. It does this clearly without crowding the map with overlapping points.
    
    ![React JS heatmap](https://docs.maptiler.com/react/sdk-js/heatmap/heatmap.webp)
    
4.  Create a heatmap of accommodation based on the minimum nights’ stay attribute. We can do this by setting up property and weight. In this example, we will exclude accommodation that can only be rented for more than 30 days.
    
    ```jsx
    maptilersdk.helpers.addHeatmap(map.current, {
       data: geodata,
       property: "minimum_nights",
       weight: [
         { propertyValue: 1, value: 1 },
         { propertyValue: 30, value: 0 },
       ],
     });
    ```
    
5.  Refresh the page and see that some points are now not being included in the calculations for the heatmap. But all the points have the same radius.
    
    ![React JS heatmap weight by property](https://docs.maptiler.com/react/sdk-js/heatmap/heatmap_weight.webp)
    
6.  We will make the radius of the heatmap points also determined by a value of the property defined above.
    
    ```jsx
    maptilersdk.helpers.addHeatmap(map.current, {
       data: geodata,
       property: "minimum_nights",
       weight: [
         { propertyValue: 1, value: 1 },
         { propertyValue: 30, value: 0 },
       ],
       radius: [
         { propertyValue: 1, value: 60 },
         { propertyValue: 30, value: 0 },
       ],
     });
    ```
    
7.  **Optional**. If you would like to play with heatmap opacity or styling across zoom levels, look at the [heatmap helper documentation](https://docs.maptiler.com/sdk-js/api/helpers/#heatmap).
    
8.  Let’s create the visualization switcher. This will allow users to turn the heatmap back into points, letting them zoom in and identify individual locations.
    
9.  Import the Material UI `Button` component.
    
    ```jsx
    import { Button } from "@mui/material";
     import Box from "@mui/material/Box";
    ```
    
10.  Create a button. We will use Material UI to style it.
     
     ```jsx
     return (
        <Box sx={{ display: "flex" }}>
          <Navbar />
          <div className="container">
            <div ref={mapContainer} id="map" className="map" />
            <Button 
              variant="contained"
              className="btn"
              sx={{ top: 20, left: 10 }}
              onClick={handleVisualizationChange}
            >
              Change to {selectedMapLayer === "point" ? "heatmap" : "point"}
            </Button>
          </div>
        </Box>
      );
     ```
     
11.  In the `handleVisualizationChange` function, we want to change the selected layer.
     
     ```jsx
     const handleVisualizationChange = () => {
        setSelectedMapLayer((prev) => (prev === "point" ? "heatmap" : "point"));
      };
     ```
     
12.  Create `selectedMapLayer` state to show the selected layer.
     
     ```jsx
     maptilersdk.config.apiKey = configData.MAPTILER_API_KEY;
      const [selectedMapLayer, setSelectedMapLayer] = useState("point"); // 'point' or 'heatmap'
     ```
     
13.  In order to switch between visualizations, we need to be able to make layers created by the MapTilerSDK helpers visible or invisible. This means we’ll need to know the ID of each layer. Check out the [MapTiler SDK helpers](https://docs.maptiler.com/sdk-js/api/helpers/) documentation to learn how to get the IDs of each layers.
     
14.  We will use states to prevent errors caused by setting the visibility of a nonexistent layer.
     
     ```jsx
     maptilersdk.config.apiKey = configData.MAPTILER_API_KEY;
      const [heatmapLayer, setHeatmapLayer] = useState("");
      const [pointLayer, setPointLayer] = useState("");
      const [pointLabels, setPointLabels] = useState("");
      const [selectedMapLayer, setSelectedMapLayer] = useState("point"); // 'point' or 'heatmap'
      const [mapLoaded, setMapLoaded] = useState(false);
     ```
     
15.  Now let’s set the IDs of individual layers.
     
     ```jsx
     map.current.on("load", () => {
        const { pointLayerId, labelLayerId } = maptilersdk.helpers.addPoint(map.current, {
          data: geodata,
          pointColor: maptilersdk.ColorRampCollection.COOL.scale(0, 30).reverse(),
          property: "minimum_nights",
          pointOpacity: 0.5,
          showLabel: true,
          labelColor: "black",
          pointRadius: 12,
        });
     
        const { heatmapLayerId } = maptilersdk.helpers.addHeatmap(map.current, {
          data: geodata,
          property: "minimum_nights",
          weight: [
            { propertyValue: 1, value: 1 },
            { propertyValue: 30, value: 0 },
          ],
          radius: [
            { propertyValue: 1, value: 60 },
            { propertyValue: 30, value: 0 },
          ],
        });
        setHeatmapLayer(heatmapLayerId);
        setPointLabels(labelLayerId);
        setPointLayer(pointLayerId);
        setMapLoaded(true);
      });
     ```
     
16.  Change layers visibility only after the map is loaded. `setLayoutProperties` has 3 arguments `layerId`, `name`, and `value`. If the layer is selected, then the visibility should be set to `visible` otherwise it should be `none`.
     
     ```jsx
     useEffect(() => {
        if (heatmapLayer && mapLoaded) {
          map.current.setLayoutProperty(
            heatmapLayer,
            "visibility",
            selectedMapLayer === "heatmap" ? "visible" : "none",
          );
        }
      }, [heatmapLayer, selectedMapLayer, mapLoaded]);
     
      useEffect(() => {
        if (pointLayer && mapLoaded) {
          map.current.setLayoutProperty(
            pointLayer,
            "visibility",
            selectedMapLayer === "point" ? "visible" : "none",
          );
          map.current.setLayoutProperty(
            pointLabels,
            "visibility",
            selectedMapLayer === "point" ? "visible" : "none",
          );
        }
      }, [pointLayer, selectedMapLayer, mapLoaded]);
     ```
     
17.  Congratulations! You have created a heatmap, and added a button to your application to switch between displaying the point layer or the heatmap.
     
     ![Display heatmap and GeoJSON point map using React JS with Material UI](https://docs.maptiler.com/react/sdk-js/heatmap/final_map.webp)
     

## Full code to download

We have created a repository with the result of this tutorial that will serve as a basis to build future applications. You can access the repository at ![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg)[Maps in React](https://github.com/maptiler/maps-in-react/tree/E2-heatmap).

## Next episode

Continue to [Episode 3: Map in React js with popup and sidebar](https://docs.maptiler.com/react/sdk-js/popup-sidebar/) to learn how to create a map with a sidebar and popup in your React JS map using the MapTiler SDK JS.

## Related examples

### [Learn the basics - React](https://docs.maptiler.com/react/)

Tutorials

Create React JS components for MapTiler SDK JS maps.

### [Geocoding component - React](https://docs.maptiler.com/react/sdk-js/geocoding-component/)

Tutorials

Search places using Geocoding control component in React JS.

### [Map with Material UI](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/)

Tutorials

Create React JS maps with Material UI and MapTiler.

### [Points from geojson - React](https://docs.maptiler.com/react/sdk-js/geojson-points/)

Tutorials

Add GeoJSON points to React JS maps with MapTiler.

### [Popup and sidebar - React](https://docs.maptiler.com/react/sdk-js/popup-sidebar/)

Tutorials

Create popups and sidebars in React JS maps.

### [Geocoding control - React](https://docs.maptiler.com/react/sdk-js/geocoding-control/)

Tutorials

Add geocoding control to React JS maps using MapTiler.

### [3D Terrain Map](https://docs.maptiler.com/react/sdk-js/3d-map/)

Tutorials

Create 3D terrain maps with geocoding in React JS.