From 9698a889ad80b556c4f9d7008fb2502b371e2403 Mon Sep 17 00:00:00 2001 From: Gautier P Date: Fri, 15 Jan 2021 16:10:23 +0100 Subject: [PATCH] Add marker cluster and update leaflet --- flatisfy/web/js_src/components/flatsmap.vue | 42 ++++++++++++--------- flatisfy/web/js_src/store/getters.js | 22 +++++------ flatisfy/web/js_src/views/home.vue | 1 - package.json | 4 +- 4 files changed, 39 insertions(+), 30 deletions(-) diff --git a/flatisfy/web/js_src/components/flatsmap.vue b/flatisfy/web/js_src/components/flatsmap.vue index 08d4d93..99be71a 100644 --- a/flatisfy/web/js_src/components/flatsmap.vue +++ b/flatisfy/web/js_src/components/flatsmap.vue @@ -2,16 +2,20 @@
- - + + + + + + @@ -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: { diff --git a/flatisfy/web/js_src/store/getters.js b/flatisfy/web/js_src/store/getters.js index 6610e33..8814c7a 100644 --- a/flatisfy/web/js_src/store/getters.js +++ b/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 += '
' + flat.title + '' - } else { - markers.push({ - 'title': '', - 'content': '' + flat.title + '', - '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': '' + flat.title + '', + 'gps': gps + }) } } }) diff --git a/flatisfy/web/js_src/views/home.vue b/flatisfy/web/js_src/views/home.vue index 076166a..2b2c874 100644 --- a/flatisfy/web/js_src/views/home.vue +++ b/flatisfy/web/js_src/views/home.vue @@ -1,7 +1,6 @@