fix: maps to leafllet everywhere

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

app/(with-navbar)/(authenticated)/profil/page.tsx

@@ -1,10 +1,10 @@
-import DynamicMap from "./DynamicMap";
 import ProfileBox from "./ProfileBox";
 import TabsAndContent from "./TabsAndContent";
 import { getAllUserFavouritesIds } from "@/actions/favourites/favourites.action";
 import { getAllUserVisits } from "@/actions/visits/visits.action";
 import { getAllUserRatings } from "@/actions/ratings/ratings.action";
 import { getTowersByIDs } from "@/actions/towers/towers.action";
+import ProfileMapFixed from "@/components/shared/map/ProfileMapFixed";
 
 async function ProfilePage() {
     const promises = [getAllUserFavouritesIds(), getAllUserVisits(), getAllUserRatings()];
@@ -17,7 +17,7 @@ async function ProfilePage() {
             <div className="flex max-w-[calc(min(99vw,80rem))] w-full items-center sm:items-start justify-center flex-col sm:flex-row sm:h-[687px] gap-3">
                 <ProfileBox score={visits.length} changes={0} favs={favouritesIds.length} ratings={ratings.length} visits={visits.length} />
                 <div className="flex h-[170px] w-[97vw] flex-grow sm:h-full">
-                    <DynamicMap lat={49.8237572} long={15.6086383} towers={towers} visits={visits.map((v) => v.tower_id)} favs={favouritesIds} />
+                    <ProfileMapFixed towers={towers} visits={visits} favourites={favouritesIds} />
                 </div>
             </div>
             <TabsAndContent visits={visits} favs={favouritesIds} towers={towers} ratings={ratings} />

app/(with-navbar)/(with-footer)/[type]/[nameID]/page.tsx

@@ -1,6 +1,5 @@
 import { Metadata } from "next";
 import HistoryText from "@/components/tower/tiles/HistoryText";
-import Map from "@/components/tower/tiles/Map";
 import Parameters from "@/components/tower/tiles/parameters/Parameters";
 import OpeningHours from "@/components/tower/tiles/openingHours/OpeningHoursTile";
 import Admission from "@/components/tower/tiles/Admission";
@@ -15,6 +14,7 @@ import RatingFormProvider from "@/components/tower/rating/RatingProvider";
 import Carousel from "@/components/tower/top/Carousel";
 import { notFound } from "next/navigation";
 import ChangesHistory from "@/components/tower/tiles/ChangesHistory";
+import TowerMapFixed from "@/components/shared/map/TowerMapFixed";
 
 async function TowerPage({ params }: { params }) {
     const { nameID } = await params;
@@ -45,7 +45,7 @@ async function TowerPage({ params }: { params }) {
                 </div>
                 {tower.history && <HistoryText text={tower.history} />}
                 <RatingFormProvider tower={tower} />
-                <Map lat={tower.gps.latitude} long={tower.gps.longitude} name={tower.name} />
+                <TowerMapFixed tower={tower} />
                 <ChangesHistory tower={tower} />
             </div>
         </div>

app/(with-navbar)/mapa/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import { getAllUserFavouritesIds } from "@/actions/favourites/favourites.action";
 import { getAllTowers } from "@/actions/towers/towers.action";
 import { getAllUserVisits } from "@/actions/visits/visits.action";
-import MainMap from "@/components/shared/map/Map";
+import MainMapFixed from "@/components/shared/map/MainMapFixed";
 
 export const metadata: Metadata = {
     title: "Mapa",
@@ -13,7 +13,7 @@ async function MapPage() {
 
     return (
         <div className="flex justify-center items-stretch flex-grow h-[calc(100dvh-66px)] md:h-[calc(100dvh-69px)]">
-            <MainMap towers={towers} visits={visits} favourites={favouriteTowersIds} />
+            <MainMapFixed towers={towers} visits={visits} favourites={favouriteTowersIds} />
         </div>
     );
 }

components/shared/map/MainMapFixed.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const MainMapFixed = dynamic(() => import("@/components/shared/map/base/MainMap"), { ssr: false });
+
+export default MainMapFixed;

components/shared/map/ProfileMapFixed.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const ProfileMapFixed = dynamic(() => import("@/components/shared/map/base/ProfileMap"), { ssr: false });
+
+export default ProfileMapFixed;

components/shared/map/TowerMapFixed.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const TowerMapFixed = dynamic(() => import("@/components/shared/map/base/TowerMap"), { ssr: false });
+
+export default TowerMapFixed;

components/shared/map/MainMap.tsx → components/shared/map/base/MainMap.tsx

@@ -2,25 +2,19 @@
 
 import { Tower } from "@/types/Tower";
 import { Visit } from "@/types/Visit";
-import { MapContainer, TileLayer } from "react-leaflet";
-import "leaflet/dist/leaflet.css";
-import "leaflet/dist/images/marker-shadow.png";
-import TowerMarker from "@/components/shared/map/TowerMarker";
+import TowerMarker from "@/components/shared/map/base/TowerMarker";
+import MapBase from "@/components/shared/map/base/MapBase";
 
 const MainMap = ({ towers, visits, favourites }: { towers: Tower[]; visits: Visit[]; favourites: string[] }) => {
     return (
-        <MapContainer center={[49.8237572, 15.6086383]} zoom={8} scrollWheelZoom={true} className="w-full h-full z-0">
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
+        <MapBase center={{ lat: 49.8237572, lng: 15.6086383 }} zoom={8}>
             {towers.map((tower) => {
                 const isVisited = visits.some((visit) => visit.tower_id === tower.id);
                 const isFavourite = favourites.includes(tower.id);
 
                 return <TowerMarker key={tower.id} tower={tower} isFavourite={isFavourite} isVisited={isVisited} />;
             })}
-        </MapContainer>
+        </MapBase>
     );
 };
 

components/shared/map/base/MapBase.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ReactNode } from "react";
+import { MapContainer, TileLayer } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet/dist/images/marker-shadow.png";
+
+const MapBase = ({ center, zoom, children }: { center: { lat: number; lng: number }; zoom: number; children: ReactNode }) => {
+    return (
+        <MapContainer center={[center.lat, center.lng]} zoom={zoom} scrollWheelZoom={true} className="w-full h-full z-0">
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {children}
+        </MapContainer>
+    );
+};
+
+export default MapBase;

components/shared/map/base/ProfileMap.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Tower } from "@/types/Tower";
+import MapBase from "@/components/shared/map/base/MapBase";
+import { Visit } from "@/types/Visit";
+import TowerMarker from "@/components/shared/map/base/TowerMarker";
+
+const TowerMap = ({ towers, visits, favourites }: { towers: Tower[]; visits: Visit[]; favourites: string[] }) => {
+    return (
+        <div className="mx-auto w-full max-w-7xl h-96 sm:h-[30rem] lg:h-[34rem] rounded-xl mb-5 overflow-hidden touch-none">
+            <MapBase center={{ lat: 49.8237572, lng: 15.6086383 }} zoom={8}>
+                {towers.map((tower) => {
+                    const isVisited = visits.some((visit) => visit.tower_id === tower.id);
+                    const isFavourite = favourites.includes(tower.id);
+
+                    if (!isVisited && !isFavourite) {
+                        return null;
+                    }
+
+                    return <TowerMarker key={tower.id} tower={tower} isFavourite={isFavourite} isVisited={isVisited} />;
+                })}
+            </MapBase>
+        </div>
+    );
+};
+
+export default TowerMap;

components/shared/map/base/TowerMap.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Tower } from "@/types/Tower";
+import { Marker } from "react-leaflet";
+import { defaultIcon } from "@/components/shared/map/base/icons";
+import MapBase from "@/components/shared/map/base/MapBase";
+
+const TowerMap = ({ tower }: { tower: Tower }) => {
+    return (
+        <div className="mx-auto w-full max-w-7xl h-96 sm:h-[30rem] lg:h-[34rem] rounded-xl mb-5 overflow-hidden touch-none">
+            <MapBase center={{ lat: tower.gps.latitude, lng: tower.gps.longitude }} zoom={12}>
+                <Marker position={{ lat: tower.gps.latitude, lng: tower.gps.longitude }} icon={defaultIcon} title={tower.name} />
+            </MapBase>
+        </div>
+    );
+};
+
+export default TowerMap;

components/shared/map/TowerMarker.tsx → components/shared/map/base/TowerMarker.tsx

@@ -1,5 +1,5 @@
-import { defaultIcon, favouriteIcon, visitedIcon } from "@/components/shared/map/icons";
-import MapTowerCard from "@/components/shared/map/MapTowerCard";
+import { defaultIcon, favouriteIcon, visitedIcon } from "@/components/shared/map/base/icons";
+import MapTowerCard from "@/components/shared/map/base/MapTowerCard";
 import { Tower } from "@/types/Tower";
 import { Marker, Popup } from "react-leaflet";