Vue components for LeafletJS. Homepage.
Questions tagged [vue2leaflet]
47 questions
13
votes
2 answers
List of all available Tile Layers for leaflet
I can't seem to find this anywhere - there's examples with open street maps, and hints to using mapbox but otherwise I'm wondering what other maps and url's are available?

Mladen Mihajlovic
- 6,095
- 7
- 40
- 55
7
votes
3 answers
Vue2-leaflet map not showing properly in BoostrapVue modal
Here's my problem - a Vue2 leaflet map does not render correctly in BootstrapVue modal.
Here's what it looks like visually (it should show just the ocean)
user10706046
4
votes
2 answers
How to color vue2 leaflet markers dynamically?
I have an google-maps_pin.svg file which represents a google-maps pin.
I would like to color the different markers (generated with v-for) based on categories (restaurant, art gallery, etc.) dynamically.
Is there a way to achieve that with vue2…

Andor Németh
- 451
- 6
- 12
- 27
3
votes
2 answers
Remove leaflet attribution with Vue / Nuxt?
I've seen some threads on how to remove the leaflet attribution in the bottom right.
It seems like the creators of leaflet have no issue with it, so to save space I'd like to remove mine.
Here is a thread on it, but no answers relate to Vue…

Thorvald
- 546
- 6
- 18
3
votes
1 answer
Nuxt Leaflet, change tile layer requests incorrect tiles
I am using Nuxt Leaflet, and I have not figured out how to change the tile layer. I have tried multiple different approaches, and they all result with not requesting the proper tiles for the changed layer.
Here is an example:

user1666858
- 321
- 2
- 13
3
votes
1 answer
Vue2-leaflet use ES modules to decrease bundle size
I'm using Vue-cli 2 and import Vue2-leaflet modules LMap, LTileLayer in my main.js with
import { LMap, LTileLayer } from 'vue2-leaflet'
By using webpack-bundle-analyzer I can see the bundle size is still 421kb (leaflet-src.js only).
Why is this not…

nonNumericalFloat
- 1,348
- 2
- 15
- 32
3
votes
0 answers
How to get geolocation with vue and vue2-leaflet?
I'm working with vue2-leaflet. I want center property on user current location. Is there any easy way to achieve this?
I've tried already with navigator.geolocation.getCurrentPosition in mounted() with v-if on map component that show the map once…

Davide
- 77
- 2
- 4
2
votes
1 answer
Accessing Map Object in Nuxt-leaflet
I have an leaflet map like this (snipped):

Alex
- 132
- 1
- 4
- 21
2
votes
1 answer
2
votes
1 answer
ESLint: "'L' is not defined" at init with single file components
I'm ready to be told that I'm doing something plain stupid, because while I've prior experience with VueJS and with Leaflet, this is my first project using single file components for Vue, the first time I've used vue2-leaflet, and a fresh setup of…

ajl199
- 21
- 2
2
votes
1 answer
Vue2-leaflet LMap/LTileLayer not rendering correctly
I'm just trying to add a map to my current Vue2 learning project.
After looking at google maps I've decided OSM and Leaflet was the best way to go.
But I've ran into an early snag and the map is currently just rendering as a blue square.
This is…

rexbrandy
- 145
- 9
1
vote
0 answers
How can I prevent a Leaflet popup from redirecting to other page or change the href
I am working on a vue2leaflet map (https://vue2leaflet.netlify.app/components/LPopup.html#demo ), the vue2leaflet map has a default href="close", so when clicked on the (X) it redirect me to this #close.
Is there a way in vue2leaflet map to modify…

Ayesha
- 211
- 1
- 2
- 13
1
vote
0 answers
How to keep my marker on Focus until I close the popup or move the mouse cursor outside the marker (on the map)
I am trying to keep the focus on my marker until I close the popup or move my mouse cursor outside the popup or on the map.
Right now when I clicked on my marker it turns black but when I take away my mouse it turn's back to green quickly. Which I…

Ayesha
- 211
- 1
- 2
- 13
1
vote
0 answers
How can I install vue2leaflet in quasar?
I am trying to install vue2leaftlet in my quasar version 2 vue version 3 project and it seems I can install it. I have followed this example https://techformist.com/using-vue-plugins-quasar/
but it won't work since I keep getting the following…

Renzo Castillo
- 11
- 3
1
vote
1 answer
Adapt width of leaflet popup using Vue2Leaflet's l-popup component
I am programming a web application and using leaflet to display a map. I defined markers and popups which appear upon click on the respective markers.
Unfortunately the popups look weird at the moment (the height is too large and the width too…