fix: fixed map module

Signed-off-by: Mouad Lahlal <lahlalmouad@gmail.com>

src/app/map/page.tsx

@@ -18,7 +18,7 @@ export default function Page() {
     >
       <AppSidebar />
       <SidebarInset>
-        <div id="map" className="w-96 h-96">
+        <div id="map" className="w-full h-full border rounded-md m-0 p-0">
           <MapWithNoSSR />
         </div>
       </SidebarInset>

src/components/map.tsx

@@ -1,24 +1,61 @@
 import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+import { Icon } from "leaflet";
+import "leaflet/dist/leaflet.css";
 
 const Map = () => {
-  const position = [45.5637, 10.16356];
+  const positions = [
+    {
+      name: "Autogeneral",
+      position: [45.49285083101236, 10.15951437254693],
+    },
+    {
+      name: "Delizie e Sapori (Cuor di gelato)",
+      position: [45.55425938252774, 10.227818585851844],
+    },
+    {
+      name: "Casa dell'Ottica di Zanotti Giulio",
+      position: [45.53644055688526, 10.222584658771389],
+    },
+    {
+      name: "Nuova Ottica",
+      position: [45.48257540298808, 10.23957216093029],
+    },
+  ];
+
+  const customMarker = new Icon({
+    iconUrl: "marker-icon-red.png",
+    iconAnchor: [10, 20],
+    popupAnchor: [0, -15],
+  });
+
   return (
-    <>
+    <MapContainer
-      <MapContainer
+      center={positions[0].position}
-        center={position}
+      zoom={10}
-        zoom={14}
+      scrollWheelZoom={true}
-        scrollWheelZoom={true}
+      className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md"
-        style={{ height: "100%", width: "100%" }}
+    >
-      >
+      <TileLayer
-        <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
-          url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
+      />
-        />
+      {positions.map((client) => (
-        <Marker position={position} draggable={true} animate={true}>
+        <Marker
-          <Popup>Hey ! you found me</Popup>
+          position={client.position}
+          draggable={false}
+          animate={false}
+          icon={customMarker}
+        >
+          <Popup>
+            <span className="block text-sm font-bold">{client.name}</span>
+            <div className="flex gap-2">
+              <span className="text-xs font-semibold">P.IVA</span>
+              <span className="text-xs">03417520172</span>
+            </div>
+          </Popup>
         </Marker>
-      </MapContainer>
+      ))}
-    </>
+    </MapContainer>
   );
 };