@local-logic/maps 0.0.1 → 0.0.3

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

@@ -1,15 +1,32 @@
 import type { ReactNode } from "react";
 import type { PointFeature, ClusterProperties } from "supercluster";
-import type { Marker } from "../types";
+import type { Icon } from "@phosphor-icons/react";
+import type { Coordinates } from "../types";
 
 export type ClusterPoint = PointFeature<ClusterProperties & Marker>;
 
+export type Marker = {
+  id: string;
+  latitude: Coordinates["latitude"];
+  longitude: Coordinates["longitude"];
+  name?: string;
+  icon?: Icon;
+};
+
+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

@@ -12,6 +12,19 @@ export function Root(props: RootProps) {
   );
 }
 
+// BASE MAP
 export { BaseMap } from "./BaseMap";
+
+// MARKERS
 export { Markers } from "./Markers";
-export type { MarkerProps } from "./Markers/types";
+export type { MarkerProps, Marker, MarkerPoint } from "./Markers/types";
+
+// POPUP
+export { Popup } from "./Popup";
+
+// LAYERS
+export { Layers } from "./Layers";
+export type { Source, Layer } from "./Layers/types";
+
+// OTHER
+export type { RootProps };

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

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import { Icon } from "@phosphor-icons/react";
 
 /**
  * We should try to keep the types "agnostic" but if we have to pick a side,
@@ -17,17 +16,7 @@ export type Coordinates = {
   longitude: number;
 };
 
-export type Marker = {
-  latitude: Coordinates["latitude"];
-  longitude: Coordinates["longitude"];
-  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;
@@ -37,6 +26,5 @@ export type RootProps = {
   pitch?: number;
   bearing?: number;
   cooperativeGestures?: boolean;
-  markers?: Marker[];
   children?: ReactNode;
 };

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

@@ -1,13 +1,21 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import { mapDefaults as storybookMapDefaults } from "~/../.storybook/defaults";
-import type { RootProps, Marker } from "./Root/types";
 import { defaultMapValues } from "./Root/constants";
-import * as Map from "./Root";
+import {
+  Root as MapRoot,
+  BaseMap,
+  Markers,
+  Popup,
+  Layers,
+  type RootProps,
+  type MarkerPoint,
+} from "./Root";
+import { themes, markerList, layerSources } from "./storybook-data";
 
 export default {
   title: "Map",
-  component: Map.Root,
+  component: MapRoot,
   argTypes: storybookMapDefaults,
 } as Meta<RootProps>;
 
@@ -20,80 +28,88 @@ const defaultValues = {
   zoomPosition: "bottom-right" as RootProps["zoomPosition"],
 };
 
-const markers = [
-  {
-    latitude: 45.527399,
-    longitude: -73.598126,
-    // icon: "Storefront",
-  },
-  {
-    latitude: 45.527302,
-    longitude: -73.597405,
-    // icon: "CartPlusInside",
-  },
-  {
-    latitude: 45.527302,
-    longitude: -73.597405,
-    // icon: "Brandy",
-  },
-  {
-    latitude: 45.527302,
-    longitude: -73.597405,
-    // icon: "SpoonAndFork",
-  },
-  {
-    latitude: 45.527302,
-    longitude: -73.597405,
-    // icon: "Coffee",
-  },
-  {
-    latitude: 45.527302,
-    longitude: -73.597405,
-    // icon: "Baby",
-  },
-  {
-    latitude: 45.527256,
-    longitude: -73.600229,
-    // icon: "Train",
-  },
-  {
-    latitude: 45.527256,
-    longitude: -73.600229,
-    // icon: "Barbell",
-  },
-  {
-    latitude: 45.526643,
-    longitude: -73.600293,
-    // icon: "GasPump",
-  },
-  {
-    latitude: 45.527025,
-    longitude: -73.600897,
-    // icon: "Heartbeat",
-  },
-] as Marker[];
+const Template: StoryFn<RootProps> = (args) => {
+  const [activeMarker, setActiveMarker] = useState<MarkerPoint | undefined>(undefined);
 
-const maptilerThemes = {
-  day: "600d69cb-288d-445e-9839-3dfe4d76b31a",
-  night: "dd191599-2a92-49fc-9a33-e12391753ad5",
-};
+  const handleMarkerClick = (markers: 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>
+        </>
+      );
+    }
 
-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>
-);
+    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)]">
+      <MapRoot {...args}>
+        <BaseMap>
+          <Layers sources={layerSources} />
+          <Markers markers={markerList} onClick={handleMarkerClick} />
+
+          <Popup
+            latitude={activeMarker?.latitude}
+            longitude={activeMarker?.longitude}
+            onClose={() => setActiveMarker(undefined)}
+          >
+            {popupContent}
+          </Popup>
+        </BaseMap>
+      </MapRoot>
+    </div>
+  );
+};
 
 export const Maptiler = Template.bind({});
 Maptiler.args = {
   mapProvider: {
     name: "maptiler",
     apiKey: import.meta.env.VITE_MAPTILER_KEY,
-    maptilerTheme: maptilerThemes.day,
+    maptilerTheme: themes.maptiler.day,
   },
   ...defaultValues,
 };