@local-logic/maps 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @local-logic/maps
 
+## 0.0.4
+
+### Patch Changes
+
+- 892a059: LL22-5368: Updated storybook github action
+- Updated dependencies [892a059]
+  - @local-logic/design-system@0.7.12
+
+## 0.0.3
+
+### Patch Changes
+
+- de9946a: LL22-5133: Added layer support to map package
+
 ## 0.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@local-logic/maps",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "This is a maps implementation allowing for the display of Local Logic data on a map.",
   "author": "Local Logic",
   "license": "ISC",
@@ -14,14 +14,14 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:storybook": "storybook build",
     "test": "vitest run",
     "stats": "STATS=1 vite build",
     "size": "yarn run build && size-limit",
     "lint": "TIMING=1 eslint --ext .js,.jsx,.ts,.tsx .",
     "check-types": "tsc --project ./tsconfig.json --noEmit",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "storybook:run": "storybook dev -p 6006",
-    "storybook:build": "storybook build"
+    "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
     "react": ">=18",

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/types.ts

@@ -1,9 +1,18 @@
 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;

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

@@ -12,7 +12,19 @@ export function Root(props: RootProps) {
   );
 }
 
+// BASE MAP
 export { BaseMap } from "./BaseMap";
+
+// MARKERS
 export { Markers } from "./Markers";
+export type { MarkerProps, Marker, MarkerPoint } from "./Markers/types";
+
+// POPUP
 export { Popup } from "./Popup";
-export type { MarkerProps, MarkerPoint } from "./Markers/types";
+
+// 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,14 +16,6 @@ export type Coordinates = {
   longitude: number;
 };
 
-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 RootProps = {
@@ -35,6 +26,5 @@ export type RootProps = {
   pitch?: number;
   bearing?: number;
   cooperativeGestures?: boolean;
-  markers?: Marker[];
   children?: ReactNode;
 };

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

@@ -1,25 +1,21 @@
 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";
+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>;
 
@@ -32,88 +28,10 @@ const defaultValues = {
   zoomPosition: "bottom-right" as RootProps["zoomPosition"],
 };
 
-const markerList = [
-  {
-    id: "marker-1",
-    name: "Marker 1",
-    latitude: 45.527399,
-    longitude: -73.598126,
-    icon: Storefront,
-  },
-  {
-    id: "marker-2",
-    name: "Marker 2",
-    latitude: 45.527302,
-    longitude: -73.597405,
-    icon: ShoppingCartSimple,
-  },
-  {
-    id: "marker-3",
-    name: "Marker 3",
-    latitude: 45.527302,
-    longitude: -73.597405,
-    icon: Brandy,
-  },
-  {
-    id: "marker-4",
-    name: "Marker 4",
-    latitude: 45.527302,
-    longitude: -73.597405,
-    icon: ForkKnife,
-  },
-  {
-    id: "marker-5",
-    name: "Marker 5",
-    latitude: 45.527302,
-    longitude: -73.597405,
-    icon: Coffee,
-  },
-  {
-    id: "marker-6",
-    name: "Marker 6",
-    latitude: 45.527302,
-    longitude: -73.597405,
-    icon: Baby,
-  },
-  {
-    id: "marker-7",
-    name: "Marker 7",
-    latitude: 45.527256,
-    longitude: -73.600229,
-    icon: Train,
-  },
-  {
-    id: "marker-8",
-    name: "Marker 8",
-    latitude: 45.527256,
-    longitude: -73.600229,
-    icon: Barbell,
-  },
-  {
-    id: "marker-9",
-    name: "Marker 9",
-    latitude: 45.526643,
-    longitude: -73.600293,
-    icon: GasPump,
-  },
-  {
-    id: "marker-10",
-    name: "Marker 10",
-    latitude: 45.527025,
-    longitude: -73.600897,
-    icon: Heartbeat,
-  },
-] as Marker[];
-
-const maptilerThemes = {
-  day: "600d69cb-288d-445e-9839-3dfe4d76b31a",
-  night: "dd191599-2a92-49fc-9a33-e12391753ad5",
-};
-
 const Template: StoryFn<RootProps> = (args) => {
-  const [activeMarker, setActiveMarker] = useState<Map.MarkerPoint | undefined>(undefined);
+  const [activeMarker, setActiveMarker] = useState<MarkerPoint | undefined>(undefined);
 
-  const handleMarkerClick = (markers: Map.MarkerPoint) => {
+  const handleMarkerClick = (markers: MarkerPoint) => {
     if (
       activeMarker?.latitude === markers.latitude &&
       activeMarker?.longitude === markers.longitude
@@ -168,19 +86,20 @@ const Template: StoryFn<RootProps> = (args) => {
 
   return (
     <div className="w-full h-[calc(100vh-30px)]">
-      <Map.Root {...args}>
-        <Map.BaseMap>
-          <Map.Markers markers={markerList} onClick={handleMarkerClick} />
+      <MapRoot {...args}>
+        <BaseMap>
+          <Layers sources={layerSources} />
+          <Markers markers={markerList} onClick={handleMarkerClick} />
 
-          <Map.Popup
+          <Popup
             latitude={activeMarker?.latitude}
             longitude={activeMarker?.longitude}
             onClose={() => setActiveMarker(undefined)}
           >
             {popupContent}
-          </Map.Popup>
-        </Map.BaseMap>
-      </Map.Root>
+          </Popup>
+        </BaseMap>
+      </MapRoot>
     </div>
   );
 };
@@ -190,7 +109,7 @@ Maptiler.args = {
   mapProvider: {
     name: "maptiler",
     apiKey: import.meta.env.VITE_MAPTILER_KEY,
-    maptilerTheme: maptilerThemes.day,
+    maptilerTheme: themes.maptiler.day,
   },
   ...defaultValues,
 };

package/src/components/Map/storybook-data.ts

@@ -0,0 +1,255 @@
+import {
+  Storefront,
+  ShoppingCartSimple,
+  Brandy,
+  ForkKnife,
+  Coffee,
+  Baby,
+  Train,
+  Barbell,
+  GasPump,
+  Heartbeat,
+} from "@phosphor-icons/react";
+
+import type { Marker, Source } from "./Root";
+
+export const themes = {
+  maptiler: {
+    day: "600d69cb-288d-445e-9839-3dfe4d76b31a",
+    night: "dd191599-2a92-49fc-9a33-e12391753ad5",
+  },
+  mapbox: {
+    day: "",
+    night: "",
+  },
+  google: {
+    day: "",
+    night: "",
+  },
+};
+
+export const markerList = [
+  {
+    id: "marker-1",
+    name: "Marker 1",
+    latitude: 45.527399,
+    longitude: -73.598126,
+    icon: Storefront,
+  },
+  {
+    id: "marker-2",
+    name: "Marker 2",
+    latitude: 45.527302,
+    longitude: -73.597405,
+    icon: ShoppingCartSimple,
+  },
+  {
+    id: "marker-3",
+    name: "Marker 3",
+    latitude: 45.527302,
+    longitude: -73.597405,
+    icon: Brandy,
+  },
+  {
+    id: "marker-4",
+    name: "Marker 4",
+    latitude: 45.527302,
+    longitude: -73.597405,
+    icon: ForkKnife,
+  },
+  {
+    id: "marker-5",
+    name: "Marker 5",
+    latitude: 45.527302,
+    longitude: -73.597405,
+    icon: Coffee,
+  },
+  {
+    id: "marker-6",
+    name: "Marker 6",
+    latitude: 45.527302,
+    longitude: -73.597405,
+    icon: Baby,
+  },
+  {
+    id: "marker-7",
+    name: "Marker 7",
+    latitude: 45.527256,
+    longitude: -73.600229,
+    icon: Train,
+  },
+  {
+    id: "marker-8",
+    name: "Marker 8",
+    latitude: 45.527256,
+    longitude: -73.600229,
+    icon: Barbell,
+  },
+  {
+    id: "marker-9",
+    name: "Marker 9",
+    latitude: 45.526643,
+    longitude: -73.600293,
+    icon: GasPump,
+  },
+  {
+    id: "marker-10",
+    name: "Marker 10",
+    latitude: 45.527025,
+    longitude: -73.600897,
+    icon: Heartbeat,
+  },
+] as Marker[];
+
+export const layerSources: Source[] = [
+  {
+    key: "neighborhood",
+    layer: [
+      {
+        type: "fill",
+        color: "#008491",
+      },
+      {
+        type: "line",
+        color: "#008491",
+      },
+    ],
+    geometry: [
+      [
+        [
+          [45.53006, -73.59634],
+          [45.52986, -73.59589],
+          [45.52982, -73.59582],
+          [45.52894, -73.59389],
+          [45.52864, -73.59321],
+          [45.52799, -73.59174],
+          [45.52626, -73.58795],
+          [45.52478, -73.58473],
+          [45.52396, -73.58292],
+          [45.52337, -73.58342],
+          [45.52332, -73.58347],
+          [45.52289, -73.58385],
+          [45.52242, -73.58426],
+          [45.52216, -73.58451],
+          [45.52164, -73.58499],
+          [45.5201, -73.58638],
+          [45.51835, -73.58796],
+          [45.51765, -73.58854],
+          [45.51753, -73.58864],
+          [45.51711, -73.58901],
+          [45.51695, -73.58915],
+          [45.51677, -73.58932],
+          [45.51679, -73.58938],
+          [45.51649, -73.58965],
+          [45.51639, -73.58973],
+          [45.51633, -73.58978],
+          [45.5163, -73.58981],
+          [45.51602, -73.59007],
+          [45.5158, -73.59027],
+          [45.51585, -73.59038],
+          [45.5159, -73.59049],
+          [45.51625, -73.59125],
+          [45.5163, -73.59136],
+          [45.51632, -73.5914],
+          [45.51652, -73.59185],
+          [45.51667, -73.5922],
+          [45.51682, -73.59253],
+          [45.51695, -73.59282],
+          [45.51704, -73.59302],
+          [45.51712, -73.5932],
+          [45.51721, -73.59339],
+          [45.51738, -73.59379],
+          [45.51742, -73.59387],
+          [45.51757, -73.59422],
+          [45.51797, -73.59513],
+          [45.5181, -73.59542],
+          [45.51861, -73.59655],
+          [45.51902, -73.59748],
+          [45.51917, -73.59781],
+          [45.51939, -73.59832],
+          [45.51944, -73.59843],
+          [45.51948, -73.59853],
+          [45.51963, -73.59887],
+          [45.52018, -73.6001],
+          [45.52076, -73.60143],
+          [45.52127, -73.60258],
+          [45.52138, -73.60283],
+          [45.52147, -73.60303],
+          [45.52206, -73.60435],
+          [45.52213, -73.60452],
+          [45.52228, -73.60485],
+          [45.52241, -73.60515],
+          [45.52245, -73.60523],
+          [45.52249, -73.60531],
+          [45.52252, -73.6054],
+          [45.52256, -73.60548],
+          [45.5226, -73.60556],
+          [45.52278, -73.60597],
+          [45.52285, -73.60614],
+          [45.52294, -73.60634],
+          [45.52309, -73.60667],
+          [45.52324, -73.607],
+          [45.52335, -73.60725],
+          [45.52349, -73.60758],
+          [45.52366, -73.60796],
+          [45.52376, -73.60819],
+          [45.52387, -73.60843],
+          [45.52463, -73.61015],
+          [45.52468, -73.61026],
+          [45.52468, -73.61026],
+          [45.525, -73.61098],
+          [45.52537, -73.61179],
+          [45.5256, -73.61233],
+          [45.52565, -73.61242],
+          [45.52566, -73.6124],
+          [45.5263, -73.61124],
+          [45.52644, -73.611],
+          [45.5277, -73.60871],
+          [45.52783, -73.60839],
+          [45.52804, -73.60786],
+          [45.52817, -73.60739],
+          [45.52822, -73.6072],
+          [45.52823, -73.60716],
+          [45.52825, -73.60704],
+          [45.52828, -73.60689],
+          [45.52829, -73.60685],
+          [45.52831, -73.60672],
+          [45.52831, -73.6067],
+          [45.52837, -73.60626],
+          [45.52838, -73.60619],
+          [45.52838, -73.60614],
+          [45.52839, -73.60576],
+          [45.52837, -73.60459],
+          [45.52837, -73.60457],
+          [45.52839, -73.6035],
+          [45.52842, -73.60238],
+          [45.52849, -73.60167],
+          [45.52849, -73.60167],
+          [45.5285, -73.60159],
+          [45.5285, -73.60159],
+          [45.52854, -73.60122],
+          [45.52857, -73.60103],
+          [45.52871, -73.60014],
+          [45.52873, -73.6],
+          [45.52873, -73.6],
+          [45.52878, -73.59978],
+          [45.52878, -73.59977],
+          [45.5289, -73.59929],
+          [45.52905, -73.5988],
+          [45.5291, -73.59861],
+          [45.52916, -73.59844],
+          [45.52916, -73.59844],
+          [45.5293, -73.59807],
+          [45.52931, -73.59803],
+          [45.52934, -73.59796],
+          [45.52956, -73.5974],
+          [45.52966, -73.59715],
+          [45.52985, -73.59678],
+          [45.53004, -73.5964],
+          [45.53007, -73.59635],
+          [45.53006, -73.59634],
+        ],
+      ],
+    ],
+  },
+];