@asymmetrik/ngx-leaflet
Version:
Angular.io components for Leaflet
83 lines • 10.5 kB
JavaScript
import { Directive, Input } from '@angular/core';
import { LeafletDirectiveWrapper } from '../core/leaflet.directive.wrapper';
import * as i0 from "@angular/core";
import * as i1 from "../core/leaflet.directive";
/**
* 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.
*
*/
export class LeafletLayersDirective {
// Set/get the layers
set layers(v) {
this.layersValue = v;
// Now that we have a differ, do an immediate layer update
this.updateLayers();
}
get layers() {
return this.layersValue;
}
constructor(leafletDirective, differs, zone) {
this.differs = differs;
this.zone = zone;
this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
this.layersDiffer = this.differs.find([]).create();
}
ngDoCheck() {
this.updateLayers();
}
ngOnInit() {
// Init the map
this.leafletDirective.init();
// Update layers once the map is ready
this.updateLayers();
}
ngOnDestroy() {
this.layers = [];
}
/**
* Update the state of the layers.
* We use an iterable differ to synchronize the map layers with the state of the bound layers array.
* This is important because it allows us to react to changes to the contents of the array as well
* as changes to the actual array instance.
*/
updateLayers() {
const map = this.leafletDirective.getMap();
if (null != map && null != this.layersDiffer) {
const changes = this.layersDiffer.diff(this.layersValue);
if (null != changes) {
// Run outside angular to ensure layer events don't trigger change detection
this.zone.runOutsideAngular(() => {
changes.forEachRemovedItem((c) => {
map.removeLayer(c.item);
});
changes.forEachAddedItem((c) => {
map.addLayer(c.item);
});
});
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LeafletLayersDirective, deps: [{ token: i1.LeafletDirective }, { token: i0.IterableDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: LeafletLayersDirective, selector: "[leafletLayers]", inputs: { layers: ["leafletLayers", "layers"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LeafletLayersDirective, decorators: [{
type: Directive,
args: [{
selector: '[leafletLayers]'
}]
}], ctorParameters: () => [{ type: i1.LeafletDirective }, { type: i0.IterableDiffers }, { type: i0.NgZone }], propDecorators: { layers: [{
type: Input,
args: ['leafletLayers']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVhZmxldC1sYXllcnMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxlYWZsZXQvc3JjL2xpYi9sYXllcnMvbGVhZmxldC1sYXllcnMuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVcsS0FBSyxFQUE4RCxNQUFNLGVBQWUsQ0FBQztBQUt0SCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQzs7O0FBRzVFOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBSUgsTUFBTSxPQUFPLHNCQUFzQjtJQVNsQyxxQkFBcUI7SUFDckIsSUFDSSxNQUFNLENBQUMsQ0FBVTtRQUNwQixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztRQUVyQiwwREFBMEQ7UUFDMUQsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxJQUFJLE1BQU07UUFDVCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDekIsQ0FBQztJQUtELFlBQVksZ0JBQWtDLEVBQVUsT0FBd0IsRUFBVSxJQUFZO1FBQTlDLFlBQU8sR0FBUCxPQUFPLENBQWlCO1FBQVUsU0FBSSxHQUFKLElBQUksQ0FBUTtRQUNyRyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSx1QkFBdUIsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ3RFLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsTUFBTSxFQUFTLENBQUM7SUFDM0QsQ0FBQztJQUVELFNBQVM7UUFDUixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFFBQVE7UUFFUCxlQUFlO1FBQ2YsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksRUFBRSxDQUFDO1FBRTdCLHNDQUFzQztRQUN0QyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFFckIsQ0FBQztJQUVELFdBQVc7UUFDVixJQUFJLENBQUMsTUFBTSxHQUFHLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSyxZQUFZO1FBRW5CLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUUzQyxJQUFJLElBQUksSUFBSSxHQUFHLElBQUksSUFBSSxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFFN0MsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ3pELElBQUksSUFBSSxJQUFJLE9BQU8sRUFBRTtnQkFFcEIsNEVBQTRFO2dCQUM1RSxJQUFJLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRTtvQkFFaEMsT0FBTyxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7d0JBQ2hDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDO29CQUN6QixDQUFDLENBQUMsQ0FBQztvQkFDSCxPQUFPLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTt3QkFDOUIsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7b0JBQ3RCLENBQUMsQ0FBQyxDQUFDO2dCQUVKLENBQUMsQ0FBQyxDQUFDO2FBRUg7U0FFRDtJQUVGLENBQUM7OEdBOUVXLHNCQUFzQjtrR0FBdEIsc0JBQXNCOzsyRkFBdEIsc0JBQXNCO2tCQUhsQyxTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxpQkFBaUI7aUJBQzNCO3dJQVlJLE1BQU07c0JBRFQsS0FBSzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBEb0NoZWNrLCBJbnB1dCwgSXRlcmFibGVEaWZmZXIsIEl0ZXJhYmxlRGlmZmVycywgTmdab25lLCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBMYXllcn0gZnJvbSAnbGVhZmxldCc7XG5cbmltcG9ydCB7IExlYWZsZXREaXJlY3RpdmUgfSBmcm9tICcuLi9jb3JlL2xlYWZsZXQuZGlyZWN0aXZlJztcbmltcG9ydCB7IExlYWZsZXREaXJlY3RpdmVXcmFwcGVyIH0gZnJvbSAnLi4vY29yZS9sZWFmbGV0LmRpcmVjdGl2ZS53cmFwcGVyJztcblxuXG4vKipcbiAqIExheWVycyBkaXJlY3RpdmVcbiAqXG4gKiBUaGlzIGRpcmVjdGl2ZSBpcyB1c2VkIHRvIGRpcmVjdGx5IGNvbnRyb2wgbWFwIGxheWVycy4gQXMgY2hhbmdlcyBhcmUgbWFkZSB0byB0aGUgaW5wdXQgYXJyYXkgb2ZcbiAqIGxheWVycywgdGhlIG1hcCBpcyBzeW5jaGVkIHRvIHRoZSBhcnJheS4gQXMgbGF5ZXJzIGFyZSBhZGRlZCBvciByZW1vdmVkIGZyb20gdGhlIGlucHV0IGFycmF5LCB0aGV5XG4gKiBhcmUgYWxzbyBhZGRlZCBvciByZW1vdmVkIGZyb20gdGhlIG1hcC4gVGhlIGlucHV0IGFycmF5IGlzIHRyZWF0ZWQgYXMgaW1tdXRhYmxlLiBUbyBkZXRlY3QgY2hhbmdlcyxcbiAqIHlvdSBtdXN0IGNoYW5nZSB0aGUgYXJyYXkgaW5zdGFuY2UuXG4gKlxuICogSW1wb3J0YW50IE5vdGU6IFRoZSBpbnB1dCBsYXllcnMgYXJyYXkgaXMgYXNzdW1lZCB0byBiZSBpbW11dGFibGUuIFRoaXMgbWVhbnMgeW91IG5lZWQgdG8gdXNlIGFuXG4gKiBpbW11dGFibGUgYXJyYXkgaW1wbGVtZW50YXRpb24gb3IgY3JlYXRlIGEgbmV3IGNvcHkgb2YgeW91ciBhcnJheSB3aGVuIHlvdSBtYWtlIGNoYW5nZXMsIG90aGVyd2lzZVxuICogdGhpcyBkaXJlY3RpdmUgd29uJ3QgZGV0ZWN0IHRoZSBjaGFuZ2UuIFRoaXMgaXMgYnkgZGVzaWduLiBJdCdzIGZvciBwZXJmb3JtYW5jZSByZWFzb25zLiBDaGFuZ2VcbiAqIGRldGVjdGlvbiBvZiBtdXRhYmxlIGFycmF5cyByZXF1aXJlcyBkaWZmaW5nIHRoZSBzdGF0ZSBvZiB0aGUgYXJyYXkgb24gZXZlcnkgRG9DaGVjayBjeWNsZSwgd2hpY2hcbiAqIGlzIGV4dHJlbWVseSBleHBlbnNpdmUgZnJvbSBhIHRpbWUgY29tcGxleGl0eSBwZXJzcGVjdGl2ZS5cbiAqXG4gKi9cbkBEaXJlY3RpdmUoe1xuXHRzZWxlY3RvcjogJ1tsZWFmbGV0TGF5ZXJzXSdcbn0pXG5leHBvcnQgY2xhc3MgTGVhZmxldExheWVyc0RpcmVjdGl2ZVxuXHRpbXBsZW1lbnRzIERvQ2hlY2ssIE9uRGVzdHJveSwgT25Jbml0IHtcblxuXHQvLyBBcnJheSBvZiBjb25maWd1cmVkIGxheWVyc1xuXHRsYXllcnNWYWx1ZTogTGF5ZXJbXTtcblxuXHQvLyBEaWZmZXIgdG8gZG8gY2hhbmdlIGRldGVjdGlvbiBvbiB0aGUgYXJyYXlcblx0bGF5ZXJzRGlmZmVyOiBJdGVyYWJsZURpZmZlcjxMYXllcj47XG5cblx0Ly8gU2V0L2dldCB0aGUgbGF5ZXJzXG5cdEBJbnB1dCgnbGVhZmxldExheWVycycpXG5cdHNldCBsYXllcnModjogTGF5ZXJbXSkge1xuXHRcdHRoaXMubGF5ZXJzVmFsdWUgPSB2O1xuXG5cdFx0Ly8gTm93IHRoYXQgd2UgaGF2ZSBhIGRpZmZlciwgZG8gYW4gaW1tZWRpYXRlIGxheWVyIHVwZGF0ZVxuXHRcdHRoaXMudXBkYXRlTGF5ZXJzKCk7XG5cdH1cblx0Z2V0IGxheWVycygpOiBMYXllcltdIHtcblx0XHRyZXR1cm4gdGhpcy5sYXllcnNWYWx1ZTtcblx0fVxuXG5cdC8vIFdyYXBwZXIgZm9yIHRoZSBsZWFmbGV0IGRpcmVjdGl2ZSAobWFuYWdlcyB0aGUgcGFyZW50IGRpcmVjdGl2ZSlcblx0cHJpdmF0ZSBsZWFmbGV0RGlyZWN0aXZlOiBMZWFmbGV0RGlyZWN0aXZlV3JhcHBlcjtcblxuXHRjb25zdHJ1Y3RvcihsZWFmbGV0RGlyZWN0aXZlOiBMZWFmbGV0RGlyZWN0aXZlLCBwcml2YXRlIGRpZmZlcnM6IEl0ZXJhYmxlRGlmZmVycywgcHJpdmF0ZSB6b25lOiBOZ1pvbmUpIHtcblx0XHR0aGlzLmxlYWZsZXREaXJlY3RpdmUgPSBuZXcgTGVhZmxldERpcmVjdGl2ZVdyYXBwZXIobGVhZmxldERpcmVjdGl2ZSk7XG5cdFx0dGhpcy5sYXllcnNEaWZmZXIgPSB0aGlzLmRpZmZlcnMuZmluZChbXSkuY3JlYXRlPExheWVyPigpO1xuXHR9XG5cblx0bmdEb0NoZWNrKCkge1xuXHRcdHRoaXMudXBkYXRlTGF5ZXJzKCk7XG5cdH1cblxuXHRuZ09uSW5pdCgpIHtcblxuXHRcdC8vIEluaXQgdGhlIG1hcFxuXHRcdHRoaXMubGVhZmxldERpcmVjdGl2ZS5pbml0KCk7XG5cblx0XHQvLyBVcGRhdGUgbGF5ZXJzIG9uY2UgdGhlIG1hcCBpcyByZWFkeVxuXHRcdHRoaXMudXBkYXRlTGF5ZXJzKCk7XG5cblx0fVxuXG5cdG5nT25EZXN0cm95KCkge1xuXHRcdHRoaXMubGF5ZXJzID0gW107XG5cdH1cblxuXHQvKipcblx0ICogVXBkYXRlIHRoZSBzdGF0ZSBvZiB0aGUgbGF5ZXJzLlxuXHQgKiBXZSB1c2UgYW4gaXRlcmFibGUgZGlmZmVyIHRvIHN5bmNocm9uaXplIHRoZSBtYXAgbGF5ZXJzIHdpdGggdGhlIHN0YXRlIG9mIHRoZSBib3VuZCBsYXllcnMgYXJyYXkuXG5cdCAqIFRoaXMgaXMgaW1wb3J0YW50IGJlY2F1c2UgaXQgYWxsb3dzIHVzIHRvIHJlYWN0IHRvIGNoYW5nZXMgdG8gdGhlIGNvbnRlbnRzIG9mIHRoZSBhcnJheSBhcyB3ZWxsXG5cdCAqIGFzIGNoYW5nZXMgdG8gdGhlIGFjdHVhbCBhcnJheSBpbnN0YW5jZS5cblx0ICovXG5cdHByaXZhdGUgdXBkYXRlTGF5ZXJzKCkge1xuXG5cdFx0Y29uc3QgbWFwID0gdGhpcy5sZWFmbGV0RGlyZWN0aXZlLmdldE1hcCgpO1xuXG5cdFx0aWYgKG51bGwgIT0gbWFwICYmIG51bGwgIT0gdGhpcy5sYXllcnNEaWZmZXIpIHtcblxuXHRcdFx0Y29uc3QgY2hhbmdlcyA9IHRoaXMubGF5ZXJzRGlmZmVyLmRpZmYodGhpcy5sYXllcnNWYWx1ZSk7XG5cdFx0XHRpZiAobnVsbCAhPSBjaGFuZ2VzKSB7XG5cblx0XHRcdFx0Ly8gUnVuIG91dHNpZGUgYW5ndWxhciB0byBlbnN1cmUgbGF5ZXIgZXZlbnRzIGRvbid0IHRyaWdnZXIgY2hhbmdlIGRldGVjdGlvblxuXHRcdFx0XHR0aGlzLnpvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuXG5cdFx0XHRcdFx0Y2hhbmdlcy5mb3JFYWNoUmVtb3ZlZEl0ZW0oKGMpID0+IHtcblx0XHRcdFx0XHRcdG1hcC5yZW1vdmVMYXllcihjLml0ZW0pO1xuXHRcdFx0XHRcdH0pO1xuXHRcdFx0XHRcdGNoYW5nZXMuZm9yRWFjaEFkZGVkSXRlbSgoYykgPT4ge1xuXHRcdFx0XHRcdFx0bWFwLmFkZExheWVyKGMuaXRlbSk7XG5cdFx0XHRcdFx0fSk7XG5cblx0XHRcdFx0fSk7XG5cblx0XHRcdH1cblxuXHRcdH1cblxuXHR9XG5cbn1cbiJdfQ==