Add marker cluster and update leaflet

flatisfy/web/js_src/components/flatsmap.vue

@@ -2,16 +2,20 @@
     <div class="full">
         <v-map :zoom="zoom.defaultZoom" :center="center" :bounds="bounds" :min-zoom="zoom.minZoom" :max-zoom="zoom.maxZoom">
             <v-tilelayer :url="tiles.url" :attribution="tiles.attribution"></v-tilelayer>
-            <template v-for="marker in flats">
-                <v-marker :lat-lng="{ lat: marker.gps[0], lng: marker.gps[1] }" :icon="icons.flat">
-                    <v-popup :content="marker.content"></v-popup>
-                </v-marker>
-            </template>
-            <template v-for="(place_gps, place_name) in places">
-                <v-marker :lat-lng="{ lat: place_gps[0], lng: place_gps[1] }" :icon="icons.place">
-                    <v-tooltip :content="place_name"></v-tooltip>
-                </v-marker>
-            </template>
+            <v-marker-cluster>
+                <template v-for="marker in flats">
+                        <v-marker :lat-lng="{ lat: marker.gps[0], lng: marker.gps[1] }" :icon="icons.flat">
+                            <v-popup :content="marker.content"></v-popup>
+                        </v-marker>
+                </template>
+            </v-marker-cluster>
+            <v-marker-cluster>
+                <template v-for="(place_gps, place_name) in places">
+                        <v-marker :lat-lng="{ lat: place_gps[0], lng: place_gps[1] }" :icon="icons.place">
+                            <v-tooltip :content="place_name"></v-tooltip>
+                        </v-marker>
+                </template>
+            </v-marker-cluster>
             <template v-for="journey in journeys">
                 <v-geojson-layer :geojson="journey.geojson" :options="Object.assign({}, defaultGeoJSONOptions, journey.options)"></v-geojson-layer>
             </template>
@@ -31,10 +35,13 @@ L.Icon.Default.mergeOptions({
 })
 
 import 'leaflet/dist/leaflet.css'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 
 require('leaflet.icon.glyph')
 
-import Vue2Leaflet from 'vue2-leaflet'
+import { LMap, LTileLayer, LMarker, LTooltip, LPopup, LGeoJSON } from 'vue2-leaflet'
+import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
 
 export default {
     data () {
@@ -67,12 +74,13 @@ export default {
     },
 
     components: {
-        'v-map': Vue2Leaflet.Map,
-        'v-tilelayer': Vue2Leaflet.TileLayer,
-        'v-marker': Vue2Leaflet.Marker,
-        'v-tooltip': Vue2Leaflet.Tooltip,
-        'v-popup': Vue2Leaflet.Popup,
-        'v-geojson-layer': Vue2Leaflet.GeoJSON
+        'v-map': LMap,
+        'v-tilelayer': LTileLayer,
+        'v-marker': LMarker,
+        'v-marker-cluster': Vue2LeafletMarkerCluster,
+        'v-tooltip': LTooltip,
+        'v-popup': LPopup,
+        'v-geojson-layer': LGeoJSON
     },
 
     computed: {

flatisfy/web/js_src/store/getters.js

@@ -33,20 +33,20 @@ export default {
                 const gps = findFlatGPS(flat)
 
                 if (gps) {
-                    const previousMarkerIndex = markers.findIndex(
+                    const previousMarker = markers.find(
                         marker => marker.gps[0] === gps[0] && marker.gps[1] === gps[1]
                     )
-
-                    const href = router.resolve({ name: 'details', params: { id: flat.id }}).href
-                    if (previousMarkerIndex !== -1) {
-                        markers[previousMarkerIndex].content += '<br/><a href="' + href + '">' + flat.title + '</a>'
-                    } else {
-                        markers.push({
-                            'title': '',
-                            'content': '<a href="' + href + '">' + flat.title + '</a>',
-                            'gps': gps
-                        })
+                    if (previousMarker) {
+                        // 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
+                    markers.push({
+                        'title': '',
+                        'content': '<a href="' + href + '">' + flat.title + '</a>',
+                        'gps': gps
+                    })
                 }
             }
         })

flatisfy/web/js_src/views/home.vue

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

package.json

@@ -23,6 +23,7 @@
     "imagesloaded": "^4.1.1",
     "isomorphic-fetch": "^2.2.1",
     "isotope-layout": "^3.0.3",
+    "leaflet": "^1.7.1",
     "leaflet.icon.glyph": "^0.2.0",
     "masonry": "0.0.2",
     "moment": "^2.18.1",
@@ -31,7 +32,8 @@
     "vue-i18n": "^6.1.1",
     "vue-images-loaded": "^1.1.2",
     "vue-router": "^2.4.0",
-    "vue2-leaflet": "0.0.44",
+    "vue2-leaflet": "2.6.0",
+    "vue2-leaflet-markercluster": "^3.1.0",
     "vueisotope": "^3.0.0-rc",
     "vuex": "^2.3.0"
   },