From bf1a8fae8a65a2cf9987947beea6dddd449bb501 Mon Sep 17 00:00:00 2001
From: yuiseki <yuiseki@gmail.com>
Date: Sun, 11 Aug 2024 13:26:43 +0900
Subject: [PATCH] chore: refine example of rwanda

---
 src/components/Datasets/Rwanda10/source.ts    |  1 +
 .../Stories/RwandaMap/index.stories.tsx       |  5 +++
 src/examples/Stories/RwandaMap/index.tsx      | 45 ++++++++++---------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/Datasets/Rwanda10/source.ts b/src/components/Datasets/Rwanda10/source.ts
index 7688b9f..f893d4a 100644
--- 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
index 8b8e835..dffe27e 100644
--- 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
index 72db6ac..4eb0b90 100644
--- 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>
   );
 };