[Vuejs]-Insert context menu in Leaflet map

by

0👍

✅

I have figured out how to use leaflet-contextmenu@1.4.0 in @vue-leaflet/vue-leaflet@0.10.1.
The key is passing options (:options="mapOptions") to the leaflet map constructor, which can be done declaratively.
The code is like:

<template>
    <div class="map">
        <l-map ref="map" v-model:zoom="zoom" :center="[49.2265592, 16.5957531]" :options="mapOptions">
            <l-tile-layer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                layer-type="base"
                name="OpenStreetMap"
            ></l-tile-layer>
        </l-map>
    </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import 'leaflet-contextmenu';
import 'leaflet-contextmenu/dist/leaflet.contextmenu.min.css';

export default {
    components: {
        LMap,
        LTileLayer,
    },
    data() {
        return {
            zoom: 13,
            mapOptions: {
                contextmenu: true,
                contextmenuWidth: 140,
                contextmenuItems: [
                {
                    text: 'Show coordinates',
                    callback: ()=> alert('Coordinates callback')
                }
                ]
            },
        };
    },
};
</script>

I hope this helps someone else.

0👍

Unfortunately I cant tell you much about @vue-leaflet/vue-leaflet directly, since I never used it. However, you said "Any feedback would be appreciated.", so I’d like to present you a slightly different approach.
Usually I include Leaflet directly in my Vue Apps like this:

First I create a ref to my map element – just like you did:

<div ref="mapEl"></div>

Then I get that ref using Vues ref function:

import { ref } from 'vue';
const mapEl = ref();

You can pass the refs value – which contains the HTMLElement – directly in Leaflets constructor. I’m doing this right in the onMounted hook

const map = leaflet.map(mapEl.value, {
    contextmenu: true,
    contextmenuWidth: 140,
    contextmenuItems: [
      {
        text: 'Show coordinates',
        callback: ()=> alert('Coordinates callback')
      }
    ]
});
// Other options you want to apply

Don’t forget to import Leaflet and the contextmenu plugin:

import leaflet from 'leaflet';
import 'leaflet-contextmenu';
import 'leaflet-contextmenu/dist/leaflet.contextmenu.min.css';

The full code could look like this:

<template>
  <div ref="mapEl"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import leaflet from 'leaflet';
import 'leaflet-contextmenu';
import 'leaflet-contextmenu/dist/leaflet.contextmenu.min.css';

const mapEl = ref();

onMounted(()=> {
const map = leaflet.map(mapEl.value, {
  contextmenu: true,
  contextmenuWidth: 140,
  contextmenuItems: [
    {
      text: 'Show coordinates',
      callback: ()=> alert('Coordinates callback')
    }
  ]
});
// Other options you want to apply
});
</script>

I hope this will solve your problem. Good luck on your app! 🙂

Leave a comment