106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<l-map
|
|
id="the-map"
|
|
ref="myMap"
|
|
:zoom="zoom"
|
|
:min-zoom="min_zoom"
|
|
:max-zoom="max_zoom"
|
|
:center="center"
|
|
:options="{zoomControl: false}"
|
|
@click="onClick"
|
|
>
|
|
<l-tile-layer
|
|
:url="url"
|
|
:attribution="attribution"
|
|
></l-tile-layer>
|
|
|
|
<l-marker
|
|
v-for="loc in store.locations"
|
|
:lat-lng="loc.coordinates"
|
|
>
|
|
<l-popup>
|
|
{{ loc.label }}
|
|
</l-popup>
|
|
</l-marker>
|
|
|
|
<l-control-zoom position="topright"></l-control-zoom>
|
|
|
|
<Sidebar></Sidebar>
|
|
</l-map>
|
|
</template>
|
|
|
|
<script>
|
|
import { LPopup, LControl, LControlZoom, LMap, LTileLayer, LMarker } from 'vue2-leaflet';
|
|
import * as L from 'leaflet';
|
|
|
|
import store from '../store';
|
|
|
|
import Sidebar from './Sidebar';
|
|
|
|
const TILE_URL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
|
|
const ATTRIBUTION = 'Carte données © <a href="https://osm.org/copyright/">OpenStreetMap (ODbL)</a> / fond OSM-FR (CC-by-SA), <a href="https://www.data.gouv.fr/fr/datasets/points-dinterets-openstreetmap/">POI: OpenStreetMap (ODbL)</a>, <a href="https://www.data.gouv.fr/fr/datasets/base-d-adresses-nationale-ouverte-bano/">adresses BANO (ODbL)</a>, <a href="https://github.com/addok/addok">geocodeur addok</a>';
|
|
|
|
const MIN_ZOOM = 6;
|
|
const MAX_ZOOM = 18;
|
|
const INITIAL_ZOOM = 14;
|
|
|
|
export default {
|
|
name: 'fullmap',
|
|
|
|
components: {
|
|
LMap,
|
|
LTileLayer,
|
|
LMarker,
|
|
LControlZoom,
|
|
LControl,
|
|
LPopup,
|
|
Sidebar,
|
|
},
|
|
|
|
data() {
|
|
let lat = this.$route.params.lat;
|
|
let lng = this.$route.params.lng;
|
|
|
|
return {
|
|
center: L.latLng(lat, lng),
|
|
zoom: INITIAL_ZOOM,
|
|
min_zoom: MIN_ZOOM,
|
|
max_zoom: MAX_ZOOM,
|
|
url: TILE_URL,
|
|
attribution: ATTRIBUTION,
|
|
store,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
onClick(event) {
|
|
let {lat, lng} = event.latlng;
|
|
this.$router.replace(`/${lat}/${lng}`);
|
|
this.$refs.myMap.mapObject.panTo(event.latlng);
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.store.setMapObject(this.$refs.myMap.mapObject);
|
|
},
|
|
|
|
watch: {
|
|
$route(to, from) {
|
|
if (to.name === 'position') {
|
|
let {lat, lng} = to.params;
|
|
this.$refs.myMap.mapObject.panTo({ lat, lng });
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="leaflet/dist/leaflet.css"></style>
|
|
|
|
<style scoped>
|
|
#the-map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
</style>
|