From d1b6eb7c826e436680812a712ffcdc67ad180661 Mon Sep 17 00:00:00 2001 From: C4rnivore Date: Mon, 28 Jul 2025 15:24:49 +0500 Subject: [PATCH] design update --- src/components/AboutDubaiMarina.tsx | 40 ++-- src/components/AboutMarasiDrive.tsx | 25 ++- src/components/GoogleMap.tsx | 6 +- src/components/GoogleMapMarkers.tsx | 20 +- ...DriveMapMobile.tsx => GoogleMapMobile.tsx} | 39 ++-- src/components/ui/MapMarker.tsx | 38 ++-- src/data/googleMapData.tsx | 119 ++++++++++++ src/data/marasiDriveMapData.tsx | 175 ------------------ 8 files changed, 204 insertions(+), 258 deletions(-) rename src/components/{MarasiDriveMapMobile.tsx => GoogleMapMobile.tsx} (75%) create mode 100644 src/data/googleMapData.tsx delete mode 100644 src/data/marasiDriveMapData.tsx diff --git a/src/components/AboutDubaiMarina.tsx b/src/components/AboutDubaiMarina.tsx index bca9164..272f9ec 100644 --- a/src/components/AboutDubaiMarina.tsx +++ b/src/components/AboutDubaiMarina.tsx @@ -20,6 +20,9 @@ import clsx from "clsx"; import Slider from "./Slider"; import PlusIcon from "./icons/map/PlusIcon"; import EqualIcon from "./icons/EqualIcon"; +import GoogleMap from "./GoogleMap"; +import { GoogleMapData } from "../data/googleMapData"; +import GoogleMapMobile from "./GoogleMapMobile"; // import FullScreenButton from "./FullScreenButton"; function AboutDubaiMarina() { @@ -336,7 +339,7 @@ function AboutDubaiMarina() {
- {/*

@@ -347,31 +350,18 @@ function AboutDubaiMarina() { living meets modern convenience. Enjoy an energetic lifestyle surrounded by trendy cafés, shops, and entertainment options – all within reach.`}

- -
- central map + -
- {}} - onFullScreenChange={() => {}} - /> -
-
*/} +

+
+ +
diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx index 3b1a9ac..c86e7ad 100644 --- a/src/components/AboutMarasiDrive.tsx +++ b/src/components/AboutMarasiDrive.tsx @@ -1,22 +1,22 @@ import { marasiDriveFeatures, marasiDriveDescriptionBadges, - marasiDriveMapCards, + // marasiDriveMapCards, } from "../data/aboutMarasiDrive"; import MarariDriveNeighboursSliderDesktop from "./MarasiDriveNeighboursSliderDesktop"; import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider"; import MarasiDriveInteriorsSliderMobile from "./MarasiDriveInteriorsSliderMobile"; import MarasiDriveNeighboursSliderMobile from "./MarasiDriveNeighboursSliderMobile"; -import MarasiDriveMapMobile from "./MarasiDriveMapMobile"; +import GoogleMapMobile from "./GoogleMapMobile"; import TextBox from "./ui/TextBox"; import { useRef } from "react"; import { useScroll } from "motion/react"; -import MarasiDriveMapCard from "./MarasiDriveMapCard"; +// import MarasiDriveMapCard from "./MarasiDriveMapCard"; import GoogleMap from "./GoogleMap"; import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet"; import CustomScrollBar from "./ui/ScrollBar"; import BrochureButton from "./ui/BrochureButton"; -import { MarasiDriveMapData } from "../data/marasiDriveMapData"; +import { GoogleMapData } from "../data/googleMapData"; function AboutMarasiDrive() { const target = useRef(null); @@ -234,18 +234,27 @@ function AboutMarasiDrive() { trendy cafés, shops, and entertainment options - all within reach.`}

-
+ {/*
{marasiDriveMapCards.map((card) => ( ))}
+
*/} +
+
- +
diff --git a/src/components/GoogleMap.tsx b/src/components/GoogleMap.tsx index 96fb9b8..eaf3a45 100644 --- a/src/components/GoogleMap.tsx +++ b/src/components/GoogleMap.tsx @@ -2,7 +2,7 @@ import IGMapPoi from "../types/IGMapPoi"; import GoogleMapMarkers from "./GoogleMapMarkers"; import { Map, useMap } from "@vis.gl/react-google-maps"; import { useEffect, useState } from "react"; -import GoogleMapFilterButtons from "./GoogleMapFilterButtons"; +// import GoogleMapFilterButtons from "./GoogleMapFilterButtons"; interface IGMapProps { mapCenter: google.maps.LatLngLiteral; @@ -57,12 +57,12 @@ export default function GoogleMap({ {markers && ( )} - + /> */}
); diff --git a/src/components/GoogleMapMarkers.tsx b/src/components/GoogleMapMarkers.tsx index 5d06308..ffd14cb 100644 --- a/src/components/GoogleMapMarkers.tsx +++ b/src/components/GoogleMapMarkers.tsx @@ -8,7 +8,6 @@ import { Cluster, Marker, } from "@googlemaps/markerclusterer"; -import { AnimatePresence, motion } from "motion/react"; class CustomMarkerRenderer extends DefaultRenderer { render({ @@ -17,17 +16,16 @@ class CustomMarkerRenderer extends DefaultRenderer { }: Cluster): google.maps.marker.AdvancedMarkerElement { const svgElement = document.createElement("div"); svgElement.innerHTML = ` - + -
+
${count}
`; - // Create the AdvancedMarkerElement const marker = new google.maps.marker.AdvancedMarkerElement({ position, - content: svgElement, // Use the custom SVG element as content + content: svgElement, zIndex: Math.max(1000, count), }); @@ -77,7 +75,7 @@ export default function GoogleMapMarkers({ }; return ( - + <> {data.map( (poi: IGMapPoi, index: number) => (filter === poi.type || filter === "All") && ( @@ -87,16 +85,10 @@ export default function GoogleMapMarkers({ poi={poi} setMarkerRef={setMarkerRef} > - - {poi.customMarker} - + {poi.customMarker} ) )} - + ); } diff --git a/src/components/MarasiDriveMapMobile.tsx b/src/components/GoogleMapMobile.tsx similarity index 75% rename from src/components/MarasiDriveMapMobile.tsx rename to src/components/GoogleMapMobile.tsx index 48b761b..188714a 100644 --- a/src/components/MarasiDriveMapMobile.tsx +++ b/src/components/GoogleMapMobile.tsx @@ -1,14 +1,21 @@ -import { useEffect, useRef, useState } from "react"; -import { marasiDriveMapCards } from "../data/aboutMarasiDrive"; -import CustomScrollBar from "./ui/ScrollBar"; -import { MarasiDriveMapData } from "../data/marasiDriveMapData"; +import { useEffect, useState } from "react"; +// import { marasiDriveMapCards } from "../data/aboutMarasiDrive"; +// import CustomScrollBar from "./ui/ScrollBar"; +// import { GoogleMapData } from "../data/googleMapData"; import GoogleMap from "./GoogleMap"; import Button from "./ui/Button"; import FullScreenIcon from "./icons/FullScreenIcon"; import useModalStore from "../stores/useModalStore"; +import IGMapPoi from "../types/IGMapPoi"; -function MarasiDriveMapMobile() { - const containerRef = useRef(null); +function GoogleMapMobile({ + markers, + mapCenter, +}: { + markers?: IGMapPoi[]; + mapCenter: google.maps.LatLngLiteral; +}) { + // const containerRef = useRef(null); const [mapActive, setMapActive] = useState(false); const { modal, setModal } = useModalStore(); @@ -27,8 +34,8 @@ function MarasiDriveMapMobile() { 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)]`} > @@ -37,14 +44,14 @@ function MarasiDriveMapMobile() { }; return ( -
+
{
@@ -52,13 +59,13 @@ function MarasiDriveMapMobile() { className={`absolute size-[11.111vw] right-[1.111vw] bottom-[1.111vw] `} onClick={() => setMapActive(true)} > -
+
} - + {/*
+ /> */}
); } -export default MarasiDriveMapMobile; +export default GoogleMapMobile; diff --git a/src/components/ui/MapMarker.tsx b/src/components/ui/MapMarker.tsx index d3e324e..ed40045 100644 --- a/src/components/ui/MapMarker.tsx +++ b/src/components/ui/MapMarker.tsx @@ -1,4 +1,4 @@ -import { AdvancedMarker, Pin, useMap } from "@vis.gl/react-google-maps"; +import { AdvancedMarker, useMap } from "@vis.gl/react-google-maps"; import type { Marker } from "@googlemaps/markerclusterer"; import IGMapPoi from "../../types/IGMapPoi"; @@ -10,34 +10,38 @@ interface IGMapMarker { } export default function MapMarker({ - markerKey, poi, - setMarkerRef, children, + markerKey, + setMarkerRef, }: IGMapMarker) { const map = useMap(); + const { location, ignoreClusterization, label } = poi; return ( { + if (!ignoreClusterization) { + setMarkerRef(marker, markerKey.toString()); + } + }} onClick={() => { - map?.panTo(poi.location); + map?.panTo(location); map?.setZoom(17); }} - key={markerKey} - position={poi.location} - ref={(marker) => { - if (!poi.ignoreClusterization) - setMarkerRef(marker, markerKey.toString()); - }} > - .label-container]:opacity-100 hover:[&>.label-container]:left-[calc(100%-38px)] hover:[&>.label-container]:pointer-events-auto hover:[&>.label-container]:z-140 hover:[&>.gmap-img-container]:z-150`} > - <>{children} - + {children} + {label && ( +
+ {label} +
+ )} +
); } diff --git a/src/data/googleMapData.tsx b/src/data/googleMapData.tsx new file mode 100644 index 0000000..e573ea6 --- /dev/null +++ b/src/data/googleMapData.tsx @@ -0,0 +1,119 @@ +/* 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 { marasiDriveMapCards } from "./aboutMarasiDrive"; + +function GetMarkerHTML(name: string, primary: boolean = false) { + const src = !primary + ? marasiDriveMapCards.find((item) => item.title === name)?.image + : name; + + return ( + <> +
+ +
+ {/* ADD POINTER FOR PRIMARY POINTS */} + + ); +} + +export const GoogleMapData: { + marasiDriveDefaultCenter: { lat: number; lng: number }; + dubaiMarinaDefaultCenter: { lat: number; lng: number }; + markers: IGMapPoi[]; +} = { + marasiDriveDefaultCenter: { + lat: 25.183476007744233, + lng: 55.274782084720286, + }, + dubaiMarinaDefaultCenter: { + lat: 25.069466431595334, + lng: 55.128736429300375, + }, + markers: [ + { + //Rove Dubai Marina Hotel + location: { lat: 25.069466431595334, lng: 55.128736429300375 }, + type: "Hotels", + ignoreClusterization: true, + customMarker: GetMarkerHTML(MarinaMarker, true), + clickableAreaScale: 3, + label: "Rove Dubai Marina Hotel", + }, + { + location: { lat: 25.181371868546396, lng: 55.27515332907251 }, + type: "Hotels", + ignoreClusterization: true, + customMarker: GetMarkerHTML(MarasiMarker, true), + clickableAreaScale: 3, + label: "Marasi Drive", + }, + // HOTELS + { + location: { lat: 25.197249056658244, lng: 55.27438894800352 }, + type: "Hotels", + customMarker: GetMarkerHTML("Burj Khalifa"), + label: "Burj Khalifa", + }, + { + location: { lat: 25.195237825881613, lng: 55.27528478028406 }, + type: "Hotels", + customMarker: GetMarkerHTML("Dubai Fountain"), + label: "The Dubai Fountain", + }, + { + location: { lat: 25.197748564692787, lng: 55.2802703666763 }, + type: "Hotels", + customMarker: GetMarkerHTML("Dubai Mall"), + label: "Dubai Mall", + }, + { + location: { lat: 25.195811139364157, lng: 55.27207211658565 }, + type: "Hotels", + customMarker: GetMarkerHTML("Dubai Opera"), + label: "Dubai Opera", + }, + { + location: { lat: 25.18774242603455, lng: 55.27024382999044 }, + type: "Hotels", + customMarker: GetMarkerHTML("Marasi Promenade"), + label: "Marasi Promenade", + }, + { + location: { lat: 25.203319687345175, lng: 55.279495993292876 }, + type: "Hotels", + customMarker: GetMarkerHTML("Rove Downtown Hotel"), + label: "Rove Downtown Hotel", + }, + { + location: { lat: 25.20535369013859, lng: 55.26803667795135 }, + type: "Hotels", + customMarker: GetMarkerHTML("Rove City Walk Hotel"), + label: "Rove City Walk Hotel", + }, + { + location: { lat: 25.20768362042376, lng: 55.26248238220776 }, + type: "Hotels", + customMarker: GetMarkerHTML("City Walk"), + label: "City Walk", + }, + { + location: { lat: 25.204504325496778, lng: 55.265693333774536 }, + type: "Hotels", + customMarker: GetMarkerHTML("Coca-Cola Arena"), + label: "Coca-Cola Arena", + }, + { + location: { lat: 25.26087724994889, lng: 55.372561586751665 }, + type: "Hotels", + customMarker: GetMarkerHTML("Dubai International Airport"), + label: "Dubai International Airport", + }, + ], +}; diff --git a/src/data/marasiDriveMapData.tsx b/src/data/marasiDriveMapData.tsx deleted file mode 100644 index f8d1d9f..0000000 --- a/src/data/marasiDriveMapData.tsx +++ /dev/null @@ -1,175 +0,0 @@ -/* 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 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 = ( -
- -
-); - -const DubaiMarinaMarker = ( -
- -
-); - -function Marker(type: "Hotels" | "Malls" | "Entertainment" | "Other") { - const SvgByType = { - Hotels: , - Malls: , - Entertainment: , - Other: , - }; - - return ( -
- {SvgByType[type]} -
- ); -} - -export const MarasiDriveMapData: { - defaultCenter: { lat: number; lng: number }; - markers: IGMapPoi[]; -} = { - defaultCenter: { lat: 25.183476007744233, lng: 55.274782084720286 }, - markers: [ - // HOTELS - { - //Atlantis the Palm - location: { lat: 25.13046499761402, lng: 55.11718843636159 }, - type: "Hotels", - customMarker: Marker("Hotels"), - label: "Atlantis the Palm", - }, - { - //Atlantis the Royal - location: { lat: 25.138673890838593, lng: 55.12795877692962 }, - type: "Hotels", - customMarker: Marker("Hotels"), - label: "Atlantis the Royal", - }, - { - //Rove JBR - location: { lat: 25.083013494794002, lng: 55.13925845861501 }, - type: "Hotels", - customMarker: Marker("Hotels"), - label: "Rove JBR", - }, - { - //Rove Dubai Marina Hotel - location: { lat: 25.069466431595334, lng: 55.128736429300375 }, - type: "Hotels", - ignoreClusterization: true, - customMarker: DubaiMarinaMarker, - clickableAreaScale: 3, - label: "Rove Dubai Marina Hotel", - }, - { - //Jumeirah Burj Al Arab - location: { lat: 25.14125865549382, lng: 55.18534065404832 }, - type: "Hotels", - customMarker: Marker("Hotels"), - label: "Jumeirah Burj Al Arab", - }, - - // MALLS - { - //Dubai Marina Mall - location: { lat: 25.076382747164647, lng: 55.14196528147056 }, - type: "Malls", - customMarker: Marker("Malls"), - label: "Dubai Marina Mall", - }, - - // ENTERTAINMENT - { - // Skydive Dubai - location: { lat: 25.090979874826218, lng: 55.13798324927472 }, - type: "Entertainment", - customMarker: Marker("Entertainment"), - label: "Skydive Dubai", - }, - { - // JBR Beach - location: { lat: 25.077626143690992, lng: 55.131404670555284 }, - type: "Entertainment", - customMarker: Marker("Entertainment"), - label: "JBR Beach", - }, - { - // Emirates Golf Club - location: { lat: 25.08540156566801, lng: 55.16017556009668 }, - type: "Entertainment", - customMarker: Marker("Entertainment"), - label: "Emirates Golf Club", - }, - - // OTHER - { - // Palm Jumeirah - location: { lat: 25.116513748878386, lng: 55.13630547853065 }, - type: "Other", - customMarker: Marker("Other"), - label: "Palm Jumeirah", - }, - { - // Dubai Harbour - location: { lat: 25.093312800021923, lng: 55.14276330405519 }, - type: "Other", - customMarker: Marker("Other"), - label: "Dubai Harbour", - }, - { - // Emirates Hills - location: { lat: 25.06922740304993, lng: 55.171394810795576 }, - type: "Other", - customMarker: Marker("Other"), - label: "Emirates Hills", - }, - { - // Internet City - location: { lat: 25.09899279065803, lng: 55.16505834170482 }, - type: "Other", - customMarker: Marker("Other"), - label: "Internet City", - }, - { - // JLT - location: { lat: 25.078250849819398, lng: 55.1499560328892 }, - type: "Other", - customMarker: Marker("Other"), - label: "JLT", - }, - { - // Jumeirah Islands - location: { lat: 25.05800902880235, lng: 55.15510123900208 }, - type: "Other", - customMarker: Marker("Other"), - label: "Jumeirah Islands", - }, - { - // Bluewaters Island - location: { lat: 25.080169343022643, lng: 55.121785121589454 }, - type: "Other", - customMarker: Marker("Other"), - label: "Bluewaters Island", - }, - - { - location: { lat: 25.181371868546396, lng: 55.27515332907251 }, - type: "Hotels", - ignoreClusterization: true, - customMarker: marasiDriveMarker, - clickableAreaScale: 3, - label: "Marasi Drive", - }, - ], -};