ngx-leaflet map zoom events not triggering

Question

As per ngx-leaflet documentation link (leafletMapMoveEnd) and (leafletMapZoomEnd) are both exposed events.

I'm assuming that these events are exposed in the same DOM that the map is Initialized, and should be implemented like this:

<div 
 leaflet
 [leafletOptions]="options"
 (leafletMapReady)="onMapReady($event)"
 (leafletMapMoveEnd)="onMapMove($event)"
 (leafletMapZoomEnd)="onMapZoom($event)">

Is this the correct way to catch these events?

(leafletMapReady) seems to be working just fine.

However neither (leafletMapZoomEnd) or (leafletMapMoveEnd) seem to be triggering when I mess with the map it self.

I tried panning the map, as well as zooming in and out. Neither of those interactions cause the handleMapZoomEnd($event) handleMapMoveEnd($event) methods to be hit.

import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';
import * as fromLeafLet from 'leaflet'; 
import 'leaflet.markercluster';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: [
    './map.component.css',
    './extra-marker-icon.css'
  ]
})
export class MapComponent implements OnInit, OnChanges {
 constructor(){}

 onMapReady(map: fromLeafLet.Map): void {
    this.map = map;
  }

  onMapZoom(event: any):void{
    console.log('Zoom');
    this.onMapDirty.emit();
  }

  onMapMove(event: any):void{
    console.log('Move');
    this.onMapDirty.emit();
  }
}

possible duplicate of [Getting the list of markers when zoomed in leaflet map](https://stackoverflow.com/questions/48993885/getting-the-list-of-markers-when-zoomed-in-leaflet-map) — Nisarg, Aug 22 '18 at 20:50
That question is about the markers, my question is about the `leafletMapZoom` events. Should I change the wording of the question to better reflect that? — mrOak, Aug 22 '18 at 20:55
I can verify it works as designed as of ngx-leaflet v4. You have some errors in your code. In the output bindings, you call 'handleMapMoveEnd', but the function is called 'onMapMoveEnd'. And, in the html, you have the move and zoom handlers flipped. Otherwise, you're doing it correctly. You might want to put console.log statements in the callbacks to verify it's working once you fix the issues. — reblace, Aug 23 '18 at 18:04
Could you post an example? I've made the changes and the methods are still not being hit. I have breakpoints in dev tools, also added console logs. — mrOak, Aug 24 '18 at 15:17
Check out the demo/events branch in https://github.com/Asymmetrik/ngx-leaflet-tutorial-ngcli — reblace, Aug 28 '18 at 03:16

score 2 · Accepted Answer · answered Aug 28 '18 at 03:23

In the Github repo for the @asymmetrik/ngx-leaflet ngcli tutorial, I added a branch demo/events that shows a really simple example of using the zoom/move events.

git clone git@github.com:Asymmetrik/ngx-leaflet-tutorial-ngcli.git
git checkout demo/events

The files of interest are:

./src/app/app.component.html
./src/app/app.component.ts

The template (below) contains two handlers, one for each of the leafletMapMoveEnd and leafletMapZoomEnd outputs:

<div class="map"
  leaflet
  [leafletOptions]="options"
  (leafletMapReady)="onMapReady($event)"
  (leafletMapMoveEnd)="handleMapMoveEnd($event)"
  (leafletMapZoomEnd)="handleMapZoomEnd($event)"
></div>

The component (below) just prints to the console on these events. I removed mostly everything that's not necessary to demo the events working.

import { Component } from '@angular/core';
import * as L from 'leaflet';

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

  streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
  });


  map: L.Map;

  options = {
    layers: [ this.streetMaps ],
    zoom: 7,
    center: L.latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: L.Map): void {
    this.map = map;
  }

  handleMapZoomEnd(map: L.Map):void{
    console.log('onMapZoomEnd');
  }

  handleMapMoveEnd(map: L.Map):void{
    console.log('onMapMoveEnd');
  }
}

ngx-leaflet map zoom events not triggering

1 Answers1