cygnal/src/components/Map.vue

103 lines
3.0 KiB
Vue
Raw Normal View History

2018-06-25 18:29:57 +02:00
<template>
<div class="fill-height fill-width">
<v-lmap :center="latlng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }">
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
<v-lts v-if="heading" :lat-lng="latlng" :options="markerOptions"></v-lts>
<v-lcirclemarker v-else :lat-lng="latlng" :color="markerOptions.color" :fillColor="markerOptions.fillColor" :fillOpacity="1.0" :weight="markerOptions.weight" :radius="markerRadius"></v-lcirclemarker>
<v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="latlng" :radius="radiusFromAccuracy"></v-lcircle>
2018-06-26 11:04:23 +02:00
<v-lmarker v-for="marker in markers" :key="marker.id" :lat-lng="marker.latLng"></v-lmarker>
2018-06-25 18:29:57 +02:00
</v-lmap>
</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';
import { EARTH_RADIUS } from '@/constants';
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 const DEFAULT_ZOOM = 17;
export const MIN_ZOOM = 15;
export const MAX_ZOOM = 18;
export const TILE_SERVER = process.env.TILE_SERVER || 'https://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png';
2018-06-25 18:29:57 +02:00
export default {
props: {
accuracy: {
type: Number,
default: null,
},
2018-06-25 18:29:57 +02:00
heading: Number,
lat: Number,
lng: Number,
2018-06-26 11:04:23 +02:00
markers: Array,
2018-06-25 18:29:57 +02:00
},
computed: {
radiusFromAccuracy() {
if (this.accuracy) {
return this.accuracy / (
(EARTH_RADIUS * 2 * Math.PI * Math.cos(this.lat)) /
(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
latlng() {
return [this.lat, this.lng];
},
markerOptions() {
return {
fillColor: '#00ff00',
color: '#000000',
2018-06-25 18:29:57 +02:00
heading: this.heading,
weight: 1,
2018-06-25 18:29:57 +02:00
};
},
},
data() {
return {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
zoom: DEFAULT_ZOOM,
markerRadius: 10.0,
2018-06-25 18:29:57 +02:00
minZoom: MIN_ZOOM,
maxZoom: MAX_ZOOM,
tileServer: TILE_SERVER,
};
},
};
</script>
<style>
.application .leaflet-bar a {
color: black;
}
</style>
<style scoped>
.fill-width {
width: 100%;
}
</style>