From 11a1ff2f53de1eb47e161290ff1a78fbcba8ee9e Mon Sep 17 00:00:00 2001
From: sronveaux <s.ronveaux@biodiversity.be>
Date: Fri, 18 Oct 2024 20:36:57 +0200
Subject: [PATCH] First version of map composable to replace mapable mixin

---
 app-starter/components/SampleModule.vue       |  19 ++-
 .../attributeTable/AttributeTable.vue         |   9 +-
 .../attributeTable/AttributeTableWin.vue      |  74 ++++++------
 .../bglayerswitcher/BgLayerList.vue           |  99 ++++++++--------
 .../bglayerswitcher/BgLayerSwitcher.vue       |  63 +++++-----
 src/components/geocoder/Geocoder.vue          |   9 +-
 src/components/geolocator/Geolocator.vue      |  13 ++-
 src/components/infoclick/InfoClickWin.vue     |  23 ++--
 src/components/layerlist/LayerList.vue        |  67 ++++++-----
 src/components/maprecorder/MapRecorderWin.vue |   9 +-
 .../maxextentbutton/ZoomToMaxExtentButton.vue |   9 +-
 src/components/measuretool/MeasureResult.vue  |  19 +--
 src/components/measuretool/MeasureWin.vue     |  59 ++++++----
 src/components/modulecore/MapOverlay.vue      |  55 +++++----
 src/components/ol/Map.vue                     |  71 ++++++------
 .../overviewmap/OverviewMapPanel.vue          | 109 ++++++++++--------
 src/components/progress/MapLoadingStatus.vue  |  20 +++-
 src/mixins/Mapable.js                         |  32 ++---
 18 files changed, 445 insertions(+), 314 deletions(-)

diff --git a/app-starter/components/SampleModule.vue b/app-starter/components/SampleModule.vue
index 67836f08..95072024 100644
--- a/app-starter/components/SampleModule.vue
+++ b/app-starter/components/SampleModule.vue
@@ -30,7 +30,8 @@
 // the module card is a the template for a typical Wegue module
 import ModuleCard from '../../src/components/modulecore/ModuleCard';
 // we import a so called "mixin" that helps us to interact with the map
-import { Mapable } from '../../src/mixins/Mapable';
+// import { Mapable } from '../../src/mixins/Mapable';
+import { useMap } from '../../src/composables/Map';
 // an OpenLayers helper function to display coordinates
 import { toStringXY } from 'ol/coordinate';
 // an OpenLayer helper function to transform coordinate reference systems
@@ -39,7 +40,7 @@ import { transform } from 'ol/proj.js';
 export default {
   name: 'sample-module',
   // make sure to register the 'Mapable' mixin
-  mixins: [Mapable],
+  // mixins: [Mapable],
   inheritAttrs: false,
   components: {
     'wgu-module-card': ModuleCard
@@ -48,12 +49,26 @@ export default {
     icon: { type: String, required: false, default: 'md:star' }
   },
   // here we define variables that are used in the HTML above
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
+  },
   data () {
     return {
       zoom: '',
       center: ''
     };
   },
+  watch: {
+    map: {
+      handler (newMap) {
+        if (newMap) {
+          this.onMapBound();
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     /**
      * This function is called once the map is bound to the application
diff --git a/src/components/attributeTable/AttributeTable.vue b/src/components/attributeTable/AttributeTable.vue
index 2ee0a058..1128b95b 100644
--- a/src/components/attributeTable/AttributeTable.vue
+++ b/src/components/attributeTable/AttributeTable.vue
@@ -28,7 +28,8 @@
 
 <script>
 import { useDisplay } from 'vuetify'
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import LayerUtil from '../../util/Layer';
 import { WguEventBus } from '../../WguEventBus';
 import MapInteractionUtil from '../../util/MapInteraction';
@@ -36,7 +37,7 @@ import ViewAnimationUtil from '../../util/ViewAnimation';
 
 export default {
   name: 'wgu-attributetable',
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     /** The ID of the vector layer to display */
     layerId: { type: String, required: false, default: null },
@@ -69,8 +70,10 @@ export default {
     }
   },
   setup () {
+    const { map } = useMap();
     const { name: breakpoint } = useDisplay();
-    return { breakpoint };
+
+    return { map, breakpoint };
   },
   data () {
     return {
diff --git a/src/components/attributeTable/AttributeTableWin.vue b/src/components/attributeTable/AttributeTableWin.vue
index e36b420e..1601c854 100644
--- a/src/components/attributeTable/AttributeTableWin.vue
+++ b/src/components/attributeTable/AttributeTableWin.vue
@@ -35,7 +35,8 @@
 
 <script>
 import ModuleCard from './../modulecore/ModuleCard';
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import { useColorTheme } from '../../composables/ColorTheme';
 import VectorLayer from 'ol/layer/Vector'
 import AttributeTable from './AttributeTable';
@@ -49,21 +50,23 @@ export default {
     syncTableMapSelection: { type: Boolean, required: false, default: false }
   },
   setup () {
+    const { layers } = useMap();
     const { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme } = useColorTheme();
-    return { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
+
+    return { layers, isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
   },
   data () {
     return {
       moduleName: 'wgu-attributetable',
-      layers: [],
-      displayedLayers: [],
+      // layers: [],
+      // displayedLayers: [],
       selLayerLid: null
     }
   },
-  beforeUnmount () {
-    this.unregisterLayersCollectionChangedEvent(this.layersChanged);
-  },
-  mixins: [Mapable],
+  // beforeUnmount () {
+  //   this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+  // },
+  // mixins: [Mapable],
   components: {
     'wgu-module-card': ModuleCard,
     'wgu-attributetable': AttributeTable
@@ -73,40 +76,43 @@ export default {
      * This function is executed, after the map is bound (see mixins/Mapable).
      * Bind to the layers from the OpenLayers map.
      */
-    onMapBound () {
-      this.layers = this.map.getLayers().getArray();
-      this.computeDisplayedLayers();
-      this.registerLayersCollectionChangedEvent(this.layersChanged);
-    },
-    layersChanged () {
-      this.computeDisplayedLayers();
-    },
-    computeDisplayedLayers () {
-      this.displayedLayers = this.layers
+    // onMapBound () {
+    //   this.layers = this.map.getLayers().getArray();
+    //   this.computeDisplayedLayers();
+    //   this.registerLayersCollectionChangedEvent(this.layersChanged);
+    // },
+    // layersChanged () {
+    //   this.computeDisplayedLayers();
+    // },
+    // computeDisplayedLayers () {
+    //   this.displayedLayers = this.layers
+    //     .filter(layer =>
+    //       layer instanceof VectorLayer &&
+    //       layer.get('lid') !== 'wgu-measure-layer' &&
+    //       layer.get('lid') !== 'wgu-geolocator-layer'
+    //     )
+    //     .reverse();
+    // }
+  },
+  computed: {
+    /**
+     * Reactive property to return the OpenLayers vector layers to be shown in the selection menu.
+     */
+    displayedLayers () {
+      return this.layers
         .filter(layer =>
           layer instanceof VectorLayer &&
           layer.get('lid') !== 'wgu-measure-layer' &&
           layer.get('lid') !== 'wgu-geolocator-layer'
         )
         .reverse();
-    }
-  },
-  computed: {
+    },
+    /**
+     * Reactive property to return the items object to bind to the selection menu.
+     */
     displayedItems () {
-      return this.displayedLayers.map((layer) => { return { title: layer.get('name'), value: layer.get('lid') } })
+      return this.displayedLayers.map((layer) => { return { title: layer.get('name'), value: layer.get('lid') } });
     }
-  //   /**
-  //    * Reactive property to return the OpenLayers vector layers to be shown in the selection menu.
-  //    */
-  //   displayedLayers () {
-  //     return this.layers
-  //       .filter(layer =>
-  //         layer instanceof VectorLayer &&
-  //         layer.get('lid') !== 'wgu-measure-layer' &&
-  //         layer.get('lid') !== 'wgu-geolocator-layer'
-  //       )
-  //       .reverse();
-  //   }
   }
 };
 </script>
diff --git a/src/components/bglayerswitcher/BgLayerList.vue b/src/components/bglayerswitcher/BgLayerList.vue
index 504dfae3..9f41acd7 100644
--- a/src/components/bglayerswitcher/BgLayerList.vue
+++ b/src/components/bglayerswitcher/BgLayerList.vue
@@ -40,7 +40,8 @@
 </template>
 
 <script>
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import LayerPreviewImage from './LayerPreviewImage';
 
 export default {
@@ -48,50 +49,54 @@ export default {
   components: {
     'wgu-layerpreviewimage': LayerPreviewImage
   },
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     imageWidth: { type: Number, required: true },
     imageHeight: { type: Number, required: true },
     previewIcon: { type: String, required: true }
   },
-  data () {
-    return {
-      layers: [],
-      displayedLayers: []
-    }
-  },
-  beforeUnmount () {
-    this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
   },
+  // data () {
+  //   return {
+  //     layers: [],
+  //     displayedLayers: []
+  //   }
+  // },
+  // beforeUnmount () {
+  //   this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+  // },
   methods: {
     /**
-      * This function is executed, after the map is bound (see mixins/Mapable).
-      * Bind to the layers from the OpenLayers map.
-      */
-    onMapBound () {
-      this.layers = this.map.getLayers().getArray();
-      // In Vuetify2, a mandatory slide group automatically selected the first item when value was null.
-      // In Vuetify3, we should assign it ourselves down here if we want to keep the same behaviour.
-      // if (!this.selectedLid && this.displayedLayers.length) {
-      //   this.displayedLayers[0].setVisible(true);
-      // }
-      this.layers = this.map.getLayers().getArray();
-      this.computeDisplayedLayers();
-      this.registerLayersCollectionChangedEvent(this.layersChanged);
-    },
-    layersChanged () {
-      this.computeDisplayedLayers();
-    },
-    computeDisplayedLayers () {
-      this.displayedLayers = this.layers
-        .filter(layer => layer.get('isBaseLayer'))
-        .reverse();
-    },
+     * This function is executed, after the map is bound (see mixins/Mapable).
+     * Bind to the layers from the OpenLayers map.
+     */
+    // onMapBound () {
+    //   this.layers = this.map.getLayers().getArray();
+    //   // In Vuetify2, a mandatory slide group automatically selected the first item when value was null.
+    //   // In Vuetify3, we should assign it ourselves down here if we want to keep the same behaviour.
+    //   // if (!this.selectedLid && this.displayedLayers.length) {
+    //   //   this.displayedLayers[0].setVisible(true);
+    //   // }
+    //   this.layers = this.map.getLayers().getArray();
+    //   this.computeDisplayedLayers();
+    //   this.registerLayersCollectionChangedEvent(this.layersChanged);
+    // },
+    // layersChanged () {
+    //   this.computeDisplayedLayers();
+    // },
+    // computeDisplayedLayers () {
+    //   this.displayedLayers = this.layers
+    //     .filter(layer => layer.get('isBaseLayer'))
+    //     .reverse();
+    // },
     /**
-      * Handler for click on item in layer list:
-      * Set the selected background layer to visible and hide all other background layers.
-      * @param  {Object} selLid  ID of layer selected by the user
-      */
+     * Handler for click on item in layer list:
+     * Set the selected background layer to visible and hide all other background layers.
+     * @param  {Object} selLid  ID of layer selected by the user
+     */
     onSelectLayer (selLid) {
       const selLayer = this.displayedLayers.find(layer => layer.get('lid') === selLid);
       selLayer.setVisible(true);
@@ -104,18 +109,18 @@ export default {
   },
   computed: {
     /**
-      * Reactive property to return the OpenLayers layers marked as 'isBaseLayer'.
-      */
-    // displayedLayers () {
-    //   return this.layers
-    //     .filter(layer => layer.get('isBaseLayer'))
-    //     .reverse();
-    // },
+     * Reactive property to return the OpenLayers layers marked as 'isBaseLayer'.
+     */
+    displayedLayers () {
+      return this.layers
+        .filter(layer => layer.get('isBaseLayer'))
+        .reverse();
+    },
     /**
-      * Reactive property to return the currently visible OpenLayers background layer.
-      * To disambiguate multiple selected background layers - which may occur programmatically -
-      * this returns the first in the list of background layers.
-      */
+     * Reactive property to return the currently visible OpenLayers background layer ID.
+     * To disambiguate multiple selected background layers - which may occur programmatically -
+     * this returns the first in the list of background layers.
+     */
     selectedLid () {
       return this.displayedLayers.find(layer => layer.getVisible())?.get('lid');
     }
diff --git a/src/components/bglayerswitcher/BgLayerSwitcher.vue b/src/components/bglayerswitcher/BgLayerSwitcher.vue
index 2c1639e5..19f01519 100644
--- a/src/components/bglayerswitcher/BgLayerSwitcher.vue
+++ b/src/components/bglayerswitcher/BgLayerSwitcher.vue
@@ -31,7 +31,8 @@
 </template>
 
 <script>
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import BgLayerList from './BgLayerList';
 
 export default {
@@ -39,51 +40,55 @@ export default {
   components: {
     'wgu-bglayerlist': BgLayerList
   },
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     icon: { type: String, required: false, default: 'md:map' },
     imageWidth: { type: Number, required: false, default: 152 },
     imageHeight: { type: Number, required: false, default: 114 }
   },
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
+  },
   data () {
     return {
-      open: false,
-      show: false,
-      layers: []
+      open: false
+      // show: false,
+      // layers: []
     }
   },
-  beforeUnmount () {
-    this.unregisterLayersCollectionChangedEvent(this.layersChanged);
-  },
+  // beforeUnmount () {
+  //   this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+  // },
   methods: {
     /**
      * This function is executed, after the map is bound (see mixins/Mapable).
      * Bind to the layers from the OpenLayers map.
      */
-    onMapBound () {
-      this.layers = this.map.getLayers().getArray();
-      this.computeShow();
-      this.registerLayersCollectionChangedEvent(this.layersChanged);
-    },
-    layersChanged () {
-      this.computeShow();
-    },
-    computeShow () {
-      this.show = this.layers
+    // onMapBound () {
+    //   this.layers = this.map.getLayers().getArray();
+    //   this.computeShow();
+    //   this.registerLayersCollectionChangedEvent(this.layersChanged);
+    // },
+    // layersChanged () {
+    //   this.computeShow();
+    // },
+    // computeShow () {
+    //   this.show = this.layers
+    //     .filter(layer => layer.get('isBaseLayer'))
+    //     .length > 1;
+    // }
+  },
+  computed: {
+    /**
+     * Reactive property to return true, when more than one OpenLayers layer is available,
+     * which is marked as 'isBaseLayer'.
+     */
+    show () {
+      return this.layers
         .filter(layer => layer.get('isBaseLayer'))
         .length > 1;
     }
   }
-  // computed: {
-  //   /**
-  //    * Reactive property to return true, when more than one OpenLayers layer is available,
-  //    * which is marked as 'isBaseLayer'.
-  //    */
-  //   show () {
-  //     return this.layers
-  //       .filter(layer => layer.get('isBaseLayer'))
-  //       .length > 1;
-  //   }
-  // }
 };
 </script>
diff --git a/src/components/geocoder/Geocoder.vue b/src/components/geocoder/Geocoder.vue
index 9ec34a65..6866f1c5 100644
--- a/src/components/geocoder/Geocoder.vue
+++ b/src/components/geocoder/Geocoder.vue
@@ -35,7 +35,8 @@
 </template>
 
 <script>
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import { useColorTheme } from '../../composables/ColorTheme';
 import { GeocoderController } from './GeocoderController';
 import { applyTransform } from 'ol/extent';
@@ -45,7 +46,7 @@ import axios from 'axios';
 
 export default {
   name: 'wgu-geocoder-input',
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     icon: { type: String, required: false, default: 'md:search' },
     rounded: { type: Boolean, required: false, default: true },
@@ -60,8 +61,10 @@ export default {
 
   },
   setup () {
+    const { map } = useMap();
     const { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme } = useColorTheme();
-    return { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
+
+    return { map, isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
   },
   data () {
     return {
diff --git a/src/components/geolocator/Geolocator.vue b/src/components/geolocator/Geolocator.vue
index 5a9a74db..b0a5cb74 100644
--- a/src/components/geolocator/Geolocator.vue
+++ b/src/components/geolocator/Geolocator.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { useMap } from '../../composables/Map';
 import { fromLonLat } from 'ol/proj'
 import Point from 'ol/geom/Point'
 import Feature from 'ol/Feature';
@@ -17,7 +18,7 @@ import { Vector as VectorLayer } from 'ol/layer'
 import { Vector as VectorSource } from 'ol/source'
 import { Fill, Style, Text } from 'ol/style';
 
-import { WguEventBus } from '../../WguEventBus'
+// import { WguEventBus } from '../../WguEventBus'
 import ViewAnimationUtil from '../../util/ViewAnimation';
 
 export default {
@@ -26,6 +27,10 @@ export default {
     markerColor: { type: String, required: false, default: 'blue' },
     markerText: { type: String, required: false, default: 'person_pin_circle' }
   },
+  setup () {
+    const { map } = useMap(this);
+    return { map };
+  },
   data: function () {
     return {
       isGeolocationAPIAvailable: null,
@@ -44,9 +49,9 @@ export default {
   },
   created () {
     const me = this;
-    WguEventBus.$on('ol-map-mounted', olMap => {
-      me.map = olMap;
-    });
+    // WguEventBus.$on('ol-map-mounted', olMap => {
+    //   me.map = olMap;
+    // });
     if (!navigator.geolocation) {
       me.isGeolocationAPIAvailable = false;
     } else {
diff --git a/src/components/infoclick/InfoClickWin.vue b/src/components/infoclick/InfoClickWin.vue
index c97a1dcb..bfa4a070 100644
--- a/src/components/infoclick/InfoClickWin.vue
+++ b/src/components/infoclick/InfoClickWin.vue
@@ -78,8 +78,9 @@
 </template>
 
 <script>
+import { useMap } from '../../composables/Map';
 import ModuleCard from '../modulecore/ModuleCard';
-import { WguEventBus } from '../../WguEventBus.js';
+// import { WguEventBus } from '../../WguEventBus.js';
 import PropertyTable from './PropertyTable';
 import CoordsTable from './CoordsTable';
 import MapInteractionUtil from '../../util/MapInteraction';
@@ -100,6 +101,10 @@ export default {
     imageProp: { type: String, required: false },
     imageDescriptionProp: { type: String, required: false }
   },
+  setup () {
+    const { map } = useMap(this);
+    return { map };
+  },
   data: function () {
     return {
       moduleName: 'wgu-infoclick',
@@ -111,14 +116,14 @@ export default {
       numfeats: null
     }
   },
-  created () {
-    const me = this;
-    // Listen to the ol-map-mounted event and receive the OL map instance
-    WguEventBus.$on('ol-map-mounted', (olMap) => {
-      // make the OL map accessible in this component
-      me.map = olMap;
-    });
-  },
+  // created () {
+  //   const me = this;
+  //   // Listen to the ol-map-mounted event and receive the OL map instance
+  //   WguEventBus.$on('ol-map-mounted', (olMap) => {
+  //     // make the OL map accessible in this component
+  //     me.map = olMap;
+  //   });
+  // },
   methods: {
     registerMapClick (unregister) {
       const me = this;
diff --git a/src/components/layerlist/LayerList.vue b/src/components/layerlist/LayerList.vue
index a6f0f7f0..44b2e32f 100644
--- a/src/components/layerlist/LayerList.vue
+++ b/src/components/layerlist/LayerList.vue
@@ -14,7 +14,8 @@
 </template>
 
 <script>
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import LayerListItem from './LayerListItem'
 
 export default {
@@ -22,53 +23,57 @@ export default {
   components: {
     'wgu-layerlistitem': LayerListItem
   },
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     showLegends: { type: Boolean, required: true },
     showOpacityControls: { type: Boolean, required: true }
   },
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
+  },
   data () {
     return {
-      layers: [],
-      displayedLayers: [],
+      // layers: [],
+      // displayedLayers: [],
       openedListItems: []
     }
   },
-  beforeUnmount () {
-    this.unregisterLayersCollectionChangedEvent(this.layersChanged);
-  },
+  // beforeUnmount () {
+  //   this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+  // },
   methods: {
     /**
      * This function is executed, after the map is bound (see mixins/Mapable).
      * Bind to the layers from the OpenLayers map.
      */
-    onMapBound () {
-      this.layers = this.map.getLayers().getArray();
-      this.computeDisplayedLayers();
-      this.registerLayersCollectionChangedEvent(this.layersChanged);
-    },
-    onMapUnbound () {
-      this.unregisterLayersCollectionChangedEvent(this.layersChanged);
-    },
-    layersChanged () {
-      this.computeDisplayedLayers();
-    },
-    computeDisplayedLayers () {
-      this.displayedLayers = this.layers
+    // onMapBound () {
+    //   this.layers = this.map.getLayers().getArray();
+    //   this.computeDisplayedLayers();
+    //   this.registerLayersCollectionChangedEvent(this.layersChanged);
+    // },
+    // onMapUnbound () {
+    //   this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+    // },
+    // layersChanged () {
+    //   this.computeDisplayedLayers();
+    // },
+    // computeDisplayedLayers () {
+    //   this.displayedLayers = this.layers
+    //     .filter(layer => layer.get('displayInLayerList') !== false && !layer.get('isBaseLayer'))
+    //     .reverse();
+    // }
+  },
+  computed: {
+    /**
+     * Reactive property to return the OpenLayers layers to be shown in the control.
+     * Remarks: The 'displayInLayerList' attribute should default to true per convention.
+     */
+    displayedLayers () {
+      return this.layers
         .filter(layer => layer.get('displayInLayerList') !== false && !layer.get('isBaseLayer'))
         .reverse();
     }
   }
-  // computed: {
-  //   /**
-  //    * Reactive property to return the OpenLayers layers to be shown in the control.
-  //    * Remarks: The 'displayInLayerList' attribute should default to true per convention.
-  //    */
-  //   displayedLayers () {
-  //     return this.layers
-  //       .filter(layer => layer.get('displayInLayerList') !== false && !layer.get('isBaseLayer'))
-  //       .reverse();
-  //   }
-  // }
 }
 </script>
diff --git a/src/components/maprecorder/MapRecorderWin.vue b/src/components/maprecorder/MapRecorderWin.vue
index 92a3904b..4f67c1ad 100644
--- a/src/components/maprecorder/MapRecorderWin.vue
+++ b/src/components/maprecorder/MapRecorderWin.vue
@@ -129,19 +129,24 @@
 
 <script>
 import ModuleCard from './../modulecore/ModuleCard';
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import createCanvasRecorder from 'canvas-record';
 
 export default {
   name: 'wgu-maprecorder-win',
   inheritAttrs: false,
-  mixins: [Mapable],
+  // mixins: [Mapable],
   components: {
     'wgu-module-card': ModuleCard
   },
   props: {
     icon: { type: String, required: false, default: 'mdi-video' }
   },
+  setup () {
+    const { map } = useMap();
+    return { map };
+  },
   data () {
     const mimeTypes = this.getSupportedMimeTypes();
 
diff --git a/src/components/maxextentbutton/ZoomToMaxExtentButton.vue b/src/components/maxextentbutton/ZoomToMaxExtentButton.vue
index 9e0231bd..4c4c706f 100644
--- a/src/components/maxextentbutton/ZoomToMaxExtentButton.vue
+++ b/src/components/maxextentbutton/ZoomToMaxExtentButton.vue
@@ -8,15 +8,20 @@
 
 <script>
 
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import ViewAnimationUtil from '../../util/ViewAnimation';
 
 export default {
   name: 'wgu-zoomtomaxextent-btn',
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     icon: { type: String, required: false, default: 'md:zoom_out_map' }
   },
+  setup () {
+    const { map } = useMap(this);
+    return { map };
+  },
   methods: {
     onClick () {
       // derive correct initial zoom and center
diff --git a/src/components/measuretool/MeasureResult.vue b/src/components/measuretool/MeasureResult.vue
index f6f49f1a..719dbd25 100644
--- a/src/components/measuretool/MeasureResult.vue
+++ b/src/components/measuretool/MeasureResult.vue
@@ -15,7 +15,8 @@
 </template>
 
 <script>
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import AngleUtil from '../../../src/util/Angle';
 import LineStringGeom from 'ol/geom/LineString';
 import { getArea, getLength } from 'ol/sphere.js';
@@ -24,14 +25,18 @@ const EMPTY_RESULT_TEXT = ' -- ';
 
 export default {
   name: 'wgu-measure-result',
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     measureGeom: { type: Object },
     measureType: { type: String }
   },
+  setup () {
+    const { map } = useMap(this);
+    return { map };
+  },
   data () {
     return {
-      map: null, // the OL map is injected into this var by the Mapable mixin
+      // map: null, // the OL map is injected into this var by the Mapable mixin
       area: EMPTY_RESULT_TEXT,
       distance: EMPTY_RESULT_TEXT,
       angle: EMPTY_RESULT_TEXT
@@ -82,10 +87,10 @@ export default {
       return output;
     },
     /**
-       * Calculates and formats the area of the given polygon.
-       *
-       * @param  {ol.geom.Polygon} polygon The Polygon object to calculate area for
-       */
+     * Calculates and formats the area of the given polygon.
+     *
+     * @param  {ol.geom.Polygon} polygon The Polygon object to calculate area for
+     */
     formatArea (polygon) {
       const mapSrs = this.map.getView().getProjection().getCode();
       const area = getArea(polygon, { projection: mapSrs });
diff --git a/src/components/measuretool/MeasureWin.vue b/src/components/measuretool/MeasureWin.vue
index 4f4e51ed..4084f2ae 100644
--- a/src/components/measuretool/MeasureWin.vue
+++ b/src/components/measuretool/MeasureWin.vue
@@ -25,7 +25,8 @@
 
 <script>
 import ModuleCard from './../modulecore/ModuleCard';
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import MeasureTypeChooser from './MeasureTypeChooser';
 import MeasureResult from './MeasureResult';
 import OlMeasureController from './OlMeasureController';
@@ -38,12 +39,16 @@ export default {
     'wgu-measure-type-chooser': MeasureTypeChooser,
     'wgu-measure-result': MeasureResult
   },
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     icon: { type: String, required: false, default: 'md:photo_size_select_small' },
     showAngleTool: { type: Boolean, required: false, default: false },
     iconsOnly: { type: Boolean, required: false, default: false }
   },
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
+  },
   data () {
     return {
       moduleName: 'wgu-measuretool',
@@ -58,6 +63,20 @@ export default {
     }
   },
   watch: {
+    map: {
+      handler (newMap, oldMap) {
+        if (newMap) {
+          this.onMapBound();
+          this.unbound = false;
+        } else {
+          if (oldMap) {
+            this.onMapUnbound();
+            this.unbound = true;
+          }
+        }
+      },
+      immediate: true
+    },
     measureType () {
       if (!this.olMapCtrl) {
         return;
@@ -69,10 +88,10 @@ export default {
   },
   methods: {
     /**
-       * (Un-)Register map interactions when the visibility of the module changes.
-       *
-       * @param  {boolean} visible New visibility state
-       */
+     * (Un-)Register map interactions when the visibility of the module changes.
+     *
+     * @param  {boolean} visible New visibility state
+     */
     show (visible) {
       if (!this.olMapCtrl) {
         return;
@@ -84,18 +103,18 @@ export default {
       }
     },
     /**
-       * Applies the changed measure value to this.measureType.
-       * Called as callback of MeasureTypeChooser
-       *
-       * @param  {String} newMeasureType New measure type
-       * @param  {String} oldMeasureType Old measure type
-       */
+     * Applies the changed measure value to this.measureType.
+     * Called as callback of MeasureTypeChooser
+     *
+     * @param  {String} newMeasureType New measure type
+     * @param  {String} oldMeasureType Old measure type
+     */
     applyMeasureType (newMeasureType, oldMeasureType) {
       this.measureType = newMeasureType;
     },
     /**
-       * This function is executed, after the map is bound (see mixins/Mapable)
-       */
+     * This function is executed, after the map is bound (see mixins/Mapable)
+     */
     onMapBound () {
       if (this.unbound) {
         return;
@@ -106,8 +125,8 @@ export default {
       this.olMapCtrl.createMeasureLayer();
     },
     /**
-       * This function is executed, after the map is bound (see mixins/Mapable)
-       */
+     * This function is executed, after the map is bound (see mixins/Mapable)
+     */
     onMapUnbound () {
       if (this.olMapCtrl) {
         this.olMapCtrl.destroy();
@@ -115,10 +134,10 @@ export default {
       }
     },
     /**
-       * Callback function executed when user sets a measure point on the map.
-       *
-       * @param  {ol/geom/Geometry} geom The geometry object of the map
-       */
+     * Callback function executed when user sets a measure point on the map.
+     *
+     * @param  {ol/geom/Geometry} geom The geometry object of the map
+     */
     onMeasureVertexSet (geom) {
       // wrap geom into object, otherwise the injection into childs does
       // not work. Maybe the OL object does not feel changed for Vue
diff --git a/src/components/modulecore/MapOverlay.vue b/src/components/modulecore/MapOverlay.vue
index c78e8b40..ce2a2e42 100644
--- a/src/components/modulecore/MapOverlay.vue
+++ b/src/components/modulecore/MapOverlay.vue
@@ -9,11 +9,12 @@
 
 <script>
 import { WguEventBus } from '../../WguEventBus'
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import Overlay from 'ol/Overlay';
 export default {
   name: 'wgu-map-overlay',
-  mixins: [Mapable],
+  // mixins: [Mapable],
   inheritAttrs: false,
   props: {
     overlayId: { type: String, required: true },
@@ -24,6 +25,10 @@ export default {
     autoPan: { type: Boolean, required: false, default: false },
     autoPanDuration: { type: Number, required: false, default: 0 }
   },
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
+  },
   data () {
     return {
       show: this.visible,
@@ -33,33 +38,33 @@ export default {
     }
   },
   /**
-     * Register for an event to update the overlays visiblity, position and content.
-     */
+   * Register for an event to update the overlays visiblity, position and content.
+   */
   created () {
     WguEventBus.$on(this.overlayId + '-update-overlay', this.onUpdateOverlay);
   },
   /**
-     * Destroy the overlay component.
-     */
+   * Destroy the overlay component.
+   */
   unmounted () {
     WguEventBus.$off(this.overlayId + '-update-overlay', this.onUpdateOverlay);
     this.destroyOlOverlay();
   },
   methods: {
     /**
-       * This function is executed, after the map is bound (see mixins/Mapable).
-       * Create the overlay if visible.
-       */
+     * This function is executed, after the map is bound (see mixins/Mapable).
+     * Create the overlay if visible.
+     */
     onMapBound () {
       if (this.show) {
         this.createOlOverlay();
       }
     },
     /**
-       * Event handler to update the overlays visibility, position and content.
-       * The derived class can receive the content inside it's slot scope, in case
-       * the overlay is populated with dynamic data.
-       */
+     * Event handler to update the overlays visibility, position and content.
+     * The derived class can receive the content inside it's slot scope, in case
+     * the overlay is populated with dynamic data.
+     */
     onUpdateOverlay (visible, position, data) {
       if (visible) {
         this.position = position;
@@ -68,8 +73,8 @@ export default {
       this.show = visible;
     },
     /**
-       * Creates the OpenLayers overlay control and adds it to the map.
-       */
+     * Creates the OpenLayers overlay control and adds it to the map.
+     */
     createOlOverlay () {
       if (!this.olOverlay) {
         const overlayContainer = this.$refs.overlayContainer;
@@ -89,8 +94,8 @@ export default {
       }
     },
     /**
-       * Destroys the OpenLayers overlay control and removes it from the map.
-       */
+     * Destroys the OpenLayers overlay control and removes it from the map.
+     */
     destroyOlOverlay () {
       if (this.olOverlay) {
         this.map.removeOverlay(this.olOverlay);
@@ -99,9 +104,17 @@ export default {
     }
   },
   watch: {
+    map: {
+      handler (newMap) {
+        if (newMap) {
+          this.onMapBound();
+        }
+      },
+      immediate: true
+    },
     /**
-       * Create / destroy the OpenLayers overlay control when the visibility toggles.
-       */
+     * Create / destroy the OpenLayers overlay control when the visibility toggles.
+     */
     show () {
       if (this.show) {
         this.createOlOverlay();
@@ -110,8 +123,8 @@ export default {
       }
     },
     /**
-       * Update the position of the OpenLayers overlay control.
-       */
+     * Update the position of the OpenLayers overlay control.
+     */
     position () {
       if (this.olOverlay) {
         this.olOverlay.setPosition(this.position);
diff --git a/src/components/ol/Map.vue b/src/components/ol/Map.vue
index e04e4926..bc62771f 100644
--- a/src/components/ol/Map.vue
+++ b/src/components/ol/Map.vue
@@ -4,11 +4,9 @@
 
 <script>
 
-// import { getCurrentInstance, reactive } from 'vue'
-import { getCurrentInstance } from 'vue'
+// import { getCurrentInstance } from 'vue'
 import Map from 'ol/Map'
 import View from 'ol/View'
-// import Collection from 'ol/Collection'
 import Attribution from 'ol/control/Attribution';
 import Zoom from 'ol/control/Zoom';
 import {
@@ -25,7 +23,8 @@ import { Vector as VectorLayer } from 'ol/layer';
 import { Vector as VectorSource } from 'ol/source';
 import proj4 from 'proj4';
 // import the app-wide EventBus
-import { WguEventBus } from '../../WguEventBus.js';
+// import { WguEventBus } from '../../WguEventBus.js';
+import { bindMap, unbindMap } from '../../composables/Map';
 import { LayerFactory } from '../../factory/Layer.js';
 import LayerUtil from '../../util/Layer';
 import PermalinkController from './PermalinkController';
@@ -39,13 +38,11 @@ export default {
     collapsibleAttribution: { type: Boolean, default: false },
     rotateableMap: { type: Boolean, required: false, default: false }
   },
-  setup () {
-    // const reactiveLayers = reactive(new Collection())
-    const vueInstance = getCurrentInstance();
+  // setup () {
+  //   const vueInstance = getCurrentInstance();
 
-    // return { vueInstance, reactiveLayers };
-    return { vueInstance }
-  },
+  //   return { vueInstance }
+  // },
   data () {
     return {
       zoom: this.$appConfig.mapZoom,
@@ -72,7 +69,8 @@ export default {
     const me = this;
     // Make the OL map accessible for Mapable mixin even 'ol-map-mounted' has
     // already been fired. Don not use directly in cmps, use Mapable instead.
-    this.vueInstance.appContext.config.globalProperties.$map = me.map;
+    // this.vueInstance.appContext.config.globalProperties.$map = me.map;
+    bindMap(me.map);
 
     // Set the target for the OL canvas and tie it`s size to ol-map-container.
     // Remarks: 'ol-map-container' does not exist in the scope of the current unit test,
@@ -94,7 +92,7 @@ export default {
     }
 
     // Send the event 'ol-map-mounted' with the OL map as payload
-    WguEventBus.$emit('ol-map-mounted', me.map);
+    // WguEventBus.$emit('ol-map-mounted', me.map);
 
     // TODO
     //  Re-evaluate whether and if yes which of the following operations have to be deferred.
@@ -112,27 +110,32 @@ export default {
     }
 
     // Send the event 'ol-map-unmounted' with the OL map as payload
-    WguEventBus.$emit('ol-map-unmounted', this.map);
-
-    // Destroy controllers, remove map references
-    if (this.timerHandle) {
-      clearTimeout(this.timerHandle);
-    }
-    if (this.permalinkController) {
-      this.permalinkController.tearDown();
-      this.permalinkController = undefined;
-    }
-    if (this.hoverController) {
-      this.hoverController.destroy();
-      this.hoverController = undefined;
-    }
-    if (this.map) {
-      this.map.getLayers().clear();
-      this.map.getInteractions().clear();
-      this.map.getControls().clear();
-      this.map.getOverlays().clear();
-    }
-    this.map = undefined;
+    // WguEventBus.$emit('ol-map-unmounted', this.map);
+    unbindMap();
+
+    // End of function in setTimeout so the watchers on map can run before the map^
+    // is effectively destroyed
+    setTimeout(() => {
+      // Destroy controllers, remove map references
+      if (this.timerHandle) {
+        clearTimeout(this.timerHandle);
+      }
+      if (this.permalinkController) {
+        this.permalinkController.tearDown();
+        this.permalinkController = undefined;
+      }
+      if (this.hoverController) {
+        this.hoverController.destroy();
+        this.hoverController = undefined;
+      }
+      if (this.map) {
+        this.map.getLayers().clear();
+        this.map.getInteractions().clear();
+        this.map.getControls().clear();
+        this.map.getOverlays().clear();
+      }
+      this.map = undefined;
+    }, 0)
   },
   created () {
     // make map rotateable according to property
@@ -190,8 +193,6 @@ export default {
       })
     });
 
-    // this.map.setLayers(this.reactiveLayers)
-
     // create layers from config and add them to map
     this.registerLayerEvents();
     const layers = this.createLayers();
diff --git a/src/components/overviewmap/OverviewMapPanel.vue b/src/components/overviewmap/OverviewMapPanel.vue
index 8075da88..65961ff6 100644
--- a/src/components/overviewmap/OverviewMapPanel.vue
+++ b/src/components/overviewmap/OverviewMapPanel.vue
@@ -5,60 +5,65 @@
 </template>
 
 <script>
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import OverviewMapController from './OverviewMapController';
 export default {
   name: 'wgu-overviewmap-panel',
-  mixins: [Mapable],
+  // mixins: [Mapable],
   props: {
     rotateWithView: { type: Boolean, required: true },
     width: { type: Number, required: true },
     height: { type: Number, required: true }
   },
-  data () {
-    return {
-      layers: [],
-      selectedBgLayer: undefined
-    }
+  setup () {
+    const { map, layers } = useMap();
+    return { map, layers };
   },
+  // data () {
+  //   return {
+  //     layers: [],
+  //     selectedBgLayer: undefined
+  //   }
+  // },
   mounted () {
     this.createOverviewMapCtrl();
   },
-  beforeUnmount () {
-    this.unregisterLayersCollectionChangedEvent(this.layersChanged);
-  },
+  // beforeUnmount () {
+  //   this.unregisterLayersCollectionChangedEvent(this.layersChanged);
+  // },
   unmounted () {
     this.destroyOverviewMapCtrl();
   },
   methods: {
     /**
-       * This function is executed, after the map is bound (see mixins/Mapable).
-       * Bind to the layers from the OpenLayers map.
-       */
+     * This function is executed, after the map is bound (see mixins/Mapable).
+     * Bind to the layers from the OpenLayers map.
+     */
     onMapBound () {
-      this.layers = this.map.getLayers().getArray();
-      this.computeSelectedBgLayer();
-      this.registerLayersCollectionChangedEvent(this.layersChanged);
+      // this.layers = this.map.getLayers().getArray();
+      // this.computeSelectedBgLayer();
+      // this.registerLayersCollectionChangedEvent(this.layersChanged);
       this.createOverviewMapCtrl();
     },
     /**
-       * This function is executed, before the map is unbound (see mixins/Mapable)
-       */
+     * This function is executed, before the map is unbound (see mixins/Mapable)
+     */
     onMapUnbound () {
       this.destroyOverviewMapCtrl();
     },
-    layersChanged () {
-      this.computeSelectedBgLayer();
-    },
-    computeSelectedBgLayer () {
-      this.selectedBgLayer = this.layers
-        .filter(layer => layer.get('isBaseLayer'))
-        .reverse()
-        .find(layer => layer.getVisible());
-    },
+    // layersChanged () {
+    //   this.computeSelectedBgLayer();
+    // },
+    // computeSelectedBgLayer () {
+    //   this.selectedBgLayer = this.layers
+    //     .filter(layer => layer.get('isBaseLayer'))
+    //     .reverse()
+    //     .find(layer => layer.getVisible());
+    // },
     /**
-       * Creates the OpenLayers overview map control.
-       */
+     * Creates the OpenLayers overview map control.
+     */
     createOverviewMapCtrl () {
       const panel = this.$refs.overviewmapPanel;
       if (this.map && panel && !this.overviewMap) {
@@ -66,8 +71,8 @@ export default {
       }
     },
     /**
-       * Tears down the OpenLayers overview map control.
-       */
+     * Tears down the OpenLayers overview map control.
+     */
     destroyOverviewMapCtrl () {
       if (this.overviewMap) {
         this.overviewMap.destroy();
@@ -75,23 +80,35 @@ export default {
       }
     }
   },
-  // computed: {
-  //   /**
-  //      * Reactive property to return the currently visible OpenLayers background layer.
-  //      * To disambiguate multiple selected background layers - which may occur programmatically -
-  //      * this returns the first in the list of background layers.
-  //      */
-  //   selectedBgLayer () {
-  //     return this.layers
-  //       .filter(layer => layer.get('isBaseLayer'))
-  //       .reverse()
-  //       .find(layer => layer.getVisible());
-  //   }
-  // },
+  computed: {
+    /**
+     * Reactive property to return the currently visible OpenLayers background layer.
+     * To disambiguate multiple selected background layers - which may occur programmatically -
+     * this returns the first in the list of background layers.
+     */
+    selectedBgLayer () {
+      return this.layers
+        .filter(layer => layer.get('isBaseLayer'))
+        .reverse()
+        .find(layer => layer.getVisible());
+    }
+  },
   watch: {
+    map: {
+      handler (newMap, oldMap) {
+        if (newMap) {
+          this.onMapBound();
+        } else {
+          if (oldMap) {
+            this.onMapUnbound();
+          }
+        }
+      },
+      immediate: true
+    },
     /**
-       * Watch for background layer selection change.
-       */
+     * Watch for background layer selection change.
+     */
     selectedBgLayer () {
       if (this.overviewMap) {
         this.overviewMap.setLayer(this.selectedBgLayer);
diff --git a/src/components/progress/MapLoadingStatus.vue b/src/components/progress/MapLoadingStatus.vue
index 9103f5b9..9e8ebf45 100644
--- a/src/components/progress/MapLoadingStatus.vue
+++ b/src/components/progress/MapLoadingStatus.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-
-import { Mapable } from '../../mixins/Mapable';
+// import { Mapable } from '../../mixins/Mapable';
+import { useMap } from '../../composables/Map';
 import {
   Image as ImageSource, TileImage as TileImageSource,
   Vector as VectorSource, Cluster as ClusterSource
@@ -22,13 +22,27 @@ import LayerGroup from 'ol/layer/Group';
 
 export default {
   name: 'wgu-maploading-status',
-  mixins: [Mapable],
+  // mixins: [Mapable],
+  setup () {
+    const { map, layers } = useMap(this);
+    return { map, layers };
+  },
   data () {
     return {
       loading: 0,
       visible: false
     }
   },
+  watch: {
+    map: {
+      handler (newMap) {
+        if (newMap) {
+          this.onMapBound();
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     /**
      * This function is executed, after the map is bound (see mixins/Mapable)
diff --git a/src/mixins/Mapable.js b/src/mixins/Mapable.js
index 6c64bf16..f062e219 100644
--- a/src/mixins/Mapable.js
+++ b/src/mixins/Mapable.js
@@ -34,21 +34,21 @@ export const Mapable = {
         this.unbound = true;
       }
     });
-  },
-  methods: {
-    registerLayersCollectionChangedEvent (handler) {
-      const layers = this.map?.getLayers();
-      if (layers) {
-        layers.on('add', handler);
-        layers.on('remove', handler);
-      }
-    },
-    unregisterLayersCollectionChangedEvent (handler) {
-      const layers = this.map?.getLayers();
-      if (layers) {
-        layers.un('add', handler);
-        layers.un('remove', handler);
-      }
-    }
+  // },
+  // methods: {
+  //   registerLayersCollectionChangedEvent (handler) {
+  //     const layers = this.map?.getLayers();
+  //     if (layers) {
+  //       layers.on('add', handler);
+  //       layers.on('remove', handler);
+  //     }
+  //   },
+  //   unregisterLayersCollectionChangedEvent (handler) {
+  //     const layers = this.map?.getLayers();
+  //     if (layers) {
+  //       layers.un('add', handler);
+  //       layers.un('remove', handler);
+  //     }
+  //   }
   }
 };