build(deps): update App.js, src/components/LeafLet/index.js, src/components/TestComponentNew/index.js and yarn.lock

src/App.js

@@ -139,8 +139,7 @@ function App() {
         {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}
-        <LeafLet />
+        {/* <LeafLet /> */}
-
         {/* *************************************************** mini components ***************************************************  */}
         {/* <Button /> */}
         {/* <ButtonDesign /> */}
@@ -171,7 +170,6 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
-
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">
@@ -179,9 +177,7 @@ function App() {
             <FooterDesign1 />
           </span>
         </div> */}
-
         {/* <Digikala /> */}
-
         <TestComponentNew />
       </div>
     </Provider>

src/components/LeafLet/index.js

@@ -1,95 +1,27 @@
-import React, { useState } from "react";
+import React from "react";
 
-import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
-import { EditControl } from "leaflet-draw";
-// import osm from "./osm-providers";
-import { useRef } from "react";
 
-const LeafLet = () => {
+const position = [51.505, -0.09];
-  const [center, setCenter] = useState({ lat: 24.4539, lng: 54.3773 });
-  const [mapLayers, setMapLayers] = useState([]);
 
-  const ZOOM_LEVEL = 12;
+const index = () => {
-  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 (
-    <>
+    <MapContainer
-      {" "}
+      center={position}
-      <div className="row">
+      zoom={13}
-        <div className="col text-center">
+      style={{ width: "100%", height: "100vh" }}
-          <h2>React-leaflet - Create, edit and delete polygon on map</h2>
+    >
-
+      <TileLayer
-          <div className="col">
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-            <MapContainer center={center} zoom={ZOOM_LEVEL} ref={mapRef}>
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-              <FeatureGroup>
+      />
-                <EditControl
+      <Marker position={position}>
-                  position="topright"
+        <Popup>
-                  onCreated={_onCreate}
+          A pretty CSS3 popup. <br /> Easily customizable.
-                  onEdited={_onEdited}
+        </Popup>
-                  onDeleted={_onDeleted}
+      </Marker>
-                  draw={{
+    </MapContainer>
-                    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;
+export default index;

src/components/TestComponentNew/index.js

@@ -1,40 +1,53 @@
 import React, { useState } from "react";
+import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-draw/dist/leaflet.draw.css";
+import { EditControl } from "react-leaflet-draw";
+import "leaflet-draw";
 
-import "./index.scss";
+const TestComponentNew = () => {
+  const [editableFG, setEditableFG] = useState(null);
 
-import {
+  const onCreated = (e) => {
-  MapContainer,
+    console.log(e);
-  TileLayer,
+    console.log(editableFG);
-  Marker,
-  Popup,
-  FeatureGroup,
-} from "react-leaflet";
-import { EditControl } from "leaflet-draw";
 
-// import { EditControl } from "react-leaflet-draw";
+    const drawnItems = editableFG.leafletElement._layers;
+    console.log(drawnItems);
+    if (Object.keys(drawnItems).length > 1) {
+      Object.keys(drawnItems).forEach((layerid, index) => {
+        if (index > 0) return;
+        const layer = drawnItems[layerid];
+        editableFG.leafletElement.removeLayer(layer);
+      });
+      console.log(drawnItems);
+    }
+  };
 
-const position = [51.505, -0.09];
+  const onFeatureGroupReady = (reactFGref) => {
+    // store the ref for future access to content
+    setEditableFG(reactFGref);
+  };
 
-// و لینک سی دی ان  اضافه کردم index.htmlیک نکته خیلی خیلی مهم برای اینکه کار کنه رفتم در فایل
-function TestComponentNew({}) {
   return (
     <MapContainer
-      center={position}
+      center={[37.8189, -122.4786]}
-      zoom={20}
+      zoom={13}
-      style={{ width: "100%", height: "100vh" }}
+      style={{ height: "100vh" }}
     >
-      {/* <EditControl /> */}
       <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
       />
-      <Marker position={position}>
+      <FeatureGroup
-        <Popup>
+        ref={(featureGroupRef) => {
-          A pretty CSS3 popup. <br /> Easily customizable.
+          onFeatureGroupReady(featureGroupRef);
-        </Popup>
+        }}
-      </Marker>
+      >
+        <EditControl position="topright" onCreated={onCreated} />
+      </FeatureGroup>
     </MapContainer>
   );
-}
+};
 
 export default TestComponentNew;