RC #251 - Combining LocationMarker and PlaceMarker components; Removi…

…ng @peripleo/maplibre dependency from geospatial
performant-software · Feb 21, 2024 · f9ae09d · f9ae09d
1 parent 4a6ad80
commit f9ae09d
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 346 deletions.
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@peripleo/maplibre": "^0.3.3",
     "@performant-software/webpack-config": "^1.0.0",
+    "@peripleo/maplibre": "^0.3.3",
     "autoprefixer": "^10.4.17",
     "mini-css-extract-plugin": "^2.8.0",
     "postcss": "^8.4.34",

diff --git a/packages/core-data/src/components/PlaceMarker.js b/packages/core-data/src/components/PlaceMarker.js
@@ -1,9 +1,30 @@
 // @flow
 
-import { LocationMarker } from '@performant-software/geospatial';
+import { Map as MapUtils } from '@performant-software/geospatial';
+import { MixedGeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
 import React, { useCallback, useEffect, useState } from 'react';
 
 type Props = {
+  /**
+   * The number of miles to buffer the GeoJSON data.
+   */
+  buffer: number,
+
+  /**
+   * GeoJSON layer fill style.
+   */
+  fillStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer point style.
+   */
+  pointStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer stroke style
+   */
+  strokeStyle?: { [key: string]: any },
+
   /**
    * The URL of the Core Data place record.
    */
@@ -16,6 +37,8 @@ type Props = {
 const PlaceMarker = (props: Props) => {
   const [place, setPlace] = useState();
 
+  const map = useMap();
+
   /**
    * Converts the passed data to a feature collection and sets it on the state.
    *
@@ -45,14 +68,34 @@ const PlaceMarker = (props: Props) => {
       .then(onLoad);
   }, [props.url]);
 
+  /**
+   * Sets the bounding box on the map.
+   */
+  useEffect(() => {
+    if (map && place) {
+      const boundingBox = MapUtils.getBoundingBox(place, props.buffer);
+      map.fitBounds(boundingBox);
+    }
+  }, [map, place, props.buffer]);
+
   if (!place) {
     return null;
   }
 
   return (
-    <LocationMarker
-      data={place}
-    />
+    <>
+      <PulsingMarkerLayer
+        id='current'
+        data={place}
+      />
+      <MixedGeoJSONLayer
+        id='current'
+        data={place}
+        fillStyle={props.fillStyle}
+        strokeStyle={props.strokeStyle}
+        pointStyle={props.pointStyle}
+      />
+    </>
   );
 };
 

diff --git a/packages/geospatial/package.json b/packages/geospatial/package.json
@@ -10,24 +10,18 @@
   },
   "dependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.3",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@samvera/clover-iiif": "^2.3.2",
     "@turf/turf": "^6.5.0",
-    "lucide-react": "^0.320.0",
     "mapbox-gl": "npm:[email protected]",
     "maplibre-gl": "^3.6.2",
     "react-icons": "^5.0.1",
     "react-map-gl": "^7.1.6",
     "underscore": "^1.13.6"
   },
   "peerDependencies": {
-    "@peripleo/maplibre": "^0.3.3",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },
   "devDependencies": {
-    "@peripleo/maplibre": "^0.3.3",
     "@performant-software/webpack-config": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/packages/geospatial/src/components/LocationMarker.js b/packages/geospatial/src/components/LocationMarker.js
diff --git a/packages/geospatial/src/index.js b/packages/geospatial/src/index.js
@@ -4,7 +4,6 @@
 export { default as DrawControl } from './components/DrawControl';
 export { default as GeoJsonLayer } from './components/GeoJsonLayer';
 export { default as LayerMenu } from './components/LayerMenu';
-export { default as LocationMarker } from './components/LocationMarker';
 export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';

diff --git a/packages/storybook/src/core-data/PlaceMarker.stories.js b/packages/storybook/src/core-data/PlaceMarker.stories.js
@@ -30,6 +30,7 @@ export const Default = () => (
         }}
       >
         <PlaceMarker
+          buffer={2}
           url={PLACE_URL}
         />
       </div>

diff --git a/packages/storybook/src/geospatial/CoreDataPlaceDetailsPanel.storieshold.js b/packages/storybook/src/geospatial/CoreDataPlaceDetailsPanel.storieshold.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ export const Default = () => ( @@
             }}
           >
             <PlaceMarker
+              buffer={2}
               url={PLACE_URL}
             />
           </div>
@@ Expand Down @@