Component variable isn't passed into leaflet's on click event handler

Question

I am having some issues with my Angular 4 application and Leaflet integration.

I am updating a component boolean variable in the method that is passed to the Leaflets onClick function. But, that variable isn't updated in the View. As when I test the value of the boolean variable on the view side, its still false, rather than true.

Any suggestions? Thanks.

import { Component, Inject, AfterViewInit, EventEmitter } from '@angular/core';
import * as L from 'leaflet';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'map-body',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements AfterViewInit {

  newMap: L.Map;
  bmIcon: L.Icon;
  tileLayer: L.TileLayer;
  lafBu: L.Marker;
  dalBu: L.Marker;
  houBu: L.Marker;
  detBu: L.Marker;
  denBu: L.Marker;
  buMapData: L.FeatureGroup;

  // tslint:disable-next-line:no-inferrable-types
  isActive: boolean = false;

  // tslint:disable-next-line:no-inferrable-types
  listView: boolean = false;

  constructor(

  ) { }

  ngAfterViewInit() {

    this.newMap = L.map('mapid',{doubleClickZoom: false}).setView([30.224750, -92.019093], 3);

    this.bmIcon = L.icon({
      iconUrl: '../assets/images/ping-location-2.png',
      iconSize: [21, 35],
      iconAnchor: [10.5, 35]
    });

    this.tileLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: '',
      maxZoom: 4,
      minZoom: 2,
      id: 'mapbox.light',
      accessToken: 'pk.eyJ1IjoiZ2FycmV0dG1hbmxleSIsImEiOiJjamVlZDhobGsxNGFpMndvMnRhODZucjM4In0.Tgk5Uhgs8G_Y0jPh_pP8uw'
  });

    this.lafBu = L.marker([30.224750, -92.019093], {
      icon: this.bmIcon,
      title: 'Lafayette'
    });

    this.dalBu = L.marker([32.776664, -96.796988], {
      icon: this.bmIcon,
      title: 'Dallas'
    });

    this.houBu = L.marker([29.760427, -95.369803], {
      icon: this.bmIcon,
      title: 'Houston'
    });

    this.detBu = L.marker([42.331427, -83.045754], {
      icon: this.bmIcon,
      title: 'Detriot'
    });

    this.denBu = L.marker([39.739236, -104.990251], {
      icon: this.bmIcon,
      title: 'Denver'
    });

    this.buMapData = L.featureGroup([this.tileLayer, this.lafBu, this.dalBu, this.houBu, this.denBu, this.detBu])
    .addTo(this.newMap)
    .on('click', this.onSelectedBu);

    this.newMap.invalidateSize();

  }

  toggleList() {
    this.isActive = !this.isActive;
    this.listView = !this.listView;
  }

  closeList() {
    this.isActive = false;
    this.listView = false;
  }

  onSelectedBu(e) {
    if (e.layer._leaflet_id !== undefined || e.layer._leaflet_id !== null) {
      console.log('Yay, I\'m a layer!');
      console.log(e.layer);
      this.isActive = true;
    }
  }
}

<div class="container">
  <div class="row">
    <div [ngClass]="isActive ? 'col-md-8' : 'col-md-12'" > {{isActive}}
      <form class="form-inline">
        <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" name="mapfilter" placeholder="Filter The Map" />
            <button type="submit" class="btn btn-danger">Go!</button>
        </div>
      </form>
      <div id="mapid"></div>
    </div>
      <div class="col-md-4" *ngIf="listView === true">
        <form class="form-inline">
          <div class="form-group mx-sm-2 mb-1">
              <input type="text" class="form-control" name="skillfilter" placeholder="Search Skills" />
              <button type="submit" class="btn btn-danger">Search</button>
          </div>
          <div class="form-group mb-1">
              <button type="button" class="btn btn-danger" (click)="closeList()">X</button>
          </div>
        </form>
        
        <ul class="list-group">
            <li class="list-group-item bg-danger text-light">Andy Lanclos</li>
            <li class="list-group-item">Garret Manley</li>
            <li class="list-group-item">John Doe</li>
            <li class="list-group-item">Michael Smith</li>
            <li class="list-group-item">Harry Love</li>
          </ul>
      </div>
  </div>
</div>

`.on('click', this.onSelectedBu);` => `.on('click', this.onSelectedBu.bind(this));` — eko, Mar 06 '18 at 19:28
Yeah, thats it! Can you explain the reasoning behind .bind(this)? — Ajlanclos, Mar 06 '18 at 20:21
You should read the link that i have given :) I know its a bit long but its really helpful and covers all the topics. Basically if you don't use () for methods inside callbacks it will be like an old js `function` and this will refer to that functions instance rather than the component. So I would also expect `.on('click', (e)=> this.onSelectedBu(e));` to work. — eko, Mar 06 '18 at 21:08

Component variable isn't passed into leaflet's on click event handler

0 Answers0