ngx-leaflet notes

ngx-leaflet.md

ngx-leaflet

Links

Source

• ngx-leaflet (GitHub)
• ngx-leaflet (NPM)
• Leaflet (Docs)
• Elasticrash

Examples

• https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
• https://asymmetrik.com/introducing-ngx-leaflet/
• https://stackblitz.com/edit/angular-ngx-leaflet-tests
• https://haoliangyu.github.io/ngx-leaflet-starter/ / https://github.com/haoliangyu/ngx-leaflet-starter

StackOverflow

• https://stackoverflow.com/questions/tagged/ngx-leaflet?tab=Votes

Overview

LeafletDirective

import {
  Directive, 
  ElementRef,
  EventEmitter,
  HostListener,
  Input,
  NgZone,
  OnChanges,
  OnInit,
  Output,
  SimpleChange
} from '@angular/core'

import { latLng, LatLng, LatLngBounds, LeafletEvent, LeafletMouseEvent, map, Map, MapOptions } from 'leaflet'

import { LeafletUtil } from './leaflet.util'

@Input('leafletFitBoundsOptions') fitBoundsOptions = this.DEFAULT_FPZ_OPTIONS
@Input('leafletPanOptions') panOptions = this.DEFAULT_FPZ_OPTIONS
@Input('leafletZoomOptions') zoomOptions = this.DEFAULT_FPZ_OPTIONS
@Input('leafletZoomPanOptions') zoomPanOptions = this.DEFAULT_FPZ_OPTIONS

// Default configuration
@Input('leafletOptions') options: MapOptions = {}

// Configure callback function for the map
@Output('leafletMapReady') mapReady = new EventEmitter<Map>()

// Zoom level for the map
@Input('leafletZoom') zoom: number
@Output('leafletZoomChange') zoomChange = new EventEmitter<number>()

// Center of the map
@Input('leafletCenter') center: LatLng
@Output('leafletCenterChange') centerChange = new EventEmitter<LatLng>()

// Set fit bounds for map
@Input('leafletFitBounds') fitBounds: LatLngBounds

// Set the max bounds for the map
@Input('leafletMaxBounds') maxBounds: LatLngBounds

// Set the min zoom for the map
@Input('leafletMinZoom') minZoom: number

// Set the max zoom for the map
@Input('leafletMaxZoom') maxZoom: number


// Mouse Map Events
@Output('leafletClick') onClick = new EventEmitter<LeafletMouseEvent>()
@Output('leafletDoubleClick') onDoubleClick = new EventEmitter<LeafletMouseEvent>()
@Output('leafletMouseDown') onMouseDown = new EventEmitter<LeafletMouseEvent>()
@Output('leafletMouseUp') onMouseUp = new EventEmitter<LeafletMouseEvent>()
@Output('leafletMouseMove') onMouseMove = new EventEmitter<LeafletMouseEvent>()
@Output('leafletMouseOver') onMouseOver = new EventEmitter<LeafletMouseEvent>()
@Output('leafletMouseOut') onMouseOut = new EventEmitter<LeafletMouseEvent>()

// Map Move Events
@Output('leafletMapMove') onMapMove = new EventEmitter<LeafletEvent>()
@Output('leafletMapMoveStart') onMapMoveStart = new EventEmitter<LeafletEvent>()
@Output('leafletMapMoveEnd') onMapMoveEnd = new EventEmitter<LeafletEvent>()

// Map Zoom Events
@Output('leafletMapZoom') onMapZoom = new EventEmitter<LeafletEvent>()
@Output('leafletMapZoomStart') onMapZoomStart = new EventEmitter<LeafletEvent>()
@Output('leafletMapZoomEnd') onMapZoomEnd = new EventEmitter<LeafletEvent>()

LeafletBaseLayersDirective

import { 
  Directive,
  DoCheck,
  EventEmitter,
  Input,
  KeyValueDiffer,
  KeyValueDiffers,
  NgZone,
  OnDestroy,
  OnInit,
  Output
} from '@angular/core'

import { Control, Layer } from 'leaflet'

import { LeafletUtil } from '../../core/leaflet.util'
import { LeafletDirective } from '../../core/leaflet.directive'
import { LeafletDirectiveWrapper } from '../../core/leaflet.directive.wrapper'
import { LeafletControlLayersWrapper } from '../control/leaflet-control-layers.wrapper'

// Control Options
@Input('leafletLayersControlOptions') layersControlOptions: Control.LayersOptions

// Output for once the layers control is ready
@Output('leafletLayersControlReady') layersControlReady = new EventEmitter<Control.Layers>()

LeafletControlLayersDirective

import {
  Directive,
  DoCheck,
  EventEmitter,
  Input,
  KeyValueDiffer,
  KeyValueDiffers,
  NgZone,
  OnDestroy,
  OnInit,
  Output
} from '@angular/core'

import { Control, Layer } from 'leaflet'

import { LeafletDirective } from '../../core/leaflet.directive'
import { LeafletDirectiveWrapper } from '../../core/leaflet.directive.wrapper'
import { LeafletControlLayersWrapper } from './leaflet-control-layers.wrapper'
import { LeafletControlLayersConfig } from './leaflet-control-layers-config.model'

@Input('leafletLayersControl')
set layersControlConfig(v: LeafletControlLayersConfig) {
  // Validation/init stuff
  if (null == v) { v = new LeafletControlLayersConfig() }
  if (null == v.baseLayers) { v.baseLayers = {} }
  if (null == v.overlays) { v.overlays = {} }
    
  // Store the value
  this.layersControlConfigValue = v
    
  // Update the map
  this.updateLayers()
}
get layersControlConfig(): LeafletControlLayersConfig {
  return this.layersControlConfigValue
}

@Input('leafletLayersControlOptions') layersControlOptions: any
@Output('leafletLayersControlReady') layersControlReady = new EventEmitter<Control.Layers>()

export class LeafletControlLayersConfig {
  baseLayers: { [name: string]: Layer } = {}
  overlays: { [name: string]: Layer } = {}
}

LeafletLayerDirective

import {
  Directive,
  EventEmitter,
  Input,
  NgZone,
  OnChanges,
  OnDestroy,
  OnInit,
  Output,
  SimpleChange
} from '@angular/core'

import { Layer, LeafletEvent } from 'leaflet'

import { LeafletDirective } from '../core/leaflet.directive'
import { LeafletDirectiveWrapper } from '../core/leaflet.directive.wrapper'
import { LeafletUtil } from '../core/leaflet.util'

@Input('leafletLayer') layer: Layer

// Layer Events
@Output('leafletLayerAdd') onAdd = new EventEmitter<LeafletEvent>()
@Output('leafletLayerRemove') onRemove = new EventEmitter<LeafletEvent>()

LeafletLayersDirective

import { Directive, DoCheck, Input, IterableDiffer, IterableDiffers, NgZone, OnDestroy, OnInit } from '@angular/core'

import { Layer} from 'leaflet'

import { LeafletDirective } from '../core/leaflet.directive'
import { LeafletDirectiveWrapper } from '../core/leaflet.directive.wrapper'

@Input('leafletLayers')
set layers(v: Layer[]) {
  this.layersValue = v
    
  // Now that we have a differ, do an immediate layer update
  this.updateLayers()
}
get layers(): Layer[] {
  return this.layersValue
}