'How to use vue2-leaflet in vue3 App, what changes need to be made?
I'm adding an Openstreetmap component. Newbie, straight to Vue3 (do not ask me to start from Vue2),
MapLeaflet.vue : I took the code from here: https://vue2-leaflet.netlify.app/examples/simple.html
And tried to modify to suite vue3, creating setup(), move functions etc. However looks like the return statement and some imports need to be further tweaked. What should I change in this vue2-leaflet to transform it to work in vue3?
<template>
<div style="height: 500px; width: 100%">
<div style="height: 200px overflow: auto;">
<p>First marker is placed at {{ withPopup.lat }}, {{ withPopup.lng }}</p>
<p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>
<button @click="showLongText">
Toggle long popup
</button>
<button @click="showMap = !showMap">
Toggle map
</button>
</div>
<l-map
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 80%"
@update:center="centerUpdate()"
@update:zoom="zoomUpdate()"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-marker :lat-lng="withPopup">
<l-popup>
<div @click="innerClick()">
I am a popup
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-popup>
</l-marker>
<l-marker :lat-lng="withTooltip">
<l-tooltip :options="{ permanent: true, interactive: true }">
<div @click="innerClick">
I am a tooltip
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-tooltip>
</l-marker>
</l-map>
</div>
</template>
<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";
export default {
name: "Example",
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
LTooltip
},
setup() {
function zoomUpdate(zoom) {
currentZoom = zoom;
}
function centerUpdate(center) {
currentCenter = center;
}
function showLongText() {
showParagraph = !this.showParagraph;
}
function innerClick() {
alert("Click!");
}
return {
zoom: 13,
center: latLng(47.41322, -1.219482),
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
withPopup: latLng(47.41322, -1.219482),
withTooltip: latLng(47.41422, -1.250482),
currentZoom: 11.5,
currentCenter: latLng(47.41322, -1.219482),
showParagraph: false,
mapOptions: {
zoomSnap: 0.5
},
showMap: true
};
},
methods: {
}
};
</script>
Solution 1:[1]
There is a Vue 3 compatible version here: https://www.npmjs.com/package/@vue-leaflet/vue-leaflet
But it is still in the beta version, but everything works from what I've seen.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Adrian |