@asymmetrik/ngx-leaflet

@asymmetrik/ngx-leaflet

Version 17.0.0
Published 4 months ago
265 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

LeafletBaseLayersDirective
LeafletControlLayersChanges
LeafletControlLayersConfig
- baseLayers
- overlays
LeafletControlLayersWrapper
LeafletDirective
LeafletDirectiveWrapper
LeafletLayerDirective
LeafletLayersControlDirective
LeafletLayersDirective
LeafletModule
LeafletTileLayerDefinition
LeafletUtil
- handleEvent()
- mapToArray()

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)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (3)

Badge

To add a badge like this oneto 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>

Updated 4 months ago.
Package analyzed in 5559 ms.
Missing or incorrect documentation? Open an issue for this package.