Hide marker on zoom out in Angular with leaflet

Question

I would like to hide markers when I zoom out. I click to add a marker on my map and if I zoom, the marker is not hidden.

If I look in a console.log the marker is undefined.

ngOnInit() {

  var map = L.map("map").setView([this.latitude, this.longitude], this.zoom);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  map.on('zoomend',function(e){
    console.log(map.getZoom());
    if (map.getZoom()>13) {
      if(this.saveLat !== undefined) {
        this.marker = L.marker([this.saveLat, this.saveLon], this.markerIcon).addTo(map);
      }
    }else {
      console.log(this.marker);
      if(this.marker !== undefined) {
        this.marker.remove();
      }
    }
  });

  map.on("click", e => {
      console.log(e.latlng); // get the coordinates
      if(this.marker !== undefined) {
        this.marker.remove()
        console.log(this.marker);
      }
      this.marker = L.marker([e.latlng.lat, e.latlng.lng], this.markerIcon).on('click', this.markerOnClick).addTo(map); // add the marker onclick
      console.log(this.marker);
      this.saveLat = e.latlng.lat;
      this.saveLon = e.latlng.lng;
      console.log(this.saveLat);
    });
}

Answer 1

Create a layerGroup , add the markers on the group and following on the map on every map click. When you zoom out remove them from the map by invoking clearLayers method.

map;
layerGroup: L.LayerGroup = L.layerGroup();

ngOnInit() {
    this.map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    this.map.on("click", (e: any) => {
      const {
        latlng: { lat, lng }
      } = e;
      const marker = L.marker([lat, lng], { icon });
      this.layerGroup.addLayer(marker).addTo(this.map);
    });

    this.map.on("zoomend", (e: Event) => {
      // clear the markers here
      this.layerGroup.clearLayers();
    });
  }

Demo