update src/components/LeafletMap/index.js and src/components/LeafletMap/index.scss

src/components/LeafletMap/index.js

@@ -39,15 +39,15 @@ const pinMB = L.icon({
   shadowAnchor: null,
 });
 
-const MyCustomMarker = L.icon({
+// const MyCustomMarker = L.icon({
-  iconUrl: placeholder,
+//   iconUrl: placeholder,
-  iconSize: [24, 41],
+//   iconSize: [24, 41],
-  iconAnchor: [0, 44],
+//   iconAnchor: [0, 44],
-  popupAnchor: [12, -40],
+//   popupAnchor: [12, -40],
-  shadowUrl: null,
+//   shadowUrl: null,
-  shadowSize: null,
+//   shadowSize: null,
-  shadowAnchor: null,
+//   shadowAnchor: null,
-});
+// });
 
 L.drawLocal = {
   draw: {
@@ -86,7 +86,7 @@ L.drawLocal = {
         },
       },
       marker: {
-        icon: MyCustomMarker,
+        icon: placeholder,
         tooltip: {
           start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
         },
@@ -156,32 +156,63 @@ L.drawLocal = {
     },
   },
 };
+const icon = (val, zoom) =>
+  L.divIcon({
+    className: "my-div-icon",
+    html: `<div 
+    style = 'transform: scale(${Math.pow(2, zoom - 23)})'
+    class='origin-top-left w-20 h-40 bg-white rounded text-center flex flex-col p-2 justify-between transition-all delay-200'>
+          <p class='h-4 rounded bg-gray-300'> </p>
+          <p>${val || 0}</p>
+          </div>`,
+  });
+function MyComponent({ setZoom }) {
+  const map = useMap();
 
-const outerBounds = [
+  return null;
+}
+const LeafletMap = () => {
+  // const map =
+  const [zoom, setZoom] = useState(22);
+  const outerBounds = [
     [50.505, -29.09],
     [52.505, 29.09],
-];
+  ];
 
-const LeafletMap = () => {
   const leafEl = useRef(null);
-
+  const mapRef = useRef(null);
-  const onCreated = (e) => {
+  const onCreated = () => {
-    const drawnItems = leafEl.current._layers;
+    console.log({ next, add });
-    console.log({ drawnItems });
+    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 (
+    <div style={{ direction: "ltr" }}>
       <MapContainer
+        whenCreated={(mapInstance) => {
+          mapInstance.on("zoomend", function () {
+            console.log(mapRef.current);
+            setZoom(mapRef.current._zoom);
+          });
+          mapRef.current = mapInstance;
+        }}
         center={[49.505, -2.09]}
-      zoom={24}
+        zoom={zoom}
         maxZoom={24}
+        minZoom={18}
         maxNativeZoom={22}
         style={{ height: "100vh" }}
         zoomControl={false}
         bounds={outerBounds}
       >
+        {/* <MyComponent setZoom={setZoom} /> */}
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
@@ -197,13 +228,45 @@ const LeafletMap = () => {
           maxNativeZoom={24}
           opacity={0.5}
         />
-      <Marker position={[49.505, -2.09]} icon={pinMB}>
+        <Marker icon={icon(50, zoom)} position={[49.505, -2.09]}>
+          {/* <Marker position={[49.505, -2.09]} icon={MyCustomMarker2()}> */}
           <Popup>{bedNumb}</Popup>
         </Marker>
         <FeatureGroup ref={leafEl}>
           <EditControl
+            draw={{
+              polyline: {
+                shapeOptions: {
+                  color: "#f357a1",
+                  weight: 1,
+                },
+              },
+              polygon: {
+                allowIntersection: false, // Restricts shapes to simple polygons
+                drawError: {
+                  color: "#e1e100", // Color the shape will turn when intersects
+                  message: "<strong>Oh snap!<strong> 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"
-          onCreated={onCreated}
+            count={next}
+            onCreated={(e) => {
+              console.log({ next, e });
+              onCreated(next);
+            }}
             allowIntersection={false}
           />
         </FeatureGroup>
@@ -211,6 +274,7 @@ const LeafletMap = () => {
         <ScaleControl position="topleft" />
         <ZoomControl position="topleft" />
       </MapContainer>
+    </div>
   );
 };
 

src/components/LeafletMap/index.scss

@@ -30,13 +30,13 @@ li {
   display: none !important;
 }
 
-.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
+// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
-  display: none !important;
+//   display: none !important;
-}
+// }
 
-.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
+// .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
-  display: none !important;
+//   display: none !important;
-}
+// }
 
 .leaflet-right .leaflet-draw-actions li:first-child a {
   border-radius: 0px !important;