54 lines
1023 B
Vue
54 lines
1023 B
Vue
|
<template>
|
||
|
<div class="container">
|
||
|
<ul class="locations">
|
||
|
<li
|
||
|
v-for="location in store.locations"
|
||
|
@click="showDetails(location)"
|
||
|
>
|
||
|
<router-link :to="createLink(location)">
|
||
|
{{location.label}}
|
||
|
</router-link>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import store from '../store';
|
||
|
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
store
|
||
|
}
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
createLink(loc) {
|
||
|
let lat = loc.coordinates[0];
|
||
|
let lng = loc.coordinates[1];
|
||
|
return `/${lat}/${lng}`;
|
||
|
},
|
||
|
|
||
|
showDetails(loc) {
|
||
|
let lat = loc.coordinates[0];
|
||
|
let lng = loc.coordinates[1];
|
||
|
store.openPopup(loc.label, lat, lng);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
li {
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<style>
|
||
|
.leaflet-sidebar-content ul {
|
||
|
list-style-type: none;
|
||
|
padding-left: 5px;
|
||
|
}
|
||
|
</style>
|