React Mapbox layer not showing

Question

I'm trying to use React Mapbox but I'm facing some problems with using the Layer component.

I'm trying to follow this demo: https://github.com/alex3165/react-mapbox-gl/blob/master/example/src/demos/heatmap.tsx

Or even the "quick start" demo from the main page: https://github.com/alex3165/react-mapbox-gl

And my map is showing but the layer is doesn't! Here's my code:

import React, { useState } from "react";
import ReactMapboxGl, { Layer, Feature, ZoomControl, Marker } from "react-mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
const data = require("./heatmapData.json");

function LiveMap(props) {

  const Map = ReactMapboxGl({
    accessToken: "pk.ey",
  });

  const heatmapPaint = {
    "heatmap-weight": {
      property: "priceIndicator",
      type: "exponential",
      stops: [
        [0, 0],
        [5, 2],
      ],
    },
    // Increase the heatmap color weight weight by zoom level
    // heatmap-ntensity is a multiplier on top of heatmap-weight
    "heatmap-intensity": {
      stops: [
        [0, 0],
        [5, 1.2],
      ],
    },
    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
    // Begin color ramp at 0-stop with a 0-transparancy color
    // to create a blur-like effect.
    "heatmap-color": [
      "interpolate",
      ["linear"],
      ["heatmap-density"],
      0,
      "rgba(33,102,172,0)",
      0.25,
      "rgb(103,169,207)",
      0.5,
      "rgb(209,229,240)",
      0.8,
      "rgb(253,219,199)",
      1,
      "rgb(239,138,98)",
      2,
      "rgb(178,24,43)",
    ],
    // Adjust the heatmap radius by zoom level
    "heatmap-radius": {
      stops: [
        [0, 1],
        [5, 50],
      ],
    },
  };

  return (
    <section>
      {/* block */}
      <div className="p-5 rounded-lg">
        {/* map */}
        <Map
          className="h-half rounded-lg shadow-lg z-0"
          style="mapbox://styles/mapbox/streets-v9"
          center={[-0.481747846041145, 51.3233379650232]}
        >
          <ZoomControl />
          <Layer type="heatmap" paint={heatmapPaint}>
            {data.map((el, index) => (
              <Feature key={index} coordinates={el.latlng} properties={el} />
            ))}
          </Layer>

          <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
            <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
          </Layer>
        </Map>
      </div>
    </section>
  );
}

export default LiveMap;

I can't understand why my heatmap or my symbol is not showing on the map. What I'm doing wrong?

Answer 1

Ok, so after some more research I found that the problem is in the last version of react-mapbox-gl (5.0.0). Installing [email protected] finally displayed my Layers and everything works fine. I don't know what is the problem in version 5.0.0. Hope they will fix this soon.

Answer 2

Same happened to me, this issue also applies to Zoom Control and markers. react-mapbox-gl version 5.0.0 has issues to solve yet.