frontend/src/components/map/MapComponent.ts

@@ -924,6 +924,16 @@ export default defineComponent({
         setPageHeight()
         this.$refs.map.updateSize()
 
+        if (this.baseMap=='baseMap') {
+            this.$refs.baseLayer.imageLayer.on('postrender', function(event) {
+                 greyscale(event.context);
+            })
+        } else {
+            this.$refs.osmLayer.tileLayer.on('postrender', function(event) {
+                 greyscale(event.context);
+            })
+        }
+
         window.addEventListener('resize', () => {
             setPageHeight()
             this.$refs.map.updateSize()
@@ -1020,3 +1030,13 @@ export default defineComponent({
         }
     }
 })
+
+function greyscale(context) {
+    const imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
+    const data = imageData.data;
+
+    for (let i=0; i < data.length; i += 4) {
+        data[i] = data[i + 1] = data[i + 2] = (3 * data[i] + 4 * data[i + 1] + data[i + 2]) / 8
+    }
+    context.putImageData(imageData, 0, 0)
+}
\ No newline at end of file

frontend/src/components/map/MapComponent.vue

@@ -212,7 +212,7 @@
     />
 
     <div v-if="isMapVisible">
-      <ol-image-layer :zIndex="-1" v-if="baseMap=='baseMap'">
+      <ol-image-layer :zIndex="-1" v-if="baseMap=='baseMap'" ref="baseLayer">
         <ol-source-image-wms
           v-bind="!showPrintDialog && {attributions: attribution}"
           :ratio="1"