CODEWITHSUNDEEP
reactjsleafletshapefilereact-leafletreact-leaflet-v4
Plipus Tel
Plipus Tel

Reputation: 755

Lastest Version of ReactJS and LeafLet.Shapefile Not Work, only display blank page

I'm currently working on ReactJS GIS and referring to this sample Demo. But when I update the latest version of React and dependencies is not work, no error message displayed on the console. What wrong. I've also test in my local computer, the result is same (not work) what happen?

The demo: enter image description here

After update the dependencies: enter image description here

Upvotes: 0

Views: 394

Answers (1)

kboul
kboul

Reputation: 14600

There are many things that have been changed:

  1. React has changed to 18.x. You should replace in index.js all the code

    import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <App />
);

  2. react-leaflet has moved to version 4.x which has breaking changes:

map ref is received via a ref and a useState hook and no need for map.current or map.current.leafletElement. Also Map comp has been renamed to MapContainer

 const [map, setMap] = useState(null);

  useEffect(() => {
    if (!map) return;

    map.setView([34.74161249883172, 18.6328125], 2);
  }, [map]);

<MapContainer
      center={position}
      zoom={13}
      style={{ height: "100vh" }}
      ref={setMap}
    >

  1. mapRef in MapContainer's child components is received via

    const map = useMap();

Demo

Upvotes: 2

Related Questions