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

src/App.js

@@ -138,7 +138,7 @@ function App() {
         {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}
-        {/* <LeafletMap /> */}
+        <LeafletMap />
 
         {/* *************************************************** mini components ***************************************************  */}
 
@@ -171,7 +171,7 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
-        <DateRangePicker />
+        {/* <DateRangePicker /> */}
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/LeafletMap/index.js

@@ -6,6 +6,7 @@ import {
   FeatureGroup,
   Rectangle,
   useMap,
+  Popup,
   Marker,
   LayerGroup,
   ZoomControl,
@@ -22,10 +23,34 @@ import "./index.scss";
 
 import grid from "../../assets/images/grid.png";
 
-// import placeholder from "../placeholder.png";
+import placeholder from "./placeholder.png";
 
 import * as L from "leaflet";
 
+const bedNumb = "تخت شماره 33";
+
+// const pinMB = 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.Icon.Default();
+
 L.drawLocal = {
   draw: {
     toolbar: {
@@ -63,6 +88,7 @@ L.drawLocal = {
         },
       },
       marker: {
+        // icon: MyCustomMarker,
         tooltip: {
           start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
         },
@@ -146,6 +172,8 @@ const LeafletMap = () => {
     console.log({ drawnItems });
   };
 
+  const location = [38.9072, -77.0369];
+
   return (
     <MapContainer
       center={[49.505, -2.09]}
@@ -171,6 +199,12 @@ const LeafletMap = () => {
         maxNativeZoom={24}
         opacity={0.5}
       />
+      <Marker
+        position={[49.505, -2.09]}
+        //  icon={pinMB}
+      >
+        <Popup>{bedNumb}</Popup>
+      </Marker>
       <FeatureGroup ref={leafEl}>
         <EditControl
           position="topright"

src/components/LeafletMap/index.scss

@@ -1,3 +1,4 @@
+.leaflet-popup-content,
 .leaflet-draw-toolbar a,
 span,
 title,