fix: align GIS theme styling on ultrawide

frontend/src/components/map/MapWorkspace.tsx

@@ -70,6 +70,15 @@ const DATA_THEMES: DataTheme[] = [
   },
 ]
 
+const DATA_THEME_MAP_STYLES: Record<DataThemeId, { fill: string; line: string }> = {
+  buildings: { fill: '#d45f3d', line: '#9f3e24' },
+  population: { fill: '#7559a6', line: '#5b3f88' },
+  forest: { fill: '#347950', line: '#225f3b' },
+  water: { fill: '#2676a8', line: '#155b85' },
+  roads: { fill: '#6b7280', line: '#4b5563' },
+  parcels: { fill: '#a7792f', line: '#7d571f' },
+}
+
 function datasetSearchText(dataset: DatasetCreateResponse): string {
   return [
     dataset.name,
@@ -563,6 +572,7 @@ export function MapWorkspace({
     [availableMapDatasets],
   )
   const activeTheme = DATA_THEMES.find((theme) => theme.id === activeThemeId) ?? DATA_THEMES[0]
+  const activeThemeMapStyle = DATA_THEME_MAP_STYLES[activeTheme.id]
   const activeThemeDataset = themeDatasetMap[activeTheme.id]
   const activeTemporalSeriesGroups = useMemo(
     () => listThemeTemporalSeries(availableMapDatasets, activeTheme),
@@ -1056,6 +1066,8 @@ export function MapWorkspace({
             <div className={bboxSelectionMode ? 'geo-map-canvas geo-map-canvas-drawing' : 'geo-map-canvas'}>
               <GeoMap
                 data={analysisMode === 'evolution' && temporalComparison?.geojson.features.length ? temporalComparison.geojson : mapFeatureCollection}
+                dataFillColor={activeThemeMapStyle.fill}
+                dataLineColor={activeThemeMapStyle.line}
                 areaData={areaFeatureCollection}
                 selectedFeature={selectedFeature}
                 selectionData={analysisMode === 'current' ? mapSelectionResult?.geojson ?? null : null}
@@ -1082,7 +1094,7 @@ export function MapWorkspace({
                   </>
                 ) : (
                   <>
-                    <span><i className="geo-legend-layer" /> {activeTheme.shortLabel}</span>
+                    <span><i className={`geo-legend-layer geo-legend-layer-${activeTheme.id}`} /> {activeTheme.shortLabel}</span>
                     <span><i className="geo-legend-selection" /> Selectie</span>
                   </>
                 )}