phyks/flatisfy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add marker cluster and update leaflet

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
flatisfy/web/js_src/components/flatsmap.vue
View File

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

22
flatisfy/web/js_src/store/getters.js
View File

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

1
flatisfy/web/js_src/views/home.vue
View File

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

4
package.json
View File

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