HowTo use leaflet in an Angular 5 app (component)

Question

I'm writing an Angular 5 app in which I want to use the JS-library from leafletJS. In detail I want to call an Angular - function when clicking a marker on the map. I know that I have to install leaflet via npm and I already done it. But unfortunatley I can't determine which classes to import. I tried some like "Map" bnut it wont work. So I ended up integrating the leaflet the following manner: I'm able to define the map and add markers. By clicking on the marker the name of it appears as expected in the popup. But how can I set a variable in Angular by clicking on the marker (when the popup appears??): --> the alert in the last line shows the desired name, but unfortunately i cannot acces it in the view (.html):

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

    declare let L;
    var markers = new Array();
    var mymap;

    @Component({
      selector: 'app-areasgraphic',
      templateUrl: './areasgraphic.component.html',
      styleUrls: ['./areasgraphic.component.css']
    })

    export class AreasgraphicComponent implements OnInit {

      tempMarker: any;
      markersname: any;


      constructor() { }

      ngOnInit() {
        //Declaring MAP
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        //Set Map-Layer
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
          maxZoom: 18,
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
          id: 'mapbox.streets'
        }).addTo(mymap);

        //Add Marker to map
        var marker = L.marker([51.505, -0.09]).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        marker.on("popupopen", this.onPopupOpen);  
        marker.name="TESTNAMEMARKER1";
        markers.push(marker);

      }

      onPopupOpen(){
        this.tempMarker=this;

        //Show Marker.name
        alert (this.tempMarker.name);
        this.markersname = this.tempMarker.name;

        //alert displays name
        //BUT [(ngModel)]="markersname" in .html remains EMPTY
        alert(this.markersname);
      }

    }

Solution 1

try to use ChangeDetectorRef class to notify angular zone about event fired out of the angular zone:

import { ChangeDetectorRef } from '@angular/core';

...

constructor(private cdRef: ChangeDetectorRef) {}

...

onPopupOpen(){
  this.tempMarker = this;

  // Show Marker.name
  this.markersname = this.tempMarker.name;

  this.cdRef.detectChanges();
}

BTW... there is Core Leaflet package for Angular.io

Solution 2

You can use @asymmetrik/ngx-leaflet.

For change detection, you have two methods (See doc) :

• Running Inside of Angular's Zone (ngZone)
• Manually Triggering Change Detection (ChangeDetectorRef) : less precise

Comments

[iJade]

try including leaflet using the js library. You can refer this link. codehandbook.org/use-leaflet-in-angular