Note: leaflet is a great project, but I run into problem when dynamic updating layers.Now using openlayers for vue 3, I would recomment to use this project.
This demo project shows how to use leaflet map in an vue 3 web application. In this example the quasar framework was used, but this can be anything (vuetify, no framework).
Two approaches where used (demonstrated in one webpage):
-
Leaflet directly (left side of screenshot)
Use the leaflet package directly (install with
npm i leaflet). The leaflet creation is all done in the script part. This gives a lot of control (any leaflet function can be used) -
With library vue-leaflet (right side of screenshot)
Use the leaflet package through the vue-leaflet library (install with
npm i vue-leaflet). The advantage is that the leaflet can be defined in the vue template. Reactive the elements can be bound. A disadvantage is that you have less control over the leaflet. Should be possible with map reference, but I didn't find out how.
Used chrome as web browser to test (didn't check other browsers)
Install the Node Package Manager (NPM).
npm install
npm run dev
# Open webbrowser on port 9000
The leaflet library is in plain JavaScript. This demo uses typescript for validation and intellisense (Visual Code Editor). In the project @types/leaflet the typescript definitions for leaflet can be found. After installing with npm i @types/leaflet the definitions are placed in node_modules\@types\leaflet. Visual Code will automatically combine this type information with the leaflet library (leaflet is still JavaScript).
| File | Description |
|---|---|
| \src\components\RawLeafletMap.vue | Approach one with plain leaflet |
| \src\components\VueLeafletMap | Approach two with vue-leaflet lib |