CODEWITHSUNDEEP
angularleaflet
Tommie Jones
Tommie Jones

Reputation: 1011

Getting Leaflet marker click event to work with Angular 2

When displaying leaflet on an Angular2 app the click bind to the marker does not get triggered on a mouse click.

  let el = this._elementRef.nativeElement.querySelector('.leaflet-maps');
  L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet';

  this.map = new L.Map('map', {
    center: new L.LatLng(26.166314, -81.706957), zoom: 15});
  var osm=   L.tileLayer('http://ip/{z}/{x}/{y}.png',  { maxZoom: 18 }).addTo(this.map);
  var d= L.marker([26.166314, -81.706957], { icon: this.icons.online, clickable: true }).on('click',
    (data) => {
      alert("I have a click.")
    } ).addTo(this.map)

I can add a click event on the map and it works fine but a click event on the marker does not seem to work.

Upvotes: 1

Views: 2956

Answers (1)

ghybs
ghybs

Reputation: 53205

Make sure your code for instantiating your marker is correct, especially the icon this.icons.online.

Once the icon is removed, everything works as expected: https://plnkr.co/edit/NdKpe8BeoidYQCnxBsKS?p=preview

Upvotes: 1

Related Questions