Do not move map on flat click

This commit is contained in:
Gautier P 2021-01-26 14:44:24 +01:00
parent 36e98bc5b3
commit 0f2a14b024
3 changed files with 19 additions and 17 deletions

View File

@ -101,7 +101,7 @@
<div>
<h3>{{ $t("flatsDetails.Location") }}</h3>
<FlatsMap :flats="flatMarkers" :places="timeToPlaces" :journeys="journeys"></FlatsMap>
<FlatsMap :flats="flatMarker" :places="timeToPlaces" :journeys="journeys"></FlatsMap>
</div>
<div>
<h3>{{ $t("flatsDetails.Notes") }}</h3>
@ -239,7 +239,7 @@ export default {
isLoading () {
return this.$store.getters.isLoading
},
flatMarkers () {
flatMarker () {
return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.flat.id)
},
'flatpickrValue' () {

View File

@ -1,6 +1,6 @@
<template lang="html">
<div class="full">
<v-map :zoom="zoom.defaultZoom" :center="center" :bounds="bounds" :min-zoom="zoom.minZoom" :max-zoom="zoom.maxZoom" v-on:click="$emit('select-flat', null)">
<v-map v-if="bounds" :zoom="zoom.defaultZoom" :bounds="bounds" :min-zoom="zoom.minZoom" :max-zoom="zoom.maxZoom" v-on:click="$emit('select-flat', null)" @update:bounds="bounds = $event">
<v-tilelayer :url="tiles.url" :attribution="tiles.attribution"></v-tilelayer>
<v-marker-cluster>
<template v-for="marker in flats">
@ -20,6 +20,7 @@
<v-geojson-layer :geojson="journey.geojson" :options="Object.assign({}, defaultGeoJSONOptions, journey.options)"></v-geojson-layer>
</template>
</v-map>
<div v-else>Nothing to display yet</div>
</div>
</template>
@ -53,7 +54,7 @@ export default {
fillColor: '#e4ce7f',
fillOpacity: 1
},
center: [46.449, 2.210],
bounds: [[40.91351257612758, -7.580566406250001], [51.65892664880053, 12.0849609375]],
zoom: {
defaultZoom: 6,
minZoom: 5,
@ -83,17 +84,18 @@ export default {
'v-geojson-layer': LGeoJSON
},
computed: {
bounds () {
let bounds = []
this.flats.forEach(flat => bounds.push(flat.gps))
Object.keys(this.places).forEach(place => bounds.push(this.places[place]))
watch: {
flats: 'computeBounds',
places: 'computeBounds'
},
if (bounds.length > 0) {
bounds = L.latLngBounds(bounds)
return bounds
} else {
return null
methods: {
computeBounds (newData, oldData) {
if (this.flats.length && JSON.stringify(newData) !== JSON.stringify(oldData)) {
const allBounds = []
this.flats.forEach(flat => allBounds.push(flat.gps))
Object.keys(this.places).forEach(place => allBounds.push(this.places[place]))
this.bounds = allBounds.length ? L.latLngBounds(allBounds) : undefined
}
}
},

View File

@ -37,9 +37,9 @@ export default {
marker => marker.gps[0] === gps[0] && marker.gps[1] === gps[1]
)
if (previousMarker) {
// randomize position a bit
gps[0] += (Math.random() - 0.5) / 500
gps[1] += (Math.random() - 0.5) / 500
// randomize position a bit
// gps[0] += (Math.random() - 0.5) / 500
// gps[1] += (Math.random() - 0.5) / 500
}
const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
const cost = flat.cost ? ' ( ' + flat.cost + '€)' : ''