Merge pull request #112 from UNopenGIS/tweak-rwanda-map

chore: refine example of rwanda
UNopenGIS · Aug 11, 2024 · 2d78347 · 2d78347
2 parents ee57c2b + bf1a8fa
commit 2d78347
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/src/components/Datasets/Rwanda10/source.ts b/src/components/Datasets/Rwanda10/source.ts
@@ -19,6 +19,7 @@ export const Rwanda10PMTilesSource: PMTilesSource = {
       id: "rwanda-10-hills",
       type: "hillshade",
       source: "rwanda-10-source",
+      sourceLayer: "hillshade",
       paint: {
         "hillshade-shadow-color": "#473B24",
       },

diff --git a/src/examples/Stories/RwandaMap/index.stories.tsx b/src/examples/Stories/RwandaMap/index.stories.tsx
@@ -9,9 +9,14 @@ const meta = {
       options: mapStyleOptions,
       control: { type: "select" },
     },
+    sources: {
+      options: ["cell", "conflict", "terrain", "transportation"],
+      control: { type: "inline-check" },
+    },
   },
   args: {
     mapStyle: "stylejson/tile.openstreetmap.jp/fiord-color-gl-style/style.json",
+    sources: ["cell", "conflict", "terrain", "transportation"],
   },
   parameters: {
     layout: "fullscreen",

diff --git a/src/examples/Stories/RwandaMap/index.tsx b/src/examples/Stories/RwandaMap/index.tsx
@@ -7,9 +7,18 @@ import { OpenCellIdPMTilesSource as cellDataSource } from "../../../components/D
 import { ArmedConflictPMTilesSource as conflictDataSource } from "../../../components/Datasets/ArmedConflict/source";
 import { Rwanda10PMTilesSource as terrainSource } from "../../../components/Datasets/Rwanda10/source";
 import { OvertureMapsTransportationOnlyPMTilesSource as transportationSource } from "../../../components/Datasets/OvertureMaps/source";
+import { PMTilesSource } from "../../../types/PMTilesSource";
 
-export const RwandaMap: React.FC<{ mapStyle: string }> = ({
+const AvailableSources: Record<string, PMTilesSource> = {
+  cell: cellDataSource,
+  conflict: conflictDataSource,
+  terrain: terrainSource,
+  transportation: transportationSource,
+};
+
+export const RwandaMap: React.FC<{ mapStyle: string; sources: string[] }> = ({
   mapStyle,
+  sources,
 }) => {
   useEffect(() => {
     const protocol = new Protocol();
@@ -33,26 +42,20 @@ export const RwandaMap: React.FC<{ mapStyle: string }> = ({
       style={{ width: "100%", height: "100%" }}
       mapStyle={mapStyle}
     >
-      <Source key={cellDataSource.id} {...cellDataSource}>
-        {cellDataSource.layers?.map((layer) => (
-          <Layer key={layer.id} source-layer={layer.sourceLayer} {...layer} />
-        ))}
-      </Source>
-      <Source key={conflictDataSource.id} {...conflictDataSource}>
-        {conflictDataSource.layers?.map((layer) => (
-          <Layer key={layer.id} source-layer={layer.sourceLayer} {...layer} />
-        ))}
-      </Source>
-      <Source key={terrainSource.id} {...terrainSource}>
-        {terrainSource.layers?.map((layer) => (
-          <Layer key={layer.id} {...layer} />
-        ))}
-      </Source>
-      <Source key={transportationSource.id} {...transportationSource}>
-        {transportationSource.layers?.map((layer) => (
-          <Layer key={layer.id} source-layer={layer.sourceLayer} {...layer} />
-        ))}
-      </Source>
+      {sources.map((source) => {
+        const dataSource = AvailableSources[source];
+        return (
+          <Source key={dataSource.id} {...dataSource}>
+            {dataSource.layers?.map((layer) => (
+              <Layer
+                key={layer.id}
+                source-layer={layer.sourceLayer}
+                {...layer}
+              />
+            ))}
+          </Source>
+        );
+      })}
     </Map>
   );
 };