IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement auto close after 2000 miliseconds to map marker popup

Browse Source
This commit is contained in:
Wolfgang Huß 2023-01-29 11:12:08 +01:00
parent a0fbc5a51c
commit aaf4c18aa5
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
webapp/pages/map.vue
View File

@ -66,7 +66,7 @@ export default {
mapboxgl,
activeStyle: null,
defaultCenter: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE
currentUserLocation: null,// documentation of correct version: https://github.com/mapbox/mapbox-gl-language/tree/v0.10.0
currentUserLocation: null, // documentation of correct version: https://github.com/mapbox/mapbox-gl-language/tree/v0.10.0
// set the default atmosphere style
// this.map.setFog({}) // the package is probably to old, because of Vue2: https://docs.mapbox.com/mapbox-gl-js/example/globe/
@ -91,6 +91,7 @@ export default {
isSourceAndLayerAdded: false,
isFlyToCenter: false,
popup: null,
popupOnLeaveTimeoutId: null,
},
}
},
@ -152,12 +153,12 @@ export default {
},
methods: {
language(map) {
map.getStyle().layers.forEach(function(thisLayer){
if(thisLayer.id.indexOf('-label')>0){
//seems to use user language. specific language would be `name_de`, but is not compatible with all maps
map.setLayoutProperty(thisLayer.id, 'text-field', ['get','name'])
map.getStyle().layers.forEach(function (thisLayer) {
if (thisLayer.id.indexOf('-label') > 0) {
// seems to use user language. specific language would be `name_de`, but is not compatible with all maps
map.setLayoutProperty(thisLayer.id, 'text-field', ['get', 'name'])
}
});
})
},
onMapLoad({ map }) {
@ -187,6 +188,10 @@ export default {
this.map.on('mouseenter', 'markers', (e) => {
// if (e.features[0].properties.type !== 'theUser') {}
if (this.popupOnLeaveTimeoutId) {
clearTimeout(this.popupOnLeaveTimeoutId)
this.popupOnLeaveTimeoutId = null
}
if (this.markers.popup.isOpen()) {
this.map.getCanvas().style.cursor = ''
this.markers.popup.remove()
@ -239,6 +244,15 @@ export default {
this.markers.popup.setLngLat(coordinates).setHTML(description).addTo(this.map)
})
this.map.on('mouseleave', 'markers', (e) => {
if (this.markers.popup.isOpen()) {
this.popupOnLeaveTimeoutId = setTimeout(() => {
this.map.getCanvas().style.cursor = ''
this.markers.popup.remove()
}, 2000)
}
})
// load markers
this.loadMarkesIconsAndAddMarkers()
},