Is there a way to use leaflet.heat in react?

by
  • install leaflet.heat via npm : npm i leaflet.heat
  • import the library: import "leaflet.heat";
  • Create a map component and use an effect to load the map and instantiate L.heatLayer

Here is an example from the library’s github page written in React without react-leaflet components:

function Map() {
  useEffect(() => {
    var map = L.map("map").setView([-37.87, 175.475], 12);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const points = addressPoints
      ? addressPoints.map((p) => {
          return [p[0], p[1]];
        })
      : [];

    L.heatLayer(points).addTo(map);
  }, []);

  return <div id="map" style={{ height: "100vh" }}></div>;
}

Demo

More Related Contents:

  1. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  2. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  3. Data-toggle tab does not download Leaflet map
  4. What are these three dots in React doing?
  5. How can I communicate between related react components?
  6. When to use functional setState
  7. Reactjs async rendering of components
  8. Calling setState in a loop only updates state 1 time
  9. Leaflet drawing tiles disjointly
  10. How to make a shared state between two react components?
  11. React – Preventing Form Submission
  12. CSS pseudo elements in React
  13. React 18, useEffect is getting called two times on mount
  14. How to access custom attributes from event object in React?
  15. Is there any other way to implement a “listening” function without an infinite while loop?
  16. Where should functions in function components go?
  17. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  18. Error: How to serialize data from getStaticProps : Next.js
  19. When value is assigned to components state, why console.log prints the previous state?
  20. Why is my function being called twice in React?
  21. How to Set port in next.js
  22. How to namespace es6 classes (for React components)
  23. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  24. Update single value in item array | react redux
  25. How to include local javascript on a Gatsby page?
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. How to mock React component methods with jest and enzyme
  28. Deep nested array of objects not rendering
  29. create-react-app is showing all my code in production, how to hide it?
  30. Why would we use useEffect without a dependency array?

Leave a Comment