Angular and Leaflet add marker on click and get Coord

Question

I am trying to implement Leaflet in my angular 7 project i try to google the solution but nothing all the result is for angularjs or vanilla javascript.

This is my ts file:

 ngAfterViewInit(): void {
    //Init map & add tile
    this.map = new Map('map').setView([25.1220946, 56.3342466], 13);
    tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(this.map);
    //onClick
    this.map.on("click", function(e){
    //Add marker
    this.myMarker = marker([e.latlng.lat, e.latlng.lng]).addTo(this.map);
    // console.log();
      console.log(`Your lat is : ${e.latlng.lat} and your lang :  ${e.latlng.lng}`);
    });
  }

FYI it's not duplicate, the same question is 5 years old everything is different now.

score 4 · Answer 1 · answered Jul 29 '19 at 15:18

To add a marker on map click you need to listen to a map click event once your map object is instantiated:

ngOnInit() {
    this.map = L.map("map").setView([25.1220946, 56.3342466], 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 => {
      console.log(e.latlng); // get the coordinates
      L.marker([e.latlng.lat, e.latlng.lng], this.markerIcon).addTo(this.map); // add the marker onclick
    });
  }

Here is an example using Angular 8: Demo

it's working but i want to remove the old marker when add new one onclick — Nadim, Jul 29 '19 at 15:30

score 0 · Answer 2 · answered Jul 29 '19 at 15:42

As per @kboul answer we can achieve that (Add a new marker each time i click on the map with the right lat lng) with this lines of code :

ngAfterViewInit(): void {
    //Init map & add tile
    this.map = new Map('map').setView([25.1220946, 56.3342466], 13);
    tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(this.map);
    //onClick
    this.map.on("click", e => {
      console.log(e.latlng); // get the coordinates
      if (this.myMarker) { // check
        this.map.removeLayer(this.myMarker); // remove
    } this.myMarker = new marker([e.latlng.lat, e.latlng.lng]).addTo(this.map); // add the marker onclick
    });
  }

Angular and Leaflet add marker on click and get Coord

2 Answers2