Improve operational GIS map workflow

frontend/src/components/GeoMap.tsx

@@ -23,6 +23,30 @@ const EMPTY_FEATURE_COLLECTION: GeoJSON.FeatureCollection = {
   features: [],
 }
 
+const DEFAULT_ROAD_BASEMAP_STYLE: maplibregl.StyleSpecification = {
+  version: 8,
+  sources: {
+    'osm-standard': {
+      type: 'raster',
+      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution: '© OpenStreetMap contributors',
+      maxzoom: 19,
+    },
+  },
+  layers: [
+    {
+      id: 'osm-standard',
+      type: 'raster',
+      source: 'osm-standard',
+    },
+  ],
+}
+
+function defaultMapStyle(): string | maplibregl.StyleSpecification {
+  return import.meta.env.VITE_MAP_STYLE_URL || DEFAULT_ROAD_BASEMAP_STYLE
+}
+
 function collectCoordinates(featureCollection: GeoJSON.FeatureCollection): maplibregl.LngLatBoundsLike | null {
   const coordinates: [number, number][] = []
   const walk = (coords: unknown) => {
@@ -137,11 +161,19 @@ function GeoMap({
 
     const map = new maplibregl.Map({
       container: containerRef.current,
-      style: import.meta.env.VITE_MAP_STYLE_URL || 'https://demotiles.maplibre.org/style.json',
+      style: defaultMapStyle(),
       center: [5.3, 51.3],
       zoom: 9,
+      attributionControl: false,
     })
     map.addControl(new maplibregl.NavigationControl(), 'top-right')
+    map.addControl(
+      new maplibregl.AttributionControl({
+        compact: true,
+        customAttribution: 'Basemap © OpenStreetMap contributors',
+      }),
+      'bottom-right',
+    )
     map.on('load', () => {
       setMapStyleReady(true)
     })