2018-06-25 18:29:57 +02:00
|
|
|
<template>
|
|
|
|
<div class="fill-height fill-width">
|
2018-07-02 19:53:11 +02:00
|
|
|
<v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @movestart="onMoveStart" @zoomstart="onZoomStart">
|
2018-06-25 18:29:57 +02:00
|
|
|
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
|
2018-06-27 11:17:38 +02:00
|
|
|
|
2018-07-01 22:02:54 +02:00
|
|
|
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
|
|
|
|
<v-lcirclemarker v-else :lat-lng="positionLatLng" :color="markerOptions.color" :fillColor="markerOptions.fillColor" :fillOpacity="1.0" :weight="markerOptions.weight" :radius="markerRadius"></v-lcirclemarker>
|
2018-06-27 11:17:38 +02:00
|
|
|
|
2018-07-01 22:55:21 +02:00
|
|
|
<v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="positionLatLng" :radius="radiusFromAccuracy"></v-lcircle>
|
2018-06-27 11:17:38 +02:00
|
|
|
|
2018-06-27 14:59:45 +02:00
|
|
|
<ReportMarker v-for="marker in markers" :key="marker.id" :marker="marker"></ReportMarker>
|
2018-06-25 18:29:57 +02:00
|
|
|
</v-lmap>
|
2018-07-03 18:09:56 +02:00
|
|
|
<v-btn
|
|
|
|
absolute
|
|
|
|
dark
|
|
|
|
fab
|
|
|
|
large
|
|
|
|
bottom
|
|
|
|
left
|
|
|
|
color="blue"
|
|
|
|
class="overlayButton"
|
|
|
|
v-if="recenterButton"
|
|
|
|
@click.native.stop="recenterMap"
|
|
|
|
>
|
|
|
|
<v-icon>my_location</v-icon>
|
|
|
|
</v-btn>
|
2018-06-25 18:29:57 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import L from 'leaflet';
|
|
|
|
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
|
|
|
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
|
|
|
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
|
|
|
|
2018-07-01 22:27:18 +02:00
|
|
|
import compassNorthIcon from '@/assets/compassNorth.svg';
|
2018-06-27 14:59:45 +02:00
|
|
|
import * as constants from '@/constants';
|
|
|
|
import ReportMarker from './ReportMarker.vue';
|
2018-06-27 11:17:38 +02:00
|
|
|
|
2018-06-25 18:29:57 +02:00
|
|
|
// Fix for a bug in Leaflet default icon
|
|
|
|
// see https://github.com/PaulLeCam/react-leaflet/issues/255#issuecomment-261904061
|
|
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
|
|
L.Icon.Default.mergeOptions({
|
|
|
|
iconRetinaUrl,
|
|
|
|
iconUrl,
|
|
|
|
shadowUrl,
|
|
|
|
});
|
|
|
|
|
|
|
|
export default {
|
2018-06-27 14:59:45 +02:00
|
|
|
components: {
|
|
|
|
ReportMarker,
|
|
|
|
},
|
2018-06-25 18:29:57 +02:00
|
|
|
props: {
|
2018-06-27 11:17:38 +02:00
|
|
|
accuracy: {
|
|
|
|
type: Number,
|
|
|
|
default: null,
|
|
|
|
},
|
2018-06-25 18:29:57 +02:00
|
|
|
heading: Number,
|
2018-06-26 11:04:23 +02:00
|
|
|
markers: Array,
|
2018-07-02 18:39:35 +02:00
|
|
|
onPress: Function,
|
2018-07-01 22:02:54 +02:00
|
|
|
positionLatLng: Array,
|
2018-06-25 18:29:57 +02:00
|
|
|
},
|
|
|
|
computed: {
|
2018-06-27 11:17:38 +02:00
|
|
|
radiusFromAccuracy() {
|
|
|
|
if (this.accuracy) {
|
|
|
|
return this.accuracy / (
|
2018-07-01 22:55:21 +02:00
|
|
|
(constants.EARTH_RADIUS * 2 * Math.PI * Math.cos(this.positionLatLng[0] *
|
2018-07-01 22:02:54 +02:00
|
|
|
(Math.PI / 180))) /
|
2018-06-27 11:17:38 +02:00
|
|
|
(2 ** (this.zoom + 8))
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
shouldDisplayAccuracy() {
|
|
|
|
return (
|
|
|
|
this.accuracy &&
|
|
|
|
this.accuracy < 100 &&
|
|
|
|
this.radiusFromAccuracy > this.markerRadius
|
|
|
|
);
|
|
|
|
},
|
2018-06-25 18:29:57 +02:00
|
|
|
markerOptions() {
|
|
|
|
return {
|
|
|
|
fillColor: '#00ff00',
|
2018-06-27 11:17:38 +02:00
|
|
|
color: '#000000',
|
2018-06-25 18:29:57 +02:00
|
|
|
heading: this.heading,
|
2018-06-27 11:17:38 +02:00
|
|
|
weight: 1,
|
2018-06-25 18:29:57 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
2018-07-01 22:27:18 +02:00
|
|
|
mounted() {
|
2018-07-02 18:27:35 +02:00
|
|
|
this.map = this.$refs.map.mapObject;
|
|
|
|
if (this.map.getZoom() !== this.zoom) {
|
|
|
|
this.isProgrammaticZoom = true;
|
|
|
|
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
|
|
|
}
|
2018-07-03 18:09:56 +02:00
|
|
|
if (
|
|
|
|
this.map.getCenter().lat !== this.positionLatLng[0] &&
|
|
|
|
this.map.getCenter().lng !== this.positionLatLng[1]
|
|
|
|
) {
|
2018-07-02 19:53:11 +02:00
|
|
|
this.isProgrammaticMove = true;
|
|
|
|
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
|
|
|
}
|
2018-07-02 18:27:35 +02:00
|
|
|
this.map.setView(this.positionLatLng, this.zoom);
|
|
|
|
this.showCompass();
|
|
|
|
},
|
2018-07-03 18:09:56 +02:00
|
|
|
watch: {
|
|
|
|
positionLatLng: (newPositionLatLng) => {
|
|
|
|
if (!this.map) {
|
|
|
|
// Map should have been created
|
|
|
|
return;
|
2018-07-02 18:27:35 +02:00
|
|
|
}
|
2018-07-03 18:09:56 +02:00
|
|
|
if (!this.recenterButton) {
|
|
|
|
// Handle programmatic navigation
|
|
|
|
if (this.map.getZoom() !== this.zoom) {
|
|
|
|
this.isProgrammaticZoom = true;
|
|
|
|
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
|
|
|
}
|
|
|
|
if (
|
|
|
|
this.map.getCenter().lat !== newPositionLatLng[0] &&
|
|
|
|
this.map.getCenter().lng !== newPositionLatLng[1]
|
|
|
|
) {
|
|
|
|
this.isProgrammaticMove = true;
|
|
|
|
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
|
|
|
}
|
|
|
|
this.map.setView(this.positionLatLng, this.zoom);
|
2018-07-02 19:53:11 +02:00
|
|
|
}
|
2018-07-03 18:09:56 +02:00
|
|
|
},
|
2018-07-01 22:27:18 +02:00
|
|
|
},
|
2018-06-25 18:29:57 +02:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
2018-06-27 14:59:45 +02:00
|
|
|
zoom: constants.DEFAULT_ZOOM,
|
2018-06-27 11:17:38 +02:00
|
|
|
markerRadius: 10.0,
|
2018-06-27 14:59:45 +02:00
|
|
|
minZoom: constants.MIN_ZOOM,
|
|
|
|
maxZoom: constants.MAX_ZOOM,
|
|
|
|
tileServer: constants.TILE_SERVER,
|
2018-07-01 22:55:21 +02:00
|
|
|
isMouseDown: false,
|
2018-07-02 18:27:35 +02:00
|
|
|
isProgrammaticZoom: false,
|
2018-07-02 19:53:11 +02:00
|
|
|
isProgrammaticMove: false,
|
2018-07-03 18:09:56 +02:00
|
|
|
recenterButton: false,
|
2018-07-02 18:27:35 +02:00
|
|
|
map: null,
|
2018-06-25 18:29:57 +02:00
|
|
|
};
|
|
|
|
},
|
2018-06-28 14:40:56 +02:00
|
|
|
methods: {
|
2018-07-02 18:39:35 +02:00
|
|
|
handleClick(event) {
|
|
|
|
if (this.onPress) {
|
|
|
|
this.onPress(event.latlng);
|
2018-06-28 14:40:56 +02:00
|
|
|
}
|
|
|
|
},
|
2018-07-03 19:04:54 +02:00
|
|
|
onMoveStart() {
|
2018-07-02 19:53:11 +02:00
|
|
|
if (!this.isProgrammaticMove) {
|
2018-07-02 18:27:35 +02:00
|
|
|
this.showRecenterButton();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onZoomStart() {
|
|
|
|
if (!this.isProgrammaticZoom) {
|
|
|
|
this.showRecenterButton();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
showCompass() {
|
|
|
|
const north = L.control({ position: 'topright' });
|
|
|
|
north.onAdd = () => {
|
|
|
|
const div = L.DomUtil.create('div', 'compassIcon legend');
|
|
|
|
div.innerHTML = `<img src="${compassNorthIcon}">`;
|
2018-07-02 18:39:35 +02:00
|
|
|
L.DomEvent.disableClickPropagation(div);
|
2018-07-02 18:27:35 +02:00
|
|
|
return div;
|
|
|
|
};
|
|
|
|
this.map.addControl(north);
|
|
|
|
},
|
|
|
|
showRecenterButton() {
|
|
|
|
if (!this.recenterButton) {
|
2018-07-03 18:09:56 +02:00
|
|
|
this.recenterButton = true;
|
2018-07-02 18:27:35 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
hideRecenterButton() {
|
|
|
|
if (this.recenterButton) {
|
2018-07-03 18:09:56 +02:00
|
|
|
this.recenterButton = false;
|
2018-07-01 22:55:21 +02:00
|
|
|
}
|
|
|
|
},
|
2018-07-02 18:27:35 +02:00
|
|
|
recenterMap() {
|
|
|
|
this.hideRecenterButton();
|
|
|
|
if (this.map.getZoom() !== this.zoom) {
|
|
|
|
this.isProgrammaticZoom = true;
|
|
|
|
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
2018-07-01 22:55:21 +02:00
|
|
|
}
|
2018-07-03 18:09:56 +02:00
|
|
|
if (
|
|
|
|
this.map.getCenter().lat !== this.positionLatLng[0] &&
|
|
|
|
this.map.getCenter().lng !== this.positionLatLng[1]
|
|
|
|
) {
|
2018-07-02 19:53:11 +02:00
|
|
|
this.isProgrammaticMove = true;
|
|
|
|
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
|
|
|
}
|
2018-07-02 18:27:35 +02:00
|
|
|
this.map.setView(this.positionLatLng, this.zoom);
|
2018-07-01 22:55:21 +02:00
|
|
|
},
|
2018-06-28 14:40:56 +02:00
|
|
|
},
|
2018-06-25 18:29:57 +02:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.application .leaflet-bar a {
|
|
|
|
color: black;
|
|
|
|
}
|
2018-07-01 22:27:18 +02:00
|
|
|
|
|
|
|
.compassIcon {
|
|
|
|
background-color: white;
|
|
|
|
border-radius: 50%;
|
2018-07-02 18:27:35 +02:00
|
|
|
width: 42px;
|
|
|
|
height: 42px;
|
2018-07-01 22:27:18 +02:00
|
|
|
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
|
|
|
|
-webkite-box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
|
|
|
|
}
|
2018-07-02 18:27:35 +02:00
|
|
|
|
|
|
|
.compassIcon img {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2018-06-25 18:29:57 +02:00
|
|
|
</style>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.fill-width {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
</style>
|