Hello All.

As I didn’t like the default masks button (to change map layers) in vue2-leaflet, I wanted to make my own one using QBtnDropdown.

When I click a first time, the button oppens.
but when I click again (while oppened), it closes to opens again right after as if it was receiving two click input.

I’ve prepared an online example:
https://codesandbox.io/s/qbtn-in-leaflet-zupfd
You might have to wait up to one minute for it to load.

Try clicking on the top right button on the map.

It’s clearly linked to the fact it’s on top of the leaflet map and probably not a bug on the component itself, but help would be appreciated!

Thanks.

@ferrarid72

Hi, First Run npm install vue2-leaflet leaflet --save
and as example: this is my code for a vue page:

<template>
  <q-page padding class="flex">
    <q-card style="flex:1">
      <l-map :zoom="zoom" :center="center">
        <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      </l-map>
    </q-card>
  </q-page>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  name: 'Map',
  components: {
    LMap,
    LTileLayer
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  }
}
</script>
<style>
</style>

Hi! As a quick hack you an use this:
style=“transform : scale(1.3, 1.3);”
more than one will increase size, less will reduce