load icons, nests and states

show the first nest on the map <3 <3 <3

src/views/MapOverview.view.vue

@@ -19,12 +19,16 @@
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
-  import { Map, tileLayer, marker, geoJSON, TileLayer, icon } from 'leaflet';
+  import { Map, tileLayer, marker, geoJSON, TileLayer, icon, Icon, Marker } from 'leaflet';
   import { namespace } from 'vuex-class';
   import { Area } from '@/models/Area';
+  import { Status } from '@/models/Status';
+  import { Nest } from '@/models/Nest';
 
   const AreaStore = namespace('area');
   const GlobalStore = namespace('global');
+  const StatusStore = namespace('status');
+  const NestStore = namespace('nest');
 
   @Component
   export default class MapOverviewView extends Vue {
@@ -35,10 +39,24 @@
     @GlobalStore.Getter('selectedArea')
     private selectedArea!: Area;
 
+    @StatusStore.Action('findAll')
+    private getAllStates!: () => Status[];
+
+    @NestStore.Action('findAll')
+    private getAllNests!: (payload: { areaId: string }) => Nest[];
+
+    @StatusStore.Action('getIcons')
+    private getAllIcons!: () => any[];
+
     public map?: Map | null;
 
     public async created() {
       this.map = null;
+
+      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],
@@ -69,10 +87,6 @@
       });
 
       const geo = geoJSON(response, {
-        // Marker Icon
-        pointToLayer: (feature: any, latlng: any) => {
-          return marker(latlng, { icon: ccIcon });
-        },
         // Style
         style: (feature: any) => {
           if (feature!.properties.Color) {
@@ -98,6 +112,19 @@
         }
       });
       geo.addTo(this.map);
+
+      allNests.forEach((nest: Nest) => {
+        const stateIcon = allIcons.find((icon: any) =>
+          icon.status === nest.history[0].status.id);
+        const base64icon = `data:image/png;base64,${stateIcon.icon}`;
+        const iconData = icon({
+          iconUrl: base64icon,
+          iconAnchor: [19, 19],
+          iconSize: [25, 25],
+        });
+        new Marker([nest.history[0].location.latitude,
+          nest.history[0].location.longitude], { icon: iconData }).addTo(this.map!);
+      });
     }
   }
 </script>