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 = { + 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} > - - {cellDataSource.layers?.map((layer) => ( - - ))} - - - {conflictDataSource.layers?.map((layer) => ( - - ))} - - - {terrainSource.layers?.map((layer) => ( - - ))} - - - {transportationSource.layers?.map((layer) => ( - - ))} - + {sources.map((source) => { + const dataSource = AvailableSources[source]; + return ( + + {dataSource.layers?.map((layer) => ( + + ))} + + ); + })} ); };