Minimal 'CoreDataPlace' Widget Example

packages/geospatial/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@peripleo/maplibre": "^0.3.2",
+    "@peripleo/peripleo": "^0.3.2",
     "@turf/turf": "^6.5.0",
     "mapbox-gl": "npm:[email protected]",
     "maplibre-gl": "^3.5.2",

packages/geospatial/src/components/CoreDataPlace.css

@@ -0,0 +1,4 @@
+.p6o-map-container {
+  height: 100%;
+  width: 100%;
+}

packages/geospatial/src/components/CoreDataPlace.js

@@ -0,0 +1,86 @@
+// @flow
+
+import React, { useEffect, useState } from 'react';
+import type { FeatureCollection } from '@peripleo/peripleo';
+import { Peripleo, Controls } from '@peripleo/peripleo';
+import { Map, MixedGeoJSONLayer, PulsingMarkerLayer, Zoom } from '@peripleo/maplibre';
+import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from './CoreDataPlaceStyles';
+
+import './CoreDataPlace.css';
+import '@peripleo/maplibre/peripleo-maplibre.css';
+import '@peripleo/peripleo/default-theme';
+
+type CoreDataPlaceProps = {
+  mapStyle: string | object;
+  placeURI: string;
+  fillStyle?: object;
+  pointStyle?: object;
+  strokeStyle?: object;
+};
+
+export const CoreDataPlace = (props: CoreDataPlaceProps) => {
+
+  return (
+    <Peripleo>
+      <Map style={props.mapStyle}>
+        <Controls position="topright">
+          <Zoom />
+        </Controls>
+
+        <CoreDataPlaceLayer 
+          uri={props.placeURI} 
+          fillStyle={props.fillStyle}
+          pointStyle={props.pointStyle}
+          strokeStyle={props.strokeStyle} />
+      </Map>
+    </Peripleo>
+  )
+
+};
+
+type CoreDataPlaceLayerProps = {
+  uri: string;
+  fillStyle?: object;
+  pointStyle?: object;
+  strokeStyle?: object;
+};
+
+export const CoreDataPlaceLayer = (props: CoreDataPlaceLayerProps) => {
+
+  const [place, setPlace] = useState<FeatureCollection | undefined>(undefined);
+
+  useEffect(() => {
+    fetch(props.uri)
+      .then(res => res.json())
+      .then(data => {
+        const place = {
+          ...data,
+          properties: {
+            ...data.properties,
+            record_id: data.record_id
+          }
+        };
+
+        setPlace({
+          type: 'FeatureCollection',
+          features: [place]
+        });
+      });
+  }, [props.uri])
+
+  return place && (
+    <>
+      <PulsingMarkerLayer 
+        id="current" 
+        data={place} />
+
+      <MixedGeoJSONLayer
+        id={props.uri} 
+        data={place} 
+        fillStyle={props.fillStyle || DEFAULT_FILL_STYLE} 
+        strokeStyle={props.strokeStyle || DEFAULT_STROKE_STYLE} 
+        pointStyle={props.pointStyle || DEFAULT_POINT_STYLE} />
+    </>
+  )
+
+};

packages/geospatial/src/components/CoreDataPlaceStyles.js

@@ -0,0 +1,36 @@
+export const DEFAULT_POINT_STYLE = {
+  'type': 'circle',
+  'paint': {
+    'circle-radius': [
+      'interpolate', 
+      ['linear'],
+      ['number', ['get','point_count'], 1 ],
+      0, 4, 
+      10, 14
+    ],
+    'circle-stroke-width': 1,
+    'circle-color': [
+      'case',
+      ['boolean', ['feature-state', 'hover'], false],
+      '#3b62ff',
+      '#ff623b'
+    ],
+    'circle-stroke-color': '#8d260c'
+  }
+};
+
+export const DEFAULT_FILL_STYLE = {
+  'type': 'fill',
+  'paint': {
+    'fill-color': '#ff623b',
+    'fill-opacity': 0.2
+  }
+}
+
+export const DEFAULT_STROKE_STYLE = {
+  'type': 'line',
+  'paint': {
+    'line-color': '#ff623b',
+    'line-opacity': 0.6
+  }
+}

packages/geospatial/src/index.js

@@ -3,3 +3,4 @@
 // Components
 export { default as DrawControl } from './components/DrawControl';
 export { default as MapDraw } from './components/MapDraw';
+export { default as CoreDataPlace } from './components/CoreDataPlace';

packages/storybook/package.json

@@ -14,6 +14,8 @@
     "@babel/preset-flow": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@faker-js/faker": "^8.0.2",
+    "@peripleo/maplibre": "^0.3.2",
+    "@peripleo/peripleo": "^0.3.2",
     "@storybook/addon-a11y": "^7.0.26",
     "@storybook/addon-actions": "^7.0.26",
     "@storybook/addon-docs": "^7.0.26",

packages/storybook/src/geospatial/CoreDataPlace.stories.js

@@ -0,0 +1,34 @@
+import { CoreDataPlace } from '../../../geospatial/src/components/CoreDataPlace';
+
+export default {
+  title: 'Components/Geospatial/CoreDataPlace',
+  component: CoreDataPlace
+};
+
+const style = {
+  "version": 8,
+	"sources": {
+    "osm": {
+			"type": "raster",
+			"tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
+			"tileSize": 256,
+      "attribution": "© OpenStreetMap Contributors",
+      "maxzoom": 19
+    }
+  },
+  "layers": [
+    {
+      "id": "osm",
+      "type": "raster",
+      "source": "osm"
+    }
+  ]
+};
+
+export const Default = () => (
+  <div style={{ width: '100%', height: '300px' }}>
+    <CoreDataPlace 
+      mapStyle={style}  
+      placeURI="https://core-data-cloud-staging-2c51db0617a5.herokuapp.com/core_data/public/places/3aaf97a4-7052-4e2c-9056-4f4146ef0c87?project_ids=10" />
+  </div>
+)