update 7 files

package.json

@@ -19,6 +19,7 @@
     "axios": "^0.26.0",
     "date-fns": "^2.28.0",
     "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
     "react": "^18.0.0",
     "react-apexcharts": "^1.3.9",
     "react-beautiful-dnd": "^13.1.0",
@@ -27,6 +28,7 @@
     "react-indiana-drag-scroll": "^2.1.0",
     "react-input-range": "^1.3.0",
     "react-leaflet": "^3.2.5",
+    "react-leaflet-draw": "^0.19.8",
     "react-redux": "^7.2.6",
     "react-scripts": "5.0.0",
     "react-table": "^7.7.0",

public/index.html

@@ -9,8 +9,13 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <script src="http://leaflet-extras.github.com/leaflet.css/dist/leaflet.css.bundle.min.js"></script>
-
+    <!-- leafLet reactJs -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin=""
+    />
     <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

@@ -179,7 +179,7 @@ function App() {
 
         {/* <Digikala /> */}
 
-        {/* <TestComponentNew /> */}
+        <TestComponentNew />
       </div>
     </Provider>
   );

src/components/TestComponentNew/index.js

@@ -1,14 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 
 import "./index.scss";
 
-import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Popup,
+  FeatureGroup,
+} from "react-leaflet";
+import { EditControl } from "leaflet-draw";
+
+// import { EditControl } from "react-leaflet-draw";
 
 const position = [51.505, -0.09];
 
-function TestComponentNew() {
+// و لینک سی دی ان  اضافه کردم index.htmlیک نکته خیلی خیلی مهم برای اینکه کار کنه رفتم در فایل
+function TestComponentNew({}) {
   return (
-    <MapContainer center={position} zoom={13}>
+    <MapContainer
+      center={position}
+      zoom={20}
+      style={{ width: "100%", height: "100vh" }}
+    >
+      <EditControl />
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"