I am making a vue project and I want to use leaflet inside of my ponents. I got the map showing and I can add markers but I run into an error when I try to delete a marker. I get

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at n (leaflet.js:5) at e.removeLayer (leaflet.js:5) at HTMLInputElement.eval (VM119323 App.vue:74) at HTMLInputElement.dispatch (jquery.js:3058) at HTMLInputElement.eventHandle (jquery.js:2676)

<template>
 <div id="app" class="container-fluid">
  <div class="row">
   <div class="col-md-9">
    <div id="map" class="map" style="height: 781px;"></div>
  </div>
  <div class="col-md-3">

  </div>
</div>
<router-view/>
</div>
</template>

<script>
export default {
 name: "App",
 data() {
return {
  map: null,
  markers: [],
  mapSW: [0, 4096],
  mapNE: [4096, 0],
  tileLayer: null
 };
 },
mounted() {
this.initMap();
this.initLayers();
this.onClick();
this.onPopupOpen();
},
 puted: {
popupContent: function() {
  return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
 }
},
 methods: {
initMap() {
  this.map = L.map("map").setView([0, 0], 1);
  this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
    maxZoom: 4,
    minZoom: 3,
    continuousWorld: false,
    noWrap: true,
    crs: L.CRS.Simple
  });
  this.tileLayer.addTo(this.map);

  this.map.on("click", this.onClick, this);

  this.map.setMaxBounds(
    L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
  );

},
initLayers() {},
onClick(e) {
  var newMarker = L.marker(e.latlng, {
    draggable: true
  })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(newMarker);


  newMarker.on("popupopen", this.onPopupOpen, this);
},
onPopupOpen(index) {

  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);


  });
  }
}
};
</script>

I am making a vue project and I want to use leaflet inside of my ponents. I got the map showing and I can add markers but I run into an error when I try to delete a marker. I get

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at n (leaflet.js:5) at e.removeLayer (leaflet.js:5) at HTMLInputElement.eval (VM119323 App.vue:74) at HTMLInputElement.dispatch (jquery.js:3058) at HTMLInputElement.eventHandle (jquery.js:2676)

<template>
 <div id="app" class="container-fluid">
  <div class="row">
   <div class="col-md-9">
    <div id="map" class="map" style="height: 781px;"></div>
  </div>
  <div class="col-md-3">

  </div>
</div>
<router-view/>
</div>
</template>

<script>
export default {
 name: "App",
 data() {
return {
  map: null,
  markers: [],
  mapSW: [0, 4096],
  mapNE: [4096, 0],
  tileLayer: null
 };
 },
mounted() {
this.initMap();
this.initLayers();
this.onClick();
this.onPopupOpen();
},
 puted: {
popupContent: function() {
  return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
 }
},
 methods: {
initMap() {
  this.map = L.map("map").setView([0, 0], 1);
  this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
    maxZoom: 4,
    minZoom: 3,
    continuousWorld: false,
    noWrap: true,
    crs: L.CRS.Simple
  });
  this.tileLayer.addTo(this.map);

  this.map.on("click", this.onClick, this);

  this.map.setMaxBounds(
    L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
  );

},
initLayers() {},
onClick(e) {
  var newMarker = L.marker(e.latlng, {
    draggable: true
  })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(newMarker);


  newMarker.on("popupopen", this.onPopupOpen, this);
},
onPopupOpen(index) {

  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);


  });
  }
}
};
</script>

• javascript
• vue.js
• leaflet

2 Answers 2

The scope of newMarker variable should belong to the ponent in order to you be able to remove it later. Right now it exists only inside onClick method. You can read more about variable scopes here. And in order to solve your problem you need to add newMarker to the data() function:

// ...
data() {
  return {
    // ...
    tileLayer: null,
    newMarker: null
  };
},
// ...
onClick(e) {
  this.newMarker = L
    .marker(e.latlng, { draggable: true })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(this.newMarker);

  this.newMarker.on("popupopen", this.onPopupOpen, this);
},

onPopupOpen(index) {
  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);
  });
}

You plete code would be something like:

<template>
  <div id="app" class="container-fluid">
    <div class="row">
      <div class="col-md-9">
        <div id="map" class="map" style="height: 781px;"></div>
      </div>
      <div class="col-md-3">

      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      map: null,
      markers: [],
      mapSW: [0, 4096],
      mapNE: [4096, 0],
      tileLayer: null,
      newMarker: null
    };
  },

  mounted() {
    this.initMap();
    this.initLayers();
    this.onClick();
    this.onPopupOpen();
  },

  puted: {
    popupContent: function() {
      return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
    }
  },

  methods: {
    initMap() {
      this.map = L.map("map").setView([0, 0], 1);
      this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
        maxZoom: 4,
        minZoom: 3,
        continuousWorld: false,
        noWrap: true,
        crs: L.CRS.Simple
      });
      this.tileLayer.addTo(this.map);

      this.map.on("click", this.onClick, this);

      this.map.setMaxBounds(
        L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
      );
    },

    initLayers() {},

    onClick(e) {
      this.newMarker = L
        .marker(e.latlng, { draggable: true })
        .addTo(this.map)
        .bindPopup(this.popupContent);

      this.markers.push(this.newMarker);

      this.newMarker.on("popupopen", this.onPopupOpen, this);
    },

    onPopupOpen(index) {
      $(".marker-delete-button:visible").click(() => {
        this.map.removeLayer(this.newMarker);
      });
    }
  }
};
</script>

What you can do as well is verifying if the marker is actually on the map before removing it, with the hasLayer method, like so:

if (this.map.hasLayer(this.newMarker)) this.map.removeLayer(this.newMarker);