@asymmetrik/ngx-leaflet

  • Version 18.0.1
  • Published
  • 266 kB
  • 1 dependency
  • MIT license

Install

npm i @asymmetrik/ngx-leaflet
yarn add @asymmetrik/ngx-leaflet
pnpm add @asymmetrik/ngx-leaflet

Overview

Angular.io components for Leaflet

Index

Classes

class LeafletBaseLayersDirective

class LeafletBaseLayersDirective implements DoCheck, OnDestroy, OnInit {}
  • Baselayers directive

    This directive is provided as a convenient way to add baselayers to the map. The input accepts a key-value map of layer name -> layer. Mutable changed are detected. On changes, a differ is used to determine what changed so that layers are appropriately added or removed. This directive will also add the layers control so users can switch between available base layers.

    To specify which layer to show as the 'active' baselayer, you will want to add it to the map using the layers directive. Otherwise, the plugin will use the last one it sees.

constructor

constructor(
leafletDirective: LeafletDirective,
differs: KeyValueDiffers,
zone: NgZone
);

    property baseLayers

    baseLayers: { [name: string]: Layer };

      property baseLayersDiffer

      baseLayersDiffer: KeyValueDiffer<string, Layer>;

        property baseLayersValue

        baseLayersValue: { [name: string]: Layer };

          property layersControlOptions

          layersControlOptions: Control.LayersOptions;

            property layersControlReady

            layersControlReady: EventEmitter<Control.Layers>;

              property ɵdir

              static ɵdir: i0.ɵɵDirectiveDeclaration<
              LeafletBaseLayersDirective,
              '[leafletBaseLayers]',
              never,
              {
              baseLayers: { alias: 'leafletBaseLayers'; required: false };
              layersControlOptions: {
              alias: 'leafletLayersControlOptions';
              required: false;
              };
              },
              { layersControlReady: 'leafletLayersControlReady' },
              never,
              never,
              false,
              never
              >;

                property ɵfac

                static ɵfac: i0.ɵɵFactoryDeclaration<LeafletBaseLayersDirective, never>;

                  method ngDoCheck

                  ngDoCheck: () => void;

                    method ngOnDestroy

                    ngOnDestroy: () => void;

                      method ngOnInit

                      ngOnInit: () => void;

                        method syncBaseLayer

                        protected syncBaseLayer: () => void;
                        • Check the current base layer and change it to the new one if necessary

                        method updateBaseLayers

                        protected updateBaseLayers: () => void;

                          class LeafletControlLayersChanges

                          class LeafletControlLayersChanges {}

                            property layersAdded

                            layersAdded: number;

                              property layersChanged

                              layersChanged: number;

                                property layersRemoved

                                layersRemoved: number;

                                  method changed

                                  changed: () => boolean;

                                    class LeafletControlLayersConfig

                                    class LeafletControlLayersConfig {}

                                      property baseLayers

                                      baseLayers: { [name: string]: Layer };

                                        property overlays

                                        overlays: { [name: string]: Layer };

                                          class LeafletControlLayersWrapper

                                          class LeafletControlLayersWrapper {}

                                            constructor

                                            constructor(zone: NgZone, layersControlReady: EventEmitter<Control.Layers>);

                                              property layersControl

                                              protected layersControl: Control.Layers;

                                                property layersControlReady

                                                protected layersControlReady: EventEmitter<Control.Layers>;

                                                  method applyBaseLayerChanges

                                                  applyBaseLayerChanges: (
                                                  changes: KeyValueChanges<string, Layer>
                                                  ) => LeafletControlLayersChanges;

                                                    method applyOverlayChanges

                                                    applyOverlayChanges: (
                                                    changes: KeyValueChanges<string, Layer>
                                                    ) => LeafletControlLayersChanges;

                                                      method getLayersControl

                                                      getLayersControl: () => Control.Layers;

                                                        method init

                                                        init: (controlConfig: any, controlOptions: any) => Control.Layers;

                                                          class LeafletDirective

                                                          class LeafletDirective implements OnChanges, OnDestroy, OnInit {}

                                                            constructor

                                                            constructor(element: ElementRef, zone: NgZone);

                                                              property center

                                                              center: LatLng;

                                                                property centerChange

                                                                centerChange: EventEmitter<LatLng>;

                                                                  property DEFAULT_CENTER

                                                                  readonly DEFAULT_CENTER: LatLng;

                                                                    property DEFAULT_FPZ_OPTIONS

                                                                    readonly DEFAULT_FPZ_OPTIONS: {};

                                                                      property DEFAULT_ZOOM

                                                                      readonly DEFAULT_ZOOM: number;

                                                                        property fitBounds

                                                                        fitBounds: LatLngBounds;

                                                                          property fitBoundsOptions

                                                                          fitBoundsOptions: {};

                                                                            property map

                                                                            map: Map;

                                                                              property mapReady

                                                                              mapReady: EventEmitter<Map>;

                                                                                property maxBounds

                                                                                maxBounds: LatLngBounds;

                                                                                  property maxZoom

                                                                                  maxZoom: number;

                                                                                    property minZoom

                                                                                    minZoom: number;

                                                                                      property onClick

                                                                                      onClick: EventEmitter<LeafletMouseEvent>;

                                                                                        property onDoubleClick

                                                                                        onDoubleClick: EventEmitter<LeafletMouseEvent>;

                                                                                          property onMapMove

                                                                                          onMapMove: EventEmitter<LeafletEvent>;

                                                                                            property onMapMoveEnd

                                                                                            onMapMoveEnd: EventEmitter<LeafletEvent>;

                                                                                              property onMapMoveStart

                                                                                              onMapMoveStart: EventEmitter<LeafletEvent>;

                                                                                                property onMapZoom

                                                                                                onMapZoom: EventEmitter<LeafletEvent>;

                                                                                                  property onMapZoomEnd

                                                                                                  onMapZoomEnd: EventEmitter<LeafletEvent>;

                                                                                                    property onMapZoomStart

                                                                                                    onMapZoomStart: EventEmitter<LeafletEvent>;

                                                                                                      property onMouseDown

                                                                                                      onMouseDown: EventEmitter<LeafletMouseEvent>;

                                                                                                        property onMouseMove

                                                                                                        onMouseMove: EventEmitter<LeafletMouseEvent>;

                                                                                                          property onMouseOut

                                                                                                          onMouseOut: EventEmitter<LeafletMouseEvent>;

                                                                                                            property onMouseOver

                                                                                                            onMouseOver: EventEmitter<LeafletMouseEvent>;

                                                                                                              property onMouseUp

                                                                                                              onMouseUp: EventEmitter<LeafletMouseEvent>;

                                                                                                                property options

                                                                                                                options: MapOptions;

                                                                                                                  property ɵdir

                                                                                                                  static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                  LeafletDirective,
                                                                                                                  '[leaflet]',
                                                                                                                  never,
                                                                                                                  {
                                                                                                                  fitBoundsOptions: { alias: 'leafletFitBoundsOptions'; required: false };
                                                                                                                  panOptions: { alias: 'leafletPanOptions'; required: false };
                                                                                                                  zoomOptions: { alias: 'leafletZoomOptions'; required: false };
                                                                                                                  zoomPanOptions: { alias: 'leafletZoomPanOptions'; required: false };
                                                                                                                  options: { alias: 'leafletOptions'; required: false };
                                                                                                                  zoom: { alias: 'leafletZoom'; required: false };
                                                                                                                  center: { alias: 'leafletCenter'; required: false };
                                                                                                                  fitBounds: { alias: 'leafletFitBounds'; required: false };
                                                                                                                  maxBounds: { alias: 'leafletMaxBounds'; required: false };
                                                                                                                  minZoom: { alias: 'leafletMinZoom'; required: false };
                                                                                                                  maxZoom: { alias: 'leafletMaxZoom'; required: false };
                                                                                                                  },
                                                                                                                  {
                                                                                                                  mapReady: 'leafletMapReady';
                                                                                                                  zoomChange: 'leafletZoomChange';
                                                                                                                  centerChange: 'leafletCenterChange';
                                                                                                                  onClick: 'leafletClick';
                                                                                                                  onDoubleClick: 'leafletDoubleClick';
                                                                                                                  onMouseDown: 'leafletMouseDown';
                                                                                                                  onMouseUp: 'leafletMouseUp';
                                                                                                                  onMouseMove: 'leafletMouseMove';
                                                                                                                  onMouseOver: 'leafletMouseOver';
                                                                                                                  onMouseOut: 'leafletMouseOut';
                                                                                                                  onMapMove: 'leafletMapMove';
                                                                                                                  onMapMoveStart: 'leafletMapMoveStart';
                                                                                                                  onMapMoveEnd: 'leafletMapMoveEnd';
                                                                                                                  onMapZoom: 'leafletMapZoom';
                                                                                                                  onMapZoomStart: 'leafletMapZoomStart';
                                                                                                                  onMapZoomEnd: 'leafletMapZoomEnd';
                                                                                                                  },
                                                                                                                  never,
                                                                                                                  never,
                                                                                                                  false,
                                                                                                                  never
                                                                                                                  >;

                                                                                                                    property ɵfac

                                                                                                                    static ɵfac: i0.ɵɵFactoryDeclaration<LeafletDirective, never>;

                                                                                                                      property panOptions

                                                                                                                      panOptions: {};

                                                                                                                        property resizeTimer

                                                                                                                        resizeTimer: any;

                                                                                                                          property zoom

                                                                                                                          zoom: number;

                                                                                                                            property zoomChange

                                                                                                                            zoomChange: EventEmitter<number>;

                                                                                                                              property zoomOptions

                                                                                                                              zoomOptions: {};

                                                                                                                                property zoomPanOptions

                                                                                                                                zoomPanOptions: {};

                                                                                                                                  method getMap

                                                                                                                                  getMap: () => Map;

                                                                                                                                    method ngOnChanges

                                                                                                                                    ngOnChanges: (changes: { [key: string]: SimpleChange }) => void;

                                                                                                                                      method ngOnDestroy

                                                                                                                                      ngOnDestroy: () => void;

                                                                                                                                        method ngOnInit

                                                                                                                                        ngOnInit: () => void;

                                                                                                                                          method onResize

                                                                                                                                          onResize: () => void;

                                                                                                                                            class LeafletDirectiveWrapper

                                                                                                                                            class LeafletDirectiveWrapper {}

                                                                                                                                              constructor

                                                                                                                                              constructor(leafletDirective: LeafletDirective);

                                                                                                                                                property leafletDirective

                                                                                                                                                protected leafletDirective: LeafletDirective;

                                                                                                                                                  method getMap

                                                                                                                                                  getMap: () => Map;

                                                                                                                                                    method init

                                                                                                                                                    init: () => void;

                                                                                                                                                      class LeafletLayerDirective

                                                                                                                                                      class LeafletLayerDirective implements OnChanges, OnDestroy, OnInit {}
                                                                                                                                                      • Layer directive

                                                                                                                                                        This directive is used to directly control a single map layer. The purpose of this directive is to be used as part of a child structural directive of the map element.

                                                                                                                                                      constructor

                                                                                                                                                      constructor(leafletDirective: LeafletDirective, zone: NgZone);

                                                                                                                                                        property layer

                                                                                                                                                        layer: Layer;

                                                                                                                                                          property onAdd

                                                                                                                                                          onAdd: EventEmitter<LeafletEvent>;

                                                                                                                                                            property onRemove

                                                                                                                                                            onRemove: EventEmitter<LeafletEvent>;

                                                                                                                                                              property ɵdir

                                                                                                                                                              static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                              LeafletLayerDirective,
                                                                                                                                                              '[leafletLayer]',
                                                                                                                                                              never,
                                                                                                                                                              { layer: { alias: 'leafletLayer'; required: false } },
                                                                                                                                                              { onAdd: 'leafletLayerAdd'; onRemove: 'leafletLayerRemove' },
                                                                                                                                                              never,
                                                                                                                                                              never,
                                                                                                                                                              false,
                                                                                                                                                              never
                                                                                                                                                              >;

                                                                                                                                                                property ɵfac

                                                                                                                                                                static ɵfac: i0.ɵɵFactoryDeclaration<LeafletLayerDirective, never>;

                                                                                                                                                                  method ngOnChanges

                                                                                                                                                                  ngOnChanges: (changes: { [key: string]: SimpleChange }) => void;

                                                                                                                                                                    method ngOnDestroy

                                                                                                                                                                    ngOnDestroy: () => void;

                                                                                                                                                                      method ngOnInit

                                                                                                                                                                      ngOnInit: () => void;

                                                                                                                                                                        class LeafletLayersControlDirective

                                                                                                                                                                        class LeafletLayersControlDirective implements DoCheck, OnDestroy, OnInit {}
                                                                                                                                                                        • Layers Control

                                                                                                                                                                          This directive is used to configure the layers control. The input accepts an object with two key-value maps of layer name -> layer. Mutable changes are detected. On changes, a differ is used to determine what changed so that layers are appropriately added or removed.

                                                                                                                                                                          To specify which layer to show as the 'active' baselayer, you will want to add it to the map using the layers directive. Otherwise, the last one it sees will be used.

                                                                                                                                                                        constructor

                                                                                                                                                                        constructor(
                                                                                                                                                                        leafletDirective: LeafletDirective,
                                                                                                                                                                        differs: KeyValueDiffers,
                                                                                                                                                                        zone: NgZone
                                                                                                                                                                        );

                                                                                                                                                                          property baseLayersDiffer

                                                                                                                                                                          baseLayersDiffer: KeyValueDiffer<string, Layer>;

                                                                                                                                                                            property layersControlConfig

                                                                                                                                                                            layersControlConfig: LeafletControlLayersConfig;

                                                                                                                                                                              property layersControlConfigValue

                                                                                                                                                                              layersControlConfigValue: LeafletControlLayersConfig;

                                                                                                                                                                                property layersControlOptions

                                                                                                                                                                                layersControlOptions: any;

                                                                                                                                                                                  property layersControlReady

                                                                                                                                                                                  layersControlReady: EventEmitter<Control.Layers>;

                                                                                                                                                                                    property overlaysDiffer

                                                                                                                                                                                    overlaysDiffer: KeyValueDiffer<string, Layer>;

                                                                                                                                                                                      property ɵdir

                                                                                                                                                                                      static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                                                      LeafletLayersControlDirective,
                                                                                                                                                                                      '[leafletLayersControl]',
                                                                                                                                                                                      never,
                                                                                                                                                                                      {
                                                                                                                                                                                      layersControlConfig: { alias: 'leafletLayersControl'; required: false };
                                                                                                                                                                                      layersControlOptions: {
                                                                                                                                                                                      alias: 'leafletLayersControlOptions';
                                                                                                                                                                                      required: false;
                                                                                                                                                                                      };
                                                                                                                                                                                      },
                                                                                                                                                                                      { layersControlReady: 'leafletLayersControlReady' },
                                                                                                                                                                                      never,
                                                                                                                                                                                      never,
                                                                                                                                                                                      false,
                                                                                                                                                                                      never
                                                                                                                                                                                      >;

                                                                                                                                                                                        property ɵfac

                                                                                                                                                                                        static ɵfac: i0.ɵɵFactoryDeclaration<LeafletLayersControlDirective, never>;

                                                                                                                                                                                          method ngDoCheck

                                                                                                                                                                                          ngDoCheck: () => void;

                                                                                                                                                                                            method ngOnDestroy

                                                                                                                                                                                            ngOnDestroy: () => void;

                                                                                                                                                                                              method ngOnInit

                                                                                                                                                                                              ngOnInit: () => void;

                                                                                                                                                                                                method updateLayers

                                                                                                                                                                                                protected updateLayers: () => void;

                                                                                                                                                                                                  class LeafletLayersDirective

                                                                                                                                                                                                  class LeafletLayersDirective implements DoCheck, OnDestroy, OnInit {}
                                                                                                                                                                                                  • Layers directive

                                                                                                                                                                                                    This directive is used to directly control map layers. As changes are made to the input array of layers, the map is synched to the array. As layers are added or removed from the input array, they are also added or removed from the map. The input array is treated as immutable. To detect changes, you must change the array instance.

                                                                                                                                                                                                    Important Note: The input layers array is assumed to be immutable. This means you need to use an immutable array implementation or create a new copy of your array when you make changes, otherwise this directive won't detect the change. This is by design. It's for performance reasons. Change detection of mutable arrays requires diffing the state of the array on every DoCheck cycle, which is extremely expensive from a time complexity perspective.

                                                                                                                                                                                                  constructor

                                                                                                                                                                                                  constructor(
                                                                                                                                                                                                  leafletDirective: LeafletDirective,
                                                                                                                                                                                                  differs: IterableDiffers,
                                                                                                                                                                                                  zone: NgZone
                                                                                                                                                                                                  );

                                                                                                                                                                                                    property layers

                                                                                                                                                                                                    layers: Layer[];

                                                                                                                                                                                                      property layersDiffer

                                                                                                                                                                                                      layersDiffer: IterableDiffer<Layer>;

                                                                                                                                                                                                        property layersValue

                                                                                                                                                                                                        layersValue: Layer[];

                                                                                                                                                                                                          property ɵdir

                                                                                                                                                                                                          static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                                                                          LeafletLayersDirective,
                                                                                                                                                                                                          '[leafletLayers]',
                                                                                                                                                                                                          never,
                                                                                                                                                                                                          { layers: { alias: 'leafletLayers'; required: false } },
                                                                                                                                                                                                          {},
                                                                                                                                                                                                          never,
                                                                                                                                                                                                          never,
                                                                                                                                                                                                          false,
                                                                                                                                                                                                          never
                                                                                                                                                                                                          >;

                                                                                                                                                                                                            property ɵfac

                                                                                                                                                                                                            static ɵfac: i0.ɵɵFactoryDeclaration<LeafletLayersDirective, never>;

                                                                                                                                                                                                              method ngDoCheck

                                                                                                                                                                                                              ngDoCheck: () => void;

                                                                                                                                                                                                                method ngOnDestroy

                                                                                                                                                                                                                ngOnDestroy: () => void;

                                                                                                                                                                                                                  method ngOnInit

                                                                                                                                                                                                                  ngOnInit: () => void;

                                                                                                                                                                                                                    class LeafletModule

                                                                                                                                                                                                                    class LeafletModule {}

                                                                                                                                                                                                                      property ɵfac

                                                                                                                                                                                                                      static ɵfac: i0.ɵɵFactoryDeclaration<LeafletModule, never>;

                                                                                                                                                                                                                        property ɵinj

                                                                                                                                                                                                                        static ɵinj: i0.ɵɵInjectorDeclaration<LeafletModule>;

                                                                                                                                                                                                                          property ɵmod

                                                                                                                                                                                                                          static ɵmod: i0.ɵɵNgModuleDeclaration<
                                                                                                                                                                                                                          LeafletModule,
                                                                                                                                                                                                                          [
                                                                                                                                                                                                                          typeof i1.LeafletDirective,
                                                                                                                                                                                                                          typeof i2.LeafletLayerDirective,
                                                                                                                                                                                                                          typeof i3.LeafletLayersDirective,
                                                                                                                                                                                                                          typeof i4.LeafletLayersControlDirective,
                                                                                                                                                                                                                          typeof i5.LeafletBaseLayersDirective
                                                                                                                                                                                                                          ],
                                                                                                                                                                                                                          never,
                                                                                                                                                                                                                          [
                                                                                                                                                                                                                          typeof i1.LeafletDirective,
                                                                                                                                                                                                                          typeof i2.LeafletLayerDirective,
                                                                                                                                                                                                                          typeof i3.LeafletLayersDirective,
                                                                                                                                                                                                                          typeof i4.LeafletLayersControlDirective,
                                                                                                                                                                                                                          typeof i5.LeafletBaseLayersDirective
                                                                                                                                                                                                                          ]
                                                                                                                                                                                                                          >;

                                                                                                                                                                                                                            class LeafletTileLayerDefinition

                                                                                                                                                                                                                            class LeafletTileLayerDefinition {}

                                                                                                                                                                                                                              constructor

                                                                                                                                                                                                                              constructor(type: string, url: string, options: any);

                                                                                                                                                                                                                                property options

                                                                                                                                                                                                                                options: any;

                                                                                                                                                                                                                                  property type

                                                                                                                                                                                                                                  type: string;

                                                                                                                                                                                                                                    property url

                                                                                                                                                                                                                                    url: string;

                                                                                                                                                                                                                                      method createTileLayer

                                                                                                                                                                                                                                      static createTileLayer: (layerDef: LeafletTileLayerDefinition) => TileLayer;
                                                                                                                                                                                                                                      • Creates a TileLayer from the provided definition. This is a convenience function to help with generating layers from objects.

                                                                                                                                                                                                                                        Parameter layerDef

                                                                                                                                                                                                                                        The layer to create

                                                                                                                                                                                                                                        Returns

                                                                                                                                                                                                                                        {TileLayer} The TileLayer that has been created

                                                                                                                                                                                                                                      • Create a Tile Layer from the current state of this object

                                                                                                                                                                                                                                        Returns

                                                                                                                                                                                                                                        {TileLayer} A new TileLayer

                                                                                                                                                                                                                                      method createTileLayers

                                                                                                                                                                                                                                      static createTileLayers: (layerDefs: {
                                                                                                                                                                                                                                      [key: string]: LeafletTileLayerDefinition;
                                                                                                                                                                                                                                      }) => { [key: string]: TileLayer };
                                                                                                                                                                                                                                      • Creates a TileLayer for each key in the incoming map. This is a convenience function for generating an associative array of layers from an associative array of objects

                                                                                                                                                                                                                                        Parameter layerDefs

                                                                                                                                                                                                                                        A map of key to tile layer definition

                                                                                                                                                                                                                                        Returns

                                                                                                                                                                                                                                        {{[p: string]: TileLayer}} A new map of key to TileLayer

                                                                                                                                                                                                                                      class LeafletUtil

                                                                                                                                                                                                                                      class LeafletUtil {}

                                                                                                                                                                                                                                        method handleEvent

                                                                                                                                                                                                                                        static handleEvent: <T>(
                                                                                                                                                                                                                                        zone: NgZone,
                                                                                                                                                                                                                                        eventEmitter: EventEmitter<T>,
                                                                                                                                                                                                                                        event: T
                                                                                                                                                                                                                                        ) => void;

                                                                                                                                                                                                                                          method mapToArray

                                                                                                                                                                                                                                          static mapToArray: <T>(map: { [key: string]: T }) => T[];

                                                                                                                                                                                                                                            Package Files (13)

                                                                                                                                                                                                                                            Dependencies (1)

                                                                                                                                                                                                                                            Dev Dependencies (0)

                                                                                                                                                                                                                                            No dev dependencies.

                                                                                                                                                                                                                                            Peer Dependencies (3)

                                                                                                                                                                                                                                            Badge

                                                                                                                                                                                                                                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@asymmetrik/ngx-leaflet.

                                                                                                                                                                                                                                            • Markdown
                                                                                                                                                                                                                                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@asymmetrik/ngx-leaflet)
                                                                                                                                                                                                                                            • HTML
                                                                                                                                                                                                                                              <a href="https://www.jsdocs.io/package/@asymmetrik/ngx-leaflet"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>