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,61 +156,125 @@ 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;
-  [50.505, -29.09],
+}
-  [52.505, 29.09],
-];
-
 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 leafEl = useRef(null);
-    const drawnItems = leafEl.current._layers;
+  const mapRef = useRef(null);
-    console.log({ drawnItems });
+  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 (
-    <MapContainer
+    <div style={{ direction: "ltr" }}>
-      center={[49.505, -2.09]}
+      <MapContainer
-      zoom={24}
+        whenCreated={(mapInstance) => {
-      maxZoom={24}
+          mapInstance.on("zoomend", function () {
-      maxNativeZoom={22}
+            console.log(mapRef.current);
-      style={{ height: "100vh" }}
+            setZoom(mapRef.current._zoom);
-      zoomControl={false}
+          });
-      bounds={outerBounds}
+          mapRef.current = mapInstance;
-    >
+        }}
-      <TileLayer
+        center={[49.505, -2.09]}
-        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        zoom={zoom}
-        url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
-        apikey="db5ae1f5778a448ca662554581f283c5"
         maxZoom={24}
+        minZoom={18}
         maxNativeZoom={22}
-        opacity={0.8}
+        style={{ height: "100vh" }}
-      />
+        zoomControl={false}
-      <TileLayer
+        bounds={outerBounds}
-        url={grid}
+      >
-        apikey="db5ae1f5778a448ca662554581f283c5"
+        {/* <MyComponent setZoom={setZoom} /> */}
-        maxZoom={24}
+        <TileLayer
-        maxNativeZoom={24}
+          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        opacity={0.5}
+          url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
-      />
+          apikey="db5ae1f5778a448ca662554581f283c5"
-      <Marker position={[49.505, -2.09]} icon={pinMB}>
+          maxZoom={24}
-        <Popup>{bedNumb}</Popup>
+          maxNativeZoom={22}
-      </Marker>
+          opacity={0.8}
-      <FeatureGroup ref={leafEl}>
+        />
-        <EditControl
+        <TileLayer
-          position="topright"
+          url={grid}
-          onCreated={onCreated}
+          apikey="db5ae1f5778a448ca662554581f283c5"
-          allowIntersection={false}
+          maxZoom={24}
+          maxNativeZoom={24}
+          opacity={0.5}
         />
-      </FeatureGroup>
+        <Marker icon={icon(50, zoom)} position={[49.505, -2.09]}>
-      <LayerGroup></LayerGroup>
+          {/* <Marker position={[49.505, -2.09]} icon={MyCustomMarker2()}> */}
-      <ScaleControl position="topleft" />
+          <Popup>{bedNumb}</Popup>
-      <ZoomControl position="topleft" />
+        </Marker>
-    </MapContainer>
+        <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"
+            count={next}
+            onCreated={(e) => {
+              console.log({ next, e });
+              onCreated(next);
+            }}
+            allowIntersection={false}
+          />
+        </FeatureGroup>
+        <LayerGroup></LayerGroup>
+        <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;