refactor of map component, still missing some ignorecache functions to test different geocoding providers
This commit is contained in:
sedum
parent
6d034f18d9
commit
a59df23fbf
7 changed files with 149 additions and 206 deletions
65
components/EventMapDialog.vue
Normal file
65
components/EventMapDialog.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template lang="pug">
|
||||
v-card
|
||||
v-container
|
||||
div(:style="{'height': mapHeight}")
|
||||
Map.mt-4(:place='event.place' :height='mapHeight' )
|
||||
|
||||
v-row.my-4.d-flex.flex-column.align-center.text-center
|
||||
.text-h6
|
||||
v-icon(v-text='mdiMapMarker' )
|
||||
nuxt-link.ml-2.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
|
||||
.mx-2(v-text="`${event.place.address}`")
|
||||
v-card-actions
|
||||
v-row(color='primary')
|
||||
//- p.my-4(v-text="$t('common.getting_there')")
|
||||
v-btn.ml-2(icon large :href="routeBy('foot')")
|
||||
v-icon(v-text='mdiWalk')
|
||||
v-btn.ml-2(icon large :href="routeBy('bike')")
|
||||
v-icon(v-text='mdiBike')
|
||||
v-btn.ml-2(icon large :href="routeBy('car')")
|
||||
v-icon(v-text='mdiCar')
|
||||
v-spacer
|
||||
v-btn(@click='$emit("close")' outlined) Close
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { mapActions } from 'vuex'
|
||||
import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[process.client && 'Map']: () => import('@/components/Map.vue')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mdiWalk, mdiBike, mdiCar, mdiMapMarker,
|
||||
mapHeight: "55vh"
|
||||
}
|
||||
},
|
||||
props: {
|
||||
event: { type: Object, default: () => ({}) }
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
// mountLocateControl() {
|
||||
// this.$refs.map.mapObject.locate({
|
||||
// locateOptions: {
|
||||
// maxZoom: 10
|
||||
// }
|
||||
// });
|
||||
// this.$refs.map.mapObject.MyLocate();
|
||||
// },
|
||||
routeBy (type) {
|
||||
const lat = this.event.place.latitude
|
||||
const lon = this.event.place.longitude
|
||||
const routingType = {
|
||||
foot: "engine=fossgis_osrm_foot",
|
||||
bike: "engine=fossgis_osrm_bike",
|
||||
transit: null,
|
||||
car: "engine=fossgis_osrm_car"
|
||||
}
|
||||
return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,43 +1,26 @@
|
|||
<template lang="pug">
|
||||
client-only(placeholder='Loading...' )
|
||||
v-card
|
||||
v-container
|
||||
LMap(ref="map"
|
||||
id="leaflet-map-dialog"
|
||||
LMap(ref="leafletMap"
|
||||
id="leaflet-map"
|
||||
:style="{ 'height': height }"
|
||||
:zoom="zoom"
|
||||
:options="{attributionControl: false}"
|
||||
:center="center")
|
||||
LControlAttribution(position='bottomright' prefix="")
|
||||
LTileLayer(
|
||||
@tileload="$emit('tileload')"
|
||||
@tileerror="$emit('tileerror')"
|
||||
:url="url"
|
||||
:attribution="attribution")
|
||||
LMarker(
|
||||
LMarker(v-if="showMarker"
|
||||
:lat-lng="marker.coordinates")
|
||||
|
||||
v-row.my-4.d-flex.flex-column.align-center.text-center
|
||||
.text-h6
|
||||
v-icon(v-text='mdiMapMarker' )
|
||||
nuxt-link.ml-2.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
|
||||
.mx-2(v-text="`${event.place.address}`")
|
||||
v-card-actions
|
||||
v-row
|
||||
//- p.my-4(v-text="$t('common.getting_there')")
|
||||
v-btn.ml-2(icon large :href="routeBy('foot')")
|
||||
v-icon(v-text='mdiWalk')
|
||||
v-btn.ml-2(icon large :href="routeBy('bike')")
|
||||
v-icon(v-text='mdiBike')
|
||||
v-btn.ml-2(icon large :href="routeBy('car')")
|
||||
v-icon(v-text='mdiCar')
|
||||
v-spacer
|
||||
v-btn(@click='$emit("close")' outlined) Close
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import "leaflet/dist/leaflet.css"
|
||||
import { LMap, LTileLayer, LMarker, LPopup, LControlAttribution } from 'vue2-leaflet'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { Icon } from 'leaflet'
|
||||
import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -49,20 +32,31 @@ export default {
|
|||
},
|
||||
data ({ $store }) {
|
||||
return {
|
||||
mdiWalk, mdiBike, mdiCar, mdiMapMarker,
|
||||
url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
|
||||
zoom: 14,
|
||||
center: [this.event.place.latitude, this.event.place.longitude],
|
||||
marker: {
|
||||
address: this.event.place.address,
|
||||
coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
|
||||
}
|
||||
},
|
||||
routingProvider: 'openstreetmap',
|
||||
computed: {
|
||||
center () {
|
||||
if (this.mapCenter.length)
|
||||
return this.mapCenter
|
||||
else {
|
||||
return [this.place.latitude, this.place.longitude]
|
||||
}
|
||||
},
|
||||
marker () {
|
||||
return {
|
||||
address: this.place.address,
|
||||
coordinates: {lat: this.place.latitude, lon: this.place.longitude }
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
event: { type: Object, default: () => ({}) }
|
||||
place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) },
|
||||
height: { type: String, default: '' },
|
||||
showMarker: { type: Boolean, default: true },
|
||||
mapCenter: { type: Array, default: () => ([]) },
|
||||
zoom: { type: Number, default: () => (16) },
|
||||
},
|
||||
mounted() {
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
|
|
@ -73,41 +67,17 @@ export default {
|
|||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.map.mapObject.invalidateSize();
|
||||
}, 200);
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
// mountLocateControl() {
|
||||
// this.$refs.map.mapObject.locate({
|
||||
// locateOptions: {
|
||||
// maxZoom: 10
|
||||
// }
|
||||
// });
|
||||
// this.$refs.map.mapObject.MyLocate();
|
||||
// },
|
||||
routeBy (type) {
|
||||
const lat = this.event.place.latitude
|
||||
const lon = this.event.place.longitude
|
||||
const routingType = {
|
||||
foot: "engine=fossgis_osrm_foot",
|
||||
bike: "engine=fossgis_osrm_bike",
|
||||
transit: null,
|
||||
car: "engine=fossgis_osrm_car"
|
||||
if (this.$refs.leafletMap && this.$refs.leafletMap.mapObject ) {
|
||||
this.$refs.leafletMap.mapObject.invalidateSize();
|
||||
}
|
||||
return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
|
||||
},
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#leaflet-map-dialog {
|
||||
height: 55vh;
|
||||
width: 100%;
|
||||
#leaflet-map {
|
||||
height: 10rem;
|
||||
border-radius: .3rem;
|
||||
border: 1px solid #fff;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<template lang="pug">
|
||||
client-only(placeholder='Loading...' )
|
||||
LMap(ref="mapEdit"
|
||||
id="leaflet-map"
|
||||
:zoom="zoom"
|
||||
:options="{attributionControl: false}"
|
||||
:center="center")
|
||||
LControlAttribution(position='bottomright' prefix="")
|
||||
LTileLayer(
|
||||
:url="url"
|
||||
:attribution="attribution")
|
||||
LMarker(
|
||||
:lat-lng="marker.coordinates")
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import "leaflet/dist/leaflet.css"
|
||||
import { LMap, LTileLayer, LMarker, LPopup, LControlAttribution } from 'vue2-leaflet'
|
||||
import { Icon } from 'leaflet'
|
||||
import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LPopup,
|
||||
LControlAttribution
|
||||
},
|
||||
data ({ $store }) {
|
||||
return {
|
||||
mdiWalk, mdiBike, mdiCar, mdiMapMarker,
|
||||
url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
|
||||
zoom: 16,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
center () {
|
||||
return [this.place.latitude, this.place.longitude]
|
||||
},
|
||||
marker () {
|
||||
return {
|
||||
address: this.place.address,
|
||||
coordinates: {lat: this.place.latitude, lon: this.place.longitude }
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) }
|
||||
},
|
||||
mounted() {
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
|
||||
iconUrl: require('leaflet/dist/images/marker-icon.png'),
|
||||
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
if (this.$refs.mapEdit && this.$refs.mapEdit.mapObject ) {
|
||||
this.$refs.mapEdit.mapObject.invalidateSize();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#leaflet-map {
|
||||
height: 10rem;
|
||||
border-radius: .3rem;
|
||||
border: 1px solid #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,7 +38,7 @@ v-card
|
|||
:rules="$validators.longitude")
|
||||
p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')")
|
||||
|
||||
MapEdit.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)" )
|
||||
Map.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)" )
|
||||
|
||||
v-divider(v-if='settings.allow_online_event && showGeocoded')
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ export default {
|
|||
onlineLocations: { type: Array, default: [] }
|
||||
},
|
||||
components: {
|
||||
[process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
|
||||
[process.client && 'Map']: () => import('@/components/Map.vue')
|
||||
},
|
||||
data ({$store}) {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -49,8 +49,13 @@ v-card
|
|||
:label="$t('admin.tilelayer_provider_attribution')"
|
||||
:placeholder="tilelayer_provider_attribution_default")
|
||||
|
||||
div(id="leaflet-map-preview" max-height='10px')
|
||||
//- Map
|
||||
Map(:key='mapKey' v-if='mapPreview'
|
||||
@tileerror='tilelayerTestError'
|
||||
@tileload='tilelayerTestSuccess'
|
||||
height="20rem"
|
||||
showMarker=false
|
||||
:mapCenter='mapCenter'
|
||||
:zoom='12')
|
||||
|
||||
v-card-actions
|
||||
v-spacer
|
||||
|
|
@ -61,19 +66,19 @@ v-card
|
|||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { isoCountries } from '../../server/helpers/geolocation/isoCountries'
|
||||
import geolocation from '../../server/helpers/geolocation/index'
|
||||
import { mdiChevronDown } from '@mdi/js'
|
||||
// import Map from '~/components/Map'
|
||||
import "leaflet/dist/leaflet.css"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
setup: { type: Boolean, default: false }
|
||||
components: {
|
||||
[process.client && 'Map']: () => import('@/components/Map.vue')
|
||||
},
|
||||
// components: { Map },
|
||||
data ({ $store }) {
|
||||
return {
|
||||
mdiChevronDown,
|
||||
loading: false,
|
||||
mapKey: 0,
|
||||
mapPreview: false,
|
||||
mapCenter: [42, 42],
|
||||
testGeocodingLoading: false,
|
||||
testTileLayerLoading: false,
|
||||
geocoding_provider_type_items: ['Nominatim', 'Photon'],
|
||||
|
|
@ -87,57 +92,38 @@ export default {
|
|||
tilelayer_provider_attribution: $store.state.settings.tilelayer_provider_attribution || '',
|
||||
tilelayer_provider_attribution_default: '<a target=\'_blank\' href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors',
|
||||
countries: isoCountries,
|
||||
mapPreviewTest: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (process.client) {
|
||||
const L = require('leaflet')
|
||||
computed: {
|
||||
...mapState(['settings', 'events']),
|
||||
tilelayerTest() {
|
||||
const v = this.tilelayer_provider !== '' ? this.tilelayer_provider : this.tilelayer_provider_default
|
||||
return v
|
||||
},
|
||||
geocodingTest() {
|
||||
const v = this.geocoding_provider !== '' ? this.geocoding_provider : this.geocoding_provider_default
|
||||
return v
|
||||
}
|
||||
},
|
||||
computed: mapState(['settings', 'events']),
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
async testGeocodingProvider () {
|
||||
this.testGeocodingLoading = true
|
||||
const geocodingProviderTest = this.geocoding_provider || this.geocoding_provider_default
|
||||
const geocodingSoftwareTest = this.geocoding_provider_type || this.geocoding_provider_type_default
|
||||
const currentGeocodingProvider = geolocation.getGeocodingProvider(this.settings.geocoding_provider_type)
|
||||
const geocodingQuery = 'building'
|
||||
|
||||
try {
|
||||
if (geocodingSoftwareTest === 'Nominatim') {
|
||||
const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, format: 'json', limit: 1 }} )
|
||||
} else if (geocodingSoftwareTest === 'Photon') {
|
||||
const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, limit: 1}} )
|
||||
}
|
||||
|
||||
this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: geocodingProviderTest }), { color: 'success' })
|
||||
const ret = await this.$axios.$get(`placeOSM/${currentGeocodingProvider.commonName}/${geocodingQuery}`, { timeout: 3000 })
|
||||
const res = currentGeocodingProvider.mapQueryResults(ret)
|
||||
this.geocodingTestSuccess()
|
||||
} catch (e) {
|
||||
this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: geocodingProviderTest }), { color: 'error' })
|
||||
this.geocodingTestError()
|
||||
}
|
||||
this.testGeocodingLoading = false
|
||||
},
|
||||
async testTileLayerProvider () {
|
||||
this.testTileLayerLoading = true
|
||||
const tileThis = this
|
||||
const tileLayerTest = this.tilelayer_provider || this.tilelayer_provider_default
|
||||
const tileLayerAttributionTest = this.tilelayer_provider_attribution || this.tilelayer_provider_attribution_default
|
||||
|
||||
// init tilelayer
|
||||
if (this.mapPreviewTest == null) {
|
||||
this.mapPreviewTest = L.map("leaflet-map-preview").setView([40,40],10);
|
||||
}
|
||||
this.tileLayer = L.tileLayer(`${tileLayerTest}`, {attribution: `${tileLayerAttributionTest}`})
|
||||
this.tileLayer.addTo(this.mapPreviewTest)
|
||||
|
||||
// tilelayer events inherited from gridlayer https://leafletjs.com/reference.html#gridlayer
|
||||
this.tileLayer.on('tileload', function (event) {
|
||||
tileThis.tileLayerTestSucess(event, tileLayerTest)
|
||||
});
|
||||
this.tileLayer.on('tileerror', function(error, tile) {
|
||||
tileThis.tileLayerTestError(event, tileLayerTest)
|
||||
tileThis.tileLayer = null
|
||||
});
|
||||
this.mapPreview = true
|
||||
this.mapKey++
|
||||
this.testTileLayerLoading = false
|
||||
},
|
||||
save (key, value) {
|
||||
|
|
@ -148,22 +134,20 @@ export default {
|
|||
done () {
|
||||
this.$emit('close')
|
||||
},
|
||||
geocodingTestError(event, tileLayerTest) {
|
||||
this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: geocodingTest }), { color: 'error' })
|
||||
geocodingTestError() {
|
||||
this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: this.geocodingTest }), { color: 'error' })
|
||||
},
|
||||
tileLayerTestSucess(event, tileLayerTest) {
|
||||
this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: tileLayerTest }), { color: 'success' })
|
||||
geocodingTestSuccess() {
|
||||
this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: this.geocodingTest }), { color: 'success' })
|
||||
},
|
||||
tileLayerTestError(event, tileLayerTest) {
|
||||
this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: tileLayerTest }), { color: 'error' })
|
||||
tilelayerTestError() {
|
||||
this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: this.tilelayerTest }), { color: 'error' })
|
||||
},
|
||||
tilelayerTestSuccess() {
|
||||
this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: this.tilelayerTest }), { color: 'success' })
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#leaflet-map-preview {
|
||||
height: 20rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ v-container
|
|||
:label="$t('common.longitude')"
|
||||
:rules="$validators.longitude")
|
||||
|
||||
MapEdit.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")
|
||||
Map.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")
|
||||
|
||||
v-card-actions
|
||||
v-spacer
|
||||
|
|
@ -96,7 +96,7 @@ import geolocation from '../../server/helpers/geolocation/index'
|
|||
|
||||
export default {
|
||||
components: {
|
||||
[process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
|
||||
[process.client && 'Map']: () => import('@/components/Map.vue')
|
||||
},
|
||||
data( {$store} ) {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ v-container#event.pa-2.pa-sm-2(itemscope itemtype="https://schema.org/Event" v-t
|
|||
EmbedEvent(:event='event' @close='showEmbed=false')
|
||||
|
||||
v-dialog(v-show='settings.allow_geolocation && event.place.latitude && event.place.longitude' v-model='mapModal' :fullscreen='$vuetify.breakpoint.xsOnly' destroy-on-close)
|
||||
Map(:event='event' @close='mapModal=false')
|
||||
EventMapDialog(:event='event' @close='mapModal=false')
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -188,6 +188,7 @@ import clipboard from '../../assets/clipboard'
|
|||
import MyPicture from '~/components/MyPicture'
|
||||
import EventAdmin from '@/components/eventAdmin'
|
||||
import EmbedEvent from '@/components/embedEvent'
|
||||
import EventMapDialog from '@/components/EventMapDialog'
|
||||
|
||||
const { htmlToText } = require('html-to-text')
|
||||
|
||||
|
|
@ -202,7 +203,7 @@ export default {
|
|||
EventAdmin,
|
||||
EmbedEvent,
|
||||
MyPicture,
|
||||
[process.client && 'Map']: () => import('@/components/Map.vue')
|
||||
EventMapDialog
|
||||
},
|
||||
async asyncData ({ $axios, params, error }) {
|
||||
try {
|
||||
|
|
|
|||
Loading…
Reference in a new issue