update public/index.html, App.js and src/components/TestComponentNew/index.js

public/index.html

@@ -16,6 +16,20 @@
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
       crossorigin=""
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.css"
+      integrity="sha512-vJfMKRRm4c4UupyPwGUZI8U651mSzbmmPgR3sdE3LcwBPsdGeARvUM5EcSTg34DK8YIRiIo+oJwNfZPMKEQyug=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
+      integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.js

@@ -84,6 +84,7 @@ import IconText from "./components/IconText";
 import CardDesign2 from "./components/CardDesign2";
 import ButtonDivTag from "./components/ButtonDivTag";
 import Button from "./components/Button";
+import LeafLet from "./components/LeafLet";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -138,6 +139,8 @@ function App() {
         {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}
+        <LeafLet />
+
         {/* *************************************************** mini components ***************************************************  */}
         {/* <Button /> */}
         {/* <ButtonDesign /> */}

src/components/LeafLet/index.js

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+
+import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";
+import { EditControl } from "leaflet-draw";
+// import osm from "./osm-providers";
+import { useRef } from "react";
+
+const LeafLet = () => {
+  const [center, setCenter] = useState({ lat: 24.4539, lng: 54.3773 });
+  const [mapLayers, setMapLayers] = useState([]);
+
+  const ZOOM_LEVEL = 12;
+  const mapRef = useRef();
+
+  const _onCreate = (e) => {
+    console.log(e);
+
+    const { layerType, layer } = e;
+    if (layerType === "polygon") {
+      const { _leaflet_id } = layer;
+
+      setMapLayers((layers) => [
+        ...layers,
+        { id: _leaflet_id, latlngs: layer.getLatLngs()[0] },
+      ]);
+    }
+  };
+
+  const _onEdited = (e) => {
+    console.log(e);
+    const {
+      layers: { _layers },
+    } = e;
+
+    Object.values(_layers).map(({ _leaflet_id, editing }) => {
+      setMapLayers((layers) =>
+        layers.map((l) =>
+          l.id === _leaflet_id
+            ? { ...l, latlngs: { ...editing.latlngs[0] } }
+            : l
+        )
+      );
+    });
+  };
+
+  const _onDeleted = (e) => {
+    console.log(e);
+    const {
+      layers: { _layers },
+    } = e;
+
+    Object.values(_layers).map(({ _leaflet_id }) => {
+      setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id));
+    });
+  };
+  return (
+    <>
+      {" "}
+      <div className="row">
+        <div className="col text-center">
+          <h2>React-leaflet - Create, edit and delete polygon on map</h2>
+
+          <div className="col">
+            <MapContainer center={center} zoom={ZOOM_LEVEL} ref={mapRef}>
+              <FeatureGroup>
+                <EditControl
+                  position="topright"
+                  onCreated={_onCreate}
+                  onEdited={_onEdited}
+                  onDeleted={_onDeleted}
+                  draw={{
+                    rectangle: false,
+                    polyline: false,
+                    circle: false,
+                    circlemarker: false,
+                    marker: false,
+                  }}
+                />
+              </FeatureGroup>
+
+              <TileLayer
+                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              />
+            </MapContainer>
+
+            <pre className="text-left">{JSON.stringify(mapLayers, 0, 2)}</pre>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LeafLet;

src/components/TestComponentNew/index.js

@@ -23,7 +23,7 @@ function TestComponentNew({}) {
       zoom={20}
       style={{ width: "100%", height: "100vh" }}
     >
-      <EditControl />
+      {/* <EditControl /> */}
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"