Using getBounds/fitBounds on a featureGroup with ngx-leaflet in angular

Question

In the app I'm creating, I dynamically add groups of points to a featureGroup that is referenced in a nested map click event. So the gist is that I have a map of a country with different regions displayed. Clicking a region fits the map bounds to that polygon and reveals points associated with that polygon, let's say cities. Clicking on a single point/city bores down further and reveals another group of points associated with the first clicked point, such as all libraries within the selected city.

The problem is that once my final group of points (libraries) is in a featureGroup (which is necessary due to the nested nature of my click events), I am unable to use fitBounds/getBounds on the group. Here is a minimal example (based on the ngx-leaflet-tutorial-ngcli tutorial):

app.component.html

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

app.component.ts

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

import * as L from 'leaflet';

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

  googleMaps = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  summit = L.marker([ 46.8523, -121.7603 ], {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });
  paradise = L.marker([ 46.78465227596462,-121.74141269177198 ], {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });

  fGroup = L.featureGroup();

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

  onMapReady(map: L.Map) {
    this.paradise.addTo(this.fGroup);
    this.summit.addTo(this.fGroup);
    console.log(this.fGroup);
  }

  ngOnInit(){

  }
}

I used console.log to show the output of the featureGroup:

NewClass {options: {…}, _layers: {…}, _initHooksCalled: true, _leaflet_id: 183, _mapToAdd: NewClass, …}
options: {}
_initHooksCalled: true
_layers: {184: NewClass, 186: NewClass}
_leaflet_id: 183
_map: NewClass {options: {…}, _container: div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_mapToAdd: NewClass {options: {…}, _container: div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_zoomAnimated: true
__proto__: NewClass

As you can see, no _bounds method available. Is there a way to fitBounds to a featureGroup in ngx-leaflet?

What is in `__proto__`? I suspect the methods you are looking for are in there. — ghybs, Jun 01 '18 at 20:18
https://leafletjs.com/reference-1.3.0.html#featuregroup-getbounds is the method you want. — reblace, Jun 01 '18 at 20:21
@reblace yes, sorry I was unclear, I know that I'm looking for the getBounds method, I just didn't see any markers like "_getBounds" or "_bounds" in the metadata to show that the method could be used. `__proto__` does allow me to use the method, but it returns an empty `LatLngBounds {}` object. — Lauren, Jun 04 '18 at 13:50
@ghybs I do see `getBounds` in `__proto__`, but using the `getBounds` method returns an empty `LatLngBounds {}` object. — Lauren, Jun 04 '18 at 13:54
I have no issue modifying the [ngx-leaflet-tutorial-ngcli](https://github.com/Asymmetrik/ngx-leaflet-tutorial-ngcli) tutorial with your code that uses a Feature Group and uses its `getBounds` method: https://codesandbox.io/s/jz8olx9xrw — ghybs, Jun 11 '18 at 11:01
Ahh I see what happened. My actual example doesn't use this exact framework, so I'm actually trying to update the bounds in a slightly different way. So while this example works with `onMapReady()`, my actual app doesn't, so I got tripped up. I'll update this with the answer since it works with the given example, though. Thanks! — Lauren, Jun 11 '18 at 15:54

score 2 · Accepted Answer · answered Jun 11 '18 at 19:18

As @ghybs pointed out, using getBounds() directly on the feature group actually does work in this example. In my real app, the event was nested, so the key to getting fitBounds() to work was using this.changeDetector.detectChanges() per this documentation.

Using getBounds/fitBounds on a featureGroup with ngx-leaflet in angular

1 Answers1

Linked