@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
LeafletDirective
- center
- centerChange
- DEFAULT_CENTER
- DEFAULT_FPZ_OPTIONS
- DEFAULT_ZOOM
- fitBounds
- fitBoundsOptions
- getMap()
- map
- mapReady
- maxBounds
- maxZoom
- minZoom
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- onClick
- onDoubleClick
- onMapMove
- onMapMoveEnd
- onMapMoveStart
- onMapZoom
- onMapZoomEnd
- onMapZoomStart
- onMouseDown
- onMouseMove
- onMouseOut
- onMouseOver
- onMouseUp
- onResize()
- options
- ɵdir
- ɵfac
- panOptions
- resizeTimer
- zoom
- zoomChange
- zoomOptions
- zoomPanOptions
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)
- index.d.ts
- lib/core/leaflet.directive.d.ts
- lib/core/leaflet.directive.wrapper.d.ts
- lib/core/leaflet.util.d.ts
- lib/layers/base/leaflet-baselayers.directive.d.ts
- lib/layers/control/leaflet-control-layers-changes.model.d.ts
- lib/layers/control/leaflet-control-layers-config.model.d.ts
- lib/layers/control/leaflet-control-layers.directive.d.ts
- lib/layers/control/leaflet-control-layers.wrapper.d.ts
- lib/layers/leaflet-layer.directive.d.ts
- lib/layers/leaflet-layers.directive.d.ts
- lib/layers/leaflet-tile-layer-definition.model.d.ts
- lib/leaflet.module.d.ts
Dependencies (1)
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 .
Package analyzed in 4173 ms. - Missing or incorrect documentation? Open an issue for this package.