added the menu controller

src/views/MapOverview.view.vue

@@ -1,19 +1,16 @@
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar color="primary">
-        <ion-title>Home</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content padding>
-      <div
-        style="width:100%; height:100%;"
-        id="map"
-        name="map"
-      >
+  <div class="app-content">
+    <ion-content>
+      <div class="mapContainer" ref="mapContainer">
+        <div
+          style="width:100%; height:100%;"
+          id="map"
+          name="map"
+        >
+        </div>
       </div>
     </ion-content>
-  </ion-page>
+  </div>
 
 </template>
 
@@ -51,18 +48,22 @@
     public map?: Map | null;
 
     public async created() {
-      this.map = null;
 
+      // Small timeout before hot reloading the map. Needed for development!
+      setTimeout(this.initMap, 1000);
+    }
+
+    public async initMap() {
       const allIcons = await this.getAllIcons();
       const allStates = await this.getAllStates();
       const allNests = await this.getAllNests({ areaId: this.selectedArea.id! });
 
       const response = await this.getAreaGeoJson({ areaId: this.selectedArea.id! });
+
       this.map = new Map('map').setView(
         [53.15190499781906, 8.827171325683596],
         14
       );
-
       const osm = new TileLayer(
         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {
@@ -79,13 +80,6 @@
 
       this.map.addLayer(osm);
 
-      const ccIcon = icon({
-        iconUrl: 'cc-logo-black.png',
-        iconSize: [35, 35],
-        iconAnchor: [17, 17],
-        popupAnchor: [0, -28]
-      });
-
       const geo = geoJSON(response, {
         // Style
         style: (feature: any) => {
@@ -120,15 +114,22 @@
         const iconData = icon({
           iconUrl: base64icon,
           iconAnchor: [19, 19],
-          iconSize: [25, 25],
+          iconSize: [25, 25]
         });
         new Marker([nest.history[0].location.latitude,
           nest.history[0].location.longitude], { icon: iconData }).addTo(this.map!);
       });
     }
+
+    public destroyed() {
+      this.map!.off();
+      this.map!.remove();
+    }
   }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .mapContainer {
+    height: 100%;
+  }
 </style>