Leaflet add new marker remove old one in class function-CodePudding

Desc:

Using leaflet and made an class called Map to use all features easily whenever I need, All set but there is simple problem that I can't handle it. map on init create a marker on center, but I want to let user create new marker on click but remove prev one, already if you click on map it create many marker, but I want only one marker.

JSFiddle

All I need is this code:

if (marker) this.map.removeLayer(marker);

But of course it give me such error:

ReferenceError: marker is not defined"

Problem:

Because prev marker created in marker() but new marker create in newMarker() function, so I have no idea how can I remove old marker, I did this before when my code wasn't class easily access let marker, but now I confused how to access marker variable in marker() function.

Goal: (in short)

I just want one marker after click on map, already it create many markers on map!

CodePudding user response：

You can initialize an empty layerGrooup and store the marker there every time and when you add a new one you can clear the layers of the markerGroup.

Moreover you should not instantiate your map two times so you have only one map reference.

class Map {
  constructor(map, lat_long) {
    this.map = map;
    this.lat_long = lat_long;
    this.markerLayer = L.layerGroup().addTo(this.map)
  },
 ...
 newMarker(latLng) {
    this.markerLayer.clearLayers();

    L.marker(latLng, {
      draggable: true
    }).addTo(this.markerLayer);

  }
}

class Map {
  constructor(map, lat_long) {
    this.map = map;
    this.lat_long = lat_long;
    this.markerLayer = L.layerGroup().addTo(this.map)
  }
  get init() {
    return this.display();
  }
  display() {
    this.map.setView(this.lat_long, 14);
    this.tile();
    this.marker();
  }
  tile() {
    L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
      maxZoom: 20,
    }).addTo(this.map);
  }
  marker() {
    let marker = L.marker(this.lat_long, {
      draggable: true
    }).addTo(this.markerLayer);
  }
  newMarker(latLng) {
    this.markerLayer.clearLayers();

    L.marker(latLng, {
      draggable: true
    }).addTo(this.markerLayer);

  }
}

let lat_long = [40.741895, -73.989308];
let leaflet = new L.map('map');
const map = new Map(leaflet, lat_long);
map.init;

leaflet.on('click', function(e) {
  map.newMarker([e.latlng.lat, e.latlng.lng]);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9 580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<div id="map" style="height:400px"></div>