Browse Source

Do not move map on flat click

Gautier P 10 months ago
parent
commit
0f2a14b024

+ 2
- 2
flatisfy/web/js_src/components/flat.vue View File

@@ -101,7 +101,7 @@
101 101
             <div>
102 102
                 <h3>{{ $t("flatsDetails.Location") }}</h3>
103 103
 
104
-                <FlatsMap :flats="flatMarkers" :places="timeToPlaces" :journeys="journeys"></FlatsMap>
104
+                <FlatsMap :flats="flatMarker" :places="timeToPlaces" :journeys="journeys"></FlatsMap>
105 105
             </div>
106 106
             <div>
107 107
                 <h3>{{ $t("flatsDetails.Notes") }}</h3>
@@ -239,7 +239,7 @@ export default {
239 239
         isLoading () {
240 240
             return this.$store.getters.isLoading
241 241
         },
242
-        flatMarkers () {
242
+        flatMarker () {
243 243
             return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.flat.id)
244 244
         },
245 245
         'flatpickrValue' () {

+ 14
- 12
flatisfy/web/js_src/components/flatsmap.vue View File

@@ -1,6 +1,6 @@
1 1
 <template lang="html">
2 2
     <div class="full">
3
-        <v-map :zoom="zoom.defaultZoom" :center="center" :bounds="bounds" :min-zoom="zoom.minZoom" :max-zoom="zoom.maxZoom" v-on:click="$emit('select-flat', null)">
3
+        <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">
4 4
             <v-tilelayer :url="tiles.url" :attribution="tiles.attribution"></v-tilelayer>
5 5
             <v-marker-cluster>
6 6
                 <template v-for="marker in flats">
@@ -20,6 +20,7 @@
20 20
                 <v-geojson-layer :geojson="journey.geojson" :options="Object.assign({}, defaultGeoJSONOptions, journey.options)"></v-geojson-layer>
21 21
             </template>
22 22
         </v-map>
23
+        <div v-else>Nothing to display yet</div>
23 24
     </div>
24 25
 </template>
25 26
 
@@ -53,7 +54,7 @@ export default {
53 54
                 fillColor: '#e4ce7f',
54 55
                 fillOpacity: 1
55 56
             },
56
-            center: [46.449, 2.210],
57
+            bounds: [[40.91351257612758, -7.580566406250001], [51.65892664880053, 12.0849609375]],
57 58
             zoom: {
58 59
                 defaultZoom: 6,
59 60
                 minZoom: 5,
@@ -83,17 +84,18 @@ export default {
83 84
         'v-geojson-layer': LGeoJSON
84 85
     },
85 86
 
86
-    computed: {
87
-        bounds () {
88
-            let bounds = []
89
-            this.flats.forEach(flat => bounds.push(flat.gps))
90
-            Object.keys(this.places).forEach(place => bounds.push(this.places[place]))
87
+    watch: {
88
+        flats: 'computeBounds',
89
+        places: 'computeBounds'
90
+    },
91 91
 
92
-            if (bounds.length > 0) {
93
-                bounds = L.latLngBounds(bounds)
94
-                return bounds
95
-            } else {
96
-                return null
92
+    methods: {
93
+        computeBounds (newData, oldData) {
94
+            if (this.flats.length && JSON.stringify(newData) !== JSON.stringify(oldData)) {
95
+                const allBounds = []
96
+                this.flats.forEach(flat => allBounds.push(flat.gps))
97
+                Object.keys(this.places).forEach(place => allBounds.push(this.places[place]))
98
+                this.bounds = allBounds.length ? L.latLngBounds(allBounds) : undefined
97 99
             }
98 100
         }
99 101
     },

+ 3
- 3
flatisfy/web/js_src/store/getters.js View File

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