11

I would like to add and remove Markers in my Leaflet Map. i found this good topic but the code is in JS.

Leaflet - How to find existing markers, and delete markers?

My code is like that :

<template>
 <l-map :zoom="zoom" :center="center">
  <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
  <l-marker :lat-lng="marker" :draggable=true></l-marker>
 </l-map>
</template>

<script>
data:function() {
        return {
  zoom:7,
  center: L.latLng(33.901445, -5.532788),
  url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 
  contributors',
  marker: L.latLng(47.413220, -1.219482),
  }},
</script>

Maybe i should start by creating a function on click like that :

<l-map :zoom="zoom" :center="center" v-on:click="addMarker"></l-map>

And then i wrtie the correct addMarker Function in method. But i can't find the right doc for that.

I would like also to get the position of the new Marker in Data..

Thank you

yassine j
  • 495
  • 1
  • 11
  • 27

2 Answers2

19

It turns out to be really, really easy. Use an array with v-for instead of a single marker. Click on marker splices out the marker at that index. Click on map creates a new marker with the latlng. The snippet below is based on this fiddle.

var {
  LMap,
  LTileLayer,
  LMarker
} = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      zoom: 14,
      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',
      markers: [
        L.latLng(47.412, -1.218),
        L.latLng(47.413220, -1.219482),
        L.latLng(47.414, -1.22),
      ]
    }
  },
  methods: {
    removeMarker(index) {
      this.markers.splice(index, 1);
    },
    addMarker(event) {
      this.markers.push(event.latlng);
    }
  }
});
html, body, #app {
  height: 100%;
  margin: 0;
}
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet@1.0.1/dist/vue2-leaflet.js"></script>
<div id="app">
  <l-map :zoom="zoom" :center="center" @click="addMarker">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker v-for="marker, index in markers" :lat-lng="marker" @click="removeMarker(index)"></l-marker>
  </l-map>
</div>
<
Roy J
  • 42,522
  • 10
  • 78
  • 102
  • This is does not work with current version of VueJS Leaflet. L is undefined. It is not declared anywhere. Garbage library, Poorly documeted – Stan Sokolov Sep 23 '20 at 03:11
  • @StanSokolov Leaflet is what defines L. You have to install Leaflet as a peer dependency. That is pretty [clearly documented](https://github.com/vue-leaflet/Vue2Leaflet#leaflet-is-not-automatically-installed-anymore) – Roy J Sep 24 '20 at 14:59
  • None of example show that leaflet by itself has to be imported. https://vue2-leaflet.netlify.app/examples/simple.html – Stan Sokolov Sep 24 '20 at 15:34
  • @StanSokolov My example includes leaflet.js here. The [codesandbox example](https://codesandbox.io/s/siybn?file=/App.vue) linked from the example page shows it as a Dependency. – Roy J Sep 24 '20 at 17:13
  • May be I am stupid (was proven to me many times) but no, your example as pretty much everything else does not import L. It does import import { latLng } from "leaflet"; How I supposed to know that L by itself is also coming from leaflet. If L is really used for every operation on the map, why do not set it as a clear import import {L} from "leaflet"; – Stan Sokolov Sep 29 '20 at 18:53
  • @StanSokolov It is a feature of Leaflet that it creates a global variable, `L`, that contains all the Leaflet functionality. That's just how Leaflet works. https://leafletjs.com/examples/quick-start/ – Roy J Sep 29 '20 at 22:03
  • That the perfect case of what I am taking about. This example starts using L.xxx without importing L first. It will never works. – Stan Sokolov Sep 30 '20 at 14:33
  • @StanSokolov They include the Leaflet.js file in their HTML file. It creates a global variable `L`. – Roy J Oct 02 '20 at 21:27
  • Well. We are talking about VueJS framework where we do not include anything in HTML files. This is a special case when everything has to be clearly imported in JavaScript. – Stan Sokolov Oct 06 '20 at 17:25
1

Adding the event on the html tag like this @click="addMarker" is not going to work because the event is being triggered on the html level.

What you should do on the other hand is add another event in the html called @ready="mapReady"

const markers = ref([])
const addMarker = e => {
 markers.value.push({ lat: e.latlng.lat, lng: e.latlng.lng })
}
const mapReady = map => {
    map.on('click', addMarker)
}

<l-map :options="{ attributionControl: false }" :use-global-leaflet="false"
 v-model:zoom="zoom" :center="center" class="cursor-auto"
 @ready="mapReady"></l-map>
ArnoldK
  • 11
  • 2