1

I am building a web app using Vue 3 and Leaflet. I use the vue-leaflet plugin.

I have a background map and overlay layers, namely WMS tile layers served by Geoserver.

Now I want a popup to open at the location(lat, long) where I click on the layer. For the vue-leaflet plugin I could only find examples for adding a popup to markers, circles or geometries but no example for popups on layers.

To start off, I tried defining a leaflet function that adds a popup to the map when a click event is executed. but that throws me an error. The relevant code snippet and error log attached.

How can I approach this using either the vue-leaflet plugin or a pure leaflet script?

// HTML

<div id="bg-map"> <l-map ref="map" v-model="zoom" v-model:zoom="zoom" :center="center" :options="{zoomControl:false, attributionControl:false}" :minZoom="minzoom" @click="addPopUp" > <!-- Layers from Geoserver as cached tile layers: --> <l-wms-tile-layer v-for="wmsLayer in getCheckedLayers" :key="wmsLayer.path" :layers="wmsLayer.path" :format="format_tile" :transparent="true" :tiled="true" :zIndex="wmsLayer.zindex" :base-url="wmsurl" :visible="true" :opacity="wmsLayer.opacity" > </l-wms-tile-layer>

// JS

methods: { addPopUp(e) { const map = this.$refs.map.leafletObject; var popLocation = e.latlng; var popup = new L.popup() .setLatLng(popLocation) .setContent('<p> Hello popup </p>') .openOn(map) },

// error log

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at NewClass._updateContent (leaflet-src.esm.js?6bb3:9617:1) at NewClass.update (leaflet-src.esm.js?6bb3:9528:1) at NewClass.onAdd (leaflet-src.esm.js?6bb3:9465:1) at NewClass.onAdd (leaflet-src.esm.js?6bb3:9751:1) at NewClass._layerAdd (leaflet-src.esm.js?6bb3:6561:1) at Proxy.whenReady (leaflet-src.esm.js?6bb3:4422:1) at Proxy.addLayer (leaflet-src.esm.js?6bb3:6623:1) at Proxy.openPopup (leaflet-src.esm.js?6bb3:9975:1) at NewClass.openOn (leaflet-src.js?e11e:9752:1) at Proxy.addPopUp (BGMap.vue?112f:315:1)
Improve this question
1

1 Answer 1

Reset to default
2

I ended up with a workaround solution: By setting an invisible marker when clicking at any point of the map. The marker has an open popup by default. In the end it looks like a popup opens when clicking the map.

// HTML Call the addMarker method when clicking on the map. Marker component with popup

<div id="bg-map"> <l-map ref="map" v-model="zoom" v-model:zoom="zoom" :center="center" :options="{zoomControl:false, attributionControl:false}" :minZoom="minzoom" @click="addMarker" > <l-marker ref="marker" :lat-lng="marker" :options="markerOptions"> <l-icon :icon-size= [1,1] icon-url="icon.png"> </l-icon> <l-popup ref="popup"> Popup content </l-popup> </l-marker> </div>

// JS

export default { data(){ return { marker: [0,0], # default lat-lng for marker markerOptions: {opacity: 0, width:"1px", height:"1px"}, #marker icon is small and invisible } }, methods: { addMarker(e) { // set marker at latlng position this.marker = e.latlng; // open popup on marker with a delay of 100 ms setTimeout(() => this.$refs.marker.leafletObject.openPopup(), 100); } } }
Improve this answer
1
  • I have a similar case and want to get the center on click. but the event variable has no property latlng using vue3 and composition api. any thoughts? Commented May 2, 2023 at 15:06

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.