title: "TypeError: map.addLayer is not a function"
body: <p>I was copying code from this solution: <a href="https://stackoverflow.com/questions/63640081/is-there-a-way-to-use-leaflet-heat-in-react">Is there a way to use leaflet.heat in react?</a> and I'm getting an error</p>
  <pre><code>TypeError: map.addLayer is not a function
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Qcc0X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qcc0X.png" alt="enter image description here" /></a> <br>
  in the currentPosition function</p>
  <pre><code>export const currentPosition = atom({
    key: &quot;currentPosition&quot;,
    default: [-2.600, -11.01],
  });
  </code></pre>
  <p>in the getLocationCity function</p>
  <pre><code>export const getLocationCity = async (params) =&gt; {
    try {
      const body = DataCustom(params);
      const result = await instanceArcgis.post(
        &quot;/rest/HomeLocation/11/query&quot;,
        body,
      );
      return await result?.data;
    }catch (error) {
      console.log(error);
    }
  
  </code></pre>
  <p>I'm sure it's a var or placement order issue, but I tried various options and it still doesn't work. And it outputs results from the API but no Heatmap color comes out just 'Marker'
  <a href="https://i.stack.imgur.com/Wo3PG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wo3PG.png" alt="enter image description here" /></a> <br>
  Full JS code:</p>
  <pre><code>import React, { useEffect, useState, useRef } from &quot;react&quot;;
  import { GeoJSON } from &quot;react-leaflet&quot;;
  import { useRecoilValue, useSetRecoilState } from &quot;recoil&quot;;
  import HeatmapOverlay from &quot;leaflet-heatmap&quot;;
  import { arcgisToken } from &quot;../recoil&quot;;
  import { mapBounds, loadingMap } from &quot;../state&quot;;
  import { getLocationCity } from &quot;../data/arcgis&quot;;
  import &quot;leaflet.heat&quot;;
  
  export default function HSales() {
      const [data, setData] = useState();
      const setIsLoading = useSetRecoilState(loadingMap);
      const bounds = useRecoilValue(mapBounds);
      const tokenArcgis = useRecoilValue(arcgisToken);
      const geoJsonLayer = useRef(null);
  
      useEffect(() =&gt; {
          const fetchDataSpeedtestKel = () =&gt; {
              const body = {
                  returnGeometry: true,
                  rollbackOnFailure: true,
                  geometry: JSON.stringify({
                      xmin: bounds.west,
                      ymin: bounds.south,
                      xmax: bounds.east,
                      ymax: bounds.north,
                      spatialReference: { wkid: 4326 },
                  }),
                  geometryType: &quot;esriGeometryEnvelope&quot;,
                  token: tokenArcgis,
              };
  
              setIsLoading(true);
              getLocationCity(body)
                  .then((response) =&gt; {
                      const array = [];
                      response.features.forEach((element) =&gt; {
                          array.push({
                              type: &quot;Feature&quot;,
                              properties: element[&quot;attributes&quot;],
                              geometry: {
                                  type: &quot;Point&quot;,
                                  coordinates: [
                                      element[&quot;geometry&quot;][&quot;x&quot;],
                                      element[&quot;geometry&quot;][&quot;y&quot;],
                                  ],
                              },
                          });
                      });
  
                      const FeatureCollection = {
                          type: &quot;FeatureCollection&quot;,
                          features: array,
                      };
  
                      if (geoJsonLayer.current) {
                          geoJsonLayer.current.clearLayers().addData(FeatureCollection);
                      }
  
                      const points = response.features
                          ? response.features.map((element) =&gt; {
                              return [
                                  element[&quot;geometry&quot;][&quot;x&quot;],
                                  element[&quot;geometry&quot;][&quot;y&quot;]
                              ];
                          })
                          : [];
  
                      setData(FeatureCollection);
                      L.heatLayer(points).addTo(position);
                      setPosition(data);
                  })
                  .catch((err) =&gt; console.log(err))
                  .finally(() =&gt; setIsLoading(false));
          };
  
          fetchDataSpeedtestKel();
      }, [bounds, setIsLoading, tokenArcgis]);
  
      if (data) {
          return (
              &lt;&gt;
                  &lt;GeoJSON
                      ref={geoJsonLayer}
                      data={data}
                  /&gt;
              &lt;/&gt;
          );
      }
  }
  </code></pre>
  <p>Thank you so much! Jim</p>