angular-pharkas-leaflet

Angular-Pharkas-Leaflet

This library provides Angular base component for working with Leaflet, based on the angular-pharkas Component Framework.

It's benefits are:

• Zone free
  • ChangeDetectionStrategy.OnPush disables Angular's more active change detection which is unnecessary around vanilla controls like Leaflet
• Observable driven-ish
  • Leaflet itself is inescapably imperative, but this wrapper uses Observables for lifecycle which makes it easier to think in Observables when working with Leaflet
• Resize aware
  • Uses ResizeObserver to watch container size changes and notifies Leaflet, which is useful for smarter updating in complex reflowing CSS layouts such as CSS Grid

The Inevitable Angular Compatibility Chart

Library version	Supported Angular
3.0.0	Angular 15
<=2.0.0	Angular 13

Usage

Import PharkasLeafletModule and use LeafletMapComponent as a replacement base component like PharkasComponent. The this.useMap() "hook" takes Leaflet options and returns and Observable<LeafletMap>.

A basic example:

@Component({
  // …
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyExampleComponent extends LeafletMapComponent<MyExampleComponent> {
  constructor(ref: ChangeDetectorRef, element: ElementRef) {
    super(ref, element)

    const exampleLayer = new L.GeoJSON()

    const map = this.useMap({
      layers: [exampleLayer],
    })
  }
}

An example of using a bindEffect with combineLatest to perform an imperative effect on the map based on an input Observable:

@Component({
  // …
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyExampleComponent extends LeafletMapComponent<MyExampleComponent> {
  @Input() set zoomControlPosition(
    value: L.ControlPosition | Observable<L.ControlPosition>
  ) {
    this.setInput('zoomControlPosition', value)
  }

  constructor(ref: ChangeDetectorRef, element: ElementRef) {
    super(ref, element)

    const exampleLayer = new L.GeoJSON()

    const map = this.useMap({
      layers: [exampleLayer],
    })

    var zoomControlPosition = this.useInput('zoomControlPosition')

    this.bindEffect(
      combineLatest([zoomControlPosition, map]),
      ([position, map]) => {
        map.zoomControl.remove()
        L.control.zoom({ position }).addTo(map)
      }
    )
  }
}