Angular 7 variable access problem on Leaflet map event

Question

I'm using Leaflet on Angular. I created a map. Later I added a marker to the map. When click a location on the map onMapClick function is called. But I can't access marker and map in onMapClick function. When initMap function is called I can see the marker on console.log result. When onMapClick function is called I can't access the marker. I get an error. The error is

marker is not undefined

How can I solve it?

import {Component, OnInit} from '@angular/core';
declare let L;

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
    map;
    lat;
    lng;
    marker;

    constructor() {
    }

    ngOnInit() {
        this.initMap();
    }
    initMap() {
        this.map = new L.Map('map', {
            zoomControl: true,
            maxZoom: 20,
            minZoom: 5,
            center: new L.LatLng(41.00650212603, 28.8530806151128),
            zoom: 10
        });

        const tileLayers = {
            'Google Uydu': L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&hl=tr&x={x}&y={y}&z={z}', {
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
                maxNativeZoom: 20,
                zIndex: 0,
                maxZoom: 20
            }).addTo(this.map)
        };
        L.control.layers(tileLayers, null, {collapsed: false}).addTo(this.map);

        this.marker = L.marker(this.map.getCenter(), {
            draggable: true,
            icon: L.icon({
                iconUrl: './assets/img/marker-icon-2x.png',
                iconSize: [25, 35],
                iconAnchor: [30 / 2, 35],
            })
        }).addTo(this.map);
        console.log("this.marker", this.marker);
        this.map.on('click', this.onMapClick);
    }

    onMapClick(e) {
        this.lat = e.latlng.lat;
        this.lng = e.latlng.lng;
        console.log("this.marker", this.marker);
        this.marker.setLatLng(new L.LatLng(e.latlng.lat, e.latlng.lng));
        this.map.panTo(new L.LatLng(e.latlng.lat, e.latlng.lng));
        this.map.setView(new L.LatLng(e.latlng.lat, e.latlng.lng), 18);
    }
}

score 4 · Answer 1 · answered Mar 01 '19 at 09:24

4

I think you miss passing the event on your this.onMapClick

therefore it should be this.map.on("click", e => this.onMapClick(e));

You can find more here regarding the reason

Demo

answered Mar 01 '19 at 09:24

kboul

13,836
5
42
53

...How do I remove the event listener using `this.map.off()`, though? It's an anonymous function, and therefore I have no reference to it. – Eliezer Berlin Nov 09 '21 at 11:17

score 0 · Accepted Answer · answered Mar 01 '19 at 09:25

Without a working example of your code is difficult to pinpoint exactly the problem. Just by reading your code, I think you are referencing the wrong context inside your onMapClick() method.

this inside your method is not your angular class but your map itself.

To reference your angular class inside the callback, you have to bind another context to it.

One way to achieve this is following:

this.map.on('click', this.onMapClick.bind(this));

Now, this inside onMapClick() should point to your angular class.

...How do I remove it, though? `this.map.off('click',this.onMapClick.bind(this));` doesn't appear to work at all. — Eliezer Berlin, Nov 09 '21 at 11:15

Angular 7 variable access problem on Leaflet map event

2 Answers2