acdc-gis-utils
Version:
Requires following dependencies: <br/> "bootstrap": "^4.4.1" or "@angular/material": "^8.0.0" <br/> "leaflet": "^1.6.0", <br/> "terraformer": "^1.0.10", <br/> "terraformer-wkt-parser": "^1.2.1"
517 lines (509 loc) • 20.9 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, Component, forwardRef, ViewChild, Input, NgModule } from '@angular/core';
import { convert, parse } from 'terraformer-wkt-parser';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { latLng, map, tileLayer, Icon, marker } from 'leaflet';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var AcdcGisUtilsService = /** @class */ (function () {
function AcdcGisUtilsService() {
}
/**
* returns wkt string representation of passed geometry
* @param geometry (GeoJSON geometry or leaflet LatLng)
*/
/**
* returns wkt string representation of passed geometry
* @param {?} geometry (GeoJSON geometry or leaflet LatLng)
* @return {?}
*/
AcdcGisUtilsService.prototype.toWkt = /**
* returns wkt string representation of passed geometry
* @param {?} geometry (GeoJSON geometry or leaflet LatLng)
* @return {?}
*/
function (geometry) {
if (geometry && geometry.lat && geometry.lng) {
return "POINT(" + geometry.lng + " " + geometry.lat + ")";
}
if (geometry.type && geometry.coordinates) {
return convert(geometry);
}
return null;
};
/**
* return GeoJSON geometry
* @param wkt (wkt geometry string)
*/
/**
* return GeoJSON geometry
* @param {?} wkt (wkt geometry string)
* @return {?}
*/
AcdcGisUtilsService.prototype.fromWkt = /**
* return GeoJSON geometry
* @param {?} wkt (wkt geometry string)
* @return {?}
*/
function (wkt) {
/** @type {?} */
var geometry = parse(wkt);
return geometry;
};
AcdcGisUtilsService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
AcdcGisUtilsService.ctorParameters = function () { return []; };
/** @nocollapse */ AcdcGisUtilsService.ɵprov = ɵɵdefineInjectable({ factory: function AcdcGisUtilsService_Factory() { return new AcdcGisUtilsService(); }, token: AcdcGisUtilsService, providedIn: "root" });
return AcdcGisUtilsService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var AcdcGisUtilsComponent = /** @class */ (function () {
function AcdcGisUtilsComponent() {
}
/**
* @return {?}
*/
AcdcGisUtilsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
AcdcGisUtilsComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-acdc-gis-utils',
template: "\n <p>\n acdc-gis-utils works!\n </p>\n "
}] }
];
/** @nocollapse */
AcdcGisUtilsComponent.ctorParameters = function () { return []; };
return AcdcGisUtilsComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var LocationPickerInputComponent = /** @class */ (function () {
function LocationPickerInputComponent(acdcGisUtilsService) {
this.acdcGisUtilsService = acdcGisUtilsService;
this.mapHeight = '200px';
this.mapWidth = '100%';
this.configs = {
showMap: true,
map: null,
expandOnInputClick: false
};
this.propagateChange = function (_) { };
}
Object.defineProperty(LocationPickerInputComponent.prototype, "defaultShowMap", {
get: /**
* @return {?}
*/
function () {
return this._defaultShowMap;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._defaultShowMap = value;
this.configs.showMap = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LocationPickerInputComponent.prototype, "locationValue", {
get: /**
* @return {?}
*/
function () {
return this._locationValue;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._locationValue = value;
this.propagateChange(this._locationValue);
if (value) {
/** @type {?} */
var center = this.acdcGisUtilsService.fromWkt(this.locationValue);
/** @type {?} */
var latlng = latLng(center['coordinates'][1], center['coordinates'][0]);
this.setMapView(latlng);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
LocationPickerInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.configs.showMap = this.defaultShowMap;
this.configs.expandOnInputClick = this.expandOnInputClick;
this.initMap();
if (this.map) {
setTimeout(function () {
_this.map.invalidateSize(false);
}, 100);
this.configs.map = this.map;
}
};
/**
* initialize map, set initial zoom, add osm layer, call map locate
*/
/**
* initialize map, set initial zoom, add osm layer, call map locate
* @return {?}
*/
LocationPickerInputComponent.prototype.initMap = /**
* initialize map, set initial zoom, add osm layer, call map locate
* @return {?}
*/
function () {
/** @type {?} */
var initialLatLng;
if (this.initialLongitude && this.initialLatitude) {
initialLatLng = latLng(this.initialLatitude, this.initialLongitude);
}
else {
initialLatLng = latLng(0, 0);
}
/** @type {?} */
var initialZoomLoc;
if (this.initialZoom && this.initialZoom > 0 && this.initialZoom < 23) {
initialZoomLoc = this.initialZoom;
}
else {
initialZoomLoc = 1;
}
this.map = map(this.leafletMapDivRef.nativeElement, {
drawControl: false
}).setView(initialLatLng, initialZoomLoc);
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
this.initMapLocate();
};
/**
* start listening to click events for choosing location
* @return {?}
*/
LocationPickerInputComponent.prototype.initMapLocate = /**
* start listening to click events for choosing location
* @return {?}
*/
function () {
var _this = this;
this.map.on('click', function (event) {
if (!_this.readonly) {
/** @type {?} */
var centerWkt = _this.acdcGisUtilsService.toWkt(event.latlng);
_this._locationValue = centerWkt;
_this.propagateChange(_this._locationValue);
_this.setMapView(event.latlng);
if (_this.closeOnChoose) {
setTimeout(function () {
_this.configs.showMap = false;
}, 500);
}
}
});
};
/**
* unregister listening click event
* @return {?}
*/
LocationPickerInputComponent.prototype.offMapLocate = /**
* unregister listening click event
* @return {?}
*/
function () {
this.map.off('click');
};
/**
* input field trigger (show/hide map)
*/
/**
* input field trigger (show/hide map)
* @param {?} props
* @return {?}
*/
LocationPickerInputComponent.prototype.onChooseLocation = /**
* input field trigger (show/hide map)
* @param {?} props
* @return {?}
*/
function (props) {
props['configs'].showMap = !props['configs'].showMap;
setTimeout(function () {
props['configs'].map.invalidateSize(false);
});
};
/**
* input field click event handler
*/
/**
* input field click event handler
* @param {?} props
* @return {?}
*/
LocationPickerInputComponent.prototype.onInputClick = /**
* input field click event handler
* @param {?} props
* @return {?}
*/
function (props) {
if (props['configs'].expandOnInputClick) {
props['configs'].showMap = true;
setTimeout(function () {
props['configs'].map.invalidateSize(false);
});
}
};
/**
* close map button click handler
*/
/**
* close map button click handler
* @return {?}
*/
LocationPickerInputComponent.prototype.onCloseMapBtnClick = /**
* close map button click handler
* @return {?}
*/
function () {
var _this = this;
this.configs.showMap = false;
setTimeout(function () {
_this.map.invalidateSize(false);
});
};
/**
* form field required functions
* @param obj
*/
/**
* form field required functions
* @param {?} obj
* @return {?}
*/
LocationPickerInputComponent.prototype.writeValue = /**
* form field required functions
* @param {?} obj
* @return {?}
*/
function (obj) {
this.locationValue = obj;
};
/**
* @param {?} fn
* @return {?}
*/
LocationPickerInputComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
LocationPickerInputComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
};
/**
* @param {?} isDisabled
* @return {?}
*/
LocationPickerInputComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
};
/**
* zoom map to passed location and pin location with marker
* @param {?} latlng
* @return {?}
*/
LocationPickerInputComponent.prototype.setMapView = /**
* zoom map to passed location and pin location with marker
* @param {?} latlng
* @return {?}
*/
function (latlng) {
this.map.flyTo(latlng, this.map.getZoom(), {
pan: {
animate: true,
duration: 3
},
zoom: {
animate: true,
duration: 3
}
});
this.locateMarker(latlng);
};
/**
* locate marker at passed location
* @param {?} latlng
* @return {?}
*/
LocationPickerInputComponent.prototype.locateMarker = /**
* locate marker at passed location
* @param {?} latlng
* @return {?}
*/
function (latlng) {
if (this.marker) {
this.marker.setLatLng(latlng);
}
else {
/** @type {?} */
var defaultMarker = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=';
/** @type {?} */
var defaultMarkerShadow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAQAAAACach9AAACMUlEQVR4Ae3ShY7jQBAE0Aoz/f9/HTMzhg1zrdKUrJbdx+Kd2nD8VNudfsL/Th///dyQN2TH6f3y/BGpC379rV+S+qqetBOxImNQXL8JCAr2V4iMQXHGNJxeCfZXhSRBcQMfvkOWUdtfzlLgAENmZDcmo2TVmt8OSM2eXxBp3DjHSMFutqS7SbmemzBiR+xpKCNUIRkdkkYxhAkyGoBvyQFEJEefwSmmvBfJuJ6aKqKWnAkvGZOaZXTUgFqYULWNSHUckZuR1HIIimUExutRxwzOLROIG4vKmCKQt364mIlhSyzAf1m9lHZHJZrlAOMMztRRiKimp/rpdJDc9Awry5xTZCte7FHtuS8wJgeYGrex28xNTd086Dik7vUMscQOa8y4DoGtCCSkAKlNwpgNtphjrC6MIHUkR6YWxxs6Sc5xqn222mmCRFzIt8lEdKx+ikCtg91qS2WpwVfBelJCiQJwvzixfI9cxZQWgiSJelKnwBElKYtDOb2MFbhmUigbReQBV0Cg4+qMXSxXSyGUn4UbF8l+7qdSGnTC0XLCmahIgUHLhLOhpVCtw4CzYXvLQWQbJNmxoCsOKAxSgBJno75avolkRw8iIAFcsdc02e9iyCd8tHwmeSSoKTowIgvscSGZUOA7PuCN5b2BX9mQM7S0wYhMNU74zgsPBj3HU7wguAfnxxjFQGBE6pwN+GjME9zHY7zGp8wVxMShYX9NXvEWD3HbwJf4giO4CFIQxXScH1/TM+04kkBiAAAAAElFTkSuQmCC';
/** @type {?} */
var defaultIcon = new Icon({
iconUrl: defaultMarker,
iconAnchor: [12, 41],
shadowUrl: defaultMarkerShadow,
});
this.marker = marker(latlng, { icon: defaultIcon }).addTo(this.map);
}
};
/**
* @return {?}
*/
LocationPickerInputComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.offMapLocate();
};
LocationPickerInputComponent.decorators = [
{ type: Component, args: [{
selector: 'location-picker-input',
template: "\n<!-- leaflet map -->\n<div [hidden]=\"!configs.showMap\" #leafletMapDivRef [style.width]=\"mapWidth\" [style.height]=\"mapHeight\">\n <div class=\"app-close-map-button\" *ngIf=\"showCloseBtn\" (click)=\"onCloseMapBtnClick();$event.stopPropagation();\">x</div>\n</div>\n\n<!-- container for input template -->\n<ng-container *ngTemplateOutlet=\"inputFIeldTpl || defaultInputFIeldTpl; context: {\n props: {locationValue: locationValue, configs: configs}, \n onChooseLocation: onChooseLocation,\n propagateChange: propagateChange,\n onInputClick: onInputClick\n}\"></ng-container>\n\n<!-- default template -->\n<ng-template #defaultInputFIeldTpl let-onInputClick=\"onInputClick\" let-props=\"props\" let-onChooseLocation=\"onChooseLocation\">\n <div class=\"input-group\">\n <input type=\"text\" class=\"form-control\" name=\"locationValue\" (click)=\"onInputClick(props)\" [(ngModel)]=\"props.locationValue\" placeholder=\"Click on map to choose location...\" aria-label=\"Location\" readonly>\n <div class=\"input-group-append\">\n <span class=\"input-group-text\" style=\"cursor: pointer;\" (click)=\"onChooseLocation(props)\">\n <svg aria-hidden=\"true\" class=\"acdc-svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M505.04 442.66l-99.71-99.69c-4.5-4.5-10.6-7-17-7h-16.3c27.6-35.3 44-79.69 44-127.99C416.03 93.09 322.92 0 208.02 0S0 93.09 0 207.98s93.11 207.98 208.02 207.98c48.3 0 92.71-16.4 128.01-44v16.3c0 6.4 2.5 12.5 7 17l99.71 99.69c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.59.1-33.99zm-297.02-90.7c-79.54 0-144-64.34-144-143.98 0-79.53 64.35-143.98 144-143.98 79.54 0 144 64.34 144 143.98 0 79.53-64.35 143.98-144 143.98zm.02-239.96c-40.78 0-73.84 33.05-73.84 73.83 0 32.96 48.26 93.05 66.75 114.86a9.24 9.24 0 0 0 14.18 0c18.49-21.81 66.75-81.89 66.75-114.86 0-40.78-33.06-73.83-73.84-73.83zm0 96c-13.26 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z\"></path></svg>\n </span>\n </div>\n </div>\n</ng-template>",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return LocationPickerInputComponent; }),
multi: true
}
],
styles: [":host ::ng-deep .acdc-svg{fill:#fff;width:16px;height:16px}.app-close-map-button{width:30px;height:30px;position:absolute;right:5px;top:5px;color:gray;z-index:1001;font-size:20px;background:0 0;font-weight:700;text-align:center;cursor:pointer;vertical-align:middle}"]
}] }
];
/** @nocollapse */
LocationPickerInputComponent.ctorParameters = function () { return [
{ type: AcdcGisUtilsService }
]; };
LocationPickerInputComponent.propDecorators = {
leafletMapDivRef: [{ type: ViewChild, args: ["leafletMapDivRef", { static: true },] }],
initialZoom: [{ type: Input }],
initialLongitude: [{ type: Input }],
initialLatitude: [{ type: Input }],
closeOnChoose: [{ type: Input }],
readonly: [{ type: Input }],
expandOnInputClick: [{ type: Input }],
showCloseBtn: [{ type: Input }],
defaultShowMap: [{ type: Input }],
mapHeight: [{ type: Input }],
mapWidth: [{ type: Input }],
_locationValue: [{ type: Input }],
inputFIeldTpl: [{ type: Input }]
};
return LocationPickerInputComponent;
}());
if (false) {
/** @type {?} */
LocationPickerInputComponent.prototype.leafletMapDivRef;
/** @type {?} */
LocationPickerInputComponent.prototype.map;
/** @type {?} */
LocationPickerInputComponent.prototype.marker;
/** @type {?} */
LocationPickerInputComponent.prototype.initialZoom;
/** @type {?} */
LocationPickerInputComponent.prototype.initialLongitude;
/** @type {?} */
LocationPickerInputComponent.prototype.initialLatitude;
/** @type {?} */
LocationPickerInputComponent.prototype.closeOnChoose;
/** @type {?} */
LocationPickerInputComponent.prototype.readonly;
/** @type {?} */
LocationPickerInputComponent.prototype.expandOnInputClick;
/** @type {?} */
LocationPickerInputComponent.prototype.showCloseBtn;
/** @type {?} */
LocationPickerInputComponent.prototype._defaultShowMap;
/** @type {?} */
LocationPickerInputComponent.prototype.mapHeight;
/** @type {?} */
LocationPickerInputComponent.prototype.mapWidth;
/** @type {?} */
LocationPickerInputComponent.prototype._locationValue;
/** @type {?} */
LocationPickerInputComponent.prototype.configs;
/** @type {?} */
LocationPickerInputComponent.prototype.inputFIeldTpl;
/** @type {?} */
LocationPickerInputComponent.prototype.propagateChange;
/** @type {?} */
LocationPickerInputComponent.prototype.acdcGisUtilsService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var AcdcGisUtilsModule = /** @class */ (function () {
function AcdcGisUtilsModule() {
}
AcdcGisUtilsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [AcdcGisUtilsComponent, LocationPickerInputComponent],
exports: [
AcdcGisUtilsComponent,
LocationPickerInputComponent
]
},] }
];
return AcdcGisUtilsModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
export { AcdcGisUtilsComponent, AcdcGisUtilsModule, AcdcGisUtilsService, LocationPickerInputComponent };
//# sourceMappingURL=acdc-gis-utils.js.map