Introduce 'Mapable' mixin

This adds a mixin 'Mapable', which can be used to bind the OpenLayers
map instance to any component.

src/components/layerlist/LayerList.vue

@@ -24,14 +24,14 @@
 </template>
 
 <script>
-  // Import the EventBus
-  import { WguEventBus } from '../../WguEventBus.js'
   import { DraggableWin } from '../../directives/DraggableWin.js';
+  import { Mapable } from '../../mixins/Mapable';
 
   export default {
     directives: {
       DraggableWin
     },
+    mixins: [Mapable],
     props: ['icon'],
     data () {
       return {
@@ -44,18 +44,13 @@
         top: '70px'
       }
     },
-    created () {
-      var me = this
-      // Listen to the ol-map-mounted event and receive the OL map instance
-      WguEventBus.$on('ol-map-mounted', function (olMap) {
-        // make the OL map accesible in this component
-        me.map = olMap;
-        // create the layer items from the OL map
-        me.createLayerItems();
-      });
-    },
     methods: {
-
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        this.createLayerItems();
+      },
       /**
        * Creates the layer items from the OpenLayers map.
        */

src/components/measuretool/MeasureWin.vue

@@ -37,9 +37,8 @@
 </template>
 
 <script>
-  // Import the EventBus
-  import { WguEventBus } from '../../WguEventBus.js'
-  import { DraggableWin } from '../../directives/DraggableWin.js';
+  import { DraggableWin } from '../../directives/DraggableWin';
+  import { Mapable } from '../../mixins/Mapable';
   import DrawInteraction from 'ol/interaction/draw'
   import LineStringGeom from 'ol/geom/linestring'
   import PolygonGeom from 'ol/geom/polygon'
@@ -56,6 +55,7 @@
     directives: {
       DraggableWin
     },
+    mixins: [Mapable],
     props: ['icon'],
     data () {
       return {
@@ -67,16 +67,6 @@
         top: '200px'
       }
     },
-    created () {
-      var 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 accesible in this component
-        me.map = olMap;
-
-        me.createMeasureLayer();
-      });
-    },
     watch: {
       show () {
         var me = this;
@@ -92,6 +82,12 @@
       }
     },
     methods: {
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        this.createMeasureLayer();
+      },
       /**
        * Creates a vector layer for the measurement results and adds it to the
        * map.

src/mixins/Mapable.js

@@ -0,0 +1,20 @@
+// import Vue from 'vue';
+
+import { WguEventBus } from '../WguEventBus.js'
+
+/**
+ * Mixin, which binds the OL map to the target component.
+ * Executes the onMapBound function of the target component, if available.
+ */
+export const Mapable = {
+  created: function () {
+    WguEventBus.$on('ol-map-mounted', (olMap) => {
+      // make the OL map accesible in this component
+      this.map = olMap;
+
+      if (this.onMapBound) {
+        this.onMapBound();
+      }
+    });
+  }
+};