Mobile map modal and more POIs

2025-07-25 11:58:30 +05:00
parent 226397afac
commit 54d48c8ce3
3 changed files with 160 additions and 57 deletions
@@ -5,52 +5,60 @@ import { MarasiDriveMapData } from "../data/marasiDriveMapData";
 import GoogleMap from "./GoogleMap";
 import Button from "./ui/Button";
 import FullScreenIcon from "./icons/FullScreenIcon";
-import CloseIcon from "./icons/CloseIcon";
+import useModalStore from "../stores/useModalStore";

 function MarasiDriveMapMobile() {
  const containerRef = useRef<HTMLDivElement>(null);
-  const mapRef = useRef<HTMLDivElement>(null);
  const [mapActive, setMapActive] = useState(false);
+  const { modal, setModal } = useModalStore();

  useEffect(() => {
-    if (mapActive) {
-      mapRef.current?.scrollIntoView();
-      window.scrollBy({
-        top: -40,
-        left: 0,
-        behavior: "smooth",
-      });
-      document.body.style.overflowY = "hidden";
-    } else {
-      document.body.style.overflowY = "scroll";
-    }
+    if (mapActive) setModal(<MapModal />);
+    else setModal(null);
  }, [mapActive]);

-  return (
-    <div className="min-2xl:hidden relative flex flex-col">
+  useEffect(() => {
+    setMapActive(!!modal);
+  }, [modal]);
+
+  const MapModal = () => {
+    return (
      <div
-        ref={mapRef}
-        className={`relative max-md:aspect-[328/328] scroll-mt-10 md:max-2xl:aspect[1/1] transition-all  max-2xl:mb-4 overflow-clip rounded-[4.444vw] ${
-          mapActive ? "h-[80vh]" : "h-[100vw]"
-        }`}
+        className={`relative max-md:aspect-[360/640] md:max-2xl:aspect[1/1] max-2xl:mb-4 overflow-clip rounded-[4.444vw]  h-[calc(100dvh-100px)]`}
      >
        <GoogleMap
          mapCenter={MarasiDriveMapData.defaultCenter}
          markers={MarasiDriveMapData.markers}
-          mobileActive={mapActive}
+          mobileActive={true}
          mobile={true}
        />
-        <Button
-          className={`absolute size-[11.111vw] right-[1.111vw]  ${
-            mapActive ? "top-[1.111vw]" : "bottom-[1.111vw]"
-          }`}
-          onClick={() => setMapActive(!mapActive)}
-        >
-          <div className="size-[5.556vw]">
-            {mapActive ? <CloseIcon /> : <FullScreenIcon />}
-          </div>
-        </Button>
      </div>
+    );
+  };
+
+  return (
+    <div className="min-2xl:hidden relative flex flex-col">
+      {
+        <div
+          className={`relative max-md:aspect-[328/328] scroll-mt-10 md:max-2xl:aspect[1/1] transition-all  max-2xl:mb-4 overflow-clip rounded-[4.444vw]`}
+        >
+          <GoogleMap
+            mapCenter={MarasiDriveMapData.defaultCenter}
+            markers={MarasiDriveMapData.markers}
+            mobileActive={false}
+            mobile={true}
+          />
+          <Button
+            className={`absolute size-[11.111vw] right-[1.111vw] bottom-[1.111vw] `}
+            onClick={() => setMapActive(true)}
+          >
+            <div className="size-[5.556vw]">
+              <FullScreenIcon />
+            </div>
+          </Button>
+        </div>
+      }
+
      <div
        ref={containerRef}
        className="flex flex-nowrap overflow-x-scroll scroll-pl-4 gap-x-[16px] overflow-y-hidden justify-start snap-x snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-[#FFFFFF] [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full -mx-4 px-4 "
@@ -35,7 +35,10 @@ export default function MapMarker({
        borderColor={"transparent"}
        scale={poi.clickableAreaScale || 1}
      >
-        {children}
+        <>
+          {children}
+          <span className={`text-black text-center opacity-[1]`}></span>
+        </>
      </Pin>
    </AdvancedMarker>
  );
@@ -1,8 +1,12 @@
 /* eslint-disable no-loss-of-precision */
+import IGMapPoi from "../types/IGMapPoi";
+
 import MarasiMarker from "../../public/images/map/markers/marasi-drive.png";
 import MarinaMarker from "../../public/images/map/markers/dubai-marina.png";
-import ShopIcon from "../../public/images/map/markers/points/shop-point.svg";
-import IGMapPoi from "../types/IGMapPoi";
+import MallsIcon from "../components/icons/map/MallsIcon";
+import HotelIcon from "../components/icons/map/HotelIcon";
+import EntertainmentIcon from "../components/icons/map/EntertainmentIcon";
+import OtherIcon from "../components/icons/map/OtherIcon";

 const marasiDriveMarker = (
  <div className="flex items-end hover:cursor-pointer">
@@ -16,11 +20,20 @@ const DubaiMarinaMarker = (
  </div>
 );

-const shopMarker = (
-  <div>
-    <img src={ShopIcon} alt="" />
-  </div>
-);
+function Marker(type: "Hotels" | "Malls" | "Entertainment" | "Other") {
+  const SvgByType = {
+    Hotels: <MallsIcon className="size-[80%]" />,
+    Malls: <HotelIcon className="size-[80%]" />,
+    Entertainment: <EntertainmentIcon className="size-[80%]" />,
+    Other: <OtherIcon className="size-[80%]" />,
+  };
+
+  return (
+    <div className="size-8 outline bg-black rounded-full text-white flex justify-center items-center ">
+      {SvgByType[type]}
+    </div>
+  );
+}

 export const MarasiDriveMapData: {
  defaultCenter: { lat: number; lng: number };
@@ -28,26 +41,112 @@ export const MarasiDriveMapData: {
 } = {
  defaultCenter: { lat: 25.183476007744233, lng: 55.274782084720286 },
  markers: [
+    // HOTELS
    {
-      location: { lat: 25.223476007744233, lng: 55.274782084720286 },
-      type: "Malls",
-      customMarker: shopMarker,
+      //Atlantis the Palm
+      location: { lat: 25.13046499761402, lng: 55.11718843636159 },
+      type: "Hotels",
+      customMarker: Marker("Hotels"),
    },
    {
-      location: { lat: 25.123476007744233, lng: 55.258782084720286 },
-      type: "Malls",
-      customMarker: shopMarker,
+      //Atlantis the Royal
+      location: { lat: 25.138673890838593, lng: 55.12795877692962 },
+      type: "Hotels",
+      customMarker: Marker("Hotels"),
    },
    {
-      location: { lat: 25.143476007744233, lng: 55.224782084720286 },
-      type: "Malls",
-      customMarker: shopMarker,
+      //Rove JBR
+      location: { lat: 25.083013494794002, lng: 55.13925845861501 },
+      type: "Hotels",
+      customMarker: Marker("Hotels"),
    },
    {
-      location: { lat: 25.223476007744233, lng: 55.278782084720286 },
-      type: "Malls",
-      customMarker: shopMarker,
+      //Rove Dubai Marina Hotel
+      location: { lat: 25.069466431595334, lng: 55.128736429300375 },
+      type: "Hotels",
+      ignoreClusterization: true,
+      customMarker: DubaiMarinaMarker,
+      clickableAreaScale: 3,
    },
+    {
+      //Jumeirah Burj Al Arab
+      location: { lat: 25.14125865549382, lng: 55.18534065404832 },
+      type: "Hotels",
+      customMarker: Marker("Hotels"),
+    },
+
+    // MALLS
+    {
+      //Dubai Marina Mall
+      location: { lat: 25.076382747164647, lng: 55.14196528147056 },
+      type: "Malls",
+      customMarker: Marker("Malls"),
+    },
+
+    // ENTERTAINMENT
+    {
+      // Skydive Dubai
+      location: { lat: 25.090979874826218, lng: 55.13798324927472 },
+      type: "Entertainment",
+      customMarker: Marker("Entertainment"),
+    },
+    {
+      // JBR Beach
+      location: { lat: 25.077626143690992, lng: 55.131404670555284 },
+      type: "Entertainment",
+      customMarker: Marker("Entertainment"),
+    },
+    {
+      // Emirates Golf Club
+      location: { lat: 25.08540156566801, lng: 55.16017556009668 },
+      type: "Entertainment",
+      customMarker: Marker("Entertainment"),
+    },
+
+    // OTHER
+    {
+      // Palm Jumeirah
+      location: { lat: 25.116513748878386, lng: 55.13630547853065 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+    {
+      // Dubai Harbour
+      location: { lat: 25.093312800021923, lng: 55.14276330405519 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+    {
+      // Emirates Hills
+      location: { lat: 25.06922740304993, lng: 55.171394810795576 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+    {
+      // Internet City
+      location: { lat: 25.09899279065803, lng: 55.16505834170482 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+    {
+      // JLT
+      location: { lat: 25.078250849819398, lng: 55.1499560328892 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+    {
+      // Jumeirah Islands
+      location: { lat: 25.05800902880235, lng: 55.15510123900208 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+    {
+      // Bluewaters Island
+      location: { lat: 25.080169343022643, lng: 55.121785121589454 },
+      type: "Other",
+      customMarker: Marker("Other"),
+    },
+
    {
      location: { lat: 25.181371868546396, lng: 55.27515332907251 },
      type: "Hotels",
@@ -55,12 +154,5 @@ export const MarasiDriveMapData: {
      customMarker: marasiDriveMarker,
      clickableAreaScale: 3,
    },
-    {
-      location: { lat: 25.069466431595334, lng: 55.128736429300375 },
-      type: "Hotels",
-      ignoreClusterization: true,
-      customMarker: DubaiMarinaMarker,
-      clickableAreaScale: 3,
-    },
  ],
 };