@local-logic/maps 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @local-logic/maps
 
+## 0.0.2
+
+### Patch Changes
+
+- 9dcc72d: LL22-5132: Added popup support for markers and clusters
+
 ## 0.0.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@local-logic/maps",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "This is a maps implementation allowing for the display of Local Logic data on a map.",
   "author": "Local Logic",
   "license": "ISC",

package/src/components/Map/Root/BaseMap/index.tsx

@@ -28,9 +28,7 @@ export const BaseMap = ({ children }: BaseMapProps) => {
 
   return (
     <div className={styles.wrapper}>
-      <BaseMapProvider>
-        {children}
-      </BaseMapProvider>
+      <BaseMapProvider>{children}</BaseMapProvider>
     </div>
   );
 };

package/src/components/Map/Root/BaseMap/styles.ts

@@ -1,2 +1 @@
-export const wrapper = `relative w-full h-full`;
-export const map = `absolute w-full h-full`;
+export const wrapper = `w-full h-full`;

package/src/components/Map/Root/Markers/Cluster/index.tsx

@@ -7,9 +7,10 @@ import * as styles from "./styles";
 export function Cluster({ cluster }: { cluster: ClusterPoint }) {
   // Taking a somewhat similar calculation to what LocalLogic SDK used to
   // do for cluster diameter (bigger depending on count)
-  const diameter = useMemo(() => (
-    20 + cluster.properties.point_count * 4
-  ), [cluster.properties.point_count]);
+  const diameter = useMemo(
+    () => 20 + cluster.properties.point_count * 4,
+    [cluster.properties.point_count]
+  );
 
   return (
     <div
@@ -17,10 +18,10 @@ export function Cluster({ cluster }: { cluster: ClusterPoint }) {
       style={{
         width: `${diameter}px`,
         height: `${diameter}px`,
-        fontSize: `${diameter / 2.5}px`
+        fontSize: `${diameter / 2.5}px`,
       }}
     >
       {cluster.properties.point_count}
     </div>
-  )
-}
+  );
+}

package/src/components/Map/Root/Markers/Cluster/styles.ts

@@ -1,14 +1,11 @@
 export const container = `
-  rounded-full
-  bg-primary-100
-  text-base-white
-  flex
-  justify-center
-  items-center
-  leading-none
-  font-sans
-  border-2
-  border-solid
-  border-base-white
-  shadow-sm
+  rounded-full leading-none font-sans border-2
+  border-solid shadow-sm
+  flex justify-center items-center
+  bg-primary-100 text-base-white border-base-white
+  transition-all
+
+  hover:bg-base-white
+  hover:text-primary-100
+  hover:border-primary-100
 `;

package/src/components/Map/Root/Markers/Google/index.tsx

@@ -8,15 +8,14 @@ import type { MapMarkerProps } from "../types";
 import { Cluster } from "../Cluster";
 
 import * as globalStyles from "../styles";
-import * as styles from "./styles";
 
-export default function GoogleMarkers({ clusters, children }: MapMarkerProps) {
-  return clusters.map((cluster, index) => {
+export default function GoogleMarkers({ clusters, onClick, children }: MapMarkerProps) {
+  return clusters?.map((cluster, index) => {
     const longitude = cluster.geometry.coordinates[0];
     const latitude = cluster.geometry.coordinates[1];
 
     const handleOnClick = () => {
-      // TODO Without the on click the hover doesn't work
+      onClick?.(cluster);
     };
 
     return (
@@ -27,18 +26,19 @@ export default function GoogleMarkers({ clusters, children }: MapMarkerProps) {
           lng: longitude,
         }}
         onClick={handleOnClick}
-        className={styles.marker}
       >
-        <div className={globalStyles.container}>
+        <div className={globalStyles.container} data-is-cluster={!!cluster.properties.cluster}>
           {cluster.properties.cluster ? (
             <Cluster cluster={cluster} />
           ) : (
             <>
-              {cluster.properties.icon ? (
-                <cluster.properties.icon className={globalStyles.icon} />
-              ) : (
-                <MapPin className={globalStyles.icon} />
-              )}
+              <div className={globalStyles.iconWrapper}>
+                {cluster.properties.icon ? (
+                  <cluster.properties.icon className={globalStyles.icon} />
+                ) : (
+                  <MapPin className={globalStyles.icon} />
+                )}
+              </div>
               {children}
             </>
           )}

package/src/components/Map/Root/Markers/Mapbox/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { MapPin } from "@phosphor-icons/react";
-import { Marker as MapboxMarker } from "react-map-gl/mapbox";
+import { Marker as MapboxMarker, type MarkerEvent } from "react-map-gl/mapbox";
 
 import type { MapMarkerProps } from "../types";
 
@@ -9,28 +9,39 @@ import { Cluster } from "../Cluster";
 
 import * as styles from "../styles";
 
-export default function MapboxMarkers({ clusters, children }: MapMarkerProps) {
-  return clusters.map((cluster, index) => {
+export default function MapboxMarkers({ clusters, onClick, children }: MapMarkerProps) {
+  return clusters?.map((cluster, index) => {
     const longitude = cluster.geometry.coordinates[0];
     const latitude = cluster.geometry.coordinates[1];
 
+    const handleOnClick = (event: MarkerEvent<MouseEvent>) => {
+      // If we let the click event propagates to the map, it will immediately close the popup
+      // with `closeOnClick: true`
+      // https://github.com/visgl/react-map-gl/blob/bdfcfd2d6cfdc641cddb5337d7ed477e5c3c28d5/examples/controls/src/app.tsx#L31-36
+      event.originalEvent.stopPropagation();
+      onClick?.(cluster);
+    };
+
     return (
       <MapboxMarker
         key={`map-marker-${longitude}-${latitude}-${index}`}
         anchor="bottom"
         longitude={longitude}
         latitude={latitude}
+        onClick={handleOnClick}
       >
-        <div className={styles.container}>
+        <div className={styles.container} data-is-cluster={!!cluster.properties.cluster}>
           {cluster.properties.cluster ? (
             <Cluster cluster={cluster} />
           ) : (
             <>
-              {cluster.properties.icon ? (
-                <cluster.properties.icon className={styles.icon} />
-              ) : (
-                <MapPin className={styles.icon} />
-              )}
+              <div className={styles.iconWrapper}>
+                {cluster.properties.icon ? (
+                  <cluster.properties.icon className={styles.icon} />
+                ) : (
+                  <MapPin className={styles.icon} />
+                )}
+              </div>
               {children}
             </>
           )}

package/src/components/Map/Root/Markers/Maptiler/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { MapPin } from "@phosphor-icons/react";
-import { Marker as MaplibreMarker } from "react-map-gl/maplibre";
+import { Marker as MaplibreMarker, type MarkerEvent } from "react-map-gl/maplibre";
 
 import type { MapMarkerProps } from "../types";
 
@@ -9,31 +9,39 @@ import { Cluster } from "../Cluster";
 
 import * as styles from "../styles";
 
-export default function MaptilerMarkers({
-  clusters,
-  children,
-}: MapMarkerProps) {
+export default function MaptilerMarkers({ clusters, onClick, children }: MapMarkerProps) {
   return clusters?.map((cluster, index) => {
     const longitude = cluster.geometry.coordinates[0];
     const latitude = cluster.geometry.coordinates[1];
 
+    const handleOnClick = (event: MarkerEvent<MouseEvent>) => {
+      // If we let the click event propagates to the map, it will immediately close the popup
+      // with `closeOnClick: true`
+      // https://github.com/visgl/react-map-gl/blob/bdfcfd2d6cfdc641cddb5337d7ed477e5c3c28d5/examples/controls/src/app.tsx#L31-36
+      event.originalEvent.stopPropagation();
+      onClick?.(cluster);
+    };
+
     return (
       <MaplibreMarker
         key={`map-marker-${longitude}-${latitude}-${index}`}
         anchor="bottom"
         longitude={longitude}
         latitude={latitude}
+        onClick={handleOnClick}
       >
-        <div className={styles.container}>
+        <div className={styles.container} data-is-cluster={!!cluster.properties.cluster}>
           {cluster.properties.cluster ? (
             <Cluster cluster={cluster} />
           ) : (
             <>
-              {cluster.properties.icon ? (
-                <cluster.properties.icon className={styles.icon} />
-              ) : (
-                <MapPin className={styles.icon} />
-              )}
+              <div className={styles.iconWrapper}>
+                {cluster.properties.icon ? (
+                  <cluster.properties.icon className={styles.icon} />
+                ) : (
+                  <MapPin className={styles.icon} />
+                )}
+              </div>
               {children}
             </>
           )}

package/src/components/Map/Root/Markers/index.tsx

@@ -1,13 +1,12 @@
-import React, { lazy, useMemo, useEffect } from "react";
+import React, { lazy, useMemo } from "react";
 
-import type { PointFeature, AnyProps } from "supercluster";
 import { point } from "@turf/turf";
 
 import useSupercluser from "use-supercluster";
 
 import { useRootElement } from "../context";
 
-import type { MarkerProps, ClusterPoint } from "./types";
+import type { MarkerProps, MapMarkerProps, ClusterPoint, MarkerPoint } from "./types";
 
 import * as styles from "./styles";
 
@@ -15,17 +14,40 @@ const MaptilerMarkers = lazy(() => import("./Maptiler"));
 const GoogleMarkers = lazy(() => import("./Google"));
 const MapboxMarkers = lazy(() => import("./Mapbox"));
 
-export const Markers = ({ markers, ...rest }: MarkerProps) => {
-  const { mapProvider, bounds, setBounds } = useRootElement();
+export const Markers = ({ markers, onClick, ...rest }: MarkerProps) => {
+  const { mapProvider, bounds } = useRootElement();
   const { clusters, supercluster } = useSupercluser({
-    points: markers.map(marker => (point([marker.longitude, marker.latitude], {
-      icon: marker.icon,
-    }))),
+    points: markers.map((marker) => point([marker.longitude, marker.latitude], marker)),
     bounds,
     zoom: 16,
     options: { radius: 50, maxZoom: 30 },
   });
 
+  const handleOnClick: MapMarkerProps["onClick"] = (cluster) => {
+    if (!("properties" in cluster)) {
+      throw new Error("Cluster does not have properties");
+    }
+
+    if (cluster.properties?.cluster && typeof cluster.properties?.cluster_id === "number") {
+      onClick?.({
+        id: `${cluster.properties.cluster_id}`,
+        latitude: cluster.geometry.coordinates[1],
+        longitude: cluster.geometry.coordinates[0],
+        markers: (supercluster
+          ?.getChildren(cluster.properties.cluster_id)
+          ?.map((child) => child.properties) ?? []) as MarkerPoint[],
+      });
+      return;
+    }
+
+    onClick?.({
+      id: cluster.properties.id,
+      latitude: cluster.properties.latitude,
+      longitude: cluster.properties.longitude,
+      markers: [cluster.properties],
+    });
+  };
+
   const BaseMarkers = useMemo(() => {
     switch (mapProvider?.name) {
       case "maptiler":
@@ -44,18 +66,16 @@ export const Markers = ({ markers, ...rest }: MarkerProps) => {
   }
 
   return (
-    <BaseMarkers clusters={clusters as ClusterPoint[]} {...rest}>
-      {/* POI Pin Background */}
-      <svg
-        viewBox="0 0 20 28"
-        fill="none"
-        className={styles.background}
-      >
-        <path
-          d="M20 10C20 15.5228 12 27.5 10 27.5C8 27.5 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z"
-          fill="inherit"
-        />
-      </svg>
-    </BaseMarkers>
-  )
+    <>
+      <BaseMarkers clusters={clusters as ClusterPoint[]} onClick={handleOnClick} {...rest}>
+        {/* POI Pin Background */}
+        <svg viewBox="0 0 20 28" fill="none" className={styles.background}>
+          <path
+            d="M20 10C20 15.5228 12 27.5 10 27.5C8 27.5 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z"
+            fill="inherit"
+          />
+        </svg>
+      </BaseMarkers>
+    </>
+  );
 };

package/src/components/Map/Root/Markers/styles.ts

@@ -1,12 +1,13 @@
 export const container = `
   cursor-pointer
   relative
-  h-8
-  w-6
+  h-7
+  w-5
   text-base-white
   group
   transition-transform
-  hover:scale-125
+
+  data-[is-cluster=true]:w-auto
 `;
 
 export const background = `
@@ -20,10 +21,17 @@ export const background = `
   group-focus:stroke-base-white
 `;
 
+export const iconWrapper = `
+  absolute top-1 left-1/2 transform -translate-x-1/2
+  align-center rounded-full overflow-hidden
+  transition-all w-3.5 h-3.5
+
+  group-hover:bg-base-white
+`;
+
 export const icon = `
-  absolute
-  top-0 left-0 right-0 bottom-1
-  transition-transform
-  m-auto
-  h-4 w-4
+  m-auto transition-all w-full h-full
+
+  group-hover:text-primary-100
+  group-hover:p-0.5
 `;

package/src/components/Map/Root/Markers/types.ts

@@ -4,12 +4,20 @@ import type { Marker } from "../types";
 
 export type ClusterPoint = PointFeature<ClusterProperties & Marker>;
 
+export type MarkerPoint = {
+  id: string;
+  latitude: number;
+  longitude: number;
+  markers: Marker[];
+};
+
 export type MarkerProps = {
   markers: Marker[];
-  onClick?: (marker: Marker) => void;
+  onClick?: (markers: MarkerPoint) => void;
   children?: ReactNode;
 };
 
 export type MapMarkerProps = Omit<MarkerProps, "markers"> & {
   clusters: ClusterPoint[];
+  onClick: (cluster: ClusterPoint) => void;
 };

package/src/components/Map/Root/Popup/Google/index.tsx

@@ -0,0 +1,57 @@
+import React, { useMemo, useEffect } from "react";
+
+import { useMap, InfoWindow } from "@vis.gl/react-google-maps";
+
+import { PopupProps } from "../types";
+
+import "./popup.css";
+import * as styles from "../styles";
+
+export default function GooglePopup({
+  latitude,
+  longitude,
+  offset = [0, -25],
+  onClose,
+  children,
+}: PopupProps) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!map) return;
+
+    const listener = map.addListener("click", () => {
+      onClose?.();
+    });
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      listener.remove();
+    };
+  }, [map]);
+
+  const pixelOffset: [number, number] = useMemo(() => {
+    if (Array.isArray(offset)) {
+      return [offset[0], offset[1]];
+    }
+
+    return [offset, offset];
+  }, [offset]);
+
+  if (typeof latitude === "undefined" || typeof longitude === "undefined") {
+    return null;
+  }
+
+  return (
+    <InfoWindow
+      shouldFocus
+      position={{
+        lat: latitude,
+        lng: longitude,
+      }}
+      pixelOffset={pixelOffset}
+      onClose={onClose}
+    >
+      <div className={styles.container}>{children}</div>
+    </InfoWindow>
+  );
+}

package/src/components/Map/Root/Popup/Google/popup.css

@@ -0,0 +1,15 @@
+.gm-style .gm-style-iw-chr,
+.gm-style .gm-style-iw-tc {
+  display: none;
+}
+
+.gm-style .gm-style-iw-d {
+  overflow: hidden;
+}
+
+.gm-style .gm-style-iw-c {
+  border: none;
+  outline: none;
+  padding: 0;
+  border-radius: 8px;
+}

package/src/components/Map/Root/Popup/Mapbox/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { Popup } from "react-map-gl/mapbox";
+
+import { PopupProps } from "../types";
+
+import "./popup.css";
+import * as styles from "../styles";
+
+export default function MapboxPopup({
+  latitude,
+  longitude,
+  anchor,
+  offset = [0, -35],
+  onClose,
+  children,
+}: PopupProps) {
+  if (typeof latitude === "undefined" || typeof longitude === "undefined") {
+    return null;
+  }
+
+  return (
+    <Popup
+      className="mapbox-popup"
+      focusAfterOpen
+      latitude={latitude}
+      longitude={longitude}
+      anchor={anchor}
+      offset={offset}
+      onClose={onClose}
+      closeButton={false}
+    >
+      <div className={styles.container}>{children}</div>
+    </Popup>
+  );
+}

package/src/components/Map/Root/Popup/Mapbox/popup.css

@@ -0,0 +1,15 @@
+.mapbox-popup {
+  background: transparent;
+}
+
+.mapbox-popup .mapboxgl-popup-tip {
+  display: none;
+}
+
+.mapbox-popup .mapboxgl-popup-content {
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  border-radius: 8px;
+}

package/src/components/Map/Root/Popup/Maptiler/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { Popup } from "react-map-gl/maplibre";
+
+import { PopupProps } from "../types";
+
+import "./popup.css";
+import * as styles from "../styles";
+
+export default function MaptilerPopup({
+  latitude,
+  longitude,
+  anchor,
+  offset = [0, -35],
+  onClose,
+  children,
+}: PopupProps) {
+  if (typeof latitude === "undefined" || typeof longitude === "undefined") {
+    return null;
+  }
+
+  return (
+    <Popup
+      key="maplibre-popup"
+      className="maplibre-popup"
+      focusAfterOpen
+      latitude={latitude}
+      longitude={longitude}
+      anchor={anchor}
+      offset={offset}
+      onClose={onClose}
+      closeButton={false}
+    >
+      <div className={styles.container}>{children}</div>
+    </Popup>
+  );
+}

package/src/components/Map/Root/Popup/Maptiler/popup.css

@@ -0,0 +1,15 @@
+.maplibre-popup {
+  background: transparent;
+}
+
+.maplibre-popup .maplibregl-popup-tip {
+  display: none;
+}
+
+.maplibre-popup .maplibregl-popup-content {
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  border-radius: 8px;
+}

package/src/components/Map/Root/Popup/index.tsx

@@ -0,0 +1,32 @@
+import React, { lazy, useMemo } from "react";
+
+import { PopupProps } from "./types";
+
+import { useRootElement } from "../context";
+
+const MaptilerPopup = lazy(() => import("./Maptiler"));
+const GooglePopup = lazy(() => import("./Google"));
+const MapboxPopup = lazy(() => import("./Mapbox"));
+
+export function Popup({ children, ...rest }: PopupProps) {
+  const { mapProvider } = useRootElement();
+
+  const BasePopup = useMemo(() => {
+    switch (mapProvider?.name) {
+      case "maptiler":
+        return MaptilerPopup;
+      case "google":
+        return GooglePopup;
+      case "mapbox":
+        return MapboxPopup;
+      default:
+        return null;
+    }
+  }, [mapProvider]);
+
+  if (!BasePopup) {
+    return null;
+  }
+
+  return <BasePopup {...rest}>{children}</BasePopup>;
+}

package/src/components/Map/Root/Popup/styles.ts

@@ -0,0 +1,4 @@
+export const container = `
+  bg-base-white border border-primary-100 w-auto overflow-hidden
+  rounded-lg w-44 px-2.5 py-3 shadow-sm
+`;

package/src/components/Map/Root/Popup/types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export type PopupProps = {
+  latitude?: number;
+  longitude?: number;
+  // Anchor only works for Maplibre and Mapbox
+  anchor?:
+    | "center"
+    | "left"
+    | "right"
+    | "top"
+    | "bottom"
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right";
+  offset?: number | [number, number];
+  onClose?: () => void;
+  children?: ReactNode;
+};

package/src/components/Map/Root/index.tsx

@@ -14,4 +14,5 @@ export function Root(props: RootProps) {
 
 export { BaseMap } from "./BaseMap";
 export { Markers } from "./Markers";
-export type { MarkerProps } from "./Markers/types";
+export { Popup } from "./Popup";
+export type { MarkerProps, MarkerPoint } from "./Markers/types";

package/src/components/Map/Root/types.ts

@@ -18,16 +18,14 @@ export type Coordinates = {
 };
 
 export type Marker = {
+  id: string;
   latitude: Coordinates["latitude"];
   longitude: Coordinates["longitude"];
+  name?: string;
   icon?: Icon;
 };
 
-export type ZoomPosition =
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right";
+export type ZoomPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 export type RootProps = {
   mapProvider: MapProvider;

package/src/components/Map/index.stories.tsx

@@ -1,6 +1,18 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import { mapDefaults as storybookMapDefaults } from "~/../.storybook/defaults";
+import {
+  Storefront,
+  ShoppingCartSimple,
+  Brandy,
+  ForkKnife,
+  Coffee,
+  Baby,
+  Train,
+  Barbell,
+  GasPump,
+  Heartbeat,
+} from "@phosphor-icons/react";
 import type { RootProps, Marker } from "./Root/types";
 import { defaultMapValues } from "./Root/constants";
 import * as Map from "./Root";
@@ -20,56 +32,76 @@ const defaultValues = {
   zoomPosition: "bottom-right" as RootProps["zoomPosition"],
 };
 
-const markers = [
+const markerList = [
   {
+    id: "marker-1",
+    name: "Marker 1",
     latitude: 45.527399,
     longitude: -73.598126,
-    // icon: "Storefront",
+    icon: Storefront,
   },
   {
+    id: "marker-2",
+    name: "Marker 2",
     latitude: 45.527302,
     longitude: -73.597405,
-    // icon: "CartPlusInside",
+    icon: ShoppingCartSimple,
   },
   {
+    id: "marker-3",
+    name: "Marker 3",
     latitude: 45.527302,
     longitude: -73.597405,
-    // icon: "Brandy",
+    icon: Brandy,
   },
   {
+    id: "marker-4",
+    name: "Marker 4",
     latitude: 45.527302,
     longitude: -73.597405,
-    // icon: "SpoonAndFork",
+    icon: ForkKnife,
   },
   {
+    id: "marker-5",
+    name: "Marker 5",
     latitude: 45.527302,
     longitude: -73.597405,
-    // icon: "Coffee",
+    icon: Coffee,
   },
   {
+    id: "marker-6",
+    name: "Marker 6",
     latitude: 45.527302,
     longitude: -73.597405,
-    // icon: "Baby",
+    icon: Baby,
   },
   {
+    id: "marker-7",
+    name: "Marker 7",
     latitude: 45.527256,
     longitude: -73.600229,
-    // icon: "Train",
+    icon: Train,
   },
   {
+    id: "marker-8",
+    name: "Marker 8",
     latitude: 45.527256,
     longitude: -73.600229,
-    // icon: "Barbell",
+    icon: Barbell,
   },
   {
+    id: "marker-9",
+    name: "Marker 9",
     latitude: 45.526643,
     longitude: -73.600293,
-    // icon: "GasPump",
+    icon: GasPump,
   },
   {
+    id: "marker-10",
+    name: "Marker 10",
     latitude: 45.527025,
     longitude: -73.600897,
-    // icon: "Heartbeat",
+    icon: Heartbeat,
   },
 ] as Marker[];
 
@@ -78,15 +110,80 @@ const maptilerThemes = {
   night: "dd191599-2a92-49fc-9a33-e12391753ad5",
 };
 
-const Template: StoryFn<RootProps> = (args) => (
-  <div className="w-full h-[calc(100vh-30px)]">
-    <Map.Root {...args}>
-      <Map.BaseMap>
-        <Map.Markers markers={markers} />
-      </Map.BaseMap>
-    </Map.Root>
-  </div>
-);
+const Template: StoryFn<RootProps> = (args) => {
+  const [activeMarker, setActiveMarker] = useState<Map.MarkerPoint | undefined>(undefined);
+
+  const handleMarkerClick = (markers: Map.MarkerPoint) => {
+    if (
+      activeMarker?.latitude === markers.latitude &&
+      activeMarker?.longitude === markers.longitude
+    ) {
+      setActiveMarker(undefined);
+      return;
+    }
+
+    setActiveMarker(markers);
+  };
+
+  const popupContent = useMemo(() => {
+    if (typeof activeMarker?.markers === "undefined") {
+      return null;
+    }
+
+    if (activeMarker.markers.length === 1) {
+      return (
+        <>
+          {activeMarker.markers[0].icon && React.createElement(activeMarker.markers[0].icon)}
+          <strong>{activeMarker.markers[0]?.name}</strong>
+          <p>
+            {activeMarker?.latitude}, {activeMarker?.longitude}
+          </p>
+        </>
+      );
+    }
+
+    if (activeMarker.markers.length > 1) {
+      return activeMarker.markers.map((marker) => (
+        <div key={marker.id} className="flex flex-row gap-y-3">
+          <button
+            className="rounded px-3 py-2 border border-primary-100"
+            onClick={() =>
+              handleMarkerClick({
+                id: marker.id,
+                latitude: marker.latitude,
+                longitude: marker.longitude,
+                markers: [marker],
+              })
+            }
+          >
+            {marker.icon && React.createElement(marker.icon, { className: "inline mr-5" })}
+            <strong>{marker.name}</strong>
+          </button>
+        </div>
+      ));
+    }
+
+    return null;
+  }, [activeMarker]);
+
+  return (
+    <div className="w-full h-[calc(100vh-30px)]">
+      <Map.Root {...args}>
+        <Map.BaseMap>
+          <Map.Markers markers={markerList} onClick={handleMarkerClick} />
+
+          <Map.Popup
+            latitude={activeMarker?.latitude}
+            longitude={activeMarker?.longitude}
+            onClose={() => setActiveMarker(undefined)}
+          >
+            {popupContent}
+          </Map.Popup>
+        </Map.BaseMap>
+      </Map.Root>
+    </div>
+  );
+};
 
 export const Maptiler = Template.bind({});
 Maptiler.args = {

package/src/components/Map/Root/Markers/Google/styles.ts

@@ -1 +0,0 @@
-export const marker = `-translate-y-1/2`;