diff --git a/src/components/LeafletMap/index.js b/src/components/LeafletMap/index.js
index 1484310..fb3fd9d 100644
--- a/src/components/LeafletMap/index.js
+++ b/src/components/LeafletMap/index.js
@@ -39,15 +39,15 @@ const pinMB = L.icon({
   shadowAnchor: null,
 });
 
-const MyCustomMarker = L.icon({
-  iconUrl: placeholder,
-  iconSize: [24, 41],
-  iconAnchor: [0, 44],
-  popupAnchor: [12, -40],
-  shadowUrl: null,
-  shadowSize: null,
-  shadowAnchor: null,
-});
+// const MyCustomMarker = L.icon({
+//   iconUrl: placeholder,
+//   iconSize: [24, 41],
+//   iconAnchor: [0, 44],
+//   popupAnchor: [12, -40],
+//   shadowUrl: null,
+//   shadowSize: null,
+//   shadowAnchor: null,
+// });
 
 L.drawLocal = {
   draw: {
@@ -86,7 +86,7 @@ L.drawLocal = {
         },
       },
       marker: {
-        icon: MyCustomMarker,
+        icon: placeholder,
         tooltip: {
           start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
         },
@@ -156,61 +156,125 @@ L.drawLocal = {
     },
   },
 };
+const icon = (val, zoom) =>
+  L.divIcon({
+    className: "my-div-icon",
+    html: `
`,
+  });
+function MyComponent({ setZoom }) {
+  const map = useMap();
 
-const outerBounds = [
-  [50.505, -29.09],
-  [52.505, 29.09],
-];
-
+  return null;
+}
 const LeafletMap = () => {
-  const leafEl = useRef(null);
+  // const map =
+  const [zoom, setZoom] = useState(22);
+  const outerBounds = [
+    [50.505, -29.09],
+    [52.505, 29.09],
+  ];
 
-  const onCreated = (e) => {
-    const drawnItems = leafEl.current._layers;
-    console.log({ drawnItems });
+  const leafEl = useRef(null);
+  const mapRef = useRef(null);
+  const onCreated = () => {
+    console.log({ next, add });
+    add(Math.floor(Math.random() * 10));
+    // const drawnItems = leafEl.current._layers;
+    // console.log({ drawnItems });
   };
-
+  const [next, add] = useState(1);
   const location = [38.9072, -77.0369];
-
+  console.log({ mapRef });
+  if (mapRef.current) {
+    console.log(mapRef.current);
+  }
   return (
-    
-      
+       {
+          mapInstance.on("zoomend", function () {
+            console.log(mapRef.current);
+            setZoom(mapRef.current._zoom);
+          });
+          mapRef.current = mapInstance;
+        }}
+        center={[49.505, -2.09]}
+        zoom={zoom}
         maxZoom={24}
+        minZoom={18}
         maxNativeZoom={22}
-        opacity={0.8}
-      />
-      
-      
-        {bedNumb}
-      
-      
-        
+        {/*  */}
+        
+        
-      
-      
-      
-      
-    
+        
+          {/*  */}
+          {bedNumb}
+        
+        
+          Oh snap! you can't draw that!", // Message that will show when intersect
+                },
+                shapeOptions: {
+                  color: "#bada55",
+                },
+              },
+              circle: false, // Turns off this drawing tool
+              rectangle: {
+                shapeOptions: {
+                  clickable: false,
+                },
+              },
+              marker: {
+                icon: icon(next, zoom),
+              },
+            }}
+            position="topright"
+            count={next}
+            onCreated={(e) => {
+              console.log({ next, e });
+              onCreated(next);
+            }}
+            allowIntersection={false}
+          />
+        
+        
+        
+        
+      
+    
   );
 };
 
diff --git a/src/components/LeafletMap/index.scss b/src/components/LeafletMap/index.scss
index c59e54f..a616c67 100644
--- a/src/components/LeafletMap/index.scss
+++ b/src/components/LeafletMap/index.scss
@@ -30,13 +30,13 @@ li {
   display: none !important;
 }
 
-.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
-  display: none !important;
-}
+// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
+//   display: none !important;
+// }
 
-.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
-  display: none !important;
-}
+// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
+//   display: none !important;
+// }
 
 .leaflet-right .leaflet-draw-actions li:first-child a {
   border-radius: 0px !important;