@local-logic/maps 0.0.4 → 0.0.6

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

@@ -1,96 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import {
-  APIProvider,
-  Map as GoogleMap,
-  ControlPosition,
-  useMap,
-} from "@vis.gl/react-google-maps";
-
-import { useRootElement } from "../../context";
-import { defaultMapValues } from "../../constants";
-
-import type { BaseMapProps } from "../types";
-
-const zoomPositionMap = {
-  "top-left": ControlPosition.LEFT_TOP,
-  "top-right": ControlPosition.RIGHT_TOP,
-  "bottom-left": ControlPosition.LEFT_BOTTOM,
-  "bottom-right": ControlPosition.RIGHT_BOTTOM,
-};
-const mapId = "a7ff20eb973126bb";
-
-const MapControl = ({ isMapLoaded }: { isMapLoaded: boolean }) => {
-  const map = useMap();
-
-  const { setBounds } = useRootElement();
-
-  useEffect(() => {
-    if (!isMapLoaded || !map) {
-      return;
-    }
-
-    const bounds = map.getBounds()?.toJSON();
-
-    if (bounds) {
-      setBounds([bounds.west, bounds.south, bounds.east, bounds.north]);
-    }
-  }, [isMapLoaded, map]);
-
-  return null;
-};
-
-/**
- * Map IDS:
- * https://console.cloud.google.com/google/maps-apis/studio/maps?project=engineering-internal-396021
- *
- * Map styles:
- * https://console.cloud.google.com/google/maps-apis/studio/styles?project=engineering-internal-396021
- */
-export default function GoogleBaseMap({ children }: BaseMapProps) {
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
-  const {
-    mapProvider,
-    center,
-    zoom = defaultMapValues.zoom,
-    pitch = defaultMapValues.pitch,
-    bearing = defaultMapValues.bearing,
-    cooperativeGestures = defaultMapValues.cooperativeGestures,
-    zoomPosition,
-  } = useRootElement();
-
-  if (mapProvider.name !== "google") {
-    return null;
-  }
-
-  const handleMapLoaded = () => {
-    setIsMapLoaded(true);
-  };
-
-  return (
-    <APIProvider apiKey={mapProvider.apiKey}>
-      <MapControl isMapLoaded={isMapLoaded} />
-      <GoogleMap
-        mapId={mapId}
-        defaultCenter={{
-          lat: center.latitude,
-          lng: center.longitude,
-        }}
-        defaultZoom={zoom}
-        defaultTilt={pitch}
-        defaultHeading={bearing}
-        gestureHandling={!cooperativeGestures ? "greedy" : "cooperative"}
-        streetViewControl={false}
-        fullscreenControl={false}
-        clickableIcons={false}
-        mapTypeControl={false}
-        zoomControlOptions={{
-          position: zoomPosition && zoomPositionMap[zoomPosition],
-        }}
-        onTilesLoaded={handleMapLoaded}
-      >
-        {children}
-      </GoogleMap>
-    </APIProvider>
-  );
-}

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

@@ -1,66 +0,0 @@
-import React, { useEffect } from "react";
-
-import Mapbox, { NavigationControl, useMap } from "react-map-gl/mapbox";
-import "mapbox-gl/dist/mapbox-gl.css";
-
-import type { BBox } from "geojson";
-
-import { useRootElement } from "../../context";
-import { defaultMapValues } from "../../constants";
-
-import type { BaseMapProps } from "../types";
-
-const MapControl = () => {
-  const { current: map } = useMap();
-  const { setBounds } = useRootElement();
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-
-    const bounds = map.getBounds();
-
-    if (!bounds) {
-      return;
-    }
-
-    setBounds(bounds.toArray().flat() as BBox);
-  }, [map]);
-
-  return null;
-};
-
-export default function MapboxBaseMap({ children }: BaseMapProps) {
-  const {
-    mapProvider,
-    center,
-    zoom = defaultMapValues.zoom,
-    pitch = defaultMapValues.pitch,
-    bearing = defaultMapValues.bearing,
-    cooperativeGestures = defaultMapValues.cooperativeGestures,
-    zoomPosition,
-  } = useRootElement();
-
-  if (mapProvider.name !== "mapbox") {
-    return null;
-  }
-
-  return (
-    <Mapbox
-      mapboxAccessToken={mapProvider.apiKey}
-      initialViewState={{
-        ...center,
-        zoom,
-        pitch,
-        bearing,
-      }}
-      cooperativeGestures={cooperativeGestures}
-      mapStyle={`mapbox://styles/mapbox/streets-v9`}
-    >
-      <MapControl />
-      {zoomPosition && <NavigationControl position={zoomPosition} />}
-      {children}
-    </Mapbox>
-  );
-}

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

@@ -1,59 +0,0 @@
-import React, { useEffect } from "react";
-
-import Maplibre, { NavigationControl, useMap } from "react-map-gl/maplibre";
-import "maplibre-gl/dist/maplibre-gl.css";
-
-import type { BBox } from "geojson";
-
-import { useRootElement } from "../../context";
-import { defaultMapValues } from "../../constants";
-
-import type { BaseMapProps } from "../types";
-
-const MapControl = () => {
-  const { current: map } = useMap();
-  const { setBounds } = useRootElement();
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-
-    setBounds(map.getBounds().toArray().flat() as BBox);
-  }, [map]);
-
-  return null;
-};
-
-export default function MaptilerBaseMap({ children }: BaseMapProps) {
-  const {
-    mapProvider,
-    center,
-    zoom = defaultMapValues.zoom,
-    pitch = defaultMapValues.pitch,
-    bearing = defaultMapValues.bearing,
-    cooperativeGestures = defaultMapValues.cooperativeGestures,
-    zoomPosition,
-  } = useRootElement();
-
-  if (mapProvider.name !== "maptiler") {
-    return null;
-  }
-
-  return (
-    <Maplibre
-      initialViewState={{
-        ...center,
-        zoom,
-        pitch,
-        bearing,
-      }}
-      cooperativeGestures={cooperativeGestures}
-      mapStyle={`https://api.maptiler.com/maps/${mapProvider.maptilerTheme}/style.json?key=${mapProvider.apiKey}`}
-    >
-      <MapControl />
-      {zoomPosition && <NavigationControl position={zoomPosition} />}
-      {children}
-    </Maplibre>
-  );
-}

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

@@ -1,34 +0,0 @@
-import React, { lazy, useMemo } from "react";
-
-import { useRootElement } from "../context";
-
-import type { BaseMapProps } from "./types";
-import * as styles from "./styles";
-
-const MaptilerBaseMap = lazy(() => import("./Maptiler"));
-const GoogleBaseMap = lazy(() => import("./Google"));
-const MapboxBaseMap = lazy(() => import("./Mapbox"));
-const EmptyBaseMap = lazy(() => import("./Empty"));
-
-export const BaseMap = ({ children }: BaseMapProps) => {
-  const { mapProvider } = useRootElement();
-
-  const BaseMapProvider = useMemo(() => {
-    switch (mapProvider?.name) {
-      case "maptiler":
-        return MaptilerBaseMap;
-      case "google":
-        return GoogleBaseMap;
-      case "mapbox":
-        return MapboxBaseMap;
-      default:
-        return EmptyBaseMap;
-    }
-  }, [mapProvider]);
-
-  return (
-    <div className={styles.wrapper}>
-      <BaseMapProvider>{children}</BaseMapProvider>
-    </div>
-  );
-};

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

@@ -1 +0,0 @@
-export const wrapper = `w-full h-full`;

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

@@ -1,3 +0,0 @@
-import type { RootProps } from "../types";
-
-export type BaseMapProps = Pick<RootProps, "children">;

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-import React, { useMemo } from "react";
-
-import type { ClusterPoint } from "../types";
-
-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]
-  );
-
-  return (
-    <div
-      className={styles.container}
-      style={{
-        width: `${diameter}px`,
-        height: `${diameter}px`,
-        fontSize: `${diameter / 2.5}px`,
-      }}
-    >
-      {cluster.properties.point_count}
-    </div>
-  );
-}

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

@@ -1,11 +0,0 @@
-export const container = `
-  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
-`;