Add bounded terrain and flood analysis

2026-07-17 20:36:45 +02:00
parent 972c3f0e1b
commit 47cde21e17
12 changed files with 441 additions and 125 deletions
@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react'
 import GeoMap from '../GeoMap'
-import type { AreaRead, DatasetCreateResponse, DetectionQaResult, MapResultExportRequest, MapViewportState, OrthophotoAcquisitionResult, OrthophotoProductRead, ProjectRead, QaComparisonResult, ThematicRasterProductRead, VectorSelectionBBox, VectorSelectionMetric, VectorSelectionResponse } from '../../types'
-import { useMapThemeSelectionInsights, type MapThemeQuery } from '../../hooks/useMapThemeSelectionInsights'
-import { useThematicRasterProducts } from '../../hooks/useThematicRasterProducts'
+import type { AreaRead, DatasetCreateResponse, DetectionQaResult, MapResultExportRequest, MapViewportState, OrthophotoAcquisitionResult, OrthophotoProductRead, ProjectRead, QaComparisonResult, VectorSelectionBBox, VectorSelectionMetric, VectorSelectionResponse } from '../../types'
+import { useMapThemeSelectionInsights, type MapThemeAcquisition, type MapThemeQuery } from '../../hooks/useMapThemeSelectionInsights'
+import { useOfficialRasterProducts } from '../../hooks/useOfficialRasterProducts'
 import { useTemporalComparison } from '../../hooks/useTemporalComparison'
 import { getDatasetDisplayName, getDatasetSourceDisplayName } from '../../lib/datasetDisplay'
 import { TemporalTrendChart } from './TemporalTrendChart'
@@ -54,6 +54,14 @@ interface TemporalSeriesGroup {
  items: DatasetCreateResponse[]
 }

+interface OnDemandRasterProduct extends MapThemeAcquisition {
+  theme: DataThemeId
+  nativeResolutionM: number
+  referenceLabel: string
+  attribution: string
+  limitationMessage: string
+}
+
 const DATA_THEMES: DataTheme[] = [
  {
    id: 'buildings',
@@ -661,10 +669,10 @@ export function MapWorkspace({
    clearThemeInsights,
  } = useMapThemeSelectionInsights<DataThemeId>(selectedProjectId, onRefreshProjectData)
  const {
-    products: thematicRasterProducts,
-    loading: thematicRasterProductsLoading,
-    error: thematicRasterProductsError,
-  } = useThematicRasterProducts(flandersScopeSelected ? selectedProjectId : null)
+    products: officialRasterProducts,
+    loading: officialRasterProductsLoading,
+    error: officialRasterProductsError,
+  } = useOfficialRasterProducts(flandersScopeSelected ? selectedProjectId : null)
  const {
    temporalComparison,
    temporalComparisonLoading,
@@ -674,6 +682,8 @@ export function MapWorkspace({
  } = useTemporalComparison(selectedProjectId)
  const [analysisMode, setAnalysisMode] = useState<'current' | 'evolution'>('current')
  const [selectedFloodHazardDatasetId, setSelectedFloodHazardDatasetId] = useState('')
+  const [selectedDhmvProductKey, setSelectedDhmvProductKey] = useState<'dtm_1m' | 'dsm_1m'>('dtm_1m')
+  const [selectedFloodHazardProductKey, setSelectedFloodHazardProductKey] = useState('pluviaal_current_t100')
  const [selectedTemporalSeriesKey, setSelectedTemporalSeriesKey] = useState('')
  const [earlierDatasetId, setEarlierDatasetId] = useState('')
  const [laterDatasetId, setLaterDatasetId] = useState('')
@@ -743,12 +753,37 @@ export function MapWorkspace({
        pickThemeDataset(availableMapDatasets, theme, selectedMapAreaId, regionalScopeSelected),
      ]),
    ) as Record<DataThemeId, DatasetCreateResponse | null>
-    const selectedFloodHazard = floodHazardDatasets.find((dataset) => dataset.id === selectedFloodHazardDatasetId)
+    const selectedFloodHazard = floodHazardDatasets.find(
+      (dataset) =>
+        dataset.id === selectedFloodHazardDatasetId
+        || (flandersScopeSelected && datasetProductKey(dataset) === selectedFloodHazardProductKey),
+    )
    if (selectedFloodHazard) {
      result.flood_hazard = selectedFloodHazard
+    } else if (flandersScopeSelected && officialRasterProducts.floodHazard.length > 0) {
+      result.flood_hazard = null
+    }
+    if (flandersScopeSelected && officialRasterProducts.dhmv.length > 0) {
+      result.elevation = availableMapDatasets.find(
+        (dataset) =>
+          dataset.source_name === 'digitaal_vlaanderen_dhmv'
+          && datasetProductKey(dataset) === selectedDhmvProductKey
+          && datasetCoversSelectedArea(dataset, selectedMapAreaId, regionalScopeSelected),
+      ) ?? null
    }
    return result
-  }, [availableMapDatasets, floodHazardDatasets, regionalScopeSelected, selectedFloodHazardDatasetId, selectedMapAreaId])
+  }, [
+    availableMapDatasets,
+    flandersScopeSelected,
+    floodHazardDatasets,
+    officialRasterProducts.dhmv.length,
+    officialRasterProducts.floodHazard.length,
+    regionalScopeSelected,
+    selectedDhmvProductKey,
+    selectedFloodHazardDatasetId,
+    selectedFloodHazardProductKey,
+    selectedMapAreaId,
+  ])
  const themePartitionMap = useMemo(
    () =>
      Object.fromEntries(
@@ -765,15 +800,62 @@ export function MapWorkspace({
    [availableMapDatasets, regionalScopeSelected, selectedMapAreaId, themeDatasetMap],
  )
  const activeTheme = DATA_THEMES.find((theme) => theme.id === activeThemeId) ?? DATA_THEMES[0]
-  const onDemandThematicProductMap = useMemo(
-    () => flandersScopeSelected
-      ? new Map<DataThemeId, ThematicRasterProductRead>(
-          thematicRasterProducts.map((product) => [product.theme, product]),
-        )
-      : new Map<DataThemeId, ThematicRasterProductRead>(),
-    [flandersScopeSelected, thematicRasterProducts],
+  const onDemandRasterProductMap = useMemo(
+    () => {
+      const result = new Map<DataThemeId, OnDemandRasterProduct>()
+      if (!flandersScopeSelected) {
+        return result
+      }
+      for (const product of officialRasterProducts.thematic) {
+        result.set(product.theme, {
+          kind: 'thematic_raster',
+          productKey: product.key,
+          displayName: product.display_name,
+          theme: product.theme,
+          nativeResolutionM: product.native_resolution_m,
+          referenceLabel: String(product.observation_year),
+          attribution: product.attribution,
+          limitationMessage: product.limitation_message,
+        })
+      }
+      const dhmvProduct = officialRasterProducts.dhmv.find((product) => product.key === selectedDhmvProductKey)
+      if (dhmvProduct) {
+        result.set('elevation', {
+          kind: 'dhmv',
+          productKey: dhmvProduct.key,
+          displayName: dhmvProduct.display_name,
+          theme: 'elevation',
+          nativeResolutionM: dhmvProduct.native_resolution_m,
+          referenceLabel: dhmvProduct.acquisition_period,
+          attribution: dhmvProduct.attribution,
+          limitationMessage: dhmvProduct.limitation_message,
+        })
+      }
+      const floodProduct = officialRasterProducts.floodHazard.find(
+        (product) => product.key === selectedFloodHazardProductKey,
+      )
+      if (floodProduct) {
+        result.set('flood_hazard', {
+          kind: 'flood_hazard',
+          productKey: floodProduct.key,
+          displayName: floodProduct.display_name,
+          theme: 'flood_hazard',
+          nativeResolutionM: floodProduct.native_resolution_m,
+          referenceLabel: `${floodProduct.climate_context} · T${floodProduct.return_period_years}`,
+          attribution: floodProduct.attribution,
+          limitationMessage: floodProduct.limitation_message,
+        })
+      }
+      return result
+    },
+    [
+      flandersScopeSelected,
+      officialRasterProducts,
+      selectedDhmvProductKey,
+      selectedFloodHazardProductKey,
+    ],
  )
-  const activeOnDemandThematicProduct = onDemandThematicProductMap.get(activeTheme.id) ?? null
+  const activeOnDemandRasterProduct = onDemandRasterProductMap.get(activeTheme.id) ?? null
  const activeThemeMapStyle = DATA_THEME_MAP_STYLES[activeTheme.id]
  const analysisOverlayActive = mapContentMode === 'analysis' && analysisLayerAvailable && Boolean(mapFeatureCollection)
  const selectedOrthophotoProduct = orthophotoProducts.find((item) => item.key === selectedOrthophotoProductKey) ?? null
@@ -793,24 +875,24 @@ export function MapWorkspace({
  const regionalRasterThemeActive = regionalScopeSelected && isPartitionedRaster(activeThemeDataset)
  const regionalBathymetryThemeActive = regionalScopeSelected && isPartitionedBathymetry(activeThemeDataset)
  const regionalPartitionedThemeActive = regionalRasterThemeActive || regionalBathymetryThemeActive
-  const onDemandThematicThemeActive = analysisMode === 'current' && Boolean(activeOnDemandThematicProduct)
-  const regionalOnDemandThematicThemeActive = regionalScopeSelected && onDemandThematicThemeActive
-  const activeThemeAvailable = Boolean(activeThemeDataset) || onDemandThematicThemeActive
+  const onDemandRasterThemeActive = analysisMode === 'current' && Boolean(activeOnDemandRasterProduct)
+  const regionalOnDemandRasterThemeActive = regionalScopeSelected && onDemandRasterThemeActive
+  const activeThemeAvailable = Boolean(activeThemeDataset) || onDemandRasterThemeActive

  useEffect(() => {
    if (
      !flandersScopeSelected
      || analysisMode !== 'current'
      || activeThemeAvailable
-      || (onDemandThematicProductMap.size === 0 && !thematicRasterProductsError)
+      || (onDemandRasterProductMap.size === 0 && !officialRasterProductsError)
    ) {
      return
    }
    const fallbackTheme = DATA_THEMES.find((theme) =>
      theme.id === 'space_occupation'
-      && Boolean(themeDatasetMap[theme.id] || onDemandThematicProductMap.get(theme.id)),
+      && Boolean(themeDatasetMap[theme.id] || onDemandRasterProductMap.get(theme.id)),
    ) ?? DATA_THEMES.find((theme) =>
-      Boolean(themeDatasetMap[theme.id] || onDemandThematicProductMap.get(theme.id)),
+      Boolean(themeDatasetMap[theme.id] || onDemandRasterProductMap.get(theme.id)),
    )
    if (!fallbackTheme) {
      return
@@ -824,9 +906,9 @@ export function MapWorkspace({
    activeThemeAvailable,
    analysisMode,
    flandersScopeSelected,
-    onDemandThematicProductMap,
+    officialRasterProductsError,
+    onDemandRasterProductMap,
    onOpenDatasetInMap,
-    thematicRasterProductsError,
    themeDatasetMap,
  ])

@@ -917,12 +999,12 @@ export function MapWorkspace({
  useEffect(() => {
    const contextSourceLabel = analysisMode === 'evolution' ? activeTemporalSeriesGroup?.label ?? null
      : regionalBathymetryThemeActive ? 'VHA-dwarsprofielen Vlaanderen'
-      : activeOnDemandThematicProduct?.display_name ?? null
+      : activeOnDemandRasterProduct?.displayName ?? null
    onSetContextSourceLabel(contextSourceLabel)
    return () => onSetContextSourceLabel(null)
  }, [
    activeTemporalSeriesGroup?.label,
-    activeOnDemandThematicProduct?.display_name,
+    activeOnDemandRasterProduct?.displayName,
    analysisMode,
    onSetContextSourceLabel,
    regionalBathymetryThemeActive,
@@ -1021,14 +1103,33 @@ export function MapWorkspace({
  }, [activeTemporalSeriesGroups])

  useEffect(() => {
-    if (floodHazardDatasets.some((dataset) => dataset.id === selectedFloodHazardDatasetId)) {
+    const selected = floodHazardDatasets.find(
+      (dataset) => datasetProductKey(dataset) === selectedFloodHazardProductKey,
+    )
+    if (selected) {
+      if (selected.id !== selectedFloodHazardDatasetId) {
+        setSelectedFloodHazardDatasetId(selected.id)
+      }
+      return
+    }
+    if (flandersScopeSelected && officialRasterProducts.floodHazard.length > 0) {
+      setSelectedFloodHazardDatasetId('')
      return
    }
    const preferred = floodHazardDatasets.find(
      (dataset) => dataset.source_metadata?.['product_key'] === 'pluviaal_current_t100',
    ) ?? floodHazardDatasets[0]
    setSelectedFloodHazardDatasetId(preferred?.id ?? '')
-  }, [floodHazardDatasets, selectedFloodHazardDatasetId])
+    if (preferred && datasetProductKey(preferred)) {
+      setSelectedFloodHazardProductKey(datasetProductKey(preferred))
+    }
+  }, [
+    flandersScopeSelected,
+    floodHazardDatasets,
+    officialRasterProducts.floodHazard.length,
+    selectedFloodHazardDatasetId,
+    selectedFloodHazardProductKey,
+  ])

  useEffect(() => {
    const first = activeTemporalSeries[0]
@@ -1049,6 +1150,17 @@ export function MapWorkspace({
    if (!selectedMapDataset) {
      return
    }
+    const selectedProductKey = datasetProductKey(selectedMapDataset)
+    if (
+      selectedMapDataset.source_name === 'digitaal_vlaanderen_dhmv'
+      && (selectedProductKey === 'dtm_1m' || selectedProductKey === 'dsm_1m')
+    ) {
+      setSelectedDhmvProductKey(selectedProductKey)
+    }
+    if (selectedMapDataset.source_name === 'vmm_flood_hazard' && selectedProductKey) {
+      setSelectedFloodHazardProductKey(selectedProductKey)
+      setSelectedFloodHazardDatasetId(selectedMapDataset.id)
+    }
    const matchingThemeId = themeIdForDataset(selectedMapDataset)
    if (matchingThemeId) {
      setActiveThemeId(matchingThemeId)
@@ -1238,7 +1350,7 @@ export function MapWorkspace({
      ? temporalGroup?.items[temporalGroup.items.length - 1] ?? null
      : themeDatasetMap[theme.id]
    const onDemandProduct = analysisMode === 'current'
-      ? onDemandThematicProductMap.get(theme.id)
+      ? onDemandRasterProductMap.get(theme.id)
      : null
    if (!dataset && !onDemandProduct) {
      return
@@ -1268,13 +1380,17 @@ export function MapWorkspace({
  const loadAllThemeResults = async (bbox: VectorSelectionBBox, areaId?: string) => {
    const availableThemes: Array<MapThemeQuery<DataThemeId>> = []
    for (const theme of DATA_THEMES) {
-      const thematicProduct = analysisMode === 'current'
-        ? onDemandThematicProductMap.get(theme.id)
+      const onDemandProduct = analysisMode === 'current'
+        ? onDemandRasterProductMap.get(theme.id)
        : null
-      if (thematicProduct) {
+      if (onDemandProduct) {
        availableThemes.push({
          themeId: theme.id,
-          thematicProductKey: thematicProduct.key,
+          acquisition: {
+            kind: onDemandProduct.kind,
+            productKey: onDemandProduct.productKey,
+            displayName: onDemandProduct.displayName,
+          },
        })
        continue
      }
@@ -1294,7 +1410,7 @@ export function MapWorkspace({
  const analyzeSelection = async (bbox: VectorSelectionBBox, areaId?: string) => {
    setSelectionBbox(bbox)
    const tasks: Array<Promise<unknown>> = [loadAllThemeResults(bbox, areaId)]
-    if (!regionalPartitionedThemeActive && !onDemandThematicThemeActive) {
+    if (!regionalPartitionedThemeActive && !onDemandRasterThemeActive) {
      tasks.push(onRunMapSelectionExtract(bbox, areaId))
    }
    if (analysisMode === 'evolution' && earlierDatasetId && laterDatasetId) {
@@ -1455,7 +1571,7 @@ export function MapWorkspace({
            <div className="geo-theme-list">
              {DATA_THEMES.map((theme) => {
                const dataset = themeDatasetMap[theme.id]
-                const onDemandProduct = onDemandThematicProductMap.get(theme.id)
+                const onDemandProduct = onDemandRasterProductMap.get(theme.id)
                const partitions = themePartitionMap[theme.id]
                const temporalGroups = themeTemporalSeriesMap[theme.id]
                const temporalGroup = temporalGroups[0]
@@ -1487,7 +1603,7 @@ export function MapWorkspace({
                          : dataset
                            ? datasetAvailabilityLabel(dataset, partitions)
                            : onDemandProduct
-                              ? `${onDemandProduct.native_resolution_m} m · ${onDemandProduct.observation_year} · laad bij selectie`
+                              ? `${onDemandProduct.nativeResolutionM} m · ${onDemandProduct.referenceLabel} · laad bij selectie`
                            : 'Bron nog niet ingeladen'}
                      </small>
                    </span>
@@ -1512,7 +1628,7 @@ export function MapWorkspace({
                    ? 'VHA-dwarsprofielen Vlaanderen'
                    : activeThemeDataset
                      ? getDatasetDisplayName(activeThemeDataset)
-                      : activeOnDemandThematicProduct?.display_name ?? 'Geen databron beschikbaar'}
+                      : activeOnDemandRasterProduct?.displayName ?? 'Geen databron beschikbaar'}
              </strong>
              <small>
                {analysisOverlayActive
@@ -1525,19 +1641,71 @@ export function MapWorkspace({
                    ? `${activeThemePartitions.length} gecontroleerde gemeentepartities · selectie wordt ruimtelijk samengevoegd`
                  : activeThemeDataset
                    ? `${getDatasetSourceDisplayName(activeThemeDataset)} · ${formatDatasetObservation(activeThemeDataset)}`
-                    : activeOnDemandThematicProduct
-                      ? `${activeOnDemandThematicProduct.attribution} · wordt alleen voor de gekozen selectie ingeladen`
+                    : activeOnDemandRasterProduct
+                      ? `${activeOnDemandRasterProduct.attribution} · wordt alleen voor de gekozen selectie ingeladen`
                    : activeTheme.description}
              </small>
            </div>
-            {thematicRasterProductsLoading && flandersScopeSelected ? (
-              <p className="geo-data-notice">Beschikbare Vlaamse beleidsbronnen worden gecontroleerd…</p>
+            {officialRasterProductsLoading && flandersScopeSelected ? (
+              <p className="geo-data-notice">Beschikbare Vlaamse rasterbronnen worden gecontroleerd…</p>
            ) : null}
-            {thematicRasterProductsError && flandersScopeSelected ? (
-              <p className="error">{thematicRasterProductsError}</p>
+            {officialRasterProductsError && flandersScopeSelected ? (
+              <p className="error">{officialRasterProductsError}</p>
            ) : null}

-            {analysisMode === 'current' && activeTheme.id === 'flood_hazard' && floodHazardDatasets.length > 0 ? (
+            {analysisMode === 'current' && activeTheme.id === 'elevation' && officialRasterProducts.dhmv.length > 0 ? (
+              <label className="geo-scope-select">
+                Hoogtemodel
+                <select
+                  aria-label="Hoogtemodel"
+                  value={selectedDhmvProductKey}
+                  onChange={(event) => {
+                    const productKey = event.target.value as 'dtm_1m' | 'dsm_1m'
+                    setSelectedDhmvProductKey(productKey)
+                    clearThemeInsights()
+                    const dataset = availableMapDatasets.find(
+                      (item) =>
+                        item.source_name === 'digitaal_vlaanderen_dhmv'
+                        && datasetProductKey(item) === productKey
+                        && datasetCoversSelectedArea(item, selectedMapAreaId, regionalScopeSelected),
+                    )
+                    if (dataset) {
+                      onOpenDatasetInMap(dataset)
+                    }
+                  }}
+                >
+                  {officialRasterProducts.dhmv.map((product) => (
+                    <option key={product.key} value={product.key}>{product.display_name}</option>
+                  ))}
+                </select>
+                <small>DTM meet het maaiveld; DSM bevat ook gebouwen en vegetatie.</small>
+              </label>
+            ) : null}
+
+            {analysisMode === 'current' && activeTheme.id === 'flood_hazard' && officialRasterProducts.floodHazard.length > 0 ? (
+              <label className="geo-scope-select">
+                Overstromingsscenario
+                <select
+                  aria-label="Overstromingsscenario"
+                  value={selectedFloodHazardProductKey}
+                  onChange={(event) => {
+                    const productKey = event.target.value
+                    const dataset = floodHazardDatasets.find((item) => datasetProductKey(item) === productKey)
+                    setSelectedFloodHazardProductKey(productKey)
+                    setSelectedFloodHazardDatasetId(dataset?.id ?? '')
+                    clearThemeInsights()
+                    if (dataset) {
+                      onOpenDatasetInMap(dataset)
+                    }
+                  }}
+                >
+                  {officialRasterProducts.floodHazard.map((product) => (
+                    <option key={product.key} value={product.key}>{product.display_name}</option>
+                  ))}
+                </select>
+                <small>Gemodelleerde maximale waterdiepte voor de gekozen kans en klimaatprojectie; geen actuele waterstand.</small>
+              </label>
+            ) : analysisMode === 'current' && activeTheme.id === 'flood_hazard' && floodHazardDatasets.length > 0 ? (
              <label className="geo-scope-select">
                Overstromingsscenario
                <select
@@ -1633,7 +1801,7 @@ export function MapWorkspace({
                      ? 'Sleep nu een rechthoek op de kaart.'
                      : regionalRasterThemeActive
                        ? 'Teken een rechthoek; de juiste gemeentelijke rasters worden automatisch gecombineerd.'
-                        : onDemandThematicThemeActive
+                        : onDemandRasterThemeActive
                          ? 'Teken een rechthoek; officiële Vlaamse rasters worden begrensd opgehaald, bewaard en hergebruikt.'
                        : regionalBathymetryThemeActive
                          ? 'Teken een rechthoek of analyseer Vlaanderen; alleen overlappende VHA-partities worden samengevoegd.'
@@ -1652,16 +1820,16 @@ export function MapWorkspace({
                </button>
                <button
                  className="secondary-action"
-                  disabled={!activeThemeAvailable || regionalRasterThemeActive || regionalOnDemandThematicThemeActive || (analysisMode === 'evolution' && activeTemporalSeries.length < 2) || !selectedAreaBbox || mapSelectionLoading || themeResultsLoading}
+                  disabled={!activeThemeAvailable || regionalRasterThemeActive || regionalOnDemandRasterThemeActive || (analysisMode === 'evolution' && activeTemporalSeries.length < 2) || !selectedAreaBbox || mapSelectionLoading || themeResultsLoading}
                  type="button"
                  title={
-                    regionalRasterThemeActive || regionalOnDemandThematicThemeActive
+                    regionalRasterThemeActive || regionalOnDemandRasterThemeActive
                      ? 'Teken een begrensde rechthoek voor een regionale rasteranalyse.'
                      : undefined
                  }
                  onClick={() => selectedAreaBbox && void analyzeSelection(selectedAreaBbox, selectedMapArea?.id)}
                >
-                  {regionalRasterThemeActive || regionalOnDemandThematicThemeActive ? 'Selecteer een deelgebied' : 'Volledig werkgebied'}
+                  {regionalRasterThemeActive || regionalOnDemandRasterThemeActive ? 'Selecteer een deelgebied' : 'Volledig werkgebied'}
                </button>
                <button className="secondary-action" disabled={!mapSelectionBbox} type="button" onClick={clearAreaSelection}>
                  Wis selectie
@@ -2030,7 +2198,7 @@ export function MapWorkspace({
                ? `VHA-dwarsprofielen Vlaanderen · ${activeThemePartitions.length} gemeentepartities`
              : activeThemeDataset
                ? getDatasetDisplayName(activeThemeDataset)
-                : activeOnDemandThematicProduct?.display_name
+                : activeOnDemandRasterProduct?.displayName
                  ?? 'niet beschikbaar'}
          </span>
          {usesDefaultOsmBasemap ? <span><strong>Ondergrond:</strong> OpenStreetMap</span> : null}
@@ -6,18 +6,26 @@ import { terrainSelectionToMapSelection } from '../lib/terrainSelection'
 import { floodHazardSelectionToMapSelection } from '../lib/floodHazardSelection'
 import { thematicRasterSelectionToMapSelection } from '../lib/thematicRaster'

+export type MapThemeAcquisitionKind = 'thematic_raster' | 'dhmv' | 'flood_hazard'
+
+export interface MapThemeAcquisition {
+  kind: MapThemeAcquisitionKind
+  productKey: string
+  displayName: string
+}
+
 export interface MapThemeQuery<TThemeId extends string> {
  themeId: TThemeId
  dataset?: DatasetCreateResponse
  partitioned?: boolean
-  thematicProductKey?: string
+  acquisition?: MapThemeAcquisition
 }

 export interface MapThemeInsight<TThemeId extends string> {
  themeId: TThemeId
  dataset: DatasetCreateResponse
  partitioned?: boolean
-  thematicProductKey?: string
+  acquisition?: MapThemeAcquisition
  result: VectorSelectionResponse
 }

@@ -61,22 +69,36 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
    setThemeInsightsError(null)
    try {
      const settled = await Promise.allSettled(
-        queries.map(async ({ themeId, dataset: existingDataset, partitioned, thematicProductKey }) => {
+        queries.map(async ({ themeId, dataset: existingDataset, partitioned, acquisition }) => {
          let dataset = existingDataset
-          if (thematicProductKey) {
-            const acquisition = await datasetsApi.acquireThematicRaster(selectedProjectId, {
-              bbox,
-              area_id: areaId,
-              product_key: thematicProductKey,
-              force_refresh: false,
-            })
-            if (acquisition.status !== 'success' || !acquisition.output_dataset_id) {
+          if (acquisition) {
+            const acquisitionJob = acquisition.kind === 'thematic_raster'
+              ? await datasetsApi.acquireThematicRaster(selectedProjectId, {
+                  bbox,
+                  area_id: areaId,
+                  product_key: acquisition.productKey,
+                  force_refresh: false,
+                })
+              : acquisition.kind === 'dhmv'
+                ? await datasetsApi.acquireDhmv(selectedProjectId, {
+                    bbox,
+                    area_id: areaId,
+                    product_key: acquisition.productKey as 'dtm_1m' | 'dsm_1m',
+                    force_refresh: false,
+                  })
+                : await datasetsApi.acquireFloodHazard(selectedProjectId, {
+                    bbox,
+                    area_id: areaId,
+                    product_key: acquisition.productKey,
+                    force_refresh: false,
+                  })
+            if (acquisitionJob.status !== 'success' || !acquisitionJob.output_dataset_id) {
              throw new Error(
-                acquisition.error_message
-                  || `De officiële rasterbron ${thematicProductKey} kon niet worden ingeladen.`,
+                acquisitionJob.error_message
+                  || `De officiële rasterbron ${acquisition.displayName} kon niet worden ingeladen.`,
              )
            }
-            dataset = await datasetsApi.get(selectedProjectId, acquisition.output_dataset_id)
+            dataset = await datasetsApi.get(selectedProjectId, acquisitionJob.output_dataset_id)
          }
          if (!dataset) {
            throw new Error(`Geen persistente databron beschikbaar voor thema ${themeId}.`)
@@ -85,7 +107,7 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
            themeId,
            dataset,
            partitioned,
-            thematicProductKey,
+            acquisition,
            result: dataset.dataset_type === 'raster' && dataset.source_name === 'digitaal_vlaanderen_dhmv'
            ? terrainSelectionToMapSelection(
                partitioned
@@ -137,7 +159,7 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
          ? [{
              dataset:
                queries[index]?.dataset?.name
-                ?? queries[index]?.thematicProductKey
+                ?? queries[index]?.acquisition?.displayName
                ?? queries[index]?.themeId
                ?? 'Onbekende bron',
              reason: formatError(item.reason, 'Bron kon niet worden bevraagd.'),
@@ -150,7 +172,7 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
      }
      setThemeInsights(successful)
      let refreshFailure: string | null = null
-      if (successful.some((item) => item.thematicProductKey) && onDatasetsChanged) {
+      if (successful.some((item) => item.acquisition) && onDatasetsChanged) {
        try {
          await onDatasetsChanged()
        } catch (error) {
@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react'
+import { datasetsApi } from '../services/api'
+import { formatError } from '../lib/formatError'
+import type {
+  DhmvProductRead,
+  FloodHazardProductRead,
+  ThematicRasterProductRead,
+} from '../types'
+
+interface OfficialRasterProducts {
+  thematic: ThematicRasterProductRead[]
+  dhmv: DhmvProductRead[]
+  floodHazard: FloodHazardProductRead[]
+}
+
+const EMPTY_PRODUCTS: OfficialRasterProducts = {
+  thematic: [],
+  dhmv: [],
+  floodHazard: [],
+}
+
+export function useOfficialRasterProducts(selectedProjectId: string | null) {
+  const [products, setProducts] = useState<OfficialRasterProducts>(EMPTY_PRODUCTS)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    if (!selectedProjectId) {
+      setProducts(EMPTY_PRODUCTS)
+      setLoading(false)
+      setError(null)
+      return () => {
+        cancelled = true
+      }
+    }
+
+    setLoading(true)
+    setError(null)
+    void Promise.all([
+      datasetsApi.listThematicRasterProducts(selectedProjectId),
+      datasetsApi.listDhmvProducts(selectedProjectId),
+      datasetsApi.listFloodHazardProducts(selectedProjectId),
+    ])
+      .then(([thematic, dhmv, floodHazard]) => {
+        if (!cancelled) {
+          setProducts({
+            thematic: thematic.items,
+            dhmv: dhmv.items,
+            floodHazard: floodHazard.items,
+          })
+        }
+      })
+      .catch((requestError) => {
+        if (!cancelled) {
+          setProducts(EMPTY_PRODUCTS)
+          setError(formatError(requestError, 'De officiële Vlaamse rastercatalogi konden niet worden geladen.'))
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [selectedProjectId])
+
+  return { products, loading, error }
+}
@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react'
-import { datasetsApi } from '../services/api'
-import { formatError } from '../lib/formatError'
-import type { ThematicRasterProductRead } from '../types'
-
-export function useThematicRasterProducts(selectedProjectId: string | null) {
-  const [products, setProducts] = useState<ThematicRasterProductRead[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    if (!selectedProjectId) {
-      setProducts([])
-      setLoading(false)
-      setError(null)
-      return () => {
-        cancelled = true
-      }
-    }
-
-    setLoading(true)
-    setError(null)
-    void datasetsApi.listThematicRasterProducts(selectedProjectId)
-      .then((response) => {
-        if (!cancelled) {
-          setProducts(response.items)
-        }
-      })
-      .catch((requestError) => {
-        if (!cancelled) {
-          setProducts([])
-          setError(formatError(requestError, 'De Vlaamse beleidsrasters konden niet worden geladen.'))
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false)
-        }
-      })
-
-    return () => {
-      cancelled = true
-    }
-  }, [selectedProjectId])
-
-  return { products, loading, error }
-}