added some map stuff

added a few backend routes
2020-02-09 16:00:12 +01:00
parent e2568a1bbe
commit 3770a4111a
20 changed files with 718 additions and 99 deletions
@@ -1,14 +1,104 @@
 <template>
-  <div>
+  <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>
+    </ion-content>
+  </ion-page>

-  </div>
 </template>

 <script lang="ts">
-  import {Component, Vue} from "vue-property-decorator";
+  import { Component, Vue } from 'vue-property-decorator';
+  import { Map, tileLayer, marker, geoJSON, TileLayer, icon } from 'leaflet';
+  import { namespace } from 'vuex-class';
+  import { Area } from '@/models/Area';
+
+  const AreaStore = namespace('area');
+  const GlobalStore = namespace('global');

  @Component
  export default class MapOverviewView extends Vue {
+
+    @AreaStore.Action('getAreaGeoJson')
+    private getAreaGeoJson!: (payload: { areaId: string }) => any;
+
+    @GlobalStore.Getter('selectedArea')
+    private selectedArea!: Area;
+
+    public map?: Map | null;
+
+    public async created() {
+      this.map = null;
+      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',
+        {
+          minZoom: 0,
+          maxZoom: 20,
+          attribution:
+            'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
+        }
+      );
+
+      this.map.on('click', (e: any) => {
+        console.log('Lat, Lon : ' + e.latlng.lat + ', ' + e.latlng.lng);
+      });
+
+      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, {
+        // Marker Icon
+        pointToLayer: (feature: any, latlng: any) => {
+          return marker(latlng, { icon: ccIcon });
+        },
+        // Style
+        style: (feature: any) => {
+          if (feature!.properties.Color) {
+            return {
+              fillColor: `#${feature!.properties.Color}`,
+              color: `#${feature!.properties.Color}`,
+              opacity: 1,
+              fillOpacity: 0.8,
+              width: 0.5
+            };
+          } else {
+            return { color: '#808080', width: 0.5 };
+          }
+        },
+        // Popup
+        onEachFeature: function(feature: any, layer: any) {
+          layer.bindPopup(
+            '<b>' +
+            feature.properties.NUTZER +
+            '</b><br />' +
+            feature.properties.Flurstck
+          );
+        }
+      });
+      geo.addTo(this.map);
+    }
  }
 </script>