Browse Source

Add marker cluster and update leaflet

Gautier P 9 months ago
parent
commit
9698a889ad

+ 25
- 17
flatisfy/web/js_src/components/flatsmap.vue View File

@@ -2,16 +2,20 @@
2 2
     <div class="full">
3 3
         <v-map :zoom="zoom.defaultZoom" :center="center" :bounds="bounds" :min-zoom="zoom.minZoom" :max-zoom="zoom.maxZoom">
4 4
             <v-tilelayer :url="tiles.url" :attribution="tiles.attribution"></v-tilelayer>
5
-            <template v-for="marker in flats">
6
-                <v-marker :lat-lng="{ lat: marker.gps[0], lng: marker.gps[1] }" :icon="icons.flat">
7
-                    <v-popup :content="marker.content"></v-popup>
8
-                </v-marker>
9
-            </template>
10
-            <template v-for="(place_gps, place_name) in places">
11
-                <v-marker :lat-lng="{ lat: place_gps[0], lng: place_gps[1] }" :icon="icons.place">
12
-                    <v-tooltip :content="place_name"></v-tooltip>
13
-                </v-marker>
14
-            </template>
5
+            <v-marker-cluster>
6
+                <template v-for="marker in flats">
7
+                        <v-marker :lat-lng="{ lat: marker.gps[0], lng: marker.gps[1] }" :icon="icons.flat">
8
+                            <v-popup :content="marker.content"></v-popup>
9
+                        </v-marker>
10
+                </template>
11
+            </v-marker-cluster>
12
+            <v-marker-cluster>
13
+                <template v-for="(place_gps, place_name) in places">
14
+                        <v-marker :lat-lng="{ lat: place_gps[0], lng: place_gps[1] }" :icon="icons.place">
15
+                            <v-tooltip :content="place_name"></v-tooltip>
16
+                        </v-marker>
17
+                </template>
18
+            </v-marker-cluster>
15 19
             <template v-for="journey in journeys">
16 20
                 <v-geojson-layer :geojson="journey.geojson" :options="Object.assign({}, defaultGeoJSONOptions, journey.options)"></v-geojson-layer>
17 21
             </template>
@@ -31,10 +35,13 @@ L.Icon.Default.mergeOptions({
31 35
 })
32 36
 
33 37
 import 'leaflet/dist/leaflet.css'
38
+import 'leaflet.markercluster/dist/MarkerCluster.css'
39
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
34 40
 
35 41
 require('leaflet.icon.glyph')
36 42
 
37
-import Vue2Leaflet from 'vue2-leaflet'
43
+import { LMap, LTileLayer, LMarker, LTooltip, LPopup, LGeoJSON } from 'vue2-leaflet'
44
+import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
38 45
 
39 46
 export default {
40 47
     data () {
@@ -67,12 +74,13 @@ export default {
67 74
     },
68 75
 
69 76
     components: {
70
-        'v-map': Vue2Leaflet.Map,
71
-        'v-tilelayer': Vue2Leaflet.TileLayer,
72
-        'v-marker': Vue2Leaflet.Marker,
73
-        'v-tooltip': Vue2Leaflet.Tooltip,
74
-        'v-popup': Vue2Leaflet.Popup,
75
-        'v-geojson-layer': Vue2Leaflet.GeoJSON
77
+        'v-map': LMap,
78
+        'v-tilelayer': LTileLayer,
79
+        'v-marker': LMarker,
80
+        'v-marker-cluster': Vue2LeafletMarkerCluster,
81
+        'v-tooltip': LTooltip,
82
+        'v-popup': LPopup,
83
+        'v-geojson-layer': LGeoJSON
76 84
     },
77 85
 
78 86
     computed: {

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

@@ -33,20 +33,20 @@ export default {
33 33
                 const gps = findFlatGPS(flat)
34 34
 
35 35
                 if (gps) {
36
-                    const previousMarkerIndex = markers.findIndex(
36
+                    const previousMarker = markers.find(
37 37
                         marker => marker.gps[0] === gps[0] && marker.gps[1] === gps[1]
38 38
                     )
39
-
40
-                    const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
41
-                    if (previousMarkerIndex !== -1) {
42
-                        markers[previousMarkerIndex].content += '<br/><a href="' + href + '">' + flat.title + '</a>'
43
-                    } else {
44
-                        markers.push({
45
-                            'title': '',
46
-                            'content': '<a href="' + href + '">' + flat.title + '</a>',
47
-                            'gps': gps
48
-                        })
39
+                    if (previousMarker) {
40
+                        // randomize position a bit
41
+                        // gps[0] += (Math.random() - 0.5) / 500
42
+                        // gps[1] += (Math.random() - 0.5) / 500
49 43
                     }
44
+                    const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
45
+                    markers.push({
46
+                        'title': '',
47
+                        'content': '<a href="' + href + '">' + flat.title + '</a>',
48
+                        'gps': gps
49
+                    })
50 50
                 }
51 51
             }
52 52
         })

+ 0
- 1
flatisfy/web/js_src/views/home.vue View File

@@ -1,7 +1,6 @@
1 1
 <template>
2 2
     <div>
3 3
         <FlatsMap :flats="flatsMarkers" :places="timeToPlaces"></FlatsMap>
4
-
5 4
         <h2>
6 5
           {{ $t("home.new_available_flats") }}
7 6
           <template v-if="lastUpdate">

+ 3
- 1
package.json View File

@@ -23,6 +23,7 @@
23 23
     "imagesloaded": "^4.1.1",
24 24
     "isomorphic-fetch": "^2.2.1",
25 25
     "isotope-layout": "^3.0.3",
26
+    "leaflet": "^1.7.1",
26 27
     "leaflet.icon.glyph": "^0.2.0",
27 28
     "masonry": "0.0.2",
28 29
     "moment": "^2.18.1",
@@ -31,7 +32,8 @@
31 32
     "vue-i18n": "^6.1.1",
32 33
     "vue-images-loaded": "^1.1.2",
33 34
     "vue-router": "^2.4.0",
34
-    "vue2-leaflet": "0.0.44",
35
+    "vue2-leaflet": "2.6.0",
36
+    "vue2-leaflet-markercluster": "^3.1.0",
35 37
     "vueisotope": "^3.0.0-rc",
36 38
     "vuex": "^2.3.0"
37 39
   },