Add marker cluster and update leaflet

This commit is contained in:
Gautier P 2021-01-15 16:10:23 +01:00
parent b19459b97f
commit 9698a889ad
4 changed files with 39 additions and 30 deletions

View File

@ -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: {

View File

@ -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
})
}
}
})

View File

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

View File

@ -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"
},