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

View File

@ -1,6 +1,6 @@
<template lang="html"> <template lang="html">
<div class="full"> <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-tilelayer :url="tiles.url" :attribution="tiles.attribution"></v-tilelayer>
<v-marker-cluster> <v-marker-cluster>
<template v-for="marker in flats"> <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> <v-geojson-layer :geojson="journey.geojson" :options="Object.assign({}, defaultGeoJSONOptions, journey.options)"></v-geojson-layer>
</template> </template>
</v-map> </v-map>
<div v-else>Nothing to display yet</div>
</div> </div>
</template> </template>
@ -53,7 +54,7 @@ export default {
fillColor: '#e4ce7f', fillColor: '#e4ce7f',
fillOpacity: 1 fillOpacity: 1
}, },
center: [46.449, 2.210], bounds: [[40.91351257612758, -7.580566406250001], [51.65892664880053, 12.0849609375]],
zoom: { zoom: {
defaultZoom: 6, defaultZoom: 6,
minZoom: 5, minZoom: 5,
@ -83,17 +84,18 @@ export default {
'v-geojson-layer': LGeoJSON 'v-geojson-layer': LGeoJSON
}, },
computed: { watch: {
bounds () { flats: 'computeBounds',
let bounds = [] places: 'computeBounds'
this.flats.forEach(flat => bounds.push(flat.gps)) },
Object.keys(this.places).forEach(place => bounds.push(this.places[place]))
if (bounds.length > 0) { methods: {
bounds = L.latLngBounds(bounds) computeBounds (newData, oldData) {
return bounds if (this.flats.length && JSON.stringify(newData) !== JSON.stringify(oldData)) {
} else { const allBounds = []
return null 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] marker => marker.gps[0] === gps[0] && marker.gps[1] === gps[1]
) )
if (previousMarker) { if (previousMarker) {
// randomize position a bit // randomize position a bit
gps[0] += (Math.random() - 0.5) / 500 // gps[0] += (Math.random() - 0.5) / 500
gps[1] += (Math.random() - 0.5) / 500 // gps[1] += (Math.random() - 0.5) / 500
} }
const href = router.resolve({ name: 'details', params: { id: flat.id }}).href const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
const cost = flat.cost ? ' ( ' + flat.cost + '€)' : '' const cost = flat.cost ? ' ( ' + flat.cost + '€)' : ''