First working configuration (yay)

performant-software · Jan 31, 2024 · 429fe76 · 429fe76
1 parent f45f162
commit 429fe76
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/packages/geospatial/src/components/CoreDataPlace.js b/packages/geospatial/src/components/CoreDataPlace.js
@@ -6,6 +6,9 @@ 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 '@peripleo/maplibre/peripleo-maplibre.css';
+import '@peripleo/peripleo/default-theme';
+
 type CoreDataPlaceProps = {
   mapStyle: string | object;
   placeURI: string;
@@ -28,7 +31,7 @@ export const CoreDataPlace = (props: CoreDataPlaceProps) => {
           fillStyle={props.fillStyle}
           pointStyle={props.pointStyle}
           strokeStyle={props.strokeStyle} />
-      </Map>x
+      </Map>
     </Peripleo>
   )
 

diff --git a/packages/storybook/src/geospatial/CoreDataPlace.css b/packages/storybook/src/geospatial/CoreDataPlace.css
@@ -0,0 +1,4 @@
+.p6o-map-container {
+  height: 100%;
+  width: 100%;
+}
diff --git a/packages/storybook/src/geospatial/CoreDataPlace.stories.js b/packages/storybook/src/geospatial/CoreDataPlace.stories.js
@@ -1,13 +1,36 @@
 import { CoreDataPlace } from '../../../geospatial/src/components/CoreDataPlace';
 
+import './CoreDataPlace.css';
+
 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": "&copy; OpenStreetMap Contributors",
+      "maxzoom": 19
+    }
+  },
+  "layers": [
+    {
+      "id": "osm",
+      "type": "raster",
+      "source": "osm"
+    }
+  ]
+};
 
 export const Default = () => (
-  <CoreDataPlace 
-    mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}  
-    placeURI="https://core-data-cloud-staging-2c51db0617a5.herokuapp.com/core_data/public/places/3aaf97a4-7052-4e2c-9056-4f4146ef0c87?project_ids=10" />
+  <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>
 )