@local-logic/maps 0.0.5 → 0.0.7

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

@@ -1,49 +0,0 @@
-import React from "react";
-
-import { MapPin } from "@phosphor-icons/react";
-import { AdvancedMarker as GoogleMarker } from "@vis.gl/react-google-maps";
-
-import type { MapMarkerProps } from "../types";
-
-import { Cluster } from "../Cluster";
-
-import * as globalStyles from "../styles";
-
-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 = () => {
-      onClick?.(cluster);
-    };
-
-    return (
-      <GoogleMarker
-        key={`map-marker-${longitude}-${latitude}-${index}`}
-        position={{
-          lat: latitude,
-          lng: longitude,
-        }}
-        onClick={handleOnClick}
-      >
-        <div className={globalStyles.container} data-is-cluster={!!cluster.properties.cluster}>
-          {cluster.properties.cluster ? (
-            <Cluster cluster={cluster} />
-          ) : (
-            <>
-              <div className={globalStyles.iconWrapper}>
-                {cluster.properties.icon ? (
-                  <cluster.properties.icon className={globalStyles.icon} />
-                ) : (
-                  <MapPin className={globalStyles.icon} />
-                )}
-              </div>
-              {children}
-            </>
-          )}
-        </div>
-      </GoogleMarker>
-    );
-  });
-}

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

@@ -1,52 +0,0 @@
-import React from "react";
-
-import { MapPin } from "@phosphor-icons/react";
-import { Marker as MapboxMarker, type MarkerEvent } from "react-map-gl/mapbox";
-
-import type { MapMarkerProps } from "../types";
-
-import { Cluster } from "../Cluster";
-
-import * as styles from "../styles";
-
-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} data-is-cluster={!!cluster.properties.cluster}>
-          {cluster.properties.cluster ? (
-            <Cluster cluster={cluster} />
-          ) : (
-            <>
-              <div className={styles.iconWrapper}>
-                {cluster.properties.icon ? (
-                  <cluster.properties.icon className={styles.icon} />
-                ) : (
-                  <MapPin className={styles.icon} />
-                )}
-              </div>
-              {children}
-            </>
-          )}
-        </div>
-      </MapboxMarker>
-    );
-  });
-}

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

@@ -1,52 +0,0 @@
-import React from "react";
-
-import { MapPin } from "@phosphor-icons/react";
-import { Marker as MaplibreMarker, type MarkerEvent } from "react-map-gl/maplibre";
-
-import type { MapMarkerProps } from "../types";
-
-import { Cluster } from "../Cluster";
-
-import * as styles from "../styles";
-
-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} data-is-cluster={!!cluster.properties.cluster}>
-          {cluster.properties.cluster ? (
-            <Cluster cluster={cluster} />
-          ) : (
-            <>
-              <div className={styles.iconWrapper}>
-                {cluster.properties.icon ? (
-                  <cluster.properties.icon className={styles.icon} />
-                ) : (
-                  <MapPin className={styles.icon} />
-                )}
-              </div>
-              {children}
-            </>
-          )}
-        </div>
-      </MaplibreMarker>
-    );
-  });
-}

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

@@ -1,81 +0,0 @@
-import React, { lazy, useMemo } from "react";
-
-import { point } from "@turf/turf";
-
-import useSupercluser from "use-supercluster";
-
-import { useRootElement } from "../context";
-
-import type { MarkerProps, MapMarkerProps, ClusterPoint, MarkerPoint } from "./types";
-
-import * as styles from "./styles";
-
-const MaptilerMarkers = lazy(() => import("./Maptiler"));
-const GoogleMarkers = lazy(() => import("./Google"));
-const MapboxMarkers = lazy(() => import("./Mapbox"));
-
-export const Markers = ({ markers, onClick, ...rest }: MarkerProps) => {
-  const { mapProvider, bounds } = useRootElement();
-  const { clusters, supercluster } = useSupercluser({
-    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":
-        return MaptilerMarkers;
-      case "google":
-        return GoogleMarkers;
-      case "mapbox":
-        return MapboxMarkers;
-      default:
-        return null;
-    }
-  }, [mapProvider]);
-
-  if (!BaseMarkers) {
-    return null;
-  }
-
-  return (
-    <>
-      <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,39 +0,0 @@
-export const container = `
-  cursor-pointer
-  relative
-  h-7
-  w-5
-  text-base-white
-  group
-  transition-transform
-
-  data-[is-cluster=true]:w-auto
-`;
-
-export const background = `
-  cursor-pointer
-  fill-primary-100
-  stroke-1
-  box-border
-  transition-colors
-  transition-transform
-  group-hover:stroke-base-white
-  group-focus:stroke-base-white
-`;
-
-export const iconWrapper = `
-  absolute top-1 left-1/2 transform -translate-x-1/2
-  flex justify-center items-center rounded-full overflow-hidden
-  transition-all w-3.5 h-3.5
-
-  group-hover:bg-base-white
-`;
-
-export const icon = `
-  m-auto transition-all w-full h-full
-  max-w-3.5 max-h-3.5
-
-  group-hover:text-primary-100
-  group-hover:max-w-2.5
-  group-hover:max-h-2.5
-`;

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

@@ -1,32 +0,0 @@
-import type { ReactNode } from "react";
-import type { PointFeature, ClusterProperties } from "supercluster";
-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?: (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

@@ -1,57 +0,0 @@
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,36 +0,0 @@
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,32 +0,0 @@
-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/types.ts

@@ -1,20 +0,0 @@
-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/constants.ts

@@ -1,6 +0,0 @@
-export const defaultMapValues = {
-  zoom: 16,
-  pitch: 0,
-  bearing: 0,
-  cooperativeGestures: false,
-};

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

@@ -1,15 +0,0 @@
-import React, { useContext } from "react";
-import type { BBox } from "geojson";
-import type { RootProps } from "./types";
-
-export type DefaultContext = RootProps & {
-  bounds?: BBox;
-  setBounds: (bounds: BBox) => void;
-};
-
-const RootElementContext = React.createContext<DefaultContext>(
-  {} as DefaultContext,
-);
-const useRootElement = () => useContext(RootElementContext);
-
-export { useRootElement, RootElementContext };

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

@@ -1,30 +0,0 @@
-import React, { useState } from "react";
-import type { RootProps } from "./types";
-import { RootElementContext, type DefaultContext } from "./context";
-
-export function Root(props: RootProps) {
-  const [bounds, setBounds] = useState<DefaultContext["bounds"]>();
-
-  return (
-    <RootElementContext.Provider value={{ ...props, bounds, setBounds }}>
-      {props.children}
-    </RootElementContext.Provider>
-  );
-}
-
-// BASE MAP
-export { BaseMap } from "./BaseMap";
-
-// MARKERS
-export { Markers } from "./Markers";
-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,30 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * We should try to keep the types "agnostic" but if we have to pick a side,
- * we should side with the maptiler namings.
- */
-
-export type MapProvider = {
-  apiKey: string;
-  name: "maptiler" | "google" | "mapbox";
-  maptilerTheme?: string;
-};
-
-export type Coordinates = {
-  latitude: number;
-  longitude: number;
-};
-
-export type ZoomPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
-
-export type RootProps = {
-  mapProvider: MapProvider;
-  center: Coordinates;
-  zoom?: number;
-  zoomPosition?: ZoomPosition;
-  pitch?: number;
-  bearing?: number;
-  cooperativeGestures?: boolean;
-  children?: ReactNode;
-};