From 9a1edc78384e6a0379c53a4c0f0ca17be6361714 Mon Sep 17 00:00:00 2001
From: Mouad Lahlal <lahlalmouad@gmail.com>
Date: Tue, 21 Oct 2025 21:31:57 +0200
Subject: [PATCH] fix: fixed map module

Signed-off-by: Mouad Lahlal <lahlalmouad@gmail.com>
---
 public/marker-icon-red.png | Bin 0 -> 430 bytes
 public/marker-icon.png     | Bin 0 -> 1466 bytes
 public/marker-shadow.png   | Bin 0 -> 618 bytes
 src/app/map/page.tsx       |   2 +-
 src/components/map.tsx     |  69 ++++++++++++++++++++++++++++---------
 5 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 public/marker-icon-red.png
 create mode 100644 public/marker-icon.png
 create mode 100644 public/marker-shadow.png

diff --git a/public/marker-icon-red.png b/public/marker-icon-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcde1d1a4d2f217147fa1f74d16f1d01c1a4a258
GIT binary patch
literal 430
zcmeAS@N?(olHy`uVBq!ia0vp^l0dA<!3HD`Ol~>{q*&4&eH|GXHuiJ>Nn{1`8H<D5
zofvPP)Tsw@6p}rHd>I(3)EF2VS{N990fib~Fff!FFfhDIU|_JC!N4G1FlSew4N!tD
z$=lrpNCUx7=iMOPoCO|{#S9GG!XV7ZFl&wkP>{XE)7O>#C6}l$zft3H{sy4XCr=m0
zkch)~r#tdBD+svCM(ypiZR*@RZTrU=d26B;bRS!?v7=stdD-SU9P_`kCoW*>Nsqjh
z`)-#`OONWiBh?RuL)N8S{@SIyL2t#&D%Obw>h3Evwl#QnsIY8vTIC_2;`-6kc@on-
z-8bCEc0bA%s!Xr^ck1P;E_bKPEZo+vZM&|v%L}qzPhJttd-G|uVN&Fz|13f`qjRqu
zS}&}3YtQzLTPGYS*e!ic%<k{TqIrkhH@>caC;alYxov02_DSte!llC1XZEX1Nn0;}
z&Rgl;RdrRz%sx5i=L(jK9OspAX}?<I#41rXQFQz1RB5k?Yd*Z;u(XN)*j~JQ+TSf_
QfWBw&boFyt=akR{08_f2p#T5?

literal 0
HcmV?d00001

diff --git a/public/marker-icon.png b/public/marker-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..950edf24677ded147df13b26f91baa2b0fa70513
GIT binary patch
literal 1466
zcmV;r1x5OaP)<h;3K|Lk000e1NJLTq000>P001cn1^@s6z>|W`000GnNkl<Zcmb_f
z1CV1`6wTU&we8*5X`5@?-nJb~+YH)cvo*HjWNq8Zc<%o5tM=Ds+UfpPr(V7H?mg!`
zC%oj>GNuHDcIX17Zdjl&3`L?0sTjIws<{((Dh&g-s0<@jYQyl?D*X^?%13;ml^gy>
ziMrY_^1WI=(g@LMizu=zCoA>C`6|QEq1eV92k*7m>G65*&@&6)<M8DCx9R>aC&e}G
zI)pf-Za|N`DT&Cn1J|o`19mumxW~hiKiKyc-P`S@q)rdTo84@QI@;0yXrG%9uhI>A
zG5QHb6s4=<6xy{1<C=CHW}WuDMe!y##Z3alAwHpb=Mm&HJok+$f`w%|f4|pcqeuJS
zp#-ysVvO!71M$ei)GA8X{H-opcg1LtlGOvzwVMt;+V?iaw7V#JG|-NbP1w)o*KIw>
z@NMxEkryp{LS44%z$3lP^cX!9+2-;CTt3wM4(k*#C{aiIiLuB>jJj;KPhPzIC00bL
zU3a#;aJld94lCW=`4&aAy8M7PY=HQ>O%$YEP4c4UY#CRxfgbE~(|uiI=YS8q;O9y6
zmIkXzR`}p7ti|PrM3a}WMnR=3NVnWdAAR>b9X@)DKL6=YsvmH%?I24wdq?Gh54_;#
z$?_LvgjEdspdQlf<N!wxb~7&Ltfju~@6lM_fa5a?)vd(t!c_U?gAcsmXGXGkRdn4p
zb}oaPoE)%Y5}S9^y)^@L?D%mS?|Zs+J;gO_AC-?fc)`z;<}Ug!sm)4Jt!~mZI5{MA
zcqyu8GnKE{PZNE{^&X0<9KqE3<%18r;OB|6=ly|7c(aSt^$rdYL2}ceV?vR>t#4CQ
z`2Zyvy?*)N1Ftw|{_hakhG9WjS?Az@I@+IZ8JbWewR<x~R&An~HqV&(;O7am`V1lZ
zfx~g_9#YggIAF-h9WGK8ETHZ0d^x6o=d&M4nKz$t?7(9C<%2I+KX^!#-K*t^)4K0g
z<SqOg!<E(8{}0ZMGIuU5+x;H9eeq!<j5t3bP5uI`8%8lI7ku*Eg@1|CyOMbPH!YWn
z(mRhOwll672hu7#2YEH?h+-P{u!Q1_E=tfZC23|4D;!n36KjV!zdZ1OPn6bm6#VS9
zB24SvA6mYV!kgSAuC)6>!XUK4&6346+d#~gsE0SY(LX8&JfY>Aj)RxGy96nwhs2rv
zzW6pTn<T0j8;WWt1=YDwjvI$|@Q5<{e8LpdeVoYc8C|CfQp~@F*X$&9os$IRwt#_r
z@bFX2Kj5Y0L;%4X#&TR}k<A{ubB-+_KqR__*#voueGFgrsP_a5#7x`4@S45sbljo0
zO&iDyt=diCx%G{<3r-N>MpFkDSkT*a*6Dx|u@ds6ISVn0@^RmIsKZ5Y<t~y{I_Xxe
zb;`gtMxNkJ^WT!!I?fwc1Q5Py)Jw7#`mk-0d~@04Kpf)5S@V2?H%$eT{v?76xY3mF
zAW6A{ZYs4-3XB@@{1nq4$e&aMfE&09u63~_Hx%z57wAVE&Kb9(rXq6t3tea7+$eQh
zNj%3%*B9*{7Z@$#m~-(9@}?{T2vUrxaHpwpF^;WtZQ=e=Ks)+zx|z|xKJ6dexCL-(
z<=V|8G}!5yf_<ZacJw0-@zWFG4rs^AqO@M0s>;bazbc;tTSq(kg(=481ODrPyNB6n
z-$+U}(w$m6U6H$w17Bw+wDaFIe~GvNMYvnw31MpY0eQKT9l>SU``8k7w4)z!GZKMI
z#_cEKq7k~i%nlK@6c-K?+R;B#5$?T#YpKD`t_4bAs^#E+@5QW$@OX3*<N95=$GH&|
z3>`;(#{U^d-vY)&xEE>n5lYl&T?Am<I|XUI$5Em_%Oc!pA{h|MSr!?6c}_RyUp2En
U8Uiq3+yDRo07*qoM6N<$g8DDw*Z=?k

literal 0
HcmV?d00001

diff --git a/public/marker-shadow.png b/public/marker-shadow.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fd2979532a19a15b824ce763c76e04a8dafadfb
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001cf001cn1ONa40%^#70006pNkl<ZcmeIw
zg^uGu5CqT)GyVU69WyhA4Rfv1l&qHB$KsvZaQsx;oqodqP9OjM+>ke9$Lam@{1K@O
ze*LXqlKQHiv=gx+V^Cbb2?z@ISBQ*3amF;9UJ3SBg(N|710TLamQmYZ&Qjn2LuO<*
zCZlB4n%@pc&7NNnY1}x+NWpHlq`OJEo|`aYN9<`RBUB+79g;>dgb6YlfN#kGL?lO_
z!6~M^7s<Gunku4}oCz-(lbU68)PP!;P_>OnbsUkKk<@Ysie&`G>ruxH&Mgy&8;i=A
zB9OO!xR{AyODw>DS-q5YM<tr&0OJhK)KQ42rl<PpbdcQi3@gi=Q)DY%>{0ExFEAzt
zm>RdS+ssW(-8|?xr0(?$vBVB*%(xDLtq3Hf0I5yFm<_g=W2`QWAax{1rWVH=I!VrP
zs(rTFX@W#t$hXNvbgX`gK&^w_YD;CQ!B@e0QbLIWaKAXQe2-kkloo;{iF#6}z!4=W
zi$giRj1{<MQYafm<N;SepyTR{T`X5iA(Wqm8yCrb?x#{3bi&bc!kMT@fkDfJv!SI>
zt;2w`VSCF#WE&*ev7jpsC=6175@(~nTE2;7M-L((0bH@yG}-TB$R~WXd?tA$s3|%y
zA`9$sA(>F%J3ioz<-LJl*^o1|w84l>HBR`>3l9c8$5Xr@xCiIQ7{x$fMCzOk_-M=%
z+{a_Q#;42`#KfUte@$NT77uaTz?b-fBe)1s5XE$yA79fm?KqM^VgLXD07*qoM6N<$
Ef<_J(9smFU

literal 0
HcmV?d00001

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index c11ddb8..34a880a 100644
--- a/src/app/map/page.tsx
+++ b/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>
diff --git a/src/components/map.tsx b/src/components/map.tsx
index 29ae55c..c00fbf9 100644
--- a/src/components/map.tsx
+++ b/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
-        center={position}
-        zoom={14}
-        scrollWheelZoom={true}
-        style={{ height: "100%", width: "100%" }}
-      >
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
-        />
-        <Marker position={position} draggable={true} animate={true}>
-          <Popup>Hey ! you found me</Popup>
+    <MapContainer
+      center={positions[0].position}
+      zoom={10}
+      scrollWheelZoom={true}
+      className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md"
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
+      />
+      {positions.map((client) => (
+        <Marker
+          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>
   );
 };