136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
Vue
<template>
|
|
<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>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
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 {
|
|
|
|
@AreaStore.Action('getAreaGeoJson')
|
|
private getAreaGeoJson!: (payload: { areaId: string }) => any;
|
|
|
|
@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() {
|
|
|
|
// 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',
|
|
{
|
|
minZoom: 0,
|
|
maxZoom: 20,
|
|
attribution:
|
|
'Map data © <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 geo = geoJSON(response, {
|
|
// 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);
|
|
|
|
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!);
|
|
});
|
|
}
|
|
|
|
public destroyed() {
|
|
this.map!.off();
|
|
this.map!.remove();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mapContainer {
|
|
height: 100%;
|
|
}
|
|
</style>
|