design update

2025-07-28 15:24:49 +05:00
parent 4afbf6bf66
commit d1b6eb7c82
8 changed files with 204 additions and 258 deletions
@@ -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() {
            </div>
          </div>
          <div className="flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw] max-md:gap-[6.667vw] max-md:px-[4.444vw] max-2xl:gap-[4.167vw]">
-            {/* <h1
+            <h1
              className="font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw] text-center
              max-md:text-[6.667vw] max-md:w-full max-2xl:text-[7.292vw] max-2xl:w-[84.115vw]"
            >
@@ -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.`}
            </p>
-            <motion.img
-              ref={mapRef}
-              src="/images/about-complex/dubai-marina/central_map.png"
-              alt="central map"
-              className="rounded-3xl object-cover object-center aspect-[1376/609] max-md:hidden max-2xl:w-[93.75vw] max-2xl:h-[89.583vw] max-2xl:aspect-[720/688] max-2xl:mt-[1.563vw]"
-              initial={{ width: "47.083vw" }}
-              animate={
-                isMapInView ? { width: "95.556vw" } : { width: "47.083vw" }
-              }
-              transition={{ duration: 0.6, ease: "easeInOut" }}
-            />
-            <div className="min-md:hidden relative w-[89.167vw] aspect-square overflow-hidden rounded-2xl">
-              <img
-                src="/images/about-complex/dubai-marina/central_map.png"
-                alt="central map"
-                className="w-full h-full object-cover object-center scale-120"
+            <div className="w-full 2xl:aspect-[1376/688] max-2xl:aspect-[720/688] max-md:hidden rounded-[1.667vw] overflow-hidden">
+              <GoogleMap
+                markers={GoogleMapData.markers}
+                mapCenter={GoogleMapData.dubaiMarinaDefaultCenter}
              />
-              <div className="absolute bottom-[1.111vw] right-[1.111vw] w-[11.111vw] h-[11.111vw]">
-                <FullScreenButton
-                  isFullScreen={false}
-                  onClick={() => {}}
-                  onFullScreenChange={() => {}}
-                />
-              </div>
-            </div> */}
+            </div>
+            <div className="w-full">
+              <GoogleMapMobile
+                markers={GoogleMapData.markers}
+                mapCenter={GoogleMapData.dubaiMarinaDefaultCenter}
+              />
+            </div>
          </div>
        </div>
      </motion.section>
@@ -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<HTMLDivElement>(null);
@@ -234,18 +234,27 @@ function AboutMarasiDrive() {
              trendy cafés, shops, and entertainment options - all within reach.`}
            </p>
          </div>
-          <div className="grid grid-cols-6 grid-rows-5 gap-x-[1.111vw] gap-y-[0.556vw] max-2xl:hidden">
+          {/* <div className="grid grid-cols-6 grid-rows-5 gap-x-[1.111vw] gap-y-[0.556vw] max-2xl:hidden">
            {marasiDriveMapCards.map((card) => (
              <MarasiDriveMapCard {...card} key={card.title} />
            ))}
            <div className="col-start-3 col-span-full row-start-1 row-span-full rounded-[1.667vw] overflow-hidden">
              <GoogleMap
-                mapCenter={MarasiDriveMapData.defaultCenter}
-                markers={MarasiDriveMapData.markers}
+                mapCenter={GoogleMapData.marasiDriveDefaultCenter}
+                markers={GoogleMapData.markers}
              />
            </div>
+          </div> */}
+          <div className="w-full 2xl:aspect-[1376/676] max-2xl:aspect-[720/688] max-md:hidden rounded-[1.667vw] overflow-hidden">
+            <GoogleMap
+              mapCenter={GoogleMapData.marasiDriveDefaultCenter}
+              markers={GoogleMapData.markers}
+            />
          </div>
-          <MarasiDriveMapMobile />
+          <GoogleMapMobile
+            mapCenter={GoogleMapData.marasiDriveDefaultCenter}
+            markers={GoogleMapData.markers}
+          />
        </section>
        <section className="bg-white w-full overflow-clip flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4 max-2xl:flex-col-reverse md:max-2xl:gap-[6.25vw] md:max-2xl:px-6">
          <div>
@@ -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 && (
          <GoogleMapMarkers data={markers} filter={mapMarkersFilter} />
        )}
-        <GoogleMapFilterButtons
+        {/* <GoogleMapFilterButtons
          mobile={mobile}
          mobileActive={mobileActive}
          currentFilter={mapMarkersFilter}
          onChange={setMapMarkersFilter}
-        />
+        /> */}
      </Map>
    </div>
  );
@@ -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 = `
-      <svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="50" height="50">
+      <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="50" height="50">
        <circle cx="120" cy="120" opacity="1" r="70" />
      </svg>
-      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold;">
+      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: black; font-size: 12px; font-weight: bold;">
        ${count}
      </div>`;

-    // 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 (
-    <AnimatePresence>
+    <>
      {data.map(
        (poi: IGMapPoi, index: number) =>
          (filter === poi.type || filter === "All") && (
@@ -87,16 +85,10 @@ export default function GoogleMapMarkers({
              poi={poi}
              setMarkerRef={setMarkerRef}
            >
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-              >
-                {poi.customMarker}
-              </motion.div>
+              {poi.customMarker}
            </MapMarker>
          )
      )}
-    </AnimatePresence>
+    </>
  );
 }
@@ -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<HTMLDivElement>(null);
+function GoogleMapMobile({
+  markers,
+  mapCenter,
+}: {
+  markers?: IGMapPoi[];
+  mapCenter: google.maps.LatLngLiteral;
+}) {
+  // const containerRef = useRef<HTMLDivElement>(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)]`}
      >
        <GoogleMap
-          mapCenter={MarasiDriveMapData.defaultCenter}
-          markers={MarasiDriveMapData.markers}
+          mapCenter={mapCenter}
+          markers={markers}
          mobileActive={true}
          mobile={true}
        />
@@ -37,14 +44,14 @@ function MarasiDriveMapMobile() {
  };

  return (
-    <div className="min-2xl:hidden relative flex flex-col">
+    <div className="md: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]`}
+          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}
+            mapCenter={mapCenter}
+            markers={markers}
            mobileActive={false}
            mobile={true}
          />
@@ -52,13 +59,13 @@ function MarasiDriveMapMobile() {
            className={`absolute size-[11.111vw] right-[1.111vw] bottom-[1.111vw] `}
            onClick={() => setMapActive(true)}
          >
-            <div className="size-[5.556vw]">
+            <div className="size-[5.556vw] text-[#0D1922]">
              <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 "
@@ -86,9 +93,9 @@ function MarasiDriveMapMobile() {
        inlinePadding={16}
        trackStyle="min-2xl:hidden max-2xl:translate-y-5"
        thumbStyle="min-2xl:hidden"
-      />
+      /> */}
    </div>
  );
 }

-export default MarasiDriveMapMobile;
+export default GoogleMapMobile;
@@ -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 (
    <AdvancedMarker
+      key={markerKey}
+      position={location}
+      ref={(marker) => {
+        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());
-      }}
    >
-      <Pin
-        background={"transparent"}
-        glyphColor={"transparent"}
-        borderColor={"transparent"}
-        scale={poi.clickableAreaScale || 1}
+      <div
+        className={`relative flex items-center gap-x-2 hover:[&>.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}</>
-      </Pin>
+        {children}
+        {label && (
+          <div className="label-container text-black absolute text-s left-0 opacity-0 w-max pointer-events-none transition-[left,opacity] bg-white pl-11 pr-3 py-2.5 rounded-2xl">
+            {label}
+          </div>
+        )}
+      </div>
    </AdvancedMarker>
  );
 }
@@ -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 (
+    <>
+      <div
+        className={`gmap-img-container z-20 overflow-hidden rounded-full flex justify-center items-center border-2 border-white ${
+          !primary ? "size-8" : "size-14"
+        }`}
+      >
+        <img src={src} className="" alt="" />
+      </div>
+      {/* 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",
+    },
+  ],
+};
@@ -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 = (
-  <div className="flex items-end hover:cursor-pointer">
-    <img src={MarasiMarker} alt="" />
-  </div>
-);
-
-const DubaiMarinaMarker = (
-  <div className="flex items-end hover:cursor-pointer">
-    <img src={MarinaMarker} alt="" />
-  </div>
-);
-
-function Marker(type: "Hotels" | "Malls" | "Entertainment" | "Other") {
-  const SvgByType = {
-    Hotels: <HotelIcon className="size-[80%]" />,
-    Malls: <MallsIcon 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 };
-  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",
-    },
-  ],
-};