Jens/geointel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align GIS theme styling on ultrawide
GeoIntel CI / docs-smoke (push) Canceled after 0s
Details
GeoIntel CI / contract-smoke (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Codex
2026-07-14 18:08:43 +02:00
parent 0bb2c8fd65
commit 3a2d1fae74
7 changed files with 119 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/GeoMap.tsx
+62 -41
View File
@@ -7,6 +7,8 @@ import type { MapViewportState, VectorSelectionBBox } from '../types'
interface GeoMapProps {
data: GeoJSON.FeatureCollection | null
dataFillColor?: string
dataLineColor?: string
areaData?: GeoJSON.FeatureCollection | null
selectedFeature?: GeoJSON.Feature | null
selectionData?: GeoJSON.FeatureCollection | null
@@ -50,6 +52,48 @@ const DEFAULT_ROAD_BASEMAP_STYLE: maplibregl.StyleSpecification = {
],
}
function datasetFillColor(fallbackColor: string): maplibregl.ExpressionSpecification {
return [
'case',
['==', ['get', 'layer_type'], 'municipality_boundary'],
'#0f766e',
[
'match',
['get', 'change_type'],
'added',
'#16a34a',
'removed',
'#dc2626',
'modified',
'#d97706',
'unchanged',
'#2563eb',
fallbackColor,
],
]
}
function datasetLineColor(fallbackColor: string): maplibregl.ExpressionSpecification {
return [
'case',
['==', ['get', 'layer_type'], 'municipality_boundary'],
'#0f5f59',
[
'match',
['get', 'change_type'],
'added',
'#15803d',
'removed',
'#b91c1c',
'modified',
'#b45309',
'unchanged',
'#1d4ed8',
fallbackColor,
],
]
}
function defaultMapStyle(): string | maplibregl.StyleSpecification {
return import.meta.env.VITE_MAP_STYLE_URL || DEFAULT_ROAD_BASEMAP_STYLE
}
@@ -103,6 +147,8 @@ function bboxToFeatureCollection(
function GeoMap({
data,
dataFillColor = '#f97316',
dataLineColor = '#ea580c',
areaData = null,
selectedFeature = null,
selectionData = null,
@@ -326,26 +372,7 @@ function GeoMap({
type: 'fill',
source: 'dataset',
paint: {
'fill-color': [
'case',
['==', ['get', 'layer_type'], 'municipality_boundary'],
'#0f766e',
['==', ['get', 'layer_type'], 'building'],
'#0891b2',
[
'match',
['get', 'change_type'],
'added',
'#16a34a',
'removed',
'#dc2626',
'modified',
'#d97706',
'unchanged',
'#2563eb',
'#f97316',
],
],
'fill-color': datasetFillColor(dataFillColor),
'fill-opacity': 0.4,
},
})
@@ -354,26 +381,7 @@ function GeoMap({
type: 'line',
source: 'dataset',
paint: {
'line-color': [
'case',
['==', ['get', 'layer_type'], 'municipality_boundary'],
'#0f5f59',
['==', ['get', 'layer_type'], 'building'],
'#0e7490',
[
'match',
['get', 'change_type'],
'added',
'#15803d',
'removed',
'#b91c1c',
'modified',
'#b45309',
'unchanged',
'#1d4ed8',
'#ea580c',
],
],
'line-color': datasetLineColor(dataLineColor),
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0.25, 12, 0.8, 16, 2],
},
})
@@ -388,7 +396,20 @@ function GeoMap({
}
}
}
}, [data, fitDataOnChange, mapStyleReady])
}, [data, dataFillColor, dataLineColor, fitDataOnChange, mapStyleReady])
useEffect(() => {
const map = mapRef.current
if (!map || !mapStyleReady || !map.isStyleLoaded()) {
return
}
if (map.getLayer('dataset-fill')) {
map.setPaintProperty('dataset-fill', 'fill-color', datasetFillColor(dataFillColor))
}
if (map.getLayer('dataset-line')) {
map.setPaintProperty('dataset-line', 'line-color', datasetLineColor(dataLineColor))
}
}, [dataFillColor, dataLineColor, mapStyleReady])
useEffect(() => {
const map = mapRef.current