@local-logic/maps 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @local-logic/maps
 
+## 0.0.3
+
+### Patch Changes
+
+- de9946a: LL22-5133: Added layer support to map package
+
+## 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.3",
   "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/Layers/Google/index.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect, useContext } from "react";
+
+// Work inspired from:
+// https://github.com/visgl/react-google-maps/blob/main/examples/geometry/src/components/polygon.tsx
+// https://visgl.github.io/react-google-maps/examples/geometry
+
+import { GoogleMapsContext } from "@vis.gl/react-google-maps";
+
+import { getGooglePolygonFromLocalLogicGeometry } from "../utils";
+
+import type { Props, Layer as LayerType } from "../types";
+
+function getLayerPaint(type: LayerType["type"], color: string) {
+  switch (type) {
+    case "fill":
+      return {
+        fillColor: color,
+        fillOpacity: 0.25,
+      };
+    case "line":
+      return {
+        strokeColor: color,
+        strokeWeight: 2,
+      };
+    default:
+      return {};
+  }
+}
+
+export default function GoogleLayers({ sources }: Props) {
+  const [map, setMap] = useState<google.maps.Map | null>(null);
+  const [polygonRefs, setPolygonRefs] = useState<google.maps.Polygon[]>([]);
+  const mapContext = useContext(GoogleMapsContext);
+
+  useEffect(() => {
+    if (!mapContext) {
+      return;
+    }
+
+    setMap(mapContext.map);
+  }, [mapContext]);
+
+  useEffect(() => {
+    // Remove existing polygons
+    polygonRefs.forEach((polygonRef) => {
+      polygonRef?.setMap(null);
+    });
+
+    if (!map || typeof sources === "undefined" || sources.length === 0) {
+      return;
+    }
+
+    // Create new polygons
+    const newPolygons = sources.map((source) => {
+      const polygonOptions = {
+        paths: getGooglePolygonFromLocalLogicGeometry(source.geometry),
+      };
+
+      if (Array.isArray(source.layer)) {
+        source.layer.forEach((layer) => {
+          const layerPaint = getLayerPaint(layer.type, layer.color);
+          Object.assign(polygonOptions, layerPaint);
+        });
+      } else {
+        const layerPaint = getLayerPaint(source.layer.type, source.layer.color);
+        Object.assign(polygonOptions, layerPaint);
+      }
+
+      const newPolygon = new google.maps.Polygon({
+        // Set default options otherwise the polygon remains visible (even if eg: we only want the outline)
+        // We then overrider the default options with the layer options
+        strokeWeight: 0,
+        fillOpacity: 0,
+        ...polygonOptions,
+      });
+      newPolygon.setMap(map);
+
+      return newPolygon;
+    });
+
+    setPolygonRefs(newPolygons);
+    // Set the map for each polygon
+    newPolygons.forEach((polygonRef) => {
+      polygonRef.setMap(map);
+    });
+
+    // Clean up the polygons when the component unmounts or when sources change
+    // eslint-disable-next-line consistent-return
+    return () => {
+      newPolygons.forEach((polygonRef) => {
+        polygonRef?.setMap(null);
+      });
+    };
+  }, [map, sources]);
+
+  return <></>;
+}

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

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+
+import { Source, Layer } from "react-map-gl/mapbox";
+
+import { getFeatureCollectionFromLocalLogicGeometry } from "../utils";
+
+import type { Props, Layer as LayerType } from "../types";
+
+function getLayerPaint(type: LayerType["type"], color: string) {
+  switch (type) {
+    case "fill":
+      return {
+        "fill-color": color,
+        "fill-opacity": 0.15,
+      };
+    case "line":
+      return {
+        "line-color": color,
+        "line-width": 2,
+      };
+    default:
+      return {};
+  }
+}
+
+export default function MapboxLayers({ sources }: Props) {
+  const geometrySources = useMemo(() => {
+    if (!Array.isArray(sources) || sources.length === 0) {
+      return [];
+    }
+
+    return sources.map((geometry) => ({
+      ...geometry,
+      geoJson: geometry.geometry
+        ? getFeatureCollectionFromLocalLogicGeometry(geometry.geometry)
+        : null,
+    }));
+  }, [sources]);
+
+  if (geometrySources?.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {geometrySources?.map((source) => (
+        <div key={source.key}>
+          {source.geoJson && (
+            <Source id={source.key} key={source.key} type="geojson" data={source.geoJson}>
+              {source.layer &&
+                (Array.isArray(source.layer) ? (
+                  source.layer.map((layer, index) => (
+                    <Layer
+                      key={`${source.key}-${index}`}
+                      {...{
+                        ...{ type: layer.type, paint: getLayerPaint(layer.type, layer.color) },
+                      }}
+                    />
+                  ))
+                ) : (
+                  <Layer
+                    {...{
+                      type: source.layer.type,
+                      paint: getLayerPaint(source.layer.type, source.layer.color),
+                    }}
+                  />
+                ))}
+            </Source>
+          )}
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+
+import { Source, Layer } from "react-map-gl/maplibre";
+
+import { getFeatureCollectionFromLocalLogicGeometry } from "../utils";
+
+import type { Props, Layer as LayerType } from "../types";
+
+function getLayerPaint(type: LayerType["type"], color: string) {
+  switch (type) {
+    case "fill":
+      return {
+        "fill-color": color,
+        "fill-opacity": 0.25,
+      };
+    case "line":
+      return {
+        "line-color": color,
+        "line-width": 2,
+      };
+    default:
+      return {};
+  }
+}
+
+export default function MaptilerLayers({ sources }: Props) {
+  const geometrySources = useMemo(() => {
+    if (!Array.isArray(sources) || sources.length === 0) {
+      return [];
+    }
+
+    return sources.map((geometry) => ({
+      ...geometry,
+      geoJson: geometry.geometry
+        ? getFeatureCollectionFromLocalLogicGeometry(geometry.geometry)
+        : null,
+    }));
+  }, [sources]);
+
+  if (geometrySources?.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {geometrySources?.map((source) => (
+        <div key={source.key}>
+          {source.geoJson && (
+            <Source id={source.key} key={source.key} type="geojson" data={source.geoJson}>
+              {source.layer &&
+                (Array.isArray(source.layer) ? (
+                  source.layer.map((layer, index) => (
+                    <Layer
+                      key={`${source.key}-${index}`}
+                      {...{
+                        ...{ type: layer.type, paint: getLayerPaint(layer.type, layer.color) },
+                      }}
+                    />
+                  ))
+                ) : (
+                  <Layer
+                    {...{
+                      type: source.layer.type,
+                      paint: getLayerPaint(source.layer.type, source.layer.color),
+                    }}
+                  />
+                ))}
+            </Source>
+          )}
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+import React, { lazy, useMemo } from "react";
+
+import type { Props } from "./types";
+
+import { useRootElement } from "../context";
+
+const MaptilerLayers = lazy(() => import("./Maptiler"));
+const GoogleLayers = lazy(() => import("./Google"));
+const MapboxLayers = lazy(() => import("./Mapbox"));
+
+export function Layers(props: Props) {
+  const { mapProvider } = useRootElement();
+
+  const BaseLayers = useMemo(() => {
+    switch (mapProvider?.name) {
+      case "maptiler":
+        return MaptilerLayers;
+      case "google":
+        return GoogleLayers;
+      case "mapbox":
+        return MapboxLayers;
+      default:
+        return null;
+    }
+  }, [mapProvider]);
+
+  if (!BaseLayers) {
+    return null;
+  }
+
+  return <BaseLayers {...props} />;
+}

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

@@ -0,0 +1,15 @@
+export type Layer = {
+  type: "fill" | "line";
+  color: string;
+};
+
+export type Source = {
+  key: string;
+  layer: Layer | Layer[];
+  // Expected [lat, lng] format
+  geometry: number[][][][];
+};
+
+export type Props = {
+  sources?: Source[];
+};

package/src/components/Map/Root/Layers/utils.ts

@@ -0,0 +1,64 @@
+import type { FeatureCollection, MultiPolygon } from "geojson";
+
+type Geometry =
+  | number[][]
+  | number[][][]
+  | number[][][][]
+  | string[][]
+  | string[][][]
+  | string[][][][];
+
+export function getFeatureCollectionFromLocalLogicGeometry(geometry: Geometry = []) {
+  /* Geometries need formatting before being added as a Source in the Map.
+   * Geometries from v3/schools have a format of [lat, lng]
+   * Geojson accepts polygons with a format of [lng, lat]
+   */
+
+  const geometryLatLngFormat = (arr: object): object =>
+    Object.values(arr).map((a) => {
+      if (Array.isArray(a[0])) {
+        return geometryLatLngFormat(a);
+      }
+
+      return [a[1], a[0]];
+    });
+
+  const finalCoordinates = geometryLatLngFormat(geometry);
+
+  const responseObject = {
+    type: "FeatureCollection",
+    features: [
+      {
+        type: "Feature",
+        geometry: {
+          type: "MultiPolygon",
+          coordinates: finalCoordinates,
+        },
+      },
+    ],
+  } as FeatureCollection<MultiPolygon>;
+
+  return responseObject;
+}
+
+export function getGooglePolygonFromLocalLogicGeometry(geometry: Geometry = []) {
+  /* Geometries need formatting before being added as a Source in the Map.
+   * Geometries from v3/schools have a format of [lat, lng]
+   * Google Maps accepts polygons with a format of { lat: number, lng: number }
+   */
+
+  const geometryLatLngFormat = (arr: object): object =>
+    Object.values(arr).map((a) => {
+      if (Array.isArray(a[0])) {
+        return geometryLatLngFormat(a.flat());
+      }
+
+      return { lat: a[0], lng: a[1] };
+    });
+
+  const finalCoordinates = geometryLatLngFormat(
+    geometry
+  ) as google.maps.MVCArray<google.maps.LatLng>;
+
+  return finalCoordinates;
+}

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}
             </>
           )}