FarmMaps/FarmMapsLib
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

AW-6526 update angular 21
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
Peter (extern)
2026-01-19 12:19:09 +01:00
parent c35114b2d3
commit 9cc581dd3d
102 changed files with 3287 additions and 4023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package.json
View File

@@ -25,25 +25,25 @@
"@farmmaps/common-map3d": "file:dist/common-map3d",
"@farmmaps/ng-openlayers": "file:dist/ng-openlayers",
"@microsoft/signalr": "^3.1.16",
"@ng-bootstrap/ng-bootstrap": "^19.0.0",
"@ngrx/effects": "^18.0.2",
"@ngrx/router-store": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@ng-bootstrap/ng-bootstrap": "^21.0.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"@popperjs/core": "^2.11.8",
"angular-oauth2-oidc": "^17.0.2",
"angular-oauth2-oidc": "20.0.2",
"assert": "^2.0.0",
"bootstrap": "^5.3.3",
"bootstrap": "5.3.8",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"cesium": "^1.97.0",
"core-js": "^2.6.12",
"https-browserify": "^1.0.0",
"moment": "^2.29.4",
"ngrx-store-localstorage": "^18.0.0",
"ngx-avatars": "^1.8.0",
"ngrx-store-localstorage": "21.0.1",
"ngx-avatars": "^1.10.0",
"ngx-clipboard": "^16.0.0",
"ngx-image-cropper": "^7.0.0",
"ngx-uploadx": "^6.2.0",
"ngx-uploadx": "7.0.1",
"ol": "^8.2.0",
"olcs": "^2.13.1",
"resumablejs": "^1.1.0",
@@ -61,7 +61,7 @@
"@rollup/rollup-linux-x64-gnu": "^4.21.2"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^19.0.0",
"@angular-builders/custom-webpack": "^21.0.3",
"@angular-devkit/build-angular": "21.1.0",
"@angular/cli": "21.1.0",
"@angular/compiler-cli": "21.1.0",

138
projects/common-map/package-lock.json generated
View File

@@ -11,11 +11,11 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "^18.2.3",
"@ngrx/effects": "^18.0.2",
"@ngrx/router-store": "^18.0.2",
"@ngrx/store": "^18.0.2",
"ngrx-store-localstorage": "^18",
"@angular/core": "21.1.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"ngrx-store-localstorage": "20.1.0",
"tassign": "^1.0.0"
}
},
@@ -36,52 +36,64 @@
"extraneous": true
},
"node_modules/@angular/common": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
"integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
"integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/core": "18.2.3",
"@angular/core": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/core": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
"integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
"integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/compiler": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0",
"zone.js": "~0.14.10"
"zone.js": "~0.15.0 || ~0.16.0"
},
"peerDependenciesMeta": {
"@angular/compiler": {
"optional": true
},
"zone.js": {
"optional": true
}
}
},
"node_modules/@angular/platform-browser": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.3.tgz",
"integrity": "sha512-M2ob4zN7tAcL2mx7U6KnZNqNFPFl9MlPBE0FrjQjIzAjU0wSYPIJXmaPu9aMUp9niyo+He5iX98I+URi2Yc99g==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.0.tgz",
"integrity": "sha512-Drkal25x+OuRQosAE/cL4uM5WDmgFehanCpsjQ1jGp6Rxoad6Q5Do1uQAE3qgMKHL1aqCPZ+uWzcVVG+Bn1ddg==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/animations": "18.2.3",
"@angular/common": "18.2.3",
"@angular/core": "18.2.3"
"@angular/animations": "21.1.0",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0"
},
"peerDependenciesMeta": {
"@angular/animations": {
@@ -90,76 +102,67 @@
}
},
"node_modules/@angular/router": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.3.tgz",
"integrity": "sha512-fvD9eSDIiIbeYoUokoWkXzu7/ZaxlzKPUHFqX1JuKuH5ciQDeT/d7lp4mj31Bxammhohzi3+z12THJYsCkj/iQ==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.0.tgz",
"integrity": "sha512-Sneu0ePuH+bf8ZslRX3iQk1iLziindLskdTeHV1ZCrXdT0ZScsZyI/gjxQKBtsIU9692D2DnFQRLGnzTBYVGVw==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/common": "18.2.3",
"@angular/core": "18.2.3",
"@angular/platform-browser": "18.2.3",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"@angular/platform-browser": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@ngrx/effects": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-18.0.2.tgz",
"integrity": "sha512-YojXcOD9Lsq4kl2HCjENccyUM/mOlgBdtddsg9j/ojzSUgu3ZuBVKLN3atrL2TJYkbMX1MN0RzafSkL3TPGFIA==",
"version": "21.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-21.0.1.tgz",
"integrity": "sha512-hSdpToAiSYa5FJ/CAygQHpnCaF2S1HO7q/57ob3XvNTWmkofa0VqI/IIe4W57bojh2YOWCJ91SCn3kAjymaV3g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@ngrx/operators": "18.0.1",
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "^18.0.0",
"@ngrx/store": "18.0.2",
"@angular/core": "^21.0.0",
"@ngrx/store": "21.0.1",
"rxjs": "^6.5.3 || ^7.5.0"
}
},
"node_modules/@ngrx/operators": {
"version": "18.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/operators/-/operators-18.0.1.tgz",
"integrity": "sha512-M+QMrHNKgcuiLaRGZxJ4aQi5/OCRfKC4+T/63dsHyLFZ53/FFpF6a/ytSO1Q+tzOplZ5o99S+i8FVaZqNQ3LmQ==",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@ngrx/router-store": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-18.0.2.tgz",
"integrity": "sha512-jUrQ/uJJ53x8O1XbN2YxH2GpRREZlwS5gRxlCoc4fWL4Us/uS1/K6+QfRmKBPtpTKBIixqsOb+dIUV5iwBrivA==",
"version": "21.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-21.0.1.tgz",
"integrity": "sha512-hacH8ciwCRMLg7p7bThslYn564GOyS5LPf9c8cX4FTyOH+iJM32eJd2Lt64cA62vN6ruofV/IM2vB09nCkxHzg==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/router": "^18.0.0",
"@ngrx/store": "18.0.2",
"@angular/common": "^21.0.0",
"@angular/core": "^21.0.0",
"@angular/router": "^21.0.0",
"@ngrx/store": "21.0.1",
"rxjs": "^6.5.3 || ^7.5.0"
}
},
"node_modules/@ngrx/store": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@ngrx/store/-/store-18.0.2.tgz",
"integrity": "sha512-ajwv0+njsO4vzArp9esnFvs1wyUb1U1W8E8LSCKrcW2hWWo9o1Pezj+JRsdQwatxHfrrPFuTDyajsl6GQM/JSA==",
"version": "21.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/store/-/store-21.0.1.tgz",
"integrity": "sha512-2hGnw/c5o8nmKzyx7TrUUM7FXjE2zqjX0EF+wLbw9Oy/L+VdCmx+ZI1BFjuAR4B8PKEWHG2KSbOM13SMNkpZiA==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "^18.0.0",
"@angular/core": "^21.0.0",
"rxjs": "^6.5.3 || ^7.5.0"
}
},
@@ -173,18 +176,19 @@
}
},
"node_modules/ngrx-store-localstorage": {
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/ngrx-store-localstorage/-/ngrx-store-localstorage-18.0.0.tgz",
"integrity": "sha512-WoDePvMWiWF9LQHe+dTqbpm8lxoKCPoIvA0/1enIPTmdLQsOpdDKhMSD5YgwuqDusNfEik3QslProTFGyXZwtw==",
"version": "20.1.0",
"resolved": "https://registry.npmjs.org/ngrx-store-localstorage/-/ngrx-store-localstorage-20.1.0.tgz",
"integrity": "sha512-/5+i5qTxZdE8Q5qdSmj7+9JvriAnHwW7RsXzh1rrQ/UHA9vf12q6mJ6wYTTehUO4Qcl2t/K5MRkooN2eG2ZEvw==",
"license": "MIT",
"peer": true,
"dependencies": {
"deepmerge": "^4.2.2",
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "^18.0.1",
"@angular/core": "^18.0.1",
"@ngrx/store": "^18.0.0"
"@angular/common": ">=20.0.0",
"@angular/core": ">=20.0.0",
"@ngrx/store": ">=20.0.0"
}
},
"node_modules/rxjs": {
@@ -206,12 +210,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
},
"node_modules/zone.js": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
"integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
"peer": true
}
}
}

10
projects/common-map/package.json
View File

@@ -8,11 +8,11 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "19.2.18",
"ngrx-store-localstorage": "^19.0.0",
"@ngrx/effects": "^19.0.0",
"@ngrx/router-store": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@angular/core": "21.1.0",
"ngrx-store-localstorage": "20.1.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"tassign": "^1.0.0"
}
}

2
projects/common-map/src/fm-map/components/map-search/map-search.component.scss
View File

@@ -14,7 +14,7 @@ div.map-search {
}
.disabled {
color:lighten(#000000,80%);
color: adjust(#000000,80%);
}
:host ::ng-deep ngb-typeahead-window.dropdown-menu {

3
projects/common-map/src/fm-map/components/map/map.component.html
View File

@@ -22,7 +22,8 @@
styles:styles$|async,
selectedFeature:selectedFeature$|async,
fullscreen:fullscreen$|async,
showDataLayerSlide:showDataLayerSlide$|async
showDataLayerSlide:showDataLayerSlide$|async,
menuVisible:menuVisible$|async
}; as state) {
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
<div>

48
projects/common-map3d/package-lock.json generated
View File

@@ -11,8 +11,8 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "^18.2.3",
"@angular/core": "^18.2.3",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"cesium": "^1.97.0",
"ol-cesium": ">=2.13.0"
}
@@ -34,35 +34,46 @@
"extraneous": true
},
"node_modules/@angular/common": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
"integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
"integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/core": "18.2.3",
"@angular/core": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/core": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
"integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
"integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/compiler": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0",
"zone.js": "~0.14.10"
"zone.js": "~0.15.0 || ~0.16.0"
},
"peerDependenciesMeta": {
"@angular/compiler": {
"optional": true
},
"zone.js": {
"optional": true
}
}
},
"node_modules/@cesium/engine": {
@@ -498,9 +509,10 @@
}
},
"node_modules/rxjs": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"tslib": "^2.1.0"
@@ -549,12 +561,6 @@
"integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ==",
"peer": true
},
"node_modules/zone.js": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
"integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
"peer": true
},
"node_modules/zstddec": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",

4
projects/common-map3d/package.json
View File

@@ -8,8 +8,8 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "19.2.18",
"@angular/core": "19.2.18",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"cesium": "^1.97.0",
"ol-cesium": ">=2.13.0"
}

3227
projects/common/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

43
projects/common/package.json
View File

@@ -1,25 +1,42 @@
{
"name": "@farmmaps/common",
"version": "2.1.0",
"version": "21.1.0",
"publishConfig": {
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
},
"peerDependencies": {
"@ng-bootstrap/ng-bootstrap": "^19.0.0",
"@angular/common": "19.2.18",
"@angular/core": "19.2.18",
"@angular/forms": "19.2.18",
"@ngrx/effects": "^19.0.0",
"@ngrx/router-store": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@ng-bootstrap/ng-bootstrap": "^20.0.0",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"@angular/forms": "21.1.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"tassign": "^1.0.0",
"bootstrap": "^5.3.3",
"@microsoft/signalr": "^3.1.16",
"@microsoft/signalr": "10.0.0",
"ngx-uploadx": "^6.2.0",
"angular-oauth2-oidc": "^17.0.2",
"angular-oauth2-oidc": "20.0.2",
"moment": "^2.29.4",
"ngx-avatars": "^1.8.0",
"ngx-image-cropper": "^7.0.0",
"ngx-avatars": "1.10.1",
"ngx-image-cropper": "9.1.6",
"ngx-clipboard": "^16.0.0"
},
"overrides": {
"ngx-avatars": {
"@angular/common": "$@angular/common",
"@angular/core": "$@angular/core"
},
"ngx-clipboard": {
"@angular/core": "$@angular/core"
},
"ngx-image-cropper": {
"@angular/common": "$@angular/common",
"@angular/core": "$@angular/core"
}
,
"ngx-uploadx": {
"@angular/core": "$@angular/core"
}
}
}
}

18
projects/common/src/fm/common.module.ts
View File

@@ -20,7 +20,7 @@ import { MODULE_NAME } from './module-name';
//components
import { AvatarModule } from 'ngx-avatars';
import { ImageCropperModule } from 'ngx-image-cropper';
import { ImageCropperComponent } from 'ngx-image-cropper';
import * as commonActions from './actions/app-common.actions';
import { AppMenuComponent } from './components/app-menu/app-menu.component';
import { AppComponent } from './components/app/app.component';
@@ -34,7 +34,6 @@ import { HasClaimDirective } from './components/has-claim/has-claim.directive';
import { HasPackageDirective } from './components/has-package/has-package.directive';
import { HasRoleDirective } from './components/has-role/has-role.directive';
import { HelpMenuComponent } from './components/help-menu/help-menu.component';
import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
import { ItemLinkComponent } from './components/item-link/item-link.component';
import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
@@ -43,6 +42,7 @@ import { NotificationMenuComponent } from './components/notification-menu/notifi
import { PackageExistsDirective } from './components/package-exists/package-exists.directive';
import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
import { SidePanelComponent } from './components/side-panel/side-panel.component';
import { TagInputComponent } from './components/tag-input/tag-input.component';
import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
@@ -75,12 +75,12 @@ import { SecureOAuthStorage } from './shared/secureOAuthStorage';
export const FM_COMMON_STARTPAGE = new InjectionToken<string>('fm-common-startpage');
export {
Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, commonActions,
commonReducers, EditImageModalComponent,
GradientComponent,
GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
IPackages, IQueryState, ISenMLItem, Item, ItemLinkComponent, ItemTask, ITypeaheadItem, IUrlType, IUser, MenuBackgroundComponent, NotFoundComponent,
NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation
Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, commonActions,
commonReducers, EditImageModalComponent,
GradientComponent,
GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
IPackages, IQueryState, ISenMLItem, Item, ItemLinkComponent, ItemTask, ITypeaheadItem, IUrlType, IUser, MenuBackgroundComponent, NotFoundComponent,
NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation
};
@NgModule({ declarations: [
@@ -151,6 +151,6 @@ export {
UploadxModule,
ClipboardModule,
AvatarModule,
ImageCropperModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
ImageCropperComponent], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class AppCommonModule {
}

2
projects/common/src/fm/components/app-menu/app-menu.component.html
View File

@@ -1,5 +1,5 @@
<div>
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
<span i18n-title title="Apps"><i class="fas fa-th" aria-hidden="true"></i></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
<router-outlet name="app-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>

10
projects/common/src/fm/components/app-menu/app-menu.component.ts
View File

@@ -1,9 +1,8 @@
import { Component, OnInit, Input } from '@angular/core';
import { IUser } from '../../models/user';
import {Store} from '@ngrx/store';
import * as appReducers from '../../reducers/app-common.reducer';
import { Component, Input, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as appActions from '../../actions/app-common.actions';
import { IUser } from '../../models/user';
import * as appReducers from '../../reducers/app-common.reducer';
@Component({
selector: 'fm-app-menu',
@@ -34,5 +33,4 @@ export class AppMenuComponent implements OnInit {
deActivateRoute() {
this.noContent=true;
}
}

4
projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss
View File

@@ -45,7 +45,7 @@ div.card-header span.fa {
.upload-file .progress-container .progress-bar {
display: block;
background-color: color("green");
background-color: green;
width: 0%;
height: 100%;
}
@@ -84,7 +84,7 @@ div.card-header span.fa {
}
.upload-file.done > div > span.fa-check {
color: color("green");
color: green;
width: 20px;
display: inline-block;
vertical-align: middle;

6
projects/ng-openlayers/.eslintrc.json
View File

@@ -10,7 +10,8 @@
],
"parserOptions": {
"project": [
"libs/ng-openlayers/tsconfig.*?.json"
"projects/ngx-openlayers/tsconfig.lib.json",
"projects/ngx-openlayers/tsconfig.spec.json"
],
"createDefaultProgram": true
},
@@ -41,7 +42,8 @@
"off",
"always"
],
"import/order": "off"
"import/order": "off",
"no-underscore-dangle": "off"
}
},
{

705
projects/ng-openlayers/CHANGELOG.md Normal file
View File

@@ -0,0 +1,705 @@
# Changelog
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
## [20.0.1](https://github.com/quentinlampin/ngx-openlayers/compare/20.0.0...20.0.1) (2026-01-13)
### Bug Fixes
* LayerImageComponent, LayerTileComponent, LayerVectorComponent and LayerVectorTileComponent inputs are not applied ([dd03fbb](https://github.com/quentinlampin/ngx-openlayers/commit/dd03fbb6f09ee93d3d90358fa5735c6a6ca4d1f3)), closes [#348](https://github.com/quentinlampin/ngx-openlayers/issues/348)
## [20.0.0](https://github.com/quentinlampin/ngx-openlayers/compare/19.1.3...20.0.0) (2025-12-18)
### ⚠ BREAKING CHANGES
* Angular 18 is no more supported
* ol peer dependency is now ~10.7.0
### build
* update to Angular 20 ([ce87117](https://github.com/quentinlampin/ngx-openlayers/commit/ce87117311c0eb6b5df95da0289a64392e0df8f3)), closes [#333](https://github.com/quentinlampin/ngx-openlayers/issues/333)
## [19.1.3](https://github.com/quentinlampin/ngx-openlayers/compare/19.1.2...19.1.3) (2025-11-06)
## [19.1.2](https://github.com/quentin-ol/ngx-openlayers/compare/19.1.1...19.1.2) (2025-11-06)
## [19.1.1](https://github.com/quentin-ol/ngx-openlayers/compare/19.1.0...19.1.1) (2025-11-06)
## [19.1.0](https://github.com/quentin-ol/ngx-openlayers/compare/19.0.0...19.1.0) (2025-11-06)
### Features
* **interaction:** snap interaction ([cd0e34e](https://github.com/quentin-ol/ngx-openlayers/commit/cd0e34ec345da3e1181fca7486bba3a18e43a766)), closes [#335](https://github.com/quentin-ol/ngx-openlayers/issues/335)
## [19.0.0](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.2...19.0.0) (2025-10-02)
### ⚠ BREAKING CHANGES
* Angular 17 is no more supported
### build
* update to Angular 19 ([83f06f8](https://github.com/quentin-ol/ngx-openlayers/commit/83f06f829672045454cb6c32b3c89e2cebc2a953)), closes [#326](https://github.com/quentin-ol/ngx-openlayers/issues/326)
## [18.0.2](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.1...18.0.2) (2025-06-23)
### Bug Fixes
* **layers:** add missing inputs ([a25a612](https://github.com/quentin-ol/ngx-openlayers/commit/a25a6122ec6eb2a44e5bb3d08ad20989c7991111)), closes [#318](https://github.com/quentin-ol/ngx-openlayers/issues/318)
## [18.0.1](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.0...18.0.1) (2025-06-17)
## [18.0.0](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.22...v18.0.0) (2025-06-17)
### ⚠ BREAKING CHANGES
* Angular 16 is no more supported
* `ol` peer dep is now `~10.5.0`
* see all breaking changes from `ol` `10.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v10.0.0.md)
* `ol` peer dep is now `~9.2.4`
* see all breaking changes from `ol` `9.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v9.0.0.md)
* Angular 15 is no more supported
* `ol` peer dep is now `8.2.0`
* see all breaking changes from `ol` `8.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#800)
* Angular 14 is no more supported
* `ol` peer dep is now `~7.5.2`
* see all breaking changes from `ol` `7.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#700)
* see all breaking changes from `ol` `7.1.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#710)
* see all breaking changes from `ol` `7.2.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#720)
* see all breaking changes from `ol` `7.5.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#750)
* `ol` peer dep is now `~6.15.1`
* `DrawInteractionComponent` : input `type` is now of type `Type`
* `SourceImageWMSComponent` : input `serverType` is now of type `ServerType`
* `OverlayComponent` : input `positioning` is now of type `Positioning`
* `SourceTileWMSComponent` : input `projection` is now of type `ProjectionLike` and input `serverType` is now of type `ServerType`
* `SourceTileWMTSComponent` : input `requestEncoding` is now of type `RequestEncoding`
* all components inputs of type `Element` or `Node` are now of type `HTMLElement`
* all `olChangeActive` and `propertyChange` outputs are now `EventEmitter<ObjectEvent>`
* `FormatMVTComponent` : input `featureClass` is now of type `FeatureClass`
* `DragAndDropInteractionComponent` : input `formatConstructors` is now of type `FeatureFormat[]`
* `LayerComponent` : `prerender` and `postrender` inputs functions should now manage events of type `RenderEvent`
* `SourceImageArcGISRestComponent` : `attributions` input is now of type `AttributionLike`
* `SourceTileWMTSComponent` : `tileGrid` input is now of type `WMTSTileGrid`
* `SourceUTFGridComponent` : `tileJSON` input is now of type `Config`
* `StyleCircleComponent` : `snapToPixel` and `atlasManager` have been removed
* `StyleIconComponent` : `img` input is now of type `HTMLImageElement | HTMLCanvasElement`
* `MapComponent` : `prerender` output has been removed, `precompose` output has been added. `olClick`, `dblClick`, `pointerDrag`, `pointerMove`, `singleClick` outputs are now of type `EventEmitter<MapBrowserEvent<UIEvent>>`
* `ViewComponent` : `changeZoom` output has been removed
* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
That means the existing code must be updated for polygons:
Old style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
New style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
This also allows to display polygon with holes, which is not possible with the current code.
* **openlayers:** Migration from `openlayers` package to `ol`
### build
* update to Angular 16 ([b3c6691](https://github.com/quentin-ol/ngx-openlayers/commit/b3c6691b88893a6509020ade9b9eee9664754a5a))
* update to Angular 17 ([5676ce3](https://github.com/quentin-ol/ngx-openlayers/commit/5676ce304c8260e4acbea9aaed1f9c72c0edb9ab))
* update to Angular 18 ([f2e5ed8](https://github.com/quentin-ol/ngx-openlayers/commit/f2e5ed8d6235ba95c874ea3fd4a934dbd2a0b87f))
### Features
* **cluster:** add wrapX option ([f3106e4](https://github.com/quentin-ol/ngx-openlayers/commit/f3106e4996537faa4b2823d786cdcc3339069025))
* **cluster:** update distance input ([6e448a8](https://github.com/quentin-ol/ngx-openlayers/commit/6e448a849c76ea3e6240754d6a1f7598b679116e))
* **demo:** add example of a cursor position ([eae0a1f](https://github.com/quentin-ol/ngx-openlayers/commit/eae0a1f80822c8bf0976b607a04a447f59697653))
* **demo:** add example of geojson feature : point, polygon, linestring ([43e5eb7](https://github.com/quentin-ol/ngx-openlayers/commit/43e5eb791de291ac1d030056af783dcc6bc0b16e))
* **demo:** add example of map position with longitude, latitude and zoom ([107e94c](https://github.com/quentin-ol/ngx-openlayers/commit/107e94c2180348f9b5bffa6ae53ad1f7d952042d))
* **demo:** add example to display geometry of a geojson file ([939499c](https://github.com/quentin-ol/ngx-openlayers/commit/939499c146ea6dffe30716cf0fdbdd7d0985e2fc))
* **demo:** example change color on hover or on select ([6f8d7f9](https://github.com/quentin-ol/ngx-openlayers/commit/6f8d7f990f48340e98ce57fee465286fddc79424))
* **demo:** example draw a polygon ([2bf558c](https://github.com/quentin-ol/ngx-openlayers/commit/2bf558c29c66bd5abe7d7df07482c279ba209735))
* **demo:** example modify polygon ([240e3dc](https://github.com/quentin-ol/ngx-openlayers/commit/240e3dc275c3f31fdb84add34561bdd9ed0c8eda))
* **demo:** example of marker with svg ([f37e5ef](https://github.com/quentin-ol/ngx-openlayers/commit/f37e5ef2538a977d590c97a05caa4c51e0e58f9e))
* **demo:** example of overlay ([af15282](https://github.com/quentin-ol/ngx-openlayers/commit/af15282117ae69395e4cc7deb56aa2d49f17dc22))
* **demo:** example of side by side ([8f2408e](https://github.com/quentin-ol/ngx-openlayers/commit/8f2408e9b3155cff79c3548a9ea3fab6368d495f))
* **demo:** example of swipe ([8bb64c5](https://github.com/quentin-ol/ngx-openlayers/commit/8bb64c5e3ed1c42581081b464ccbc96e8d834ff0))
* **geom:** add circle geometry ([#210](https://github.com/quentin-ol/ngx-openlayers/issues/210)) ([9ac6458](https://github.com/quentin-ol/ngx-openlayers/commit/9ac6458f7fa791ae3d36a1588cdcf684b5a3193c))
* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([98a10d0](https://github.com/quentin-ol/ngx-openlayers/commit/98a10d0982f6ed2493794042622ed13ab8c4a030))
* **graticule:** unregister on destroy ([bb7fa9f](https://github.com/quentin-ol/ngx-openlayers/commit/bb7fa9f16750020441c0d1a8e564d65d09ce59cc))
* **image:** add image loading events ([beada1b](https://github.com/quentin-ol/ngx-openlayers/commit/beada1b6cb927af01abc819ce538493743a9a54f))
* **imagearcgis:** add image events ([9e26397](https://github.com/quentin-ol/ngx-openlayers/commit/9e2639769c30b82eaafce61ef601ec1b4340167b))
* **map:** add onMoveStart event ([46b8ad3](https://github.com/quentin-ol/ngx-openlayers/commit/46b8ad390d8e0f8085b0c456fe0160b3d6452917))
* **openlayers:** migrate to 5 version ([54e47fc](https://github.com/quentin-ol/ngx-openlayers/commit/54e47fc039a77d3e5697c8a85903d5df13aa907d))
* **overviewmap:** refresh overview when the view changes ([18bc7a6](https://github.com/quentin-ol/ngx-openlayers/commit/18bc7a60f281b04c20f99f5d2efe94ca47b19cf8))
* **raster:** not updated when source change ([ad5f265](https://github.com/quentin-ol/ngx-openlayers/commit/ad5f26530e00b809bf02eb757095343d3e36231b))
* **source-vector:** support of 'loader' input ([0bda38a](https://github.com/quentin-ol/ngx-openlayers/commit/0bda38a7ef0233f9e7f01ca8c39dfe53504d15e0))
* **source:imagestatic:** refresh layer source when url change ([d71712f](https://github.com/quentin-ol/ngx-openlayers/commit/d71712ffea0ac6e8472ba2f9c420e90e3d3c8a56))
* **source:** add Image ArcGIS source ([#209](https://github.com/quentin-ol/ngx-openlayers/issues/209)) ([4a4a4ef](https://github.com/quentin-ol/ngx-openlayers/commit/4a4a4efdb001821e29b6e57ee8b10ca7c2a3a5cd))
* **source:** add UTF grid source ([813a81b](https://github.com/quentin-ol/ngx-openlayers/commit/813a81b696955b05a218f2c5180810210bebc2dd))
* **source:** update params when input changes (TileWMS and ImageWMS) ([#199](https://github.com/quentin-ol/ngx-openlayers/issues/199)) ([91de249](https://github.com/quentin-ol/ngx-openlayers/commit/91de249a6f4404ce6d3e8290b16ad455ee9f5a9a))
* **stroke:** add ColorLike typing to color input ([1b84a4b](https://github.com/quentin-ol/ngx-openlayers/commit/1b84a4ba40bc60d37d79282579d5c1bf6ebcfceb))
* update openlayers to `~7.5.2` ([7bb278d](https://github.com/quentin-ol/ngx-openlayers/commit/7bb278d59ed866d773698e10d11154a237f9bd0a))
* update openlayers to `10.5.0` ([6c88713](https://github.com/quentin-ol/ngx-openlayers/commit/6c8871353f8ea4c4eee220d028b9cab8bab46506))
* update openlayers to `8.2.0` ([4057d44](https://github.com/quentin-ol/ngx-openlayers/commit/4057d44e021a5f860485961c9f14a962d93bc457))
* update openlayers to `9.2.4` ([866ae56](https://github.com/quentin-ol/ngx-openlayers/commit/866ae561b1f9ee14fcce7fce3e799129353fa3ff))
* update openlayers to ~6.13.0 ([42fb323](https://github.com/quentin-ol/ngx-openlayers/commit/42fb3230645db423b2747a125c33419979954ea1))
* update openlayers to ~6.15.1 ([9588b9d](https://github.com/quentin-ol/ngx-openlayers/commit/9588b9d6b4a4d74ef6fc550e2aff24fb1e6df9be))
* update to angular 9 ([36bf6a8](https://github.com/quentin-ol/ngx-openlayers/commit/36bf6a8e82f108fc27f17b6356b0fb74b5f4d73e))
* **vector:** add style, updateWhileAnimating and updateWhileInteracting inputs ([ae72c41](https://github.com/quentin-ol/ngx-openlayers/commit/ae72c4130dfcb34574861c5f4512db1a892d77c9)), closes [#198](https://github.com/quentin-ol/ngx-openlayers/issues/198)
* **view:** add change:resolution and change:center outputs ([7eb0b98](https://github.com/quentin-ol/ngx-openlayers/commit/7eb0b98e6b3eac3bd6b2a8b4308fafbf5edd07b7))
* **view:** add missing inputs ([9848242](https://github.com/quentin-ol/ngx-openlayers/commit/9848242b050b5b5041a6f405832c8f2105a117ff))
* **view:** add multiWorld ([059a641](https://github.com/quentin-ol/ngx-openlayers/commit/059a641d438fde881cc0303bbffb88234b134f84))
* **view:** add zoom change output ([ea08721](https://github.com/quentin-ol/ngx-openlayers/commit/ea08721e7899fcea9110fc4eb0e46b9aa6a6154f))
* **view:** dynamically update view projection ([425b0e0](https://github.com/quentin-ol/ngx-openlayers/commit/425b0e07daae029064c61c2c835bad40cbe4b319))
* **wmts:** add wmts tile load events ([04b35d3](https://github.com/quentin-ol/ngx-openlayers/commit/04b35d35725f1a0fa828acadee33568ffae211e1))
### Bug Fixes
* **source:** check host instance before setSource ([#193](https://github.com/quentin-ol/ngx-openlayers/issues/193)) ([c3ba771](https://github.com/quentin-ol/ngx-openlayers/commit/c3ba771e2eefc24006604a44bffaf314a9262a17))
* **source:** update params ImageArcgisRest ([bfc6663](https://github.com/quentin-ol/ngx-openlayers/commit/bfc6663cc5024677421223c94caa6c5671efa534))
* **stroke:** fix ColorLike import path ([c2179ea](https://github.com/quentin-ol/ngx-openlayers/commit/c2179eab3cca0cb8f5f70c87b29f24d7257305e9))
* **travis:** lib build without ngcc (demo issue) ([9edc820](https://github.com/quentin-ol/ngx-openlayers/commit/9edc8203316545146034cea07d4ed203b5d745e8))
* **view:** set the center explicitly because it does not work via setProperties ([2472cff](https://github.com/quentin-ol/ngx-openlayers/commit/2472cff6978c2cc1cdbe2a791fc5889069f159ab))
## [18.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.2...18.0.0-next.0) (2025-06-11)
### ⚠ BREAKING CHANGES
* Angular 16 is no more supported
* `ol` peer dep is now `~10.5.0`
* see all breaking changes from `ol` `10.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v10.0.0.md)
### build
* update to Angular 18 ([eaf8b49](https://github.com/quentin-ol/ngx-openlayers/commit/eaf8b49190d2d97a97bc0b85b7ca5e573579a754))
### Features
* update openlayers to `10.5.0` ([8fd4db4](https://github.com/quentin-ol/ngx-openlayers/commit/8fd4db4e035843e7ffc940a63ed64ebc6e0595ba))
## [17.0.0-next.2](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.1...17.0.0-next.2) (2025-05-26)
## [17.0.0-next.1](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.0...17.0.0-next.1) (2025-05-26)
## [17.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/16.0.0-next.0...17.0.0-next.0) (2025-05-26)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `~9.2.4`
* see all breaking changes from `ol` `9.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v9.0.0.md)
* Angular 15 is no more supported
### build
* update to Angular 17 ([c3bed7d](https://github.com/quentin-ol/ngx-openlayers/commit/c3bed7d7c05b7c483cb5da076b5616f6f0fdbd6a))
### Features
* update openlayers to `9.2.4` ([725e363](https://github.com/quentin-ol/ngx-openlayers/commit/725e36304ee48ad7323fcffbf1091917fe867bca))
## [16.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/15.0.0-next.0...16.0.0-next.0) (2025-01-10)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `8.2.0`
* see all breaking changes from `ol` `8.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#800)
* Angular 14 is no more supported
### build
* update to Angular 16 ([b129c81](https://github.com/quentin-ol/ngx-openlayers/commit/b129c81ec30a5195ad04725101798936dee38db6))
### Features
* update openlayers to `8.2.0` ([8b376e3](https://github.com/quentin-ol/ngx-openlayers/commit/8b376e33314977db52307403bd6a5219f0e5731d))
## [15.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/14.1.0-next.0...15.0.0-next.0) (2024-12-12)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `~7.5.2`
* see all breaking changes from `ol` `7.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#700)
* see all breaking changes from `ol` `7.1.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#710)
* see all breaking changes from `ol` `7.2.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#720)
* see all breaking changes from `ol` `7.5.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#750)
### Features
* update openlayers to `~7.5.2` ([0c0e3cb](https://github.com/quentin-ol/ngx-openlayers/commit/0c0e3cb7ed6dd7d7e5d8eb385feff4d9072e4211))
## [14.1.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/14.0.0-next.0...14.1.0-next.0) (2024-04-29)
### Features
* **source-vector:** support of 'loader' input ([58c1a6b](https://github.com/quentin-ol/ngx-openlayers/commit/58c1a6bb8e33ca4bec2d4094b1efb4610c3ee516))
## [14.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.21...14.0.0-next.0) (2024-03-26)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `~6.15.1`
* `DrawInteractionComponent` : input `type` is now of type `Type`
* `SourceImageWMSComponent` : input `serverType` is now of type `ServerType`
* `OverlayComponent` : input `positioning` is now of type `Positioning`
* `SourceTileWMSComponent` : input `projection` is now of type `ProjectionLike` and input `serverType` is now of type `ServerType`
* `SourceTileWMTSComponent` : input `requestEncoding` is now of type `RequestEncoding`
* all components inputs of type `Element` or `Node` are now of type `HTMLElement`
* all `olChangeActive` and `propertyChange` outputs are now `EventEmitter<ObjectEvent>`
* `FormatMVTComponent` : input `featureClass` is now of type `FeatureClass`
* `DragAndDropInteractionComponent` : input `formatConstructors` is now of type `FeatureFormat[]`
* `LayerComponent` : `prerender` and `postrender` inputs functions should now manage events of type `RenderEvent`
* `SourceImageArcGISRestComponent` : `attributions` input is now of type `AttributionLike`
* `SourceTileWMTSComponent` : `tileGrid` input is now of type `WMTSTileGrid`
* `SourceUTFGridComponent` : `tileJSON` input is now of type `Config`
* `StyleCircleComponent` : `snapToPixel` and `atlasManager` have been removed
* `StyleIconComponent` : `img` input is now of type `HTMLImageElement | HTMLCanvasElement`
* `MapComponent` : `prerender` output has been removed, `precompose` output has been added. `olClick`, `dblClick`, `pointerDrag`, `pointerMove`, `singleClick` outputs are now of type `EventEmitter<MapBrowserEvent<UIEvent>>`
* `ViewComponent` : `changeZoom` output has been removed
### Features
* update openlayers to ~6.13.0 ([ec7f0b5](https://github.com/quentin-ol/ngx-openlayers/commit/ec7f0b5f285facd1f5fbdcd72a7f46d03a7763b4))
* update openlayers to ~6.15.1 ([f068b92](https://github.com/quentin-ol/ngx-openlayers/commit/f068b92e8f52b5e90e75be2cd91bba25391cee67))
## [1.0.0-next.21](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.20...1.0.0-next.21) (2023-11-30)
## [1.0.0-next.20](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.19...1.0.0-next.20) (2023-11-30)
## [1.0.0-next.20](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.19...1.0.0-next.20) (2023-11-30)
<a name="1.0.0-next.19"></a>
# [1.0.0-next.19](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.17...1.0.0-next.19) (2021-09-03)
### Bug Fixes
* **stroke:** fix ColorLike import path ([ebdca6e](https://github.com/quentin-ol/ngx-openlayers/commit/ebdca6e))
### Features
* **stroke:** add ColorLike typing to color input ([f940292](https://github.com/quentin-ol/ngx-openlayers/commit/f940292))
<a name="1.0.0-next.17"></a>
# [1.0.0-next.17](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.16...1.0.0-next.17) (2021-01-06)
### Bug Fixes
* **view:** set the center explicitly because it does not work via setProperties ([958383a](https://github.com/quentin-ol/ngx-openlayers/commit/958383a))
### Features
* **view:** add multiWorld ([f695cbe](https://github.com/quentin-ol/ngx-openlayers/commit/f695cbe))
<a name="1.0.0-next.13"></a>
# [1.0.0-next.13](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.12...1.0.0-next.13) (2019-11-13)
### Features
* **wmts:** add wmts tile load events ([7aba5ca](https://github.com/quentin-ol/ngx-openlayers/commit/7aba5ca))
<a name="1.0.0-next.12"></a>
# [1.0.0-next.12](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.11...1.0.0-next.12) (2019-11-13)
### Chores
* update angular and openayer ([187a3b0](https://github.com/quentin-ol/ngx-openlayers/commit/187a3b0))
### Features
* **map:** add onMoveStart event ([f41daf9](https://github.com/quentin-ol/ngx-openlayers/commit/f41daf9))
### BREAKING CHANGES
* - precompose, postcompose become prerender, postrender
- remove `on` prefix for all output, exception for native events :
- `click` -> `olClick`
- `select` -> `olFeature`
- `change` -> `olChange`
<a name="1.0.0-next.11"></a>
# [1.0.0-next.11](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.10...1.0.0-next.11) (2019-08-08)
### Features
* **imagearcgis:** add image events ([24c1c65](https://github.com/quentin-ol/ngx-openlayers/commit/24c1c65))
<a name="1.0.0-next.10"></a>
# [1.0.0-next.10](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.5...1.0.0-next.10) (2019-07-23)
### Bug Fixes
* **source:** update params ImageArcgisRest ([3d0bc9c](https://github.com/quentin-ol/ngx-openlayers/commit/3d0bc9c))
### Features
* **cluster:** update distance input ([5edbd57](https://github.com/quentin-ol/ngx-openlayers/commit/5edbd57))
* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([f0d4dd1](https://github.com/quentin-ol/ngx-openlayers/commit/f0d4dd1))
* **graticule:** unregister on destroy ([5e20e8d](https://github.com/quentin-ol/ngx-openlayers/commit/5e20e8d))
* **openlayers:** migrate to 5 version ([0ed47a3](https://github.com/quentin-ol/ngx-openlayers/commit/0ed47a3))
* **overviewmap:** refresh overview when the view changes ([4dc9852](https://github.com/quentin-ol/ngx-openlayers/commit/4dc9852))
* **source:** add UTF grid source ([ccae9e0](https://github.com/quentin-ol/ngx-openlayers/commit/ccae9e0))
* **source:imagestatic:** refresh layer source when url change ([410f876](https://github.com/quentin-ol/ngx-openlayers/commit/410f876))
* **view:** add change:resolution and change:center outputs ([27b1529](https://github.com/quentin-ol/ngx-openlayers/commit/27b1529))
* **view:** dynamically update view projection ([3f0c228](https://github.com/quentin-ol/ngx-openlayers/commit/3f0c228))
### BREAKING CHANGES
* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
That means the existing code must be updated for polygons:
Old style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
New style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
This also allows to display polygon with holes, which is not possible with the current code.
* **openlayers:** Migration from `openlayers` package to `ol`
<a name="1.0.0-next.9"></a>
# [1.0.0-next.9](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.8...1.0.0-next.9) (2019-06-04)
### Bug Fixes
* **ci:** fix build error of npm package
<a name="1.0.0-next.8"></a>
# [1.0.0-next.8](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.7...1.0.0-next.8) (2019-06-04)
### Features
* **graticule:** unregister on destroy ([5e20e8d](https://github.com/quentin-ol/ngx-openlayers/commit/5e20e8d))
* **source:imagestatic:** refresh layer source when url change ([410f876](https://github.com/quentin-ol/ngx-openlayers/commit/410f876))
### Documentation
* add tile json source example ([a65bb8c](https://github.com/quentin-ol/ngx-openlayers/commit/a65bb8c))
* select interaction example ([1e2a46f](https://github.com/quentin-ol/ngx-openlayers/commit/1e2a46f))
* add image static example ([8ebc128](https://github.com/quentin-ol/ngx-openlayers/commit/8ebc128))
# [1.0.0-next.7](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.6...1.0.0-next.7) (2019-04-18)
### Features
* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([f0d4dd1](https://github.com/quentin-ol/ngx-openlayers/commit/f0d4dd1))
* **openlayers:** migrate to 5 version ([0ed47a3](https://github.com/quentin-ol/ngx-openlayers/commit/0ed47a3))
* **overviewmap:** refresh overview when the view changes ([4dc9852](https://github.com/quentin-ol/ngx-openlayers/commit/4dc9852))
* **source:** add UTF grid source ([ccae9e0](https://github.com/quentin-ol/ngx-openlayers/commit/ccae9e0))
* **view:** add change:resolution and change:center outputs ([27b1529](https://github.com/quentin-ol/ngx-openlayers/commit/27b1529))
* **view:** dynamically update view projection ([3f0c228](https://github.com/quentin-ol/ngx-openlayers/commit/3f0c228))
### BREAKING CHANGES
* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
That means the existing code must be updated for polygons:
Old style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
New style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
This also allows to display polygon with holes, which is not possible with the current code.
* **openlayers:** Migration from `openlayers` package to `ol`
# [1.0.0-next.6](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.5...1.0.0-next.6) (2019-04-18)
### Bug Fixes
* **source:** update params ImageArcgisRest ([3d0bc9c](https://github.com/quentin-ol/ngx-openlayers/commit/3d0bc9c))
# [1.0.0-next.5](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.4...1.0.0-next.5) (2019-02-04)
### Features
* **vector:** add style, updateWhileAnimating and updateWhileInteracting inputs ([76c0c83](https://github.com/quentin-ol/ngx-openlayers/commit/76c0c83)), closes [#198](https://github.com/quentin-ol/ngx-openlayers/issues/198)
# [1.0.0-next.4](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.3...1.0.0-next.4) (2019-01-14)
### Features
* **raster:** not updated when source change ([13a28c7](https://github.com/quentin-ol/ngx-openlayers/commit/13a28c7))
# [1.0.0-next.3](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.2...1.0.0-next.3) (2018-12-12)
### Features
* **cluster:** add wrapX option ([93429a6](https://github.com/quentin-ol/ngx-openlayers/commit/93429a6))
* **image:** add image loading events ([fc856b3](https://github.com/quentin-ol/ngx-openlayers/commit/fc856b3))
# [1.0.0-next.2](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.1...1.0.0-next.2) (2018-11-21)
### Features
* **geom:** add circle geometry ([#210](https://github.com/quentin-ol/ngx-openlayers/issues/210)) ([d789ccf](https://github.com/quentin-ol/ngx-openlayers/commit/d789ccf))
* **source:** add Image ArcGIS source ([#209](https://github.com/quentin-ol/ngx-openlayers/issues/209)) ([98d1577](https://github.com/quentin-ol/ngx-openlayers/commit/98d1577))
# [1.0.0-next.1](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.0...1.0.0-next.1) (2018-11-06)
### Bug Fixes
* **source:** check host instance before setSource ([#193](https://github.com/quentin-ol/ngx-openlayers/issues/193)) ([afeb1a9](https://github.com/quentin-ol/ngx-openlayers/commit/afeb1a9))
### Features
* **source:** update params when input changes (TileWMS and ImageWMS) ([#199](https://github.com/quentin-ol/ngx-openlayers/issues/199)) ([f7578a4](https://github.com/quentin-ol/ngx-openlayers/commit/f7578a4))
* **view:** add zoom change output ([884429f](https://github.com/quentin-ol/ngx-openlayers/commit/884429f))
# [1.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.22...1.0.0-next.0) (2018-09-21)
### Features
* **demo:** add example of a cursor position ([9a8988e](https://github.com/quentin-ol/ngx-openlayers/commit/9a8988e))
* **demo:** add example of geojson feature : point, polygon, linestring ([367c72d](https://github.com/quentin-ol/ngx-openlayers/commit/367c72d))
* **demo:** add example of map position with longitude, latitude and zoom ([251bbf7](https://github.com/quentin-ol/ngx-openlayers/commit/251bbf7))
* **demo:** add example to display geometry of a geojson file ([fe977e6](https://github.com/quentin-ol/ngx-openlayers/commit/fe977e6))
* **demo:** example change color on hover or on select ([2e7bda4](https://github.com/quentin-ol/ngx-openlayers/commit/2e7bda4))
* **demo:** example draw a polygon ([2737e6b](https://github.com/quentin-ol/ngx-openlayers/commit/2737e6b))
* **demo:** example modify polygon ([18c95fa](https://github.com/quentin-ol/ngx-openlayers/commit/18c95fa))
* **demo:** example of marker with svg ([b5f57b3](https://github.com/quentin-ol/ngx-openlayers/commit/b5f57b3))
* **demo:** example of overlay ([b7749f9](https://github.com/quentin-ol/ngx-openlayers/commit/b7749f9))
* **demo:** example of side by side ([4b5b08b](https://github.com/quentin-ol/ngx-openlayers/commit/4b5b08b))
* **demo:** example of swipe ([9aa4dab](https://github.com/quentin-ol/ngx-openlayers/commit/9aa4dab))
## [0.8.22](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.21...v0.8.22) (2018-07-02)
### Bug Fixes
* **example.raster:** allow example project to work in --aot mode ([ca0c9bb](https://github.com/quentin-ol/ngx-openlayers/commit/ca0c9bb))
### Features
* **sources:** add source tileutfgrid component ([#179](https://github.com/quentin-ol/ngx-openlayers/issues/179)) ([d946755](https://github.com/quentin-ol/ngx-openlayers/commit/d946755))
## [0.8.21](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.20...v0.8.21) (2018-06-08)
### Features
* **raster:** add component and demo ([#171](https://github.com/quentin-ol/ngx-openlayers/issues/171)) ([0b40bbd](https://github.com/quentin-ol/ngx-openlayers/commit/0b40bbd))
## [0.8.20](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.19...v0.8.20) (2018-05-04)
### Features
* **modify-interaction:** add source input ([#146](https://github.com/quentin-ol/ngx-openlayers/issues/146)) ([d27d6ba](https://github.com/quentin-ol/ngx-openlayers/commit/d27d6ba))
## [0.8.19](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.18...v0.8.19) (2018-04-23)
### Features
* **source:** add geaometryFunction input to cluster component ([#167](https://github.com/quentin-ol/ngx-openlayers/issues/167)) ([8962034](https://github.com/quentin-ol/ngx-openlayers/commit/8962034))
## [0.8.18](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.17...v0.8.18) (2018-04-12)
### Features
* **tileJSON:** add tileJSON component ([d65e7b2](https://github.com/quentin-ol/ngx-openlayers/commit/d65e7b2))
## [0.8.17](https://github.com/quentin-ol/ngx-openlayers/compare/fd0ae4b...v0.8.17) (2018-03-16)
### Bug Fixes
* added componentType property to ViewComponent ([692e00d](https://github.com/quentin-ol/ngx-openlayers/commit/692e00d))
* addition of text style component to the export list ([9a14460](https://github.com/quentin-ol/ngx-openlayers/commit/9a14460))
* issues related to calling function makeDecorator with AOT ([205bb49](https://github.com/quentin-ol/ngx-openlayers/commit/205bb49))
* license is MPL-2.0. Was incorrectly reported as MIT, though it do not differ much ([a6e257a](https://github.com/quentin-ol/ngx-openlayers/commit/a6e257a))
* minor fixes in README.md ([7c7d764](https://github.com/quentin-ol/ngx-openlayers/commit/7c7d764))
* setting an ID evaluation to a "falsy" statement is now possible. Prior to this commit, setting an ID to 0 failed. ([7473a5c](https://github.com/quentin-ol/ngx-openlayers/commit/7473a5c))
* **types:** upgrade types of OpenLayers ([e36b8aa](https://github.com/quentin-ol/ngx-openlayers/commit/e36b8aa))
* the example icon is now renamed marker.png ([fd0ae4b](https://github.com/quentin-ol/ngx-openlayers/commit/fd0ae4b))
* **devDep:** limit typescript version and match types for OpenLayers ([af4b2da](https://github.com/quentin-ol/ngx-openlayers/commit/af4b2da))
* **example:** add form to package.json ([984da63](https://github.com/quentin-ol/ngx-openlayers/commit/984da63))
* **example:** add value `width` which is mandatory for aot build of example ([b70a698](https://github.com/quentin-ol/ngx-openlayers/commit/b70a698))
* **layer:** remove useless input and change layer component init ([6f512dc](https://github.com/quentin-ol/ngx-openlayers/commit/6f512dc))
* **source.XYZ:** instantiate XYZ source even if no tileGrid is provided ([8c34e00](https://github.com/quentin-ol/ngx-openlayers/commit/8c34e00))
* **style:** trigger update onChange ([6bc94e7](https://github.com/quentin-ol/ngx-openlayers/commit/6bc94e7))
* **view:** set animation on zoom changes ([8d73c38](https://github.com/quentin-ol/ngx-openlayers/commit/8d73c38))
### Features
* **cluster:** add cluster component and demo ([34a1688](https://github.com/quentin-ol/ngx-openlayers/commit/34a1688))
* **example:** move to a new version of the example project ([40ce2d5](https://github.com/quentin-ol/ngx-openlayers/commit/40ce2d5))
* **graticule:** Adding GraticuleComponent ([5adc320](https://github.com/quentin-ol/ngx-openlayers/commit/5adc320))
* **Layer:** add pre and post compose inputs and change behavior for all Layers ([4ceef04](https://github.com/quentin-ol/ngx-openlayers/commit/4ceef04))
* **layergroup:** add LayerGroupComponent ([c1f2513](https://github.com/quentin-ol/ngx-openlayers/commit/c1f2513))
* **ModifyInteractionComponent:** add modify interaction to be able to re-draw feature(s) ([e3625b5](https://github.com/quentin-ol/ngx-openlayers/commit/e3625b5))
* **scaleline:** add input units to scaleline component ([26a9a5c](https://github.com/quentin-ol/ngx-openlayers/commit/26a9a5c))
* **SelectInteractionComponent:** add new interaction to ba able to ([4017117](https://github.com/quentin-ol/ngx-openlayers/commit/4017117))
* **Source:OSM:** Use SourceXYZComponent as parent class instead of SourceComponent ([92d9519](https://github.com/quentin-ol/ngx-openlayers/commit/92d9519))
* **source:wmts:** refresh layer source when url change ([7730673](https://github.com/quentin-ol/ngx-openlayers/commit/7730673))
* **Source:XYZ:** add tilegrid childComponent ([c732980](https://github.com/quentin-ol/ngx-openlayers/commit/c732980))
* **source.imagestatic:** add image static source ([4aa6f3a](https://github.com/quentin-ol/ngx-openlayers/commit/4aa6f3a))
* **sources:** trigger refresh on property changes for XYZ Component ([1fe5219](https://github.com/quentin-ol/ngx-openlayers/commit/1fe5219))
* **SourceTileWMTSComponent:** add wmts source component and wmts grid tile component ([9e029ed](https://github.com/quentin-ol/ngx-openlayers/commit/9e029ed))
* **SourceXYZComponent:** add tileGrid input ([390add8](https://github.com/quentin-ol/ngx-openlayers/commit/390add8))
* **SourceXYZComponent:** add tileLoadFunction input ([f76321e](https://github.com/quentin-ol/ngx-openlayers/commit/f76321e))
* **tilegrid:** Allow resolutions and origin, and use new tilegrid.Tilegrid constructor ([95db90c](https://github.com/quentin-ol/ngx-openlayers/commit/95db90c))
* **TranslateInteractionComponent:** add interaction to be able to move feature(s) ([1d265ae](https://github.com/quentin-ol/ngx-openlayers/commit/1d265ae))

29
projects/ng-openlayers/karma.conf.js
View File

@@ -9,16 +9,29 @@ module.exports = function (config) {
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-coverage'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/ng-openlayers'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, '../../coverage/ngx-openlayers'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'lcovonly' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
@@ -27,6 +40,6 @@ module.exports = function (config) {
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true,
restartOnFileChange: true
});
};

20
projects/ng-openlayers/ng-package.json
View File

@@ -1,10 +1,10 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ng-openlayers",
"assets": [
"ngcc.config.js"
],
"lib": {
"entryFile": "src/public-api.ts"
}
}
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-openlayers",
"assets": [
"ngcc.config.js"
],
"lib": {
"entryFile": "src/public-api.ts"
}
}

2
projects/ng-openlayers/ngcc.config.js
View File

@@ -1,3 +1,3 @@
module.exports = {
ignorableDeepImportMatchers: [/ol\//],
ignorableDeepImportMatchers: [/ol\//]
};

172
projects/ng-openlayers/package-lock.json generated
View File

@@ -1,54 +1,59 @@
{
"name": "ng-openlayers",
"version": "18.0.0",
"name": "@farmmaps/ng-openlayers",
"version": "20.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ng-openlayers",
"version": "18.0.0",
"license": "MPL-2.0",
"dependencies": {
"tslib": "^2.3.0"
},
"name": "@farmmaps/ng-openlayers",
"version": "20.0.1",
"peerDependencies": {
"@angular/common": "^18.2.3",
"@angular/core": "^18.2.3",
"ol": "^8.2.0"
"@angular/common": ">=19.0.0 <=20.x.x",
"@angular/core": ">=19.0.0 <=20.x.x",
"ol": "~10.7.0"
}
},
"node_modules/@angular/common": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
"integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
"version": "20.3.16",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
"integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/core": "18.2.3",
"@angular/core": "20.3.16",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/core": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
"integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
"version": "20.3.16",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
"integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/compiler": "20.3.16",
"rxjs": "^6.5.3 || ^7.4.0",
"zone.js": "~0.14.10"
"zone.js": "~0.15.0"
},
"peerDependenciesMeta": {
"@angular/compiler": {
"optional": true
},
"zone.js": {
"optional": true
}
}
},
"node_modules/@petamoriken/float16": {
@@ -58,48 +63,17 @@
"license": "MIT",
"peer": true
},
"node_modules/color-name": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
"integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12.20"
}
},
"node_modules/color-parse": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
"integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
"license": "MIT",
"peer": true,
"dependencies": {
"color-name": "^2.0.0"
}
},
"node_modules/color-rgba": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
"integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
"license": "MIT",
"peer": true,
"dependencies": {
"color-parse": "^2.0.0",
"color-space": "^2.0.0"
}
},
"node_modules/color-space": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
"integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==",
"node_modules/@types/rbush": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
"integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ==",
"license": "MIT",
"peer": true
},
"node_modules/earcut": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
"integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
"license": "ISC",
"peer": true
},
@@ -123,27 +97,6 @@
"node": ">=10.19"
}
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "BSD-3-Clause",
"peer": true
},
"node_modules/lerc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
@@ -152,18 +105,17 @@
"peer": true
},
"node_modules/ol": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
"integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
"version": "10.7.0",
"resolved": "https://registry.npmjs.org/ol/-/ol-10.7.0.tgz",
"integrity": "sha512-122U5gamPqNgLpLOkogFJhgpywvd/5en2kETIDW+Ubfi9lPnZ0G9HWRdG+CX0oP8od2d6u6ky3eewIYYlrVczw==",
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"color-rgba": "^3.0.0",
"color-space": "^2.0.1",
"earcut": "^2.2.3",
"geotiff": "^2.0.7",
"pbf": "3.2.1",
"rbush": "^3.0.1"
"@types/rbush": "4.0.0",
"earcut": "^3.0.0",
"geotiff": "^2.1.3",
"pbf": "4.0.1",
"rbush": "^4.0.0"
},
"funding": {
"type": "opencollective",
@@ -185,13 +137,12 @@
"peer": true
},
"node_modules/pbf": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
"integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
"license": "BSD-3-Clause",
"peer": true,
"dependencies": {
"ieee754": "^1.1.12",
"resolve-protobuf-schema": "^2.1.0"
},
"bin": {
@@ -219,20 +170,20 @@
}
},
"node_modules/quickselect": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
"license": "ISC",
"peer": true
},
"node_modules/rbush": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
"integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"quickselect": "^2.0.0"
"quickselect": "^3.0.0"
}
},
"node_modules/resolve-protobuf-schema": {
@@ -246,9 +197,9 @@
}
},
"node_modules/rxjs": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
@@ -256,9 +207,11 @@
}
},
"node_modules/tslib": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD",
"peer": true
},
"node_modules/web-worker": {
"version": "1.3.0",
@@ -274,13 +227,6 @@
"license": "CC0-1.0",
"peer": true
},
"node_modules/zone.js": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
"integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
"license": "MIT",
"peer": true
},
"node_modules/zstddec": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",

36
projects/ng-openlayers/package.json
View File

@@ -1,38 +1,22 @@
{
"name": "@farmmaps/ng-openlayers",
"version": "18.0.0",
"description": "OpenLayers library for Angular (migrated from angular 17 to 18)",
"author": "Kamil Furtak (kamil.furtak@gmail.com) / Farmmaps",
"version": "20.0.1",
"description": "Ngx openLayers library for Angular",
"author": "Quentin Lampin / Farmmaps",
"publishConfig": {
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
},
"bugs": {
"url": "https://github.com/kamilfurtak/ng-openlayers/issues"
"repository": {
"type": "git",
"url": "https://github.com/quentinlampin/ngx-openlayers.git"
},
"homepage": "https://github.com/kamilfurtak/ng-openlayers",
"keywords": [
"ngx-openlayers",
"angular",
"angular18",
"openlayers",
"openlayers8",
"ol8"
],
"license": "MPL-2.0",
"private": false,
"scripts": {
"release": "standard-version -m \"chore(release): version %s\" -t \"\"",
"prepublishOnly": "cp projects/ng-openlayers/README.md dist/ng-openlayers/README.md"
},
"standard-version": {
"postchangelog": "cp projects/ng-openlayers/CHANGELOG.md dist/ng-openlayers/CHANGELOG.md"
},
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "19.2.18",
"@angular/core": "19.2.18",
"ol": "^8.2.0"
"@angular/common": ">=19.0.0 <=20.x.x",
"@angular/core": ">=19.0.0 <=20.x.x",
"ol": "~10.7.0"
}
}
}

19
projects/ng-openlayers/src/lib/attribution.component.ts
View File

@@ -1,16 +1,19 @@
import { Component, ElementRef, OnInit } from '@angular/core';
import { Component, ElementRef, OnInit, inject } from '@angular/core';
import { Attribution } from 'ol/control';
@Component({
selector: 'aol-attribution',
template: '<ng-content></ng-content>',
standalone: false
selector: 'aol-attribution',
template: '<ng-content></ng-content>',
standalone: true,
})
export class AttributionComponent implements OnInit {
label: string;
private elementRef = inject(ElementRef);
constructor(private elementRef: ElementRef) {}
instance: Attribution;
html: string;
ngOnInit() {
this.label = this.elementRef.nativeElement.innerHTML;
ngOnInit(): void {
this.html = this.elementRef.nativeElement.innerHTML;
this.instance = new Attribution();
}
}

18
projects/ng-openlayers/src/lib/attributions.component.ts
View File

@@ -1,24 +1,24 @@
import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
import { SourceComponent } from './sources/source.component';
import { AfterViewInit, Component, ContentChildren, QueryList, inject } from '@angular/core';
import { AttributionComponent } from './attribution.component';
import { SourceComponent } from './sources/source.component';
@Component({
selector: 'aol-attributions',
template: '<ng-content></ng-content>',
standalone: false
selector: 'aol-attributions',
template: '<ng-content></ng-content>',
standalone: true,
})
export class AttributionsComponent implements AfterViewInit {
private source = inject(SourceComponent, { host: true });
@ContentChildren(AttributionComponent)
attributions: QueryList<AttributionComponent>;
instance: Array<string>;
constructor(@Host() private source: SourceComponent) {}
/* we can do this at the very end */
ngAfterViewInit() {
ngAfterViewInit(): void {
if (this.attributions.length) {
this.instance = this.attributions.map((cmp) => cmp.label);
this.instance = this.attributions.map((cmp) => cmp.html);
// console.log('setting attributions:', this.instance);
this.source.instance.setAttributions(this.instance);
}

108
projects/ng-openlayers/src/lib/collectioncoordinates.component.ts
View File

@@ -1,90 +1,88 @@
import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
import { MapComponent } from './map.component';
import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
import { Component, Input, OnChanges, OnInit, inject } from '@angular/core';
import { Coordinate } from 'ol/coordinate';
import { transform } from 'ol/proj';
import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
import { MapComponent } from './map.component';
@Component({
selector: 'aol-collection-coordinates',
template: ` <div class="aol-collection-coordinates"></div> `,
standalone: false
selector: 'aol-collection-coordinates',
template: ` <div class="aol-collection-coordinates"></div> `,
standalone: true,
})
export class CollectionCoordinatesComponent implements OnChanges, OnInit {
private map = inject(MapComponent);
@Input()
coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
@Input()
srid = 'EPSG:3857';
private host: any;
private readonly host:
| GeometryLinestringComponent
| GeometryPolygonComponent
| GeometryMultiPointComponent
| GeometryMultiLinestringComponent
| GeometryMultiPolygonComponent;
private mapSrid = 'EPSG:3857';
constructor(
private map: MapComponent,
@Optional() geometryLinestring: GeometryLinestringComponent,
@Optional() geometryPolygon: GeometryPolygonComponent,
@Optional() geometryMultipoint: GeometryMultiPointComponent,
@Optional() geometryMultilinestring: GeometryMultiLinestringComponent,
@Optional() geometryMultipolygon: GeometryMultiPolygonComponent
) {
if (!!geometryLinestring) {
this.host = geometryLinestring;
} else if (!!geometryPolygon) {
this.host = geometryPolygon;
} else if (!!geometryMultipoint) {
this.host = geometryMultipoint;
} else if (!!geometryMultilinestring) {
this.host = geometryMultilinestring;
} else if (!!geometryMultipolygon) {
this.host = geometryMultipolygon;
constructor() {
const geometryLinestring = inject(GeometryLinestringComponent, { optional: true });
const geometryPolygon = inject(GeometryPolygonComponent, { optional: true });
const geometryMultipoint = inject(GeometryMultiPointComponent, { optional: true });
const geometryMultilinestring = inject(GeometryMultiLinestringComponent, { optional: true });
const geometryMultipolygon = inject(GeometryMultiPolygonComponent, { optional: true });
const geometryComponent =
geometryLinestring ??
geometryPolygon ??
geometryMultipoint ??
geometryMultilinestring ??
geometryMultipolygon ??
undefined;
if (geometryComponent) {
this.host = geometryComponent;
} else {
throw new Error('aol-collection-coordinates must be a child of a geometry component');
}
}
ngOnInit() {
ngOnInit(): void {
this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
this.mapSrid = this.map.instance.getView().getProjection().getCode();
this.transformCoordinates();
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
this.transformCoordinates();
}
private onMapViewChanged(event) {
private onMapViewChanged(event): void {
this.mapSrid = event.target.get(event.key).getProjection().getCode();
this.transformCoordinates();
}
private transformCoordinates() {
let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
private transformCoordinates(): void {
if (this.srid === this.mapSrid) {
transformedCoordinates = this.coordinates;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.host.instance.setCoordinates(this.coordinates as any[]);
} else if (this.host instanceof GeometryLinestringComponent || this.host instanceof GeometryMultiPointComponent) {
this.host.instance.setCoordinates(
(this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid))
);
} else if (this.host instanceof GeometryPolygonComponent || this.host instanceof GeometryMultiLinestringComponent) {
this.host.instance.setCoordinates(
(this.coordinates as Coordinate[][]).map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
);
} else {
switch (this.host.componentType) {
case 'geometry-linestring':
case 'geometry-multipoint':
transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid));
break;
case 'geometry-polygon':
case 'geometry-multilinestring':
transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) =>
cc.map((c) => transform(c, this.srid, this.mapSrid))
);
break;
case 'geometry-multipolygon':
transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) =>
ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
);
break;
}
this.host.instance.setCoordinates(
(this.coordinates as Coordinate[][][]).map((ccc) =>
ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
)
);
}
this.host.instance.setCoordinates(transformedCoordinates);
}
}

10
projects/ng-openlayers/src/lib/content.component.ts
View File

@@ -1,10 +1,10 @@
import { Component, ElementRef } from '@angular/core';
import { Component, ElementRef, inject } from '@angular/core';
@Component({
selector: 'aol-content',
template: '<ng-content></ng-content>',
standalone: false
selector: 'aol-content',
template: '<ng-content></ng-content>',
standalone: true,
})
export class ContentComponent {
constructor(public elementRef: ElementRef) {}
readonly elementRef = inject(ElementRef);
}

22
projects/ng-openlayers/src/lib/controls/attribution.component.ts
View File

@@ -1,33 +1,31 @@
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Attribution } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-attribution',
template: ``,
standalone: false
selector: 'aol-control-attribution',
template: ``,
standalone: true,
})
export class ControlAttributionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
private element = inject(ElementRef);
@Input()
collapsible: boolean;
public componentType = 'control';
componentType = 'control';
instance: Attribution;
target: HTMLElement;
constructor(
private map: MapComponent,
private element: ElementRef
) {}
ngOnInit() {
ngOnInit(): void {
this.target = this.element.nativeElement;
// console.log('ol.control.Attribution init: ', this);
this.instance = new Attribution(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-attribution');
this.map.instance.removeControl(this.instance);
}

20
projects/ng-openlayers/src/lib/controls/control.component.ts
View File

@@ -1,24 +1,24 @@
import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
import { Component, ContentChild, OnDestroy, OnInit, inject } from '@angular/core';
import { Control } from 'ol/control';
import { MapComponent } from '../map.component';
import { ContentComponent } from '../content.component';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@ContentChild(ContentComponent, { static: true })
content: ContentComponent;
public componentType = 'control';
componentType = 'control';
instance: Control;
element: HTMLElement;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
if (this.content) {
this.element = this.content.elementRef.nativeElement;
this.instance = new Control(this);
@@ -26,7 +26,7 @@ export class ControlComponent implements OnInit, OnDestroy {
}
}
ngOnDestroy() {
ngOnDestroy(): void {
if (this.instance) {
this.map.instance.removeControl(this.instance);
}

18
projects/ng-openlayers/src/lib/controls/default.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Control, defaults } from 'ol/control';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Collection } from 'ol';
import { Control, defaults } from 'ol/control';
import { Options as AttributionOptions } from 'ol/control/Attribution';
import { Options as RotateOptions } from 'ol/control/Rotate';
import { Options as ZoomOptions } from 'ol/control/Zoom';
@@ -8,11 +8,13 @@ import { Options as ZoomOptions } from 'ol/control/Zoom';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-defaults',
template: '',
standalone: false
selector: 'aol-control-defaults',
template: '',
standalone: true,
})
export class DefaultControlComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
attribution: boolean;
@Input()
@@ -28,15 +30,13 @@ export class DefaultControlComponent implements OnInit, OnDestroy {
instance: Collection<Control>;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
// console.log('ol.control.defaults init: ', this);
this.instance = defaults(this);
this.instance.forEach((c) => this.map.instance.addControl(c));
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-defaults');
this.instance.forEach((c) => this.map.instance.removeControl(c));
}

18
projects/ng-openlayers/src/lib/controls/fullscreen.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { FullScreen } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-fullscreen',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-fullscreen',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlFullScreenComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -21,16 +23,12 @@ export class ControlFullScreenComponent implements OnInit, OnDestroy {
instance: FullScreen;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-fullscreen');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new FullScreen(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-fullscreen');
this.map.instance.removeControl(this.instance);
}

26
projects/ng-openlayers/src/lib/controls/mouseposition.component.ts
View File

@@ -1,36 +1,36 @@
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';
import MousePosition from 'ol/control/MousePosition';
import { MapComponent } from '../map.component';
import { CoordinateFormat } from 'ol/coordinate';
import { ProjectionLike } from 'ol/proj';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-mouseposition',
template: ``,
standalone: false
selector: 'aol-control-mouseposition',
template: ``,
standalone: true,
})
export class ControlMousePositionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
private element = inject(ElementRef);
@Input()
coordinateFormat: CoordinateFormat;
@Input()
projection: ProjectionLike;
instance: MousePosition;
@Input()
wrapX: boolean;
target: HTMLElement;
constructor(
private map: MapComponent,
private element: ElementRef
) {}
instance: MousePosition;
ngOnInit() {
ngOnInit(): void {
this.target = this.element.nativeElement;
// console.log('ol.control.MousePosition init: ', this);
this.instance = new MousePosition(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-mouseposition');
this.map.instance.removeControl(this.instance);
}

22
projects/ng-openlayers/src/lib/controls/overviewmap.component.ts
View File

@@ -1,15 +1,17 @@
import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Layer } from 'ol/layer';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
import { View } from 'ol';
import { OverviewMap } from 'ol/control';
import { Layer } from 'ol/layer';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-overviewmap',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-overviewmap',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
private map = inject(MapComponent);
@Input()
collapsed: boolean;
@Input()
@@ -29,24 +31,22 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
instance: OverviewMap;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new OverviewMap(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeControl(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance != null && changes.hasOwnProperty('view')) {
this.reloadInstance();
}
}
private reloadInstance() {
private reloadInstance(): void {
this.map.instance.removeControl(this.instance);
this.instance = new OverviewMap(this);
this.map.instance.addControl(this.instance);

18
projects/ng-openlayers/src/lib/controls/rotate.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Rotate } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-rotate',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-rotate',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlRotateComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -21,16 +23,12 @@ export class ControlRotateComponent implements OnInit, OnDestroy {
instance: Rotate;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-rotate');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Rotate(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-rotate');
this.map.instance.removeControl(this.instance);
}

17
projects/ng-openlayers/src/lib/controls/scaleline.component.ts
View File

@@ -1,27 +1,28 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { ScaleLine } from 'ol/control';
import { MapComponent } from '../map.component';
import { Units } from 'ol/control/ScaleLine';
@Component({
selector: 'aol-control-scaleline',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-scaleline',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlScaleLineComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
units: Units;
instance: ScaleLine;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new ScaleLine(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-scaleline');
this.map.instance.removeControl(this.instance);
}
}

18
projects/ng-openlayers/src/lib/controls/zoom.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Zoom } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoom',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-zoom',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlZoomComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -23,16 +25,12 @@ export class ControlZoomComponent implements OnInit, OnDestroy {
instance: Zoom;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoom');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Zoom(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-zoom');
this.map.instance.removeControl(this.instance);
}

18
projects/ng-openlayers/src/lib/controls/zoomslider.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { ZoomSlider } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoomslider',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-zoomslider',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlZoomSliderComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -19,16 +21,12 @@ export class ControlZoomSliderComponent implements OnInit, OnDestroy {
instance: ZoomSlider;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoomslider');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ZoomSlider(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-zoomslider');
this.map.instance.removeControl(this.instance);
}

20
projects/ng-openlayers/src/lib/controls/zoomtoextent.component.ts
View File

@@ -1,14 +1,16 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { ZoomToExtent } from 'ol/control';
import { MapComponent } from '../map.component';
import { Extent } from 'ol/extent';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoomtoextent',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-control-zoomtoextent',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -20,16 +22,12 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
instance: ZoomToExtent;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoomtoextent');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ZoomToExtent(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-zoomtoextent');
this.map.instance.removeControl(this.instance);
}

56
projects/ng-openlayers/src/lib/coordinate.component.ts
View File

@@ -1,17 +1,19 @@
import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
import { Component, Input, OnChanges, OnInit, inject } from '@angular/core';
import { transform } from 'ol/proj';
import { MapComponent } from './map.component';
import { GeometryPointComponent } from './geom/geometrypoint.component';
import { GeometryCircleComponent } from './geom/geometrycircle.component';
import { ViewComponent } from './view.component';
import { GeometryPointComponent } from './geom/geometrypoint.component';
import { MapComponent } from './map.component';
import { OverlayComponent } from './overlay.component';
import { ViewComponent } from './view.component';
@Component({
selector: 'aol-coordinate',
template: ` <div class="aol-coordinate"></div> `,
standalone: false
selector: 'aol-coordinate',
template: ` <div class="aol-coordinate"></div> `,
standalone: true,
})
export class CoordinateComponent implements OnChanges, OnInit {
private map = inject(MapComponent);
@Input()
x: number;
@Input()
@@ -19,16 +21,15 @@ export class CoordinateComponent implements OnChanges, OnInit {
@Input()
srid = 'EPSG:3857';
private host: any;
private host: ViewComponent | GeometryPointComponent | GeometryCircleComponent | OverlayComponent;
private mapSrid = 'EPSG:3857';
constructor(
private map: MapComponent,
@Optional() viewHost: ViewComponent,
@Optional() geometryPointHost: GeometryPointComponent,
@Optional() geometryCircleHost: GeometryCircleComponent,
@Optional() overlayHost: OverlayComponent
) {
constructor() {
const viewHost = inject(ViewComponent, { optional: true });
const geometryPointHost = inject(GeometryPointComponent, { optional: true });
const geometryCircleHost = inject(GeometryCircleComponent, { optional: true });
const overlayHost = inject(OverlayComponent, { optional: true });
// console.log('instancing aol-coordinate');
if (geometryPointHost !== null) {
this.host = geometryPointHost;
@@ -41,22 +42,22 @@ export class CoordinateComponent implements OnChanges, OnInit {
}
}
ngOnInit() {
ngOnInit(): void {
this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
this.mapSrid = this.map.instance.getView().getProjection().getCode();
this.transformCoordinates();
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
this.transformCoordinates();
}
private onMapViewChanged(event) {
private onMapViewChanged(event): void {
this.mapSrid = event.target.get(event.key).getProjection().getCode();
this.transformCoordinates();
}
private transformCoordinates() {
private transformCoordinates(): void {
let transformedCoordinates: number[];
if (this.srid === this.mapSrid) {
@@ -65,17 +66,12 @@ export class CoordinateComponent implements OnChanges, OnInit {
transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
}
switch (this.host.componentType) {
case 'geometry-point':
this.host.instance.setCoordinates(transformedCoordinates);
break;
case 'geometry-circle':
case 'view':
this.host.instance.setCenter(transformedCoordinates);
break;
case 'overlay':
this.host.instance.setPosition(transformedCoordinates);
break;
if (this.host instanceof GeometryPointComponent) {
this.host.instance.setCoordinates(transformedCoordinates);
} else if (this.host instanceof OverlayComponent) {
this.host.instance.setPosition(transformedCoordinates);
} else {
this.host.instance.setCenter(transformedCoordinates);
}
}
}

22
projects/ng-openlayers/src/lib/feature.component.ts
View File

@@ -1,22 +1,22 @@
import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnDestroy, OnInit, inject } from '@angular/core';
import { Feature } from 'ol';
import { SourceVectorComponent } from './sources/vector.component';
@Component({
selector: 'aol-feature',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-feature',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
private host = inject(SourceVectorComponent);
@Input()
id: string | number | undefined;
public componentType = 'feature';
public instance: Feature;
componentType = 'feature';
instance: Feature;
constructor(private host: SourceVectorComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new Feature();
if (this.id !== undefined) {
this.instance.setId(this.id);
@@ -24,11 +24,11 @@ export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
this.host.instance.addFeature(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.host.instance.removeFeature(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
if (this.instance) {
this.instance.setId(this.id);
}

5
projects/ng-openlayers/src/lib/formats/format.component.ts
View File

@@ -1,6 +1,7 @@
import Feature from 'ol/format/Feature';
import FeatureFormat from 'ol/format/Feature';
import RenderFeature from 'ol/render/Feature';
export class FormatComponent {
public instance: Feature;
public instance: FeatureFormat<RenderFeature>;
public componentType = 'format';
}

15
projects/ng-openlayers/src/lib/formats/mvt.component.ts
View File

@@ -1,17 +1,18 @@
import { Component, forwardRef, Input } from '@angular/core';
import { FormatComponent } from './format.component';
import { MVT } from 'ol/format';
import { FeatureClass } from 'ol/Feature';
import { FormatComponent } from './format.component';
import RenderFeature from 'ol/render/Feature';
import { FeatureToFeatureClass } from 'ol/format/Feature';
@Component({
selector: 'aol-format-mvt',
template: '',
providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
standalone: false
selector: 'aol-format-mvt',
template: '',
providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
standalone: true,
})
export class FormatMVTComponent extends FormatComponent {
@Input()
featureClass: FeatureClass;
featureClass: FeatureToFeatureClass<RenderFeature>;
@Input()
geometryName: string;
@Input()

24
projects/ng-openlayers/src/lib/geom/geometrycircle.component.ts
View File

@@ -1,15 +1,16 @@
import { Component, Input, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component, Input } from '@angular/core';
import { Circle } from 'ol/geom';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-geometry-circle',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-circle',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryCircleComponent extends SimpleGeometryComponent {
componentType = 'geometry-circle';
instance = new Circle([0, 0]);
@Input()
get radius(): number {
return this.instance.getRadius();
@@ -17,13 +18,4 @@ export class GeometryCircleComponent extends SimpleGeometryComponent implements
set radius(radius: number) {
this.instance.setRadius(radius);
}
public componentType = 'geometry-circle';
public instance: Circle;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
// defaulting coordinates to [0,0]. To be overridden in child component.
this.instance = new Circle([0, 0]);
}
}

29
projects/ng-openlayers/src/lib/geom/geometrylinestring.component.ts
View File

@@ -1,27 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { LineString } from 'ol/geom';
@Component({
selector: 'aol-geometry-linestring',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-linestring',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryLinestringComponent extends SimpleGeometryComponent {
public componentType = 'geometry-linestring';
public instance: LineString;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new LineString([
[0, 0],
[1, 1],
]);
super.ngOnInit();
}
public instance = new LineString([
[0, 0],
[1, 1],
]);
}

33
projects/ng-openlayers/src/lib/geom/geometrymultilinestring.component.ts
View File

@@ -1,29 +1,18 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { MultiLineString } from 'ol/geom';
@Component({
selector: 'aol-geometry-multilinestring',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-multilinestring',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryMultiLinestringComponent extends SimpleGeometryComponent {
public componentType = 'geometry-multilinestring';
public instance: MultiLineString;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiLineString([
[
[0, 0],
[1, 1],
],
]);
super.ngOnInit();
}
public instance = new MultiLineString([
[
[0, 0],
[1, 1],
],
]);
}

29
projects/ng-openlayers/src/lib/geom/geometrymultipoint.component.ts
View File

@@ -1,27 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { MultiPoint } from 'ol/geom';
@Component({
selector: 'aol-geometry-multipoint',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-multipoint',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryMultiPointComponent extends SimpleGeometryComponent {
public componentType = 'geometry-multipoint';
public instance: MultiPoint;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiPoint([
[0, 0],
[1, 1],
]);
super.ngOnInit();
}
public instance = new MultiPoint([
[0, 0],
[1, 1],
]);
}

35
projects/ng-openlayers/src/lib/geom/geometrymultipolygon.component.ts
View File

@@ -1,32 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { MultiPolygon } from 'ol/geom';
@Component({
selector: 'aol-geometry-multipolygon',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-multipolygon',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryMultiPolygonComponent extends SimpleGeometryComponent {
public componentType = 'geometry-multipolygon';
public instance: MultiPolygon;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiPolygon([
public instance = new MultiPolygon([
[
[
[
[0, 0],
[1, 1],
[0, 1],
],
[0, 0],
[1, 1],
[0, 1],
],
]);
super.ngOnInit();
}
],
]);
}

23
projects/ng-openlayers/src/lib/geom/geometrypoint.component.ts
View File

@@ -1,24 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { Point } from 'ol/geom';
@Component({
selector: 'aol-geometry-point',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-point',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryPointComponent extends SimpleGeometryComponent {
public componentType = 'geometry-point';
public instance: Point;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new Point([0, 0]);
super.ngOnInit();
}
public instance = new Point([0, 0]);
}

35
projects/ng-openlayers/src/lib/geom/geometrypolygon.component.ts
View File

@@ -1,30 +1,19 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { Polygon } from 'ol/geom';
@Component({
selector: 'aol-geometry-polygon',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-geometry-polygon',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryPolygonComponent extends SimpleGeometryComponent {
public componentType = 'geometry-polygon';
public instance: Polygon;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new Polygon([
[
[0, 0],
[1, 1],
[0, 1],
],
]);
super.ngOnInit();
}
public instance = new Polygon([
[
[0, 0],
[1, 1],
[0, 1],
],
]);
}

17
projects/ng-openlayers/src/lib/geom/simplegeometry.component.ts
View File

@@ -1,22 +1,19 @@
import { Input, OnInit, Directive } from '@angular/core';
import { Directive, inject, Input, OnInit } from '@angular/core';
import SimpleGeometry from 'ol/geom/SimpleGeometry';
import { FeatureComponent } from '../feature.component';
import { MapComponent } from '../map.component';
import SimpleGeometry from 'ol/geom/SimpleGeometry';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class SimpleGeometryComponent implements OnInit {
@Input() srid: string;
public instance: SimpleGeometry;
public componentType = 'simple-geometry';
instance: SimpleGeometry;
componentType = 'simple-geometry';
protected constructor(
protected map: MapComponent,
protected host: FeatureComponent
) {}
protected readonly map = inject(MapComponent);
protected readonly host = inject(FeatureComponent);
ngOnInit() {
ngOnInit(): void {
this.host.instance.setGeometry(this.instance);
}
}

28
projects/ng-openlayers/src/lib/graticule.component.ts
View File

@@ -1,14 +1,17 @@
import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
import { Graticule } from 'ol';
import { Stroke } from 'ol/style';
import { MapComponent } from './map.component';
import { Options } from 'ol/layer/Graticule';
@Component({
selector: 'aol-graticule',
template: '<ng-content></ng-content>',
standalone: false
selector: 'aol-graticule',
template: '<ng-content></ng-content>',
standalone: true,
})
export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
private map = inject(MapComponent);
@Input()
strokeStyle: Stroke;
@Input()
@@ -18,24 +21,17 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
@Input()
latLabelPosition: number;
instance: any;
public componentType = 'graticule';
constructor(private map: MapComponent) {}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
instance: Graticule;
componentType = 'graticule';
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Options = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
properties[key] = changes[key].currentValue;
}
if (properties) {
this.instance = new Graticule(properties);
}

39
projects/ng-openlayers/src/lib/interactions/default.component.ts
View File

@@ -1,47 +1,24 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { defaults, Interaction } from 'ol/interaction';
import { Collection } from 'ol';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-default',
template: '',
standalone: false
selector: 'aol-interaction-default',
template: '',
standalone: true,
})
export class DefaultInteractionComponent implements OnInit, OnDestroy {
@Input()
altShiftDragRotate: boolean;
@Input()
onFocusOnly: boolean;
@Input()
doubleClickZoom: boolean;
@Input()
keyboard: boolean;
@Input()
mouseWheelZoom: boolean;
@Input()
shiftDragZoom: boolean;
@Input()
dragPan: boolean;
@Input()
pinchRotate: boolean;
@Input()
pinchZoom: boolean;
@Input()
zoomDelta: number;
@Input()
zoomDuration: number;
private map = inject(MapComponent);
instance: Collection<Interaction>;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = defaults(this);
ngOnInit(): void {
this.instance = defaults();
this.instance.forEach((i) => this.map.instance.addInteraction(i));
}
ngOnDestroy() {
ngOnDestroy(): void {
this.instance.forEach((i) => this.map.instance.removeInteraction(i));
}
}

16
projects/ng-openlayers/src/lib/interactions/doubleclickzoom.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { DoubleClickZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-doubleclickzoom',
template: '',
standalone: false
selector: 'aol-interaction-doubleclickzoom',
template: '',
standalone: true,
})
export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -15,14 +17,12 @@ export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
instance: DoubleClickZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DoubleClickZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

20
projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts
View File

@@ -1,15 +1,17 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { DragAndDrop } from 'ol/interaction';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import FeatureFormat from 'ol/format/Feature';
import { MapComponent } from '../map.component';
import { DragAndDrop } from 'ol/interaction';
import { ProjectionLike } from 'ol/proj';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-draganddrop',
template: '',
standalone: false
selector: 'aol-interaction-draganddrop',
template: '',
standalone: true,
})
export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
formatConstructors: FeatureFormat[];
@Input()
@@ -19,14 +21,12 @@ export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
instance: DragAndDrop;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragAndDrop(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

20
projects/ng-openlayers/src/lib/interactions/dragbox.component.ts
View File

@@ -1,15 +1,17 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragBox } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragBox } from 'ol/interaction';
import { EndCondition } from 'ol/interaction/DragBox';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-dragbox',
template: '',
standalone: false
selector: 'aol-interaction-dragbox',
template: '',
standalone: true,
})
export class DragBoxInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -19,14 +21,12 @@ export class DragBoxInteractionComponent implements OnInit, OnDestroy {
instance: DragBox;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragBox(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

20
projects/ng-openlayers/src/lib/interactions/dragpan.component.ts
View File

@@ -1,15 +1,17 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragPan } from 'ol/interaction';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import Kinetic from 'ol/Kinetic';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
import { DragPan } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-dragpan',
template: '',
standalone: false
selector: 'aol-interaction-dragpan',
template: '',
standalone: true,
})
export class DragPanInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition: Condition;
@Input()
@@ -17,14 +19,12 @@ export class DragPanInteractionComponent implements OnInit, OnDestroy {
instance: DragPan;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragPan(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

18
projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts
View File

@@ -1,14 +1,16 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragRotate } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragrotate',
template: '',
standalone: false
selector: 'aol-interaction-dragrotate',
template: '',
standalone: true,
})
export class DragRotateInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition: Condition;
@Input()
@@ -16,14 +18,12 @@ export class DragRotateInteractionComponent implements OnInit, OnDestroy {
instance: DragRotate;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragRotate(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

18
projects/ng-openlayers/src/lib/interactions/dragrotateandzoom.component.ts
View File

@@ -1,14 +1,16 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragRotateAndZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragrotateandzoom',
template: '',
standalone: false
selector: 'aol-interaction-dragrotateandzoom',
template: '',
standalone: true,
})
export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition: Condition;
@Input()
@@ -16,14 +18,12 @@ export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy
instance: DragRotateAndZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragRotateAndZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

18
projects/ng-openlayers/src/lib/interactions/dragzoom.component.ts
View File

@@ -1,14 +1,16 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragzoom',
template: '',
standalone: false
selector: 'aol-interaction-dragzoom',
template: '',
standalone: true,
})
export class DragZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -20,14 +22,12 @@ export class DragZoomInteractionComponent implements OnInit, OnDestroy {
instance: DragZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

33
projects/ng-openlayers/src/lib/interactions/draw.component.ts
View File

@@ -1,22 +1,23 @@
import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
import { MapComponent } from '../map.component';
import { Draw } from 'ol/interaction';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { ObjectEvent } from 'ol/Object';
import { Condition } from 'ol/events/condition';
import { Draw } from 'ol/interaction';
import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
import { Vector } from 'ol/source';
import { Style } from 'ol/style';
import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
import { StyleFunction } from 'ol/style/Style';
import { Condition } from 'ol/events/condition';
import { MapComponent } from '../map.component';
import { Type } from 'ol/geom/Geometry';
import { ObjectEvent } from 'ol/Object';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-interaction-draw',
template: '',
standalone: false
selector: 'aol-interaction-draw',
template: '',
standalone: true,
})
export class DrawInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
clickTolerance?: number;
@Input()
@@ -53,33 +54,25 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olDrawAbort = new EventEmitter<DrawEvent>();
@Output()
drawEnd = new EventEmitter<DrawEvent>();
@Output()
drawStart = new EventEmitter<DrawEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
instance: Draw;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new Draw(this);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('drawabort', (event: DrawEvent) => this.olDrawAbort.emit(event));
this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event));
this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

51
projects/ng-openlayers/src/lib/interactions/modify.component.ts
View File

@@ -1,22 +1,22 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MapComponent } from '../map.component';
import { Modify } from 'ol/interaction';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { Style } from 'ol/style';
import { Vector } from 'ol/source';
import { ModifyEvent } from 'ol/interaction/Modify';
import { StyleFunction } from 'ol/style/Style';
import { Condition } from 'ol/events/condition';
import { ObjectEvent } from 'ol/Object';
import { DrawEvent } from 'ol/interaction/Draw';
import BaseEvent from 'ol/events/Event';
import { Condition } from 'ol/events/condition';
import { Modify } from 'ol/interaction';
import { ModifyEvent } from 'ol/interaction/Modify';
import { Vector } from 'ol/source';
import { Style } from 'ol/style';
import { StyleFunction } from 'ol/style/Style';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-modify',
template: '',
standalone: false
selector: 'aol-interaction-modify',
template: '',
standalone: true,
})
export class ModifyInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition?: Condition;
@Input()
@@ -33,34 +33,29 @@ export class ModifyInteractionComponent implements OnInit, OnDestroy {
source?: Vector;
@Output()
olChange = new EventEmitter<DrawEvent>();
modifyEnd = new EventEmitter<ModifyEvent>();
@Output()
modifyStart = new EventEmitter<ModifyEvent>();
@Output()
olChange = new EventEmitter<ModifyEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
olModifyEnd = new EventEmitter<ModifyEvent>();
@Output()
olModifyStart = new EventEmitter<ModifyEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
instance: Modify;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new Modify(this);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change', (event: ModifyEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('modifyend', (event: ModifyEvent) => this.olModifyEnd.emit(event));
this.instance.on('modifystart', (event: ModifyEvent) => this.olModifyStart.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event));
this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

16
projects/ng-openlayers/src/lib/interactions/mousewheelzoom.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { MouseWheelZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-mousewheelzoom',
template: '',
standalone: false
selector: 'aol-interaction-mousewheelzoom',
template: '',
standalone: true,
})
export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -17,14 +19,12 @@ export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
instance: MouseWheelZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new MouseWheelZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

16
projects/ng-openlayers/src/lib/interactions/pinchzoom.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { PinchZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-pinchzoom',
template: '',
standalone: false
selector: 'aol-interaction-pinchzoom',
template: '',
standalone: true,
})
export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -15,14 +17,12 @@ export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
instance: PinchZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new PinchZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

38
projects/ng-openlayers/src/lib/interactions/select.component.ts
View File

@@ -1,21 +1,22 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MapComponent } from '../map.component';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { ObjectEvent } from 'ol/Object';
import { Condition } from 'ol/events/condition';
import { Select } from 'ol/interaction';
import { FilterFunction, SelectEvent } from 'ol/interaction/Select';
import { Layer } from 'ol/layer';
import { Style } from 'ol/style';
import { Collection, Feature } from 'ol';
import { SelectEvent, FilterFunction } from 'ol/interaction/Select';
import { StyleFunction } from 'ol/style/Style';
import { Condition } from 'ol/events/condition';
import { ObjectEvent } from 'ol/Object';
import BaseEvent from 'ol/events/Event';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-select',
template: '',
standalone: false
selector: 'aol-interaction-select',
template: '',
standalone: true,
})
export class SelectInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
addCondition?: Condition;
@Input()
@@ -40,30 +41,23 @@ export class SelectInteractionComponent implements OnInit, OnDestroy {
@Output()
olChange = new EventEmitter<SelectEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
olSelect = new EventEmitter<SelectEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
@Output()
olSelect = new EventEmitter<SelectEvent>();
instance: Select;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new Select(this);
this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

66
projects/ng-openlayers/src/lib/interactions/snap.component.ts Normal file
View File

@@ -0,0 +1,66 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { ObjectEvent } from 'ol/Object';
import { Snap } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { SnapEvent } from 'ol/events/SnapEvent';
import { Segmenters } from 'ol/interaction/Snap';
import VectorSource from 'ol/source/Vector';
import { Geometry } from 'ol/geom';
@Component({
selector: 'aol-interaction-snap',
template: '',
standalone: true,
})
export class SnapInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
features?: Collection<Feature>;
@Input()
source?: VectorSource<Feature<Geometry>>;
@Input()
edge?: boolean;
@Input()
vertex?: boolean;
@Input()
intersection?: boolean;
@Input()
pixelTolerance?: number;
@Input()
segmenters?: Segmenters;
@Output()
olChange: EventEmitter<SnapEvent>;
@Output()
propertyChange: EventEmitter<ObjectEvent>;
@Output()
snap: EventEmitter<SnapEvent>;
@Output()
unsnap: EventEmitter<SnapEvent>;
instance: Snap;
constructor() {
this.olChange = new EventEmitter<SnapEvent>();
this.propertyChange = new EventEmitter<ObjectEvent>();
this.snap = new EventEmitter<SnapEvent>();
this.unsnap = new EventEmitter<SnapEvent>();
}
ngOnInit(): void {
this.instance = new Snap(this);
this.instance.on('change', (event: SnapEvent) => this.olChange.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('snap', (event: SnapEvent) => this.snap.emit(event));
this.instance.on('unsnap', (event: SnapEvent) => this.unsnap.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

49
projects/ng-openlayers/src/lib/interactions/translate.component.ts
View File

@@ -1,18 +1,19 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Translate } from 'ol/interaction';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { Layer } from 'ol/layer';
import { TranslateEvent } from 'ol/interaction/Translate';
import { MapComponent } from '../map.component';
import BaseEvent from 'ol/events/Event';
import { ObjectEvent } from 'ol/Object';
import { Translate } from 'ol/interaction';
import { TranslateEvent } from 'ol/interaction/Translate';
import { Layer } from 'ol/layer';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-translate',
template: '',
standalone: false
selector: 'aol-interaction-translate',
template: '',
standalone: true,
})
export class TranslateInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
features?: Collection<Feature>;
@Input()
@@ -21,30 +22,30 @@ export class TranslateInteractionComponent implements OnInit, OnDestroy {
hitTolerance?: number;
@Output()
olChange = new EventEmitter<BaseEvent>();
olChange: EventEmitter<TranslateEvent>;
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
propertyChange: EventEmitter<ObjectEvent>;
@Output()
olError = new EventEmitter<BaseEvent>();
translateEnd: EventEmitter<TranslateEvent>;
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
translateStart: EventEmitter<TranslateEvent>;
@Output()
translateEnd = new EventEmitter<TranslateEvent>();
@Output()
translateStart = new EventEmitter<TranslateEvent>();
@Output()
translating = new EventEmitter<TranslateEvent>();
translating: EventEmitter<TranslateEvent>;
instance: Translate;
constructor(private map: MapComponent) {}
constructor() {
this.olChange = new EventEmitter<TranslateEvent>();
this.propertyChange = new EventEmitter<ObjectEvent>();
this.translateEnd = new EventEmitter<TranslateEvent>();
this.translateStart = new EventEmitter<TranslateEvent>();
this.translating = new EventEmitter<TranslateEvent>();
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Translate(this);
this.instance.on('change', (event: BaseEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('change', (event: TranslateEvent) => this.olChange.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event));
this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event));
@@ -53,7 +54,7 @@ export class TranslateInteractionComponent implements OnInit, OnDestroy {
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

61
projects/ng-openlayers/src/lib/layers/layer.component.ts
View File

@@ -1,12 +1,15 @@
import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Directive } from '@angular/core';
import Event from 'ol/events/Event';
import { Directive, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Extent } from 'ol/extent';
import RenderEvent from 'ol/render/Event';
import { MapComponent } from '../map.component';
import { LayerGroupComponent } from './layergroup.component';
import { Extent } from 'ol/extent';
import BaseObject from 'ol/Object';
import Map from 'ol/Map';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
@Input()
className: string;
@Input()
opacity: number;
@Input()
@@ -19,18 +22,32 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
minResolution: number;
@Input()
maxResolution: number;
@Input()
minZoom: number;
@Input()
maxZoom: number;
@Input()
map: Map;
@Input()
properties: {
[x: string]: unknown;
};
@Input()
prerender: (evt: Event) => void;
prerender: (evt: RenderEvent) => void;
@Input()
postrender: (evt: Event) => void;
postrender: (evt: RenderEvent) => void;
public instance: any;
public componentType = 'layer';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
instance: any;
componentType = 'layer';
protected constructor(protected host: MapComponent | LayerGroupComponent) {}
private readonly mapComponent = inject(MapComponent);
private readonly group = inject(LayerGroupComponent, { optional: true });
ngOnInit() {
protected host = this.group || this.mapComponent;
ngOnInit(): void {
if (this.prerender !== null && this.prerender !== undefined) {
this.instance.on('prerender', this.prerender);
}
@@ -40,26 +57,24 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
this.host.instance.getLayers().push(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.host.instance.getLayers().remove(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
if (key === 'prerender') {
this.instance.un('prerender', changes[key].previousValue);
this.instance.on('prerender', changes[key].currentValue);
}
if (key === 'postrender') {
this.instance.un('postrender', changes[key].previousValue);
this.instance.on('postrender', changes[key].currentValue);
}
properties[key] = changes[key].currentValue;
if (key === 'prerender') {
this.instance.un('prerender', changes[key].previousValue);
this.instance.on('prerender', changes[key].currentValue);
}
if (key === 'postrender') {
this.instance.un('postrender', changes[key].previousValue);
this.instance.on('postrender', changes[key].currentValue);
}
}
// console.log('changes detected in aol-layer, setting new properties: ', properties);

70
projects/ng-openlayers/src/lib/layers/layergroup.component.ts
View File

@@ -1,28 +1,64 @@
import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
import { Group } from 'ol/layer';
import { LayerComponent } from './layer.component';
import { MapComponent } from '../map.component';
import { Extent } from 'ol/extent';
import BaseObject from 'ol/Object';
import BaseLayer from 'ol/layer/Base';
import Collection from 'ol/Collection';
@Component({
selector: 'aol-layer-group',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-layer-group',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
export class LayerGroupComponent implements OnInit, OnDestroy, OnChanges {
@Input()
opacity: number;
@Input()
visible: boolean;
@Input()
extent: Extent;
@Input()
zIndex: number;
@Input()
minResolution: number;
@Input()
maxResolution: number;
@Input()
minZoom: number;
@Input()
maxZoom: number;
@Input()
layers: BaseLayer[] | Collection<BaseLayer>;
@Input()
properties: {
[x: string]: unknown;
};
public instance: Group;
componentType = 'layer';
private readonly map = inject(MapComponent);
private readonly group = inject(LayerGroupComponent, { skipSelf: true, optional: true });
private readonly host = this.group || this.map;
constructor(
map: MapComponent,
@SkipSelf()
@Optional()
group?: LayerGroupComponent
) {
super(group || map);
}
ngOnInit() {
ngOnInit(): void {
// console.log(`creating ol.layer.Group instance with:`, this);
this.instance = new Group(this);
super.ngOnInit();
this.host.instance.getLayers().push(this.instance);
}
ngOnDestroy(): void {
this.host.instance.getLayers().remove(this.instance);
}
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
properties[key] = changes[key].currentValue;
}
this.instance.setProperties(properties, false);
}
}

37
projects/ng-openlayers/src/lib/layers/layerimage.component.ts
View File

@@ -1,39 +1,18 @@
import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Image } from 'ol/layer';
import { MapComponent } from '../map.component';
import ImageSource from 'ol/source/Image';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { Extent } from 'ol/extent';
@Component({
selector: 'aol-layer-image',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-layer-image',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
@Input()
opacity: number;
@Input()
visible: boolean;
@Input()
extent: Extent;
@Input()
minResolution: number;
@Input()
maxResolution: number;
@Input()
zIndex: number;
export class LayerImageComponent extends LayerComponent implements OnInit {
source: ImageSource;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Image(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

29
projects/ng-openlayers/src/lib/layers/layertile.component.ts
View File

@@ -1,31 +1,28 @@
import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Tile } from 'ol/layer';
import { MapComponent } from '../map.component';
import TileSource from 'ol/source/Tile';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { BackgroundColor } from 'ol/layer/Base';
@Component({
selector: 'aol-layer-tile',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-layer-tile',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
export class LayerTileComponent extends LayerComponent implements OnInit {
@Input()
preload: number;
@Input()
background: BackgroundColor;
@Input()
useInterimTilesOnError: boolean;
@Input()
cacheSize: number;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
source: TileSource;
ngOnInit() {
// console.log('creating ol.layer.Tile instance with:', this);
ngOnInit(): void {
this.instance = new Tile(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

35
projects/ng-openlayers/src/lib/layers/layervector.component.ts
View File

@@ -1,40 +1,37 @@
import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
import { MapComponent } from '../map.component';
import { Component, Input, OnInit } from '@angular/core';
import { Vector } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import { Style } from 'ol/style';
import { StyleFunction } from 'ol/style/Style';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { OrderFunction } from 'ol/render';
import { BackgroundColor } from 'ol/layer/Base';
@Component({
selector: 'aol-layer-vector',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-layer-vector',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
export class LayerVectorComponent extends LayerComponent implements OnInit {
@Input()
renderBuffer: number;
@Input()
style: Style | Style[] | StyleFunction;
@Input()
updateWhileAnimating: boolean;
@Input()
updateWhileInteracting: boolean;
@Input()
renderOrder: OrderFunction;
@Input()
declutter: string | number | boolean;
@Input()
background: BackgroundColor;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
source: VectorSource;
ngOnInit() {
// console.log('creating ol.layer.Vector instance with:', this);
ngOnInit(): void {
this.instance = new Vector(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

46
projects/ng-openlayers/src/lib/layers/layervectortile.component.ts
View File

@@ -1,25 +1,24 @@
import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { VectorTile } from 'ol/layer';
import { Feature } from 'ol';
import { Style } from 'ol/style';
import { MapComponent } from '../map.component';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { StyleFunction } from 'ol/style/Style';
import { LayerComponent } from './layer.component';
import { VectorTileRenderType } from 'ol/layer/VectorTile';
import { OrderFunction } from 'ol/render';
import { BackgroundColor } from 'ol/layer/Base';
@Component({
selector: 'aol-layer-vectortile',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-layer-vectortile',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
export class LayerVectorTileComponent extends LayerComponent implements OnInit {
@Input()
renderOrder: OrderFunction;
@Input()
renderBuffer: number;
@Input()
renderMode: any | string;
/* not marked as optional in the typings */
@Input()
renderOrder: (feature1: Feature, feature2: Feature) => number;
renderMode: VectorTileRenderType;
@Input()
style: Style | Style[] | StyleFunction;
@Input()
@@ -27,19 +26,18 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit,
@Input()
updateWhileInteracting: boolean;
@Input()
visible: boolean;
declutter: string | number | boolean;
@Input()
background: BackgroundColor;
@Input()
preload: number;
@Input()
useInterimTilesOnError: boolean;
@Input()
cacheSize: number;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
// console.log('creating ol.layer.VectorTile instance with:', this);
ngOnInit(): void {
this.instance = new VectorTile(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

132
projects/ng-openlayers/src/lib/map.component.ts
View File

@@ -1,33 +1,35 @@
import {
Component,
OnInit,
ElementRef,
Input,
Output,
EventEmitter,
AfterViewInit,
SimpleChanges,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
inject,
} from '@angular/core';
import { Map } from 'ol';
import Map from 'ol/Map';
import MapBrowserEvent from 'ol/MapBrowserEvent';
import MapEvent from 'ol/MapEvent';
import { ObjectEvent } from 'ol/Object';
import RenderEvent from 'ol/render/Event';
import { Control } from 'ol/control';
import { Interaction } from 'ol/interaction';
import { DrawEvent } from 'ol/interaction/Draw';
import BaseEvent from 'ol/events/Event';
import { Interaction } from 'ol/interaction';
import RenderEvent from 'ol/render/Event';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-map',
template: `
selector: 'aol-map',
template: `
<div [style.width]="width" [style.height]="height"></div>
<ng-content></ng-content>
`,
standalone: false
standalone: true,
})
export class MapComponent implements OnInit, AfterViewInit, OnChanges {
private host = inject(ElementRef);
@Input()
width = '100%';
@Input()
@@ -46,98 +48,78 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges {
renderer: 'canvas' | 'webgl';
@Output()
olChange = new EventEmitter<DrawEvent>();
olClick: EventEmitter<MapBrowserEvent>;
@Output()
olChangeLayerGroup = new EventEmitter<ObjectEvent>();
dblClick: EventEmitter<MapBrowserEvent>;
@Output()
olChangeSize = new EventEmitter<ObjectEvent>();
moveStart: EventEmitter<MapEvent>;
@Output()
olChangeTarget = new EventEmitter<ObjectEvent>();
moveEnd: EventEmitter<MapEvent>;
@Output()
olChangeView = new EventEmitter<ObjectEvent>();
pointerDrag: EventEmitter<MapBrowserEvent>;
@Output()
olClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
pointerMove: EventEmitter<MapBrowserEvent>;
@Output()
dblClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
onpostrender: EventEmitter<RenderEvent>;
@Output()
olError = new EventEmitter<BaseEvent>();
postRender: EventEmitter<MapEvent>;
@Output()
loadEnd = new EventEmitter<MapEvent>();
onpreCompose: EventEmitter<RenderEvent>;
@Output()
loadStart = new EventEmitter<MapEvent>();
propertyChange: EventEmitter<BaseEvent>;
@Output()
moveEnd = new EventEmitter<MapEvent>();
@Output()
moveStart = new EventEmitter<MapEvent>();
@Output()
pointerDrag = new EventEmitter<MapBrowserEvent<MouseEvent>>();
@Output()
pointerMove = new EventEmitter<MapBrowserEvent<MouseEvent>>();
@Output()
olPostCompose = new EventEmitter<RenderEvent>();
@Output()
olPostRender = new EventEmitter<RenderEvent>();
@Output()
olPreCompose = new EventEmitter<RenderEvent>();
@Output()
olPropertyChange = new EventEmitter<ObjectEvent>();
@Output()
postRender = new EventEmitter<MapEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
@Output()
singleClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
public instance: Map;
public componentType = 'map';
singleClick: EventEmitter<MapBrowserEvent>;
instance: Map;
componentType = 'map';
// we pass empty arrays to not get default controls/interactions because we have our own directives
controls: Control[] = [];
interactions: Interaction[] = [];
constructor(private host: ElementRef) {}
constructor() {
this.olClick = new EventEmitter<MapBrowserEvent>();
this.dblClick = new EventEmitter<MapBrowserEvent>();
this.moveStart = new EventEmitter<MapEvent>();
this.moveEnd = new EventEmitter<MapEvent>();
this.pointerDrag = new EventEmitter<MapBrowserEvent>();
this.pointerMove = new EventEmitter<MapBrowserEvent>();
this.onpostrender = new EventEmitter<RenderEvent>();
this.postRender = new EventEmitter<MapEvent>();
this.onpreCompose = new EventEmitter<RenderEvent>();
this.propertyChange = new EventEmitter<BaseEvent>();
this.singleClick = new EventEmitter<MapBrowserEvent>();
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.Map instance with:', this);
this.instance = new Map(this);
this.instance.setTarget(this.host.nativeElement.firstElementChild);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:layergroup', (event: ObjectEvent) => this.olChangeLayerGroup.emit(event));
this.instance.on('change:size', (event: ObjectEvent) => this.olChangeSize.emit(event));
this.instance.on('change:target', (event: ObjectEvent) => this.olChangeTarget.emit(event));
this.instance.on('change:view', (event: ObjectEvent) => this.olChangeView.emit(event));
this.instance.on('click', (event: MapBrowserEvent<MouseEvent>) => this.olClick.emit(event));
this.instance.on('dblclick', (event: MapBrowserEvent<MouseEvent>) => this.dblClick.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('loadend', (event: MapEvent) => this.loadEnd.emit(event));
this.instance.on('loadstart', (event: MapEvent) => this.loadStart.emit(event));
this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
this.instance.on('click', (event: MapBrowserEvent) => this.olClick.emit(event));
this.instance.on('dblclick', (event: MapBrowserEvent) => this.dblClick.emit(event));
this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
this.instance.on('pointerdrag', (event: MapBrowserEvent<MouseEvent>) => this.pointerDrag.emit(event));
this.instance.on('pointermove', (event: MapBrowserEvent<MouseEvent>) => this.pointerMove.emit(event));
this.instance.on('postcompose', (event: RenderEvent) => this.olPostCompose.emit(event));
this.instance.on('postrender', (event: RenderEvent) => this.olPostRender.emit(event));
this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.pointerDrag.emit(event));
this.instance.on('pointermove', (event: MapBrowserEvent) => this.pointerMove.emit(event));
this.instance.on('postrender', (event: RenderEvent) => this.onpostrender.emit(event));
this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
this.instance.on('precompose', (event: RenderEvent) => this.olPreCompose.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.olPropertyChange.emit(event));
this.instance.on('singleclick', (event: MapBrowserEvent<MouseEvent>) => this.singleClick.emit(event));
this.instance.on('precompose', (event: RenderEvent) => this.onpreCompose.emit(event));
this.instance.on('propertychange', (event: BaseEvent) => this.propertyChange.emit(event));
this.instance.on('singleclick', (event: MapBrowserEvent) => this.singleClick.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
properties[key] = changes[key].currentValue;
}
// console.log('changes detected in aol-map, setting new properties: ', properties);
this.instance.setProperties(properties, false);
}
ngAfterViewInit() {
ngAfterViewInit(): void {
this.instance.updateSize();
}
}

21
projects/ng-openlayers/src/lib/overlay.component.ts
View File

@@ -1,14 +1,17 @@
import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
import { MapComponent } from './map.component';
import Overlay, { PanOptions, Positioning } from 'ol/Overlay';
import { Component, ContentChild, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Overlay } from 'ol';
import { PanOptions, Positioning } from 'ol/Overlay';
import { ContentComponent } from './content.component';
import { MapComponent } from './map.component';
@Component({
selector: 'aol-overlay',
template: '<ng-content></ng-content>',
standalone: false
selector: 'aol-overlay',
template: '<ng-content></ng-content>',
standalone: true,
})
export class OverlayComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@ContentChild(ContentComponent, { static: true })
content: ContentComponent;
@@ -33,9 +36,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
instance: Overlay;
element: HTMLElement;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
if (this.content) {
this.element = this.content.elementRef.nativeElement;
this.instance = new Overlay(this);
@@ -43,7 +44,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
}
}
ngOnDestroy() {
ngOnDestroy(): void {
if (this.instance) {
this.map.instance.removeOverlay(this.instance);
}

25
projects/ng-openlayers/src/lib/sources/bingmaps.component.ts
View File

@@ -1,14 +1,14 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { BingMaps } from 'ol/source';
import { SourceComponent } from './source.component';
import { LayerTileComponent } from '../layers/layertile.component';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { LoadFunction } from 'ol/Tile';
import { BingMaps } from 'ol/source';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-bingmaps',
template: ` <div class="aol-source-bingmaps"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }],
standalone: false
selector: 'aol-source-bingmaps',
template: ` <div class="aol-source-bingmaps"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }],
standalone: true,
})
export class SourceBingmapsComponent extends SourceComponent implements OnInit {
@Input()
@@ -29,14 +29,13 @@ export class SourceBingmapsComponent extends SourceComponent implements OnInit {
tileLoadFunction: LoadFunction;
@Input()
wrapX: boolean;
@Input()
placeholderTiles = false;
instance: BingMaps;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new BingMaps(this);
this.host.instance.setSource(this.instance);
}

26
projects/ng-openlayers/src/lib/sources/cluster.component.ts
View File

@@ -3,13 +3,13 @@ import {
Component,
ContentChild,
forwardRef,
Host,
inject,
Input,
OnChanges,
SimpleChanges,
} from '@angular/core';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Geometry, Point } from 'ol/geom';
import { Cluster, Vector } from 'ol/source';
import { LayerVectorComponent } from '../layers/layervector.component';
@@ -17,10 +17,10 @@ import { SourceComponent } from './source.component';
import { SourceVectorComponent } from './vector.component';
@Component({
selector: 'aol-source-cluster',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }],
standalone: false
selector: 'aol-source-cluster',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }],
standalone: true,
})
export class SourceClusterComponent extends SourceComponent implements AfterContentInit, OnChanges {
@Input()
@@ -30,24 +30,20 @@ export class SourceClusterComponent extends SourceComponent implements AfterCont
@Input()
wrapX?: boolean;
@ContentChild(SourceVectorComponent, { static: false })
@ContentChild(SourceVectorComponent)
sourceVectorComponent: SourceVectorComponent;
instance: Cluster;
source: Vector;
instance: Cluster<Feature<Geometry>>;
host = inject(LayerVectorComponent, { host: true });
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
this.source = this.sourceVectorComponent.instance;
this.instance = new Cluster(this);
this.host.instance.setSource(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('distance')) {
this.instance.setDistance(this.distance);
}

25
projects/ng-openlayers/src/lib/sources/geojson.component.ts
View File

@@ -1,16 +1,16 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { GeoJSON } from 'ol/format';
import FeatureFormat from 'ol/format/Feature';
import { ProjectionLike } from 'ol/proj';
import { Vector } from 'ol/source';
import { LayerVectorComponent } from '../layers/layervector.component';
import { SourceComponent } from './source.component';
import FeatureFormat from 'ol/format/Feature';
import { Vector } from 'ol/source';
import { GeoJSON } from 'ol/format';
import { ProjectionLike } from 'ol/proj';
@Component({
selector: 'aol-source-geojson',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }],
standalone: false
selector: 'aol-source-geojson',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }],
standalone: true,
})
export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
@Input()
@@ -24,12 +24,9 @@ export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
instance: Vector;
format: FeatureFormat;
host = inject(LayerVectorComponent, { host: true });
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.format = new GeoJSON(this);
this.instance = new Vector(this);
this.host.instance.setSource(this.instance);

31
projects/ng-openlayers/src/lib/sources/imagearcgisrest.component.ts
View File

@@ -2,26 +2,26 @@ import {
Component,
EventEmitter,
forwardRef,
Host,
inject,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
import ImageArcGISRest from 'ol/source/ImageArcGISRest';
import { LoadFunction } from 'ol/Image';
import { ProjectionLike } from 'ol/proj';
import { ImageArcGISRest } from 'ol/source';
import { ImageSourceEvent } from 'ol/source/Image';
import { AttributionLike } from 'ol/source/Source';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { AttributionLike } from 'ol/source/Source';
import { LoadFunction } from 'ol/Image';
import { ImageSourceEvent } from 'ol/source/Image';
@Component({
selector: 'aol-source-imagearcgisrest',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
standalone: false
selector: 'aol-source-imagearcgisrest',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
standalone: true,
})
export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
@Input() projection: ProjectionLike | string;
@@ -29,7 +29,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
@Input() attributions: AttributionLike;
@Input() crossOrigin?: string;
@Input() imageLoadFunction?: LoadFunction;
@Input() params?: { [k: string]: any };
@Input() params?: Record<string, unknown>;
@Input() ratio = 1.5;
@Input() resolutions?: number[];
@Input() wrapX?: boolean;
@@ -42,12 +42,9 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageArcGISRest;
host = inject(LayerImageComponent, { host: true });
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ImageArcGISRest(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
@@ -55,7 +52,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}

63
projects/ng-openlayers/src/lib/sources/imagestatic.component.ts
View File

@@ -1,29 +1,29 @@
import {
Component,
Host,
Input,
forwardRef,
Output,
EventEmitter,
forwardRef,
inject,
Input,
OnChanges,
SimpleChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
import { ImageStatic } from 'ol/source';
import { SourceComponent } from './source.component';
import { LayerImageComponent } from '../layers/layerimage.component';
import { ProjectionLike } from 'ol/proj';
import { Extent } from 'ol/extent';
import { AttributionLike } from 'ol/source/Source';
import { LoadFunction } from 'ol/Image';
import { Size } from 'ol/size';
import { Extent } from 'ol/extent';
import { ProjectionLike } from 'ol/proj';
import { ImageStatic } from 'ol/source';
import { ImageSourceEvent } from 'ol/source/Image';
import { AttributionLike } from 'ol/source/Source';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-source-imagestatic',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
standalone: false
selector: 'aol-source-imagestatic',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
standalone: true,
})
export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
@Input()
@@ -38,8 +38,6 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
crossOrigin?: string;
@Input()
imageLoadFunction?: LoadFunction;
@Input()
imageSize?: Size;
@Output()
imageLoadStart = new EventEmitter<ImageSourceEvent>();
@@ -49,10 +47,7 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageStatic;
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
host = inject(LayerImageComponent, { host: true });
setLayerSource(): void {
this.instance = new ImageStatic(this);
@@ -62,27 +57,25 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnInit() {
ngOnInit(): void {
this.setLayerSource();
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'url':
this.url = changes[key].currentValue;
this.setLayerSource();
break;
default:
break;
}
properties[key] = changes[key].currentValue;
switch (key) {
case 'url':
this.url = changes[key].currentValue;
this.setLayerSource();
break;
default:
break;
}
properties[key] = changes[key].currentValue;
}
this.instance.setProperties(properties, false);
}

64
projects/ng-openlayers/src/lib/sources/imagewms.component.ts
View File

@@ -1,13 +1,13 @@
import {
Component,
Host,
EventEmitter,
forwardRef,
inject,
Input,
OnChanges,
OnInit,
forwardRef,
SimpleChanges,
Output,
EventEmitter,
SimpleChanges,
} from '@angular/core';
import { ImageWMS } from 'ol/source';
import { LayerImageComponent } from '../layers/layerimage.component';
@@ -19,47 +19,31 @@ import { ImageSourceEvent } from 'ol/source/Image';
import { ServerType } from 'ol/source/wms';
@Component({
selector: 'aol-source-imagewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
standalone: false
selector: 'aol-source-imagewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
standalone: true,
})
export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit {
@Input()
attributions: AttributionLike;
@Input()
crossOrigin: string;
@Input()
hidpi: boolean;
@Input()
serverType: ServerType;
@Input()
imageLoadFunction?: LoadFunction;
@Input()
params: { [key: string]: any };
@Input()
projection: ProjectionLike | string;
@Input()
ratio: number;
@Input()
resolutions: Array<number>;
@Input()
url: string;
@Input() attributions: AttributionLike;
@Input() crossOrigin: string;
@Input() hidpi: boolean;
@Input() serverType: ServerType;
@Input() imageLoadFunction?: LoadFunction;
@Input() params: Record<string, unknown>;
@Input() projection: ProjectionLike | string;
@Input() ratio: number;
@Input() resolutions: Array<number>;
@Input() url: string;
@Output()
imageLoadStart = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadEnd = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadError = new EventEmitter<ImageSourceEvent>();
@Output() imageLoadStart = new EventEmitter<ImageSourceEvent>();
@Output() imageLoadEnd = new EventEmitter<ImageSourceEvent>();
@Output() imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageWMS;
host = inject(LayerImageComponent, { host: true });
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ImageWMS(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
@@ -67,7 +51,7 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}

31
projects/ng-openlayers/src/lib/sources/osm.component.ts
View File

@@ -1,17 +1,16 @@
import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core';
import { AfterContentInit, Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { OSM } from 'ol/source';
import { AttributionLike } from 'ol/source/Source';
import { TileSourceEvent } from 'ol/source/Tile';
import { LoadFunction } from 'ol/Tile';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { SourceXYZComponent } from './xyz.component';
@Component({
selector: 'aol-source-osm',
template: ` <div class="aol-source-osm"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }],
standalone: false
selector: 'aol-source-osm',
template: ` <div class="aol-source-osm"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }],
standalone: true,
})
export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
@Input()
@@ -34,30 +33,24 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
wrapX: boolean;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
instance: OSM;
constructor(
@Optional()
@Host()
protected layer?: LayerTileComponent
) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
if (this.tileGridXYZ) {
this.tileGrid = this.tileGridXYZ.instance;
}
this.instance = new OSM(this);
this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
this.register(this.instance);
this._register(this.instance);
}
}

47
projects/ng-openlayers/src/lib/sources/raster.component.ts
View File

@@ -4,46 +4,47 @@ import {
ContentChild,
EventEmitter,
forwardRef,
Host,
inject,
Input,
Output,
} from '@angular/core';
import { Raster, Source } from 'ol/source';
import { Operation, RasterSourceEvent } from 'ol/source/Raster';
import { Options, RasterSourceEvent } from 'ol/source/Raster';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-raster',
template: ` <ng-content></ng-content> `,
providers: [
{
provide: SourceComponent,
useExisting: forwardRef(() => SourceRasterComponent),
},
],
standalone: false
selector: 'aol-source-raster',
template: ` <ng-content></ng-content> `,
providers: [
{
provide: SourceComponent,
useExisting: forwardRef(() => SourceRasterComponent),
},
],
standalone: true,
})
export class SourceRasterComponent extends SourceComponent implements AfterContentInit {
@Input()
operation?: Operation;
operation?: Options['operation'];
@Input()
threads?: number;
threads?: Options['threads'];
@Input()
lib?: any;
lib?: Options['lib'];
@Input()
operationType?: 'pixel' | 'image';
operationType?: Options['operationType'];
@Output()
beforeOperations = new EventEmitter<RasterSourceEvent>();
beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
@Output()
afterOperations = new EventEmitter<RasterSourceEvent>();
afterOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
instance: Raster;
sources: Source[] = [];
host = inject(LayerImageComponent, { host: true });
@ContentChild(SourceComponent, { static: false })
@ContentChild(SourceComponent)
set source(sourceComponent: SourceComponent) {
this.sources = [sourceComponent.instance];
if (this.instance) {
@@ -52,18 +53,14 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
}
}
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
this.init();
}
init() {
init(): void {
this.instance = new Raster(this);
this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event));
this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event));
this.register(this.instance);
this._register(this.instance);
}
}

14
projects/ng-openlayers/src/lib/sources/source.component.ts
View File

@@ -1,26 +1,26 @@
import { Input, OnDestroy, Directive } from '@angular/core';
import Source from 'ol/source/Source';
import { Directive, Input, OnDestroy } from '@angular/core';
import { Source } from 'ol/source';
import { LayerComponent } from '../layers/layer.component';
import { AttributionLike } from 'ol/source/Source';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class SourceComponent implements OnDestroy {
@Input()
attributions: any;
attributions: AttributionLike;
public instance: Source;
public componentType = 'source';
protected constructor(protected host: LayerComponent) {}
protected host: LayerComponent;
ngOnDestroy() {
ngOnDestroy(): void {
if (this.host && this.host.instance) {
this.host.instance.setSource(null);
}
}
protected register(s: Source) {
protected _register(s: Source): void {
if (this.host) {
this.host.instance.setSource(s);
}

17
projects/ng-openlayers/src/lib/sources/tilejson.component.ts
View File

@@ -1,25 +1,22 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { TileJSON } from 'ol/source';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-tilejson',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
standalone: false
selector: 'aol-source-tilejson',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
standalone: true,
})
export class SourceTileJSONComponent extends SourceComponent implements OnInit {
@Input()
url: string;
instance: TileJSON;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new TileJSON(this);
this.host.instance.setSource(this.instance);
}

65
projects/ng-openlayers/src/lib/sources/tilewms.component.ts
View File

@@ -1,57 +1,42 @@
import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { Component, forwardRef, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { LoadFunction } from 'ol/Tile';
import { TileWMS } from 'ol/source';
import TileGrid from 'ol/tilegrid/TileGrid';
import { LoadFunction } from 'ol/Tile';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { ServerType } from 'ol/source/wms';
@Component({
selector: 'aol-source-tilewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
standalone: false
selector: 'aol-source-tilewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
standalone: true,
})
export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit {
@Input()
cacheSize: number;
@Input()
crossOrigin: string;
@Input()
gutter: number;
@Input()
hidpi: boolean;
@Input()
params: { [key: string]: any };
@Input()
projection: string;
@Input()
reprojectionErrorThreshold: number;
@Input()
serverType: ServerType;
@Input()
tileGrid: TileGrid;
@Input()
tileLoadFunction: LoadFunction;
@Input()
url: string;
@Input()
urls: string[];
@Input()
wrapX: boolean;
@Input() cacheSize: number;
@Input() crossOrigin: string;
@Input() gutter: number;
@Input() hidpi: boolean;
@Input() params: Record<string, unknown>;
@Input() projection: ProjectionLike;
@Input() reprojectionErrorThreshold: number;
@Input() serverType: ServerType;
@Input() tileGrid: TileGrid;
@Input() tileLoadFunction: LoadFunction;
@Input() url: string;
@Input() urls: string[];
@Input() wrapX: boolean;
instance: TileWMS;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new TileWMS(this);
this.host.instance.setSource(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}

109
projects/ng-openlayers/src/lib/sources/tilewmts.component.ts
View File

@@ -1,108 +1,101 @@
import {
Component,
Host,
Input,
forwardRef,
AfterContentInit,
Component,
ContentChild,
SimpleChanges,
EventEmitter,
forwardRef,
Input,
OnChanges,
Output,
EventEmitter,
SimpleChanges,
inject,
} from '@angular/core';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { TileGridWMTSComponent } from '../tilegridwmts.component';
import { WMTS as SourceWMTS } from 'ol/source';
import WMTS from 'ol/tilegrid/WMTS';
import { ProjectionLike } from 'ol/proj';
import { LoadFunction } from 'ol/Tile';
import { WMTS } from 'ol/source';
import { TileSourceEvent } from 'ol/source/Tile';
import { RequestEncoding } from 'ol/source/WMTS';
import { LayerTileComponent } from '../layers/layertile.component';
import { TileGridWMTSComponent } from '../tilegridwmts.component';
import { SourceComponent } from './source.component';
import { Options } from 'ol/source/WMTS';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-source-tilewmts',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }],
standalone: false
selector: 'aol-source-tilewmts',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }],
standalone: true,
})
export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges {
@Input()
cacheSize?: number;
cacheSize?: Options['cacheSize'];
@Input()
crossOrigin?: string;
crossOrigin?: Options['crossOrigin'];
@Input()
tileGrid: WMTS;
tileGrid: Options['tileGrid'];
@Input()
projection: ProjectionLike;
projection: Options['projection'];
@Input()
reprojectionErrorThreshold?: number;
reprojectionErrorThreshold?: Options['reprojectionErrorThreshold'];
@Input()
requestEncoding?: RequestEncoding | undefined;
requestEncoding?: Options['requestEncoding'];
@Input()
layer: string;
layer: Options['layer'];
@Input()
style: string;
style: Options['style'];
@Input()
tileClass?: any;
tileClass?: Options['tileClass'];
@Input()
tilePixelRatio?: number;
tilePixelRatio?: Options['tilePixelRatio'];
@Input()
version?: string;
version?: Options['version'];
@Input()
format?: string;
format?: Options['format'];
@Input()
matrixSet: string;
matrixSet: Options['matrixSet'];
@Input()
dimensions?: any;
dimensions?: Options['dimensions'];
@Input()
url?: string;
url?: Options['url'];
@Input()
tileLoadFunction?: LoadFunction;
tileLoadFunction?: Options['tileLoadFunction'];
@Input()
urls?: string[];
urls?: Options['urls'];
@Input()
wrapX?: boolean;
wrapX?: Options['wrapX'];
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@ContentChild(TileGridWMTSComponent, { static: false })
@ContentChild(TileGridWMTSComponent)
tileGridWMTS: TileGridWMTSComponent;
instance: SourceWMTS;
instance: WMTS;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'url':
this.url = changes[key].currentValue;
this.setLayerSource();
break;
default:
break;
}
properties[key] = changes[key].currentValue;
switch (key) {
case 'url':
this.url = changes[key].currentValue;
this.setLayerSource();
break;
default:
break;
}
properties[key] = changes[key].currentValue;
}
this.instance.setProperties(properties, false);
}
setLayerSource(): void {
this.instance = new SourceWMTS(this);
this.instance = new WMTS(this);
this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));

21
projects/ng-openlayers/src/lib/sources/utfgrid.component.ts
View File

@@ -1,26 +1,23 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { SourceComponent } from './source.component';
import { LayerTileComponent } from '../layers/layertile.component';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { UTFGrid } from 'ol/source';
import { Config } from 'ol/source/TileJSON';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-utfgrid',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
standalone: false
selector: 'aol-source-utfgrid',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
standalone: true,
})
export class SourceUTFGridComponent extends SourceComponent implements OnInit {
@Input() tileJSON: Config;
@Input() url: string;
instance: UTFGrid;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new UTFGrid(this);
this.host.instance.setSource(this.instance);
}

51
projects/ng-openlayers/src/lib/sources/vector.component.ts
View File

@@ -1,15 +1,19 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { Vector } from 'ol/source';
import Feature from 'ol/format/Feature';
import { default as FeatureFormat } from 'ol/format/Feature';
import { LayerVectorComponent } from '../layers/layervector.component';
import { SourceComponent } from './source.component';
import { LoadingStrategy } from 'ol/source/Vector';
import { Geometry } from 'ol/geom';
import { Extent } from 'ol/extent';
import { Projection } from 'ol/proj';
import { Feature } from 'ol';
@Component({
selector: 'aol-source-vector',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
standalone: false
selector: 'aol-source-vector',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
standalone: true,
})
export class SourceVectorComponent extends SourceComponent implements OnInit {
@Input()
@@ -21,18 +25,41 @@ export class SourceVectorComponent extends SourceComponent implements OnInit {
@Input()
url: string;
@Input()
format: Feature;
format: FeatureFormat;
@Input()
strategy: LoadingStrategy;
/**
* The loader function used to load features, from a remote source for example.
* If this is not set and `url` is set, the source will create and use an XHR
* feature loader. The `'featuresloadend'` and `'featuresloaderror'` events
* will only fire if the `success` and `failure` callbacks are used.
*
* An extra argument is provided to the OpenLayers callback to enable retrieval
* of the parent VectorSource.
*/
@Input()
loader: (
extent: Extent,
resolution: number,
projection: Projection,
success: (geos: Feature<Geometry>[]) => void,
failure: () => void,
vectorSource: Vector
) => void;
instance: Vector;
host = inject(LayerVectorComponent, { host: true });
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngOnInit(): void {
this.instance = new Vector({
...this,
loader: this.loader
? (extent, resolution, projection, success, failure) =>
this.loader(extent, resolution, projection, success, failure, this.instance)
: undefined,
});
ngOnInit() {
this.instance = new Vector(this);
this.host.instance.setSource(this.instance);
}
}

34
projects/ng-openlayers/src/lib/sources/vectortile.component.ts
View File

@@ -1,19 +1,21 @@
import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
import { AfterContentInit, Component, ContentChild, forwardRef, inject, Input } from '@angular/core';
import { UrlFunction } from 'ol/Tile';
import FeatureFormat from 'ol/format/Feature';
import { ProjectionLike } from 'ol/proj';
import { VectorTile } from 'ol/source';
import Feature from 'ol/format/Feature';
import TileGrid from 'ol/tilegrid/TileGrid';
import { LayerVectorTileComponent } from '../layers/layervectortile.component';
import { FormatComponent } from '../formats/format.component';
import { LayerVectorTileComponent } from '../layers/layervectortile.component';
import { TileGridComponent } from '../tilegrid.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { UrlFunction } from 'ol/Tile';
import { FeatureLike } from 'ol/Feature';
import RenderFeature from 'ol/render/Feature';
@Component({
selector: 'aol-source-vectortile',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
standalone: false
selector: 'aol-source-vectortile',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
standalone: true,
})
export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
@Input()
@@ -33,21 +35,19 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC
@Input()
wrapX: boolean;
@ContentChild(FormatComponent, { static: false })
@ContentChild(FormatComponent)
formatComponent: FormatComponent;
@ContentChild(TileGridComponent, { static: false })
@ContentChild(TileGridComponent)
tileGridComponent: TileGridComponent;
public instance: VectorTile;
format: Feature;
format: FeatureFormat<RenderFeature>;
tileGrid: TileGrid;
constructor(@Host() layer: LayerVectorTileComponent) {
super(layer);
}
instance: VectorTile<FeatureLike>;
host = inject(LayerVectorTileComponent, { host: true });
/* need the children to construct the OL3 object */
ngAfterContentInit() {
ngAfterContentInit(): void {
this.format = this.formatComponent.instance;
this.tileGrid = this.tileGridComponent.instance;
// console.log('creating ol.source.VectorTile instance with:', this);

47
projects/ng-openlayers/src/lib/sources/xyz.component.ts
View File

@@ -4,10 +4,9 @@ import {
ContentChild,
EventEmitter,
forwardRef,
Host,
inject,
Input,
OnChanges,
Optional,
Output,
SimpleChanges,
} from '@angular/core';
@@ -20,14 +19,17 @@ import TileGrid from 'ol/tilegrid/TileGrid';
import { LayerTileComponent } from '../layers/layertile.component';
import { TileGridComponent } from '../tilegrid.component';
import { SourceComponent } from './source.component';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-source-xyz',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }],
standalone: false
selector: 'aol-source-xyz',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }],
standalone: true,
})
export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
protected layer?: LayerTileComponent;
@Input()
cacheSize: number;
@Input()
@@ -59,58 +61,47 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
@Input()
wrapX: boolean;
@ContentChild(TileGridComponent, { static: false })
@ContentChild(TileGridComponent)
tileGridXYZ: TileGridComponent;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
instance: XYZ;
host = inject(LayerTileComponent, { optional: true, host: true });
constructor(
@Optional()
@Host()
protected layer?: LayerTileComponent
) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
if (this.tileGridXYZ) {
this.tileGrid = this.tileGridXYZ.instance;
}
this.init();
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
properties[key] = changes[key].currentValue;
}
this.instance.setProperties(properties, false);
if (changes.hasOwnProperty('url')) {
this.init();
}
}
init() {
init(): void {
this.instance = new XYZ(this);
this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
this.register(this.instance);
this._register(this.instance);
}
}

26
projects/ng-openlayers/src/lib/styles/circle.component.ts
View File

@@ -1,33 +1,31 @@
import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
import { Circle, Fill, Stroke } from 'ol/style';
import { StyleComponent } from './style.component';
@Component({
selector: 'aol-style-circle',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-style-circle',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
private host = inject(StyleComponent, { host: true });
@Input()
fill: Fill;
@Input()
radius: number;
@Input()
snapToPixel: boolean;
@Input()
stroke: Stroke;
public componentType = 'style-circle';
public instance: Circle;
constructor(@Host() private host: StyleComponent) {}
componentType = 'style-circle';
instance: Circle;
/**
* WORK-AROUND: since the re-rendering is not triggered on style change
* we trigger a radius change.
* see openlayers #6233 and #5775
*/
update() {
update(): void {
if (!!this.instance) {
// console.log('setting ol.style.Circle instance\'s radius');
this.instance.setRadius(this.radius);
@@ -35,14 +33,14 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
this.host.update();
}
ngAfterContentInit() {
ngAfterContentInit(): void {
// console.log('creating ol.style.Circle instance with: ', this);
this.instance = new Circle(this);
this.host.instance.setImage(this.instance);
this.host.update();
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
@@ -52,7 +50,7 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
// console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-style-circle');
this.host.instance.setImage(null);
}

46
projects/ng-openlayers/src/lib/styles/fill.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Fill } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
@@ -7,22 +7,22 @@ import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
@Component({
selector: 'aol-style-fill',
template: ` <div class="aol-style-fill"></div> `,
standalone: false
selector: 'aol-style-fill',
template: ` <div class="aol-style-fill"></div> `,
standalone: true,
})
export class StyleFillComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
public instance: Fill;
instance: Fill;
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
constructor() {
const styleHost = inject(StyleComponent, { optional: true });
const styleCircleHost = inject(StyleCircleComponent, { optional: true });
const styleTextHost = inject(StyleTextComponent, { optional: true });
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
@@ -36,34 +36,26 @@ export class StyleFillComponent implements OnInit, OnChanges {
// console.log('creating aol-style-fill with: ', this);
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Fill instance with: ', this);
this.instance = new Fill(this);
switch (this.host.componentType) {
case 'style':
this.host.instance.setFill(this.instance);
// console.log('setting ol.style instance\'s fill:', this.host);
break;
case 'style-text':
this.host.instance.setFill(this.instance);
break;
case 'style-circle':
(this.host as StyleCircleComponent).fill = this.instance;
// console.log('setting ol.style.circle instance\'s fill:', this.host);
break;
default:
throw new Error('unknown host type: ' + this.host);
if (this.host instanceof StyleComponent || this.host instanceof StyleTextComponent) {
this.host.instance.setFill(this.instance);
} else {
this.host.fill = this.instance;
}
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
if (changes.color) {
this.instance.setColor(changes.color.currentValue);
}
this.host.update();
if (this.host instanceof StyleCircleComponent || this.host instanceof StyleComponent) {
this.host.update();
}
// console.log('changes detected in aol-style-fill, setting new color: ', changes);
}
}

38
projects/ng-openlayers/src/lib/styles/icon.component.ts
View File

@@ -1,18 +1,20 @@
import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Color } from 'ol/color';
import { Size } from 'ol/size';
import { Icon } from 'ol/style';
// TODO https://github.com/openlayers/openlayers/issues/12694
// import IconAnchorUnits from 'ol/style/IconAnchorUnits';
// import IconOrigin from 'ol/style/IconOrigin';
import { StyleComponent } from './style.component';
import { IconAnchorUnits, IconOrigin } from 'ol/style/Icon';
type IconAnchorUnits = 'fraction' | 'pixels';
type IconOrigin = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
@Component({
selector: 'aol-style-icon',
template: ` <div class="aol-style-icon"></div> `,
standalone: false
selector: 'aol-style-icon',
template: ` <div class="aol-style-icon"></div> `,
standalone: true,
})
export class StyleIconComponent implements OnInit, OnChanges {
private host = inject(StyleComponent, { host: true });
@Input()
anchor: [number, number];
@Input()
@@ -22,11 +24,11 @@ export class StyleIconComponent implements OnInit, OnChanges {
@Input()
anchorOrigin: IconOrigin;
@Input()
color: [number, number, number, number];
color: Color;
@Input()
crossOrigin: IconOrigin;
crossOrigin: string;
@Input()
img: HTMLCanvasElement | HTMLImageElement;
img: HTMLImageElement | HTMLCanvasElement;
@Input()
offset: [number, number];
@Input()
@@ -42,23 +44,19 @@ export class StyleIconComponent implements OnInit, OnChanges {
@Input()
rotation: number;
@Input()
size: [number, number];
@Input()
imgSize: [number, number];
size: Size;
@Input()
src: string;
public instance: Icon;
instance: Icon;
constructor(@Host() private host: StyleComponent) {}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Icon instance with: ', this);
this.instance = new Icon(this);
this.host.instance.setImage(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}

61
projects/ng-openlayers/src/lib/styles/stroke.component.ts
View File

@@ -1,39 +1,38 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Stroke } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
import { StyleTextComponent } from './text.component';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
import { Stroke } from 'ol/style';
import { StyleCircleComponent } from './circle.component';
import { StyleComponent } from './style.component';
import { StyleTextComponent } from './text.component';
@Component({
selector: 'aol-style-stroke',
template: ` <div class="aol-style-stroke"></div> `,
standalone: false
selector: 'aol-style-stroke',
template: ` <div class="aol-style-stroke"></div> `,
standalone: true,
})
export class StyleStrokeComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
@Input()
lineCap: CanvasLineCap | undefined;
lineCap: CanvasLineCap;
@Input()
lineDash: number[];
@Input()
lineJoin: CanvasLineJoin | undefined;
lineJoin: CanvasLineJoin;
@Input()
miterLimit: number;
@Input()
width: number;
public instance: Stroke;
/* the typings do not have the setters */
instance: Stroke;
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
constructor() {
const styleHost = inject(StyleComponent, { optional: true });
const styleCircleHost = inject(StyleCircleComponent, { optional: true });
const styleTextHost = inject(StyleTextComponent, { optional: true });
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
@@ -47,28 +46,18 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
// console.log('creating aol-style-stroke with: ', this);
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Stroke instance with: ', this);
this.instance = new Stroke(this);
switch (this.host.componentType) {
case 'style':
this.host.instance.setStroke(this.instance);
// console.log('setting ol.style instance\'s stroke:', this.host);
break;
case 'style-text':
this.host.instance.setStroke(this.instance);
break;
case 'style-circle':
(this.host as StyleCircleComponent).stroke = this.instance;
// console.log('setting ol.style.circle instance\'s stroke:', this.host);
break;
default:
throw new Error('unknown host type: ' + this.host);
// break;
if (this.host instanceof StyleComponent || this.host instanceof StyleTextComponent) {
this.host.instance.setStroke(this.instance);
} else {
this.host.stroke = this.instance;
}
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
@@ -90,7 +79,9 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
if (changes.width) {
this.instance.setWidth(changes.width.currentValue);
}
this.host.update();
if (this.host instanceof StyleCircleComponent || this.host instanceof StyleComponent) {
this.host.update();
}
// console.log('changes detected in aol-style-stroke, setting new properties: ', changes);
}
}

23
projects/ng-openlayers/src/lib/styles/style.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, Optional, OnInit } from '@angular/core';
import { Component, Input, OnInit, inject } from '@angular/core';
import { Fill, Image, Stroke, Style, Text } from 'ol/style';
import { Geometry } from 'ol/geom';
import { FeatureComponent } from '../feature.component';
@@ -6,9 +6,9 @@ import { LayerVectorComponent } from '../layers/layervector.component';
import { GeometryFunction } from 'ol/style/Style';
@Component({
selector: 'aol-style',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-style',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class StyleComponent implements OnInit {
@Input()
@@ -24,11 +24,14 @@ export class StyleComponent implements OnInit {
@Input()
zIndex: number;
public instance: Style;
public componentType = 'style';
private readonly host: FeatureComponent | LayerVectorComponent;
instance: Style;
componentType = 'style';
private host: FeatureComponent | LayerVectorComponent;
constructor() {
const featureHost = inject(FeatureComponent, { optional: true });
const layerHost = inject(LayerVectorComponent, { optional: true });
constructor(@Optional() featureHost: FeatureComponent, @Optional() layerHost: LayerVectorComponent) {
// console.log('creating aol-style');
this.host = !!featureHost ? featureHost : layerHost;
if (!this.host) {
@@ -36,12 +39,12 @@ export class StyleComponent implements OnInit {
}
}
update() {
update(): void {
// console.log('updating style\'s host: ', this.host);
this.host.instance.changed();
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating aol-style instance with: ', this);
this.instance = new Style(this);
this.host.instance.setStyle(this.instance);

24
projects/ng-openlayers/src/lib/styles/text.component.ts
View File

@@ -1,13 +1,15 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Text } from 'ol/style';
import { StyleComponent } from './style.component';
@Component({
selector: 'aol-style-text',
template: ` <div class="aol-style-text"></div> `,
standalone: false
selector: 'aol-style-text',
template: ` <div class="aol-style-text"></div> `,
standalone: true,
})
export class StyleTextComponent implements OnInit, OnChanges {
private host = inject(StyleComponent, { optional: true });
@Input()
font: string | undefined;
@Input()
@@ -27,23 +29,25 @@ export class StyleTextComponent implements OnInit, OnChanges {
@Input()
textBaseLine: string | undefined;
public instance: Text;
public componentType = 'style-text';
instance: Text;
componentType = 'style-text';
constructor() {
const host = this.host;
constructor(@Optional() private host: StyleComponent) {
if (!host) {
throw new Error('aol-style-text must be a descendant of aol-style');
}
// console.log('creating aol-style-text with: ', this);
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Text instance with: ', this);
this.instance = new Text(this);
this.host.instance.setText(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
@@ -74,6 +78,4 @@ export class StyleTextComponent implements OnInit, OnChanges {
this.host.update();
// console.log('changes detected in aol-style-text, setting new properties: ', changes);
}
update() {}
}

12
projects/ng-openlayers/src/lib/tilegrid.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { createXYZ } from 'ol/tilegrid';
import TileGrid from 'ol/tilegrid/TileGrid';
import { Extent } from 'ol/extent';
@@ -6,9 +6,9 @@ import { Coordinate } from 'ol/coordinate';
import { Size } from 'ol/size';
@Component({
selector: 'aol-tilegrid',
template: '',
standalone: false
selector: 'aol-tilegrid',
template: '',
standalone: true,
})
export class TileGridComponent implements OnInit, OnChanges {
@Input()
@@ -26,7 +26,7 @@ export class TileGridComponent implements OnInit, OnChanges {
instance: TileGrid;
ngOnInit() {
ngOnInit(): void {
if (!this.resolutions) {
this.instance = createXYZ(this);
} else {
@@ -34,7 +34,7 @@ export class TileGridComponent implements OnInit, OnChanges {
}
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
if (!this.resolutions) {
this.instance = createXYZ(this);
} else {

8
projects/ng-openlayers/src/lib/tilegridwmts.component.ts
View File

@@ -5,9 +5,9 @@ import { Coordinate } from 'ol/coordinate';
import { Size } from 'ol/size';
@Component({
selector: 'aol-tilegrid-wmts',
template: '',
standalone: false
selector: 'aol-tilegrid-wmts',
template: '',
standalone: true,
})
export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
@Input()
@@ -27,7 +27,7 @@ export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
instance: WMTS;
ngOnInit() {
ngOnInit(): void {
this.instance = new WMTS(this);
}
}

99
projects/ng-openlayers/src/lib/view.component.ts
View File

@@ -1,18 +1,19 @@
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, inject } from '@angular/core';
import BaseObject, { ObjectEvent } from 'ol/Object';
import View from 'ol/View';
import { MapComponent } from './map.component';
import { ObjectEvent } from 'ol/Object';
import { Extent } from 'ol/extent';
import { Coordinate } from 'ol/coordinate';
import { DrawEvent } from 'ol/interaction/Draw';
import BaseEvent from 'ol/events/Event';
import { Extent } from 'ol/extent';
import { MapComponent } from './map.component';
import { ProjectionLike } from 'ol/proj';
@Component({
selector: 'aol-view',
template: ` <ng-content></ng-content> `,
standalone: false
selector: 'aol-view',
template: ` <ng-content></ng-content> `,
standalone: true,
})
export class ViewComponent implements OnInit, OnChanges, OnDestroy {
export class ViewComponent implements OnInit, OnChanges {
private host = inject(MapComponent);
@Input()
constrainRotation: boolean | number;
@Input()
@@ -40,7 +41,7 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
@Input()
center: Coordinate;
@Input()
projection: string;
projection: ProjectionLike;
@Input()
constrainOnlyCenter: boolean;
@Input()
@@ -58,71 +59,51 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
zoomAnimation = false;
@Output()
olChange = new EventEmitter<DrawEvent>();
changeResolution: EventEmitter<ObjectEvent> = new EventEmitter<ObjectEvent>();
@Output()
changeCenter = new EventEmitter<ObjectEvent>();
@Output()
changeResolution = new EventEmitter<ObjectEvent>();
@Output()
changeRotation = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
changeCenter: EventEmitter<ObjectEvent> = new EventEmitter<ObjectEvent>();
public instance: View;
public componentType = 'view';
instance: View;
componentType = 'view';
constructor(private host: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.View instance with: ', this);
this.instance = new View(this);
this.host.instance.setView(this.instance);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:center', (event: ObjectEvent) => this.changeCenter.emit(event));
this.instance.on('change:resolution', (event: ObjectEvent) => this.changeResolution.emit(event));
this.instance.on('change:rotation', (event: ObjectEvent) => this.changeRotation.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('change:center', (event: ObjectEvent) => this.changeCenter.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'zoom':
/** Work-around: setting the zoom via setProperties does not work. */
if (this.zoomAnimation) {
this.instance.animate({ zoom: changes[key].currentValue });
} else {
this.instance.setZoom(changes[key].currentValue);
}
break;
case 'projection':
this.instance = new View(this);
this.host.instance.setView(this.instance);
break;
case 'center':
/** Work-around: setting the center via setProperties does not work. */
this.instance.setCenter(changes[key].currentValue);
break;
default:
break;
}
properties[key] = changes[key].currentValue;
switch (key) {
case 'zoom':
/** Work-around: setting the zoom via setProperties does not work. */
if (this.zoomAnimation) {
this.instance.animate({ zoom: changes[key].currentValue });
} else {
this.instance.setZoom(changes[key].currentValue);
}
break;
case 'projection':
this.instance = new View(this);
this.host.instance.setView(this.instance);
break;
case 'center':
/** Work-around: setting the center via setProperties does not work. */
this.instance.setCenter(changes[key].currentValue);
break;
default:
break;
}
properties[key] = changes[key].currentValue;
}
// console.log('changes detected in aol-view, setting new properties: ', properties);
this.instance.setProperties(properties, false);
}
ngOnDestroy() {
// console.log('removing aol-view');
}
}

15
projects/ng-openlayers/src/public-api.ts
View File

@@ -1,8 +1,7 @@
/*
* Public API Surface of ng-openlayers
* Public API Surface of ngx-openlayers
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SimpleGeometryComponent } from './lib/geom/simplegeometry.component';
import { SourceComponent } from './lib/sources/source.component';
import { ViewComponent } from './lib/view.component';
@@ -68,8 +67,6 @@ import { DragZoomInteractionComponent } from './lib/interactions/dragzoom.compon
import { MouseWheelZoomInteractionComponent } from './lib/interactions/mousewheelzoom.component';
import { PinchZoomInteractionComponent } from './lib/interactions/pinchzoom.component';
import { DrawInteractionComponent } from './lib/interactions/draw.component';
import { KeyboardPanInteractionComponent } from './lib/interactions/keyboardpan.component';
import { KeyboardZoomInteractionComponent } from './lib/interactions/keyboardzoom.component';
import { SelectInteractionComponent } from './lib/interactions/select.component';
import { ModifyInteractionComponent } from './lib/interactions/modify.component';
import { TranslateInteractionComponent } from './lib/interactions/translate.component';
@@ -79,6 +76,7 @@ import { AttributionsComponent } from './lib/attributions.component';
import { AttributionComponent } from './lib/attribution.component';
import { SourceUTFGridComponent } from './lib/sources/utfgrid.component';
import { LayerComponent } from './lib/layers/layer.component';
import { SnapInteractionComponent } from './lib/interactions/snap.component';
export {
MapComponent,
@@ -148,11 +146,10 @@ export {
MouseWheelZoomInteractionComponent,
PinchZoomInteractionComponent,
DrawInteractionComponent,
KeyboardPanInteractionComponent,
KeyboardZoomInteractionComponent,
SelectInteractionComponent,
ModifyInteractionComponent,
TranslateInteractionComponent,
SnapInteractionComponent,
OverlayComponent,
ContentComponent,
AttributionsComponent,
@@ -242,9 +239,11 @@ const COMPONENTS = [
AttributionComponent,
];
/**
* @deprecated please use standalone components instead
*/
@NgModule({
declarations: COMPONENTS,
imports: [CommonModule],
imports: COMPONENTS,
exports: COMPONENTS,
})
export class AngularOpenlayersModule {}

3
projects/ng-openlayers/src/test.ts
View File

@@ -1,6 +1,5 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'core-js/es7/reflect';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
@@ -8,5 +7,5 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false },
teardown: { destroyAfterEach: true },
});

23
projects/ng-openlayers/tsconfig.lib.json
View File

@@ -2,29 +2,20 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"module": "es2015",
"moduleResolution": "bundler",
"declarationMap": true,
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"esModuleInterop": true,
"types": [],
"paths": {
"@angular/*": [
"node_modules/@angular/*"
]
}
"lib": [
"dom",
"ES2022"
],
"skipLibCheck": true
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true,
"compilationMode": "partial"
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",

32
projects/ng-openlayers/tsconfig.lib.prod.json
View File

@@ -1,33 +1,9 @@
{
"extends": "../../tsconfig.json",
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"module": "es2015",
"moduleResolution": "bundler",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"esModuleInterop": true,
"types": [],
"paths": {
"@angular/*": [
"node_modules/@angular/*"
]
}
"declarationMap": false
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true,
"compilationMode": "partial"
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
}
}

Some files were not shown because too many files have changed in this diff Show More