AW-6526 update angular 21

2026-01-19 18:25:47 +01:00 · 2026-01-19 14:36:49 +01:00 · 2026-01-19 14:13:57 +01:00 · 2026-01-19 13:56:07 +01:00 · 2026-01-19 13:43:12 +01:00 · 2026-01-19 13:35:27 +01:00
472 changed files with 101565 additions and 18316 deletions
@@ -0,0 +1,22 @@
 module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
 }
@@ -22,6 +22,7 @@ speed-measure-plugin.json
 *.launch
 .settings/
 *.sublime-workspace
 .vs/*
 # IDE - VSCode
 .vscode/*
@@ -32,6 +33,7 @@ speed-measure-plugin.json
 .history/*
 # misc
 /.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -46,3 +48,8 @@ testem.log
 Thumbs.db
 projects/common/node_modules/
 projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
 projects/ng-openlayers/node_modules/
 projects/common/node_modules/
@@ -0,0 +1,24 @@
@Library('farmmaps-shared-library') _
 pipeline {
  agent any;
  options {
    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
    disableConcurrentBuilds();
  }
  stages {
    stage('FarmmapsLibBuildAll') {
      steps {
        stepFarmmapsLibBuildAll();
      }
    }
  }
  post {
    success {
      postSuccess();
    }
    always {
      postAlways();
    }
  }
 }
@@ -1,47 +1,24 @@
@Library('farmmaps-shared-library') _
 pipeline {
-  agent any
+  agent any;
-  environment {
+  options {
-     PACKAGE_VERSION_PREFIX=sh(script: 'jq .version package.json |sed "s/\\"//g"', returnStdout: true).trim()
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
-     PACKAGE_VERSION="${PACKAGE_VERSION_PREFIX + '-prerelease.' + env.BUILD_NUMBER}"
+    disableConcurrentBuilds();
  }
  stages {
-    stage('npm install'){
+    stage('FarmmapsLibBuildAll') {
      steps {
-        sh '''npm install
+        stepFarmmapsLibBuildAll();
        cd projects/common
        npm install
        cd ../common-map
        npm install
        '''
      }
    }
    stage('build'){
      steps {
        sh '''ng build common
        ng build common-map'''
      }
    }
    stage('npm publish'){
      steps {
        sh '''cd dist/common
        npm version ${PACKAGE_VERSION}
        npm publish
        cd ../common-map
        npm version ${PACKAGE_VERSION}
        npm publish'''
      }
    }
  }
  post {
    success {
      postSuccess();
    }
    always {
-      emailext (
+      postAlways();
        body: '${DEFAULT_CONTENT}',
        mimeType: 'text/html',
        replyTo: '${DEFAULT_REPLYTO}',
        subject: '${DEFAULT_SUBJECT}',
        to: emailextrecipients([[$class: 'CulpritsRecipientProvider'], [$class: 'RequesterRecipientProvider']])
      )
    }
  }
 }
@@ -2,7 +2,6 @@
 This is a sample FarmMaps client in Angular 7.x.
 ## Quick start
 Use one of the two options below to get started.
@@ -16,8 +15,8 @@ Use one of the two options below to get started.
 *Setup*
 ```
-docker pull node:10.16.0
+docker pull node:12.13.1
-docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:10.16.0
+docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
 ```
 Inside the running container 
@@ -51,9 +50,15 @@ npm install -g @angular/cli
 npm install
 ng serve
 ```
-*Go*
+*Go*`
 Point your browser to http://localhost:4200
 *ESLint*
-
+```
 npm run lint src
 npm run lint projects/common/src
 npm run lint projects/common-map/src
 npm run lint projects/common-map3d/src
 ```
@@ -11,8 +11,12 @@
      "schematics": {},
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
            "aot": true,
            "outputPath": "dist/farmmaps-lib-app",
            "index": "src/index.html",
            "main": "src/main.ts",
@@ -21,29 +25,35 @@
            "assets": [
              {
                "glob": "**/*",
-                "input":"src/assets/images",
+                "input": "src/assets/images",
-                "output":"/images"
+                "output": "/images"
              },
              {
                "glob": "silent-refresh.html",
-                "input":"src/assets",
+                "input": "src/assets",
-                "output":"/"
+                "output": "/"
              },
              {
                "glob": "favicon.ico",
-                "input":"src/assets",
+                "input": "src/assets",
-                "output":"/"
+                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "node_modules/cesium/Build/Cesium",
                "output": "/assets/cesium"
              },
              "src/configuration.json"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/font-awesome/css/font-awesome.min.css",              
+              "fontawesome-6.2.1/css/all.min.css",
-              "fonts/FMIconFont/style.css"
+              "fonts/FMIconFont/style.css",
              "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
              "node_modules/ol/ol.css"
            ],
-            "scripts": [],
+            "scripts": []
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
@@ -66,27 +76,60 @@
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumError": "7mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": false,
              "sourceMap": true,
              "namedChunks": true,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "7mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          }
        },
        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "farmmaps-lib-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "farmmaps-lib-app:build:production"
            },
            "development": {
              "browserTarget": "farmmaps-lib-app:build:development"
            }
-          }
+          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "farmmaps-lib-app:build"
+            "buildTarget": "farmmaps-lib-app:build"
          }
        },
        "test": {
@@ -105,18 +148,6 @@
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
@@ -136,15 +167,6 @@
              "devServerTarget": "farmmaps-lib-app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
@@ -155,12 +177,17 @@
      "prefix": "fm",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/common/tsconfig.lib.json",
            "project": "projects/common/ng-package.json"           
          }
-        },
+        ,          "configurations": {
            "production": {
              "tsConfig": "projects/common/tsconfig.lib.prod.json"
            }
          }
 },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
@@ -168,18 +195,6 @@
            "tsConfig": "projects/common/tsconfig.spec.json",
            "karmaConfig": "projects/common/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/common/tsconfig.lib.json",
              "projects/common/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
@@ -190,10 +205,15 @@
      "prefix": "fm-map",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/common-map/tsconfig.lib.json",
            "project": "projects/common-map/ng-package.json"
          },
          "configurations": {
              "production": {
                "tsConfig": "projects/common-map/tsconfig.lib.prod.json"
              }
          }
        },
        "test": {
@@ -203,21 +223,102 @@
            "tsConfig": "projects/common-map/tsconfig.spec.json",
            "karmaConfig": "projects/common-map/karma.conf.js"
          }
        }
      }
    },
    "common-map3d": {
      "projectType": "library",
      "root": "projects/common-map3d",
      "sourceRoot": "projects/common-map3d/src",
      "prefix": "fm-map3d",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr:build",
          "options": {
            "tsConfig": "projects/common-map3d/tsconfig.lib.json",
            "project": "projects/common-map3d/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/common-map3d/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/common-map3d/src/test.ts",
            "tsConfig": "projects/common-map3d/tsconfig.spec.json",
            "karmaConfig": "projects/common-map3d/karma.conf.js"
          }
        }
      }
    },
    "ng-openlayers": {
      "projectType": "library",
      "root": "projects/ng-openlayers",
      "sourceRoot": "projects/ng-openlayers/src",
      "prefix": "ng-openlayers",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/ng-openlayers/tsconfig.lib.json",
            "project": "projects/ng-openlayers/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/ng-openlayers/tsconfig.lib.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/ng-openlayers/src/test.ts",
            "tsConfig": "projects/ng-openlayers/tsconfig.spec.json",
            "karmaConfig": "projects/ng-openlayers/karma.conf.js"
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
          "options": {
-            "tsConfig": [
+            "lintFilePatterns": [
-              "projects/common-map/tsconfig.lib.json",
+              "projects/ng-openlayers/**/*.ts",
-              "projects/common-map/tsconfig.spec.json"
+              "projects/ng-openlayers/**/*.html"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
-  "defaultProject": "farmmaps-lib-app"
+  "cli": {
    "analytics": false
  },
  "schematics": {
    "@schematics/angular:component": {
      "type": "component"
    },
    "@schematics/angular:directive": {
      "type": "directive"
    },
    "@schematics/angular:service": {
      "type": "service"
    },
    "@schematics/angular:guard": {
      "typeSeparator": "."
    },
    "@schematics/angular:interceptor": {
      "typeSeparator": "."
    },
    "@schematics/angular:module": {
      "typeSeparator": "."
    },
    "@schematics/angular:pipe": {
      "typeSeparator": "."
    },
    "@schematics/angular:resolver": {
      "typeSeparator": "."
    }
  }
 }
@@ -0,0 +1,16 @@
 module.exports = {
  resolve: {
    fallback: {
      // Resolve node module use of fs
      fs: "empty",
      Buffer: false,
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
      url: require.resolve("url/"),
      zlib: require.resolve('browserify-zlib'),
      assert: require.resolve("assert/"),
      util: require.resolve("util/"),
      buffer: require.resolve("buffer/")
    }
  }
 };
@@ -0,0 +1,18 @@
 Font Awesome Pro License
 ------------------------
 Font Awesome Pro is commercial software that requires a paid license. Full
 Font Awesome Pro license: https://fontawesome.com/license.
 # Commercial License
 The Font Awesome Pro commercial license allows you to pay for FA Pro once, own
 it, and use it just about everywhere you'd like.
 # Attribution
 Attribution is not required by the Font Awesome Pro commercial license.
 # Brand Icons
 All brand icons are trademarks of their respective owners. The use of these
 trademarks does not indicate endorsement of the trademark holder by Font
 Awesome, nor vice versa. **Please do not use brand logos for any purpose except
 to represent the company, product, or service to which they refer.**
@@ -0,0 +1,19 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Pro';
  --fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro'; }
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
 .fal,
 .fa-light {
  font-weight: 300; }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:300;font-display:block;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}.fa-light,.fal{font-weight:300}
@@ -0,0 +1,19 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Pro';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Pro'; }
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
 .far,
 .fa-regular {
  font-weight: 400; }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
@@ -0,0 +1,19 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root, :host {
  --fa-style-family-sharp: 'Font Awesome 6 Sharp';
  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp'; }
@font-face {
  font-family: 'Font Awesome 6 Sharp';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-sharp-solid-900.woff2") format("woff2"), url("../webfonts/fa-sharp-solid-900.ttf") format("truetype"); }
 .fass,
 .fa-sharp-solid {
  font-weight: 900; }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-sharp-solid-900.woff2) format("woff2"),url(../webfonts/fa-sharp-solid-900.ttf) format("truetype")}.fa-sharp-solid,.fass{font-weight:900}
@@ -0,0 +1,19 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Pro';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Pro'; }
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
 .fas,
 .fa-solid {
  font-weight: 900; }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
@@ -0,0 +1,635 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root, :host {
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
  --fa-font-light: normal 300 1em/1 'Font Awesome 6 Light';
  --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Thin';
  --fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }
 svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
  overflow: visible;
  box-sizing: content-box; }
 .svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -.125em; }
  .svg-inline--fa.fa-2xs {
    vertical-align: 0.1em; }
  .svg-inline--fa.fa-xs {
    vertical-align: 0em; }
  .svg-inline--fa.fa-sm {
    vertical-align: -0.07143em; }
  .svg-inline--fa.fa-lg {
    vertical-align: -0.2em; }
  .svg-inline--fa.fa-xl {
    vertical-align: -0.25em; }
  .svg-inline--fa.fa-2xl {
    vertical-align: -0.3125em; }
  .svg-inline--fa.fa-pull-left {
    margin-right: var(--fa-pull-margin, 0.3em);
    width: auto; }
  .svg-inline--fa.fa-pull-right {
    margin-left: var(--fa-pull-margin, 0.3em);
    width: auto; }
  .svg-inline--fa.fa-li {
    width: var(--fa-li-width, 2em);
    top: 0.25em; }
  .svg-inline--fa.fa-fw {
    width: var(--fa-fw-width, 1.25em); }
 .fa-layers svg.svg-inline--fa {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0; }
 .fa-layers-text, .fa-layers-counter {
  display: inline-block;
  position: absolute;
  text-align: center; }
 .fa-layers {
  display: inline-block;
  height: 1em;
  position: relative;
  text-align: center;
  vertical-align: -.125em;
  width: 1em; }
  .fa-layers svg.svg-inline--fa {
    -webkit-transform-origin: center center;
            transform-origin: center center; }
 .fa-layers-text {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
          transform-origin: center center; }
 .fa-layers-counter {
  background-color: var(--fa-counter-background-color, #ff253a);
  border-radius: var(--fa-counter-border-radius, 1em);
  box-sizing: border-box;
  color: var(--fa-inverse, #fff);
  line-height: var(--fa-counter-line-height, 1);
  max-width: var(--fa-counter-max-width, 5em);
  min-width: var(--fa-counter-min-width, 1.5em);
  overflow: hidden;
  padding: var(--fa-counter-padding, 0.25em 0.5em);
  right: var(--fa-right, 0);
  text-overflow: ellipsis;
  top: var(--fa-top, 0);
  -webkit-transform: scale(var(--fa-counter-scale, 0.25));
          transform: scale(var(--fa-counter-scale, 0.25));
  -webkit-transform-origin: top right;
          transform-origin: top right; }
 .fa-layers-bottom-right {
  bottom: var(--fa-bottom, 0);
  right: var(--fa-right, 0);
  top: auto;
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right; }
 .fa-layers-bottom-left {
  bottom: var(--fa-bottom, 0);
  left: var(--fa-left, 0);
  right: auto;
  top: auto;
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left; }
 .fa-layers-top-right {
  top: var(--fa-top, 0);
  right: var(--fa-right, 0);
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: top right;
          transform-origin: top right; }
 .fa-layers-top-left {
  left: var(--fa-left, 0);
  right: auto;
  top: var(--fa-top, 0);
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: top left;
          transform-origin: top left; }
 .fa-1x {
  font-size: 1em; }
 .fa-2x {
  font-size: 2em; }
 .fa-3x {
  font-size: 3em; }
 .fa-4x {
  font-size: 4em; }
 .fa-5x {
  font-size: 5em; }
 .fa-6x {
  font-size: 6em; }
 .fa-7x {
  font-size: 7em; }
 .fa-8x {
  font-size: 8em; }
 .fa-9x {
  font-size: 9em; }
 .fa-10x {
  font-size: 10em; }
 .fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; }
 .fa-xs {
  font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; }
 .fa-sm {
  font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; }
 .fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }
 .fa-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; }
 .fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; }
 .fa-fw {
  text-align: center;
  width: 1.25em; }
 .fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin, 2.5em);
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }
 .fa-li {
  left: calc(var(--fa-li-width, 2em) * -1);
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit; }
 .fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.08em);
  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
 .fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin, 0.3em); }
 .fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin, 0.3em); }
 .fa-beat {
  -webkit-animation-name: fa-beat;
          animation-name: fa-beat;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
          animation-timing-function: var(--fa-animation-timing, ease-in-out); }
 .fa-bounce {
  -webkit-animation-name: fa-bounce;
          animation-name: fa-bounce;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
 .fa-fade {
  -webkit-animation-name: fa-fade;
          animation-name: fa-fade;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
 .fa-beat-fade {
  -webkit-animation-name: fa-beat-fade;
          animation-name: fa-beat-fade;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
 .fa-flip {
  -webkit-animation-name: fa-flip;
          animation-name: fa-flip;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
          animation-timing-function: var(--fa-animation-timing, ease-in-out); }
 .fa-shake {
  -webkit-animation-name: fa-shake;
          animation-name: fa-shake;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
          animation-timing-function: var(--fa-animation-timing, linear); }
 .fa-spin {
  -webkit-animation-name: fa-spin;
          animation-name: fa-spin;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 2s);
          animation-duration: var(--fa-animation-duration, 2s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
          animation-timing-function: var(--fa-animation-timing, linear); }
 .fa-spin-reverse {
  --fa-animation-direction: reverse; }
 .fa-pulse,
 .fa-spin-pulse {
  -webkit-animation-name: fa-spin;
          animation-name: fa-spin;
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
          animation-timing-function: var(--fa-animation-timing, steps(8)); }
@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    -webkit-animation-delay: -1ms;
            animation-delay: -1ms;
    -webkit-animation-duration: 1ms;
            animation-duration: 1ms;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0s; } }
@-webkit-keyframes fa-beat {
  0%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
            transform: scale(var(--fa-beat-scale, 1.25)); } }
@keyframes fa-beat {
  0%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
            transform: scale(var(--fa-beat-scale, 1.25)); } }
@-webkit-keyframes fa-bounce {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  10% {
    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); } }
@keyframes fa-bounce {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  10% {
    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); } }
@-webkit-keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }
@-webkit-keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    opacity: 1;
    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    opacity: 1;
    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
@-webkit-keyframes fa-flip {
  50% {
    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
@keyframes fa-flip {
  50% {
    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
@-webkit-keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg); }
  4% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  8%, 24% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg); }
  12%, 28% {
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg); }
  16% {
    -webkit-transform: rotate(-22deg);
            transform: rotate(-22deg); }
  20% {
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg); }
  32% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg); }
  36% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg); }
  40%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }
@keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg); }
  4% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  8%, 24% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg); }
  12%, 28% {
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg); }
  16% {
    -webkit-transform: rotate(-22deg);
            transform: rotate(-22deg); }
  20% {
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg); }
  32% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg); }
  36% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg); }
  40%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
 .fa-rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }
 .fa-rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }
 .fa-rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg); }
 .fa-flip-horizontal {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1); }
 .fa-flip-vertical {
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1); }
 .fa-flip-both,
 .fa-flip-horizontal.fa-flip-vertical {
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1); }
 .fa-rotate-by {
  -webkit-transform: rotate(var(--fa-rotate-angle, none));
          transform: rotate(var(--fa-rotate-angle, none)); }
 .fa-stack {
  display: inline-block;
  vertical-align: middle;
  height: 2em;
  position: relative;
  width: 2.5em; }
 .fa-stack-1x,
 .fa-stack-2x {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: var(--fa-stack-z-index, auto); }
 .svg-inline--fa.fa-stack-1x {
  height: 1em;
  width: 1.25em; }
 .svg-inline--fa.fa-stack-2x {
  height: 2em;
  width: 2.5em; }
 .fa-inverse {
  color: var(--fa-inverse, #fff); }
 .sr-only,
 .fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }
 .sr-only-focusable:not(:focus),
 .fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }
 .svg-inline--fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1); }
 .svg-inline--fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4); }
 .svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: var(--fa-secondary-opacity, 0.4); }
 .svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: var(--fa-primary-opacity, 1); }
 .svg-inline--fa mask .fa-primary,
 .svg-inline--fa mask .fa-secondary {
  fill: black; }
 .fad.fa-inverse,
 .fa-duotone.fa-inverse {
  color: var(--fa-inverse, #fff); }
@@ -0,0 +1,19 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Pro';
  --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro'; }
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 100;
  font-display: block;
  src: url("../webfonts/fa-thin-100.woff2") format("woff2"), url("../webfonts/fa-thin-100.ttf") format("truetype"); }
 .fat,
 .fa-thin {
  font-weight: 100; }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
 :host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:100;font-display:block;src:url(../webfonts/fa-thin-100.woff2) format("woff2"),url(../webfonts/fa-thin-100.ttf) format("truetype")}.fa-thin,.fat{font-weight:100}
@@ -0,0 +1,26 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
@font-face {
  font-family: 'FontAwesome';
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
@font-face {
  font-family: 'FontAwesome';
  font-display: block;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
@font-face {
  font-family: 'FontAwesome';
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
  unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
@font-face {
  font-family: 'FontAwesome';
  font-display: block;
  src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
  unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
@@ -0,0 +1,34 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-display: block;
  font-weight: 300;
  src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
@font-face {
  font-family: 'Font Awesome 5 Duotone';
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-duotone-900.woff2") format("woff2"), url("../webfonts/fa-duotone-900.ttf") format("truetype"); }
@@ -0,0 +1,6 @@
 /*!
 * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2022 Fonticons, Inc.
 */
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:300;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Duotone";font-display:block;font-weight:900;src:url(../webfonts/fa-duotone-900.woff2) format("woff2"),url(../webfonts/fa-duotone-900.ttf) format("truetype")}
@@ -23,6 +23,46 @@
  content: "b";
 }
 .fm-trijntje:before {
  content: "c";
 }
 .fm-satellite:before {
  content: "d";
 }
 .fm-sensoterra:before {
  content: "e";
 }
 .fm-blight:before {
  content: "f";
 }
 .fm-agrodatacube:before {
  content: "g";
 }
 .fm-app-menu:before {
  content: "h";
 }
 .fm-blight-holes:before {
  content: "i";
 }
 .fm-carbon:before {
  content: "j";
 }
 .fm-bo-akkerbouw:before {
  content: "k";
 }
 .fm-grass:before {
  content: "l";
 }
@font-face {
  font-family: "FarmMaps";
  src: url("./FMIconFont.woff") format("woff"), /* Modern Browsers */
@@ -0,0 +1,224 @@
 PS DFarmmapsFarmMapsLib ng update @angularcore@19 @angularcli@19
 The installed Angular CLI version is outdated.
 Installing a temporary Angular CLI versioned 19.2.19 to perform the update.
 Using package manager npm
 Collecting installed dependencies...
 Found 68 dependencies.
 Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkitbuild-angular @ 19.2.19 (was 18.2.3)...
    Updating package.json with dependency @angularcli @ 19.2.19 (was 18.2.3)...
    Updating package.json with dependency @angularcompiler-cli @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularlanguage-service @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularlocalize @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency ng-packagr @ 19.2.2 (was 18.2.1)...
    Updating package.json with dependency typescript @ 5.8.3 (was 5.4.4)...
    Updating package.json with dependency @angularanimations @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularcommon @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularcompiler @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularcore @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularforms @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularplatform-browser @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularplatform-browser-dynamic @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency @angularrouter @ 19.2.18 (was 18.2.3)...
    Updating package.json with dependency zone.js @ 0.15.1 (was 0.14.10)...
 UPDATE package.json (2923 bytes)
 ✔ Cleaning node modules directory
 ✔ Installing packages
 Executing migrations of package '@angularcli' 
 ❯ Update '@angularssr' import paths to use the new 'node' entry point when 'CommonEngine' is detected.
  Migration completed (No changes made).
 ❯ Update the workspace configuration by replacing deprecated options in 'angular.json' for compatibility with the latest Angular CLI changes.
 UPDATE angular.json (9341 bytes)
  Migration completed (1 file modified).
 Optional migrations of package '@angularcli' 
 This package has 1 optional migration that can be executed.
 Optional migrations may be skipped and executed after the update process, if preferred.
 Select the migrations that you'd like to run [use-application-builder] Migrate application projects to the new build system.
 (httpsangular.devtoolsclibuild-system-migration)
 ❯ Migrate application projects to the new build system.
  Application projects that are using the '@angular-devkitbuild-angular' package's 'browser' andor 'browser-esbuild' builders will be migrated to use the new 'application' builder.
  You can read more about this, including known issues and limitations, here httpsangular.devtoolsclibuild-system-migration
    Cannot update project farmmaps-lib-app to use the application builder. Only @angular-devkitbuild-angularbrowser-esbuild and @angular-devkitbuild-angularbrowser can be automatically migrated.
 UPDATE tsconfig.json (902 bytes)
  Migration completed (1 file modified).
 Executing migrations of package '@angularcore' 
 ❯ Updates non-standalone Directives, Component and Pipes to 'standalonefalse' and removes 'standalonetrue' from those who are standalone.
 UPDATE srcappapp.component.ts (374 bytes)
 UPDATE srcapplogologo.component.ts (349 bytes)
 UPDATE srcappmenumenu.component.ts (750 bytes)
 UPDATE srcappregisterdeviceregisterdevice.component.ts (334 bytes)
 UPDATE projectscommonsrcfmcomponentsauth-callbackauth-callback.component.ts (731 bytes)
 UPDATE projectscommonsrcfmcomponentssession-clearedsession-cleared.component.ts (755 bytes)
 UPDATE projectscommonsrcfmcomponentsnot-foundnot-found.component.ts (315 bytes)
 UPDATE projectscommonsrcfmcomponentsapp-menuapp-menu.component.ts (870 bytes)
 UPDATE projectscommonsrcfmcomponentsappapp.component.ts (8994 bytes)
 UPDATE projectscommonsrcfmcomponentsavataravatar.component.ts (1240 bytes)
 UPDATE projectscommonsrcfmcomponentsback-buttonback-button.component.ts (712 bytes)
 UPDATE projectscommonsrcfmcomponentsedit-image-modaledit-image-modal.component.ts (2388 bytes)
 UPDATE projectscommonsrcfmcomponentsgradient-selectgradient-select.component.ts (1714 bytes)
 UPDATE projectscommonsrcfmcomponentsgradientgradient.component.ts (1423 bytes)
 UPDATE projectscommonsrcfmcomponentshas-claimhas-claim.directive.ts (1217 bytes)
 UPDATE projectscommonsrcfmcomponentshas-packagehas-package.directive.ts (1889 bytes)
 UPDATE projectscommonsrcfmcomponentshas-rolehas-role.directive.ts (1216 bytes)
 UPDATE projectscommonsrcfmcomponentshelp-menuhelp-menu.component.ts (908 bytes)
 UPDATE projectscommonsrcfmcomponentssetting-menusetting-menu.component.ts (958 bytes)
 UPDATE projectscommonsrcfmcomponentsitem-linkitem-link.component.ts (1304 bytes)
 UPDATE projectscommonsrcfmcomponentsmenu-backgroundmenu-background.component.ts (800 bytes)
 UPDATE projectscommonsrcfmcomponentsnot-implementednot-implemented.component.ts (280 bytes)
 UPDATE projectscommonsrcfmcomponentsnotification-menunotification-menu.component.ts (941 bytes)
 UPDATE projectscommonsrcfmcomponentspackage-existspackage-exists.directive.ts (1898 bytes)
 UPDATE projectscommonsrcfmcomponentsresumable-file-uploadresumable-file-upload.component.ts (1774 bytes)
 UPDATE projectscommonsrcfmcomponentsside-panelside-panel.component.ts (2839 bytes)
 UPDATE projectscommonsrcfmcomponentstag-inputtag-input.component.ts (2990 bytes)
 UPDATE projectscommonsrcfmcomponentsthumbnailthumbnail.component.ts (2968 bytes)
 UPDATE projectscommonsrcfmcomponentstimespantimespan.component.ts (22797 bytes)
 UPDATE projectscommonsrcfmcomponentsuser-menuuser-menu.component.ts (1174 bytes)
 UPDATE projectscommonsrcfmsharedsafe.pipe.ts (352 bytes)
 UPDATE srcapptesttest.component.ts (784 bytes)
 UPDATE srcapplandingpagelandingpage.component.ts (482 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolfile-drop-targetfile-drop-target.component.ts (2615 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsmapmap.component.ts (22343 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolgps-locationgps-location.component.ts (2719 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolitem-layersitem-layers.component.ts (20542 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolitem-vector-sourceitem-vector-source.component.ts (9990 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaollayer-listlayer-list.component.ts (2070 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaollayer-valueslayer-values.component.ts (2528 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaollayer-vector-imagelayer-vector-image.component.ts (882 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolpan-to-locationpan-to-location.component.ts (2836 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolrotation-resetrotation-reset.component.ts (1054 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsaolzoom-to-extentzoom-to-extent.component.ts (2064 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-listfeature-list.component.ts (2505 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentswidget-hostwidget-host.directive.ts (236 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-containerfeature-list-container.component.ts (4111 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-cropfieldfeature-list-cropfield.component.ts (1336 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-observationfeature-list-observation.component.ts (1346 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-croppingschemefeature-list-croppingscheme.component.ts (1497 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-featurefeature-list-feature.component.ts (1090 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-feature-containerfeature-list-feature-container.component.ts (2433 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-feature-cropfieldfeature-list-feature-cropfield.component.ts (1389 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-feature-croppingschemefeature-list-feature-croppingscheme.component.ts (1026 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-thumbnailfeature-thumbnail.component.ts (2709 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsif-zoom-to-showif-zoom-to-show.directive.ts (1853 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsitem-list-itemitem-list-item.component.ts (1476 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsitem-list-item-containeritem-list-item-container.component.ts (2644 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsitem-listitem-list.component.ts (1373 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsitem-widget-listitem-widget-list.component.ts (1963 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentslayer-switcherlayer-switcher.component.ts (3132 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentslegendhistogram-detailshistogram-details.component.ts (784 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentslegendlegend.component.ts (2698 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentslegendstatistics-detailsstatistics-details.component.ts (848 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsmap-searchmap-search.component.ts (7783 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsmeta-data-modalmeta-data-modal.component.ts (2038 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselect-period-modalselect-period-modal.component.ts (3542 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselected-itemselected-item.component.ts (3209 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-containerselected-item-container.component.ts (3273 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-cropfieldselected-item-cropfield.component.ts (2748 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-geotiffselected-item-geotiff.component.ts (2102 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-shapeselected-item-shape.component.ts (2125 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-temporalselected-item-temporal.component.ts (3034 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentswidget-statuswidget-status.component.ts (516 bytes)
 UPDATE projectscommon-mapsrcfm-mapcomponentszoom-to-show-alertzoom-to-show-alert.component.ts (570 bytes)
 UPDATE projectscommon-map3dsrcfm-map3dcomponentsolcsswitch2d3dswitch2d3d.component.ts (2652 bytes)
 UPDATE srcappadminadmin.component.ts (211 bytes)
 UPDATE projectsng-openlayerssrclibmap.component.ts (5228 bytes)
 UPDATE projectsng-openlayerssrcliblayerslayergroup.component.ts (734 bytes)
 UPDATE projectsng-openlayerssrcliblayerslayervector.component.ts (1117 bytes)
 UPDATE projectsng-openlayerssrclibsourcesvector.component.ts (1032 bytes)
 UPDATE projectsng-openlayerssrclibfeature.component.ts (914 bytes)
 UPDATE projectsng-openlayerssrclibview.component.ts (3777 bytes)
 UPDATE projectsng-openlayerssrclibgraticule.component.ts (1428 bytes)
 UPDATE projectsng-openlayerssrcliblayerslayerimage.component.ts (986 bytes)
 UPDATE projectsng-openlayerssrcliblayerslayertile.component.ts (920 bytes)
 UPDATE projectsng-openlayerssrcliblayerslayervectortile.component.ts (1334 bytes)
 UPDATE projectsng-openlayerssrclibtilegrid.component.ts (976 bytes)
 UPDATE projectsng-openlayerssrclibsourcesxyz.component.ts (2744 bytes)
 UPDATE projectsng-openlayerssrclibsourcesosm.component.ts (1908 bytes)
 UPDATE projectsng-openlayerssrclibsourcesbingmaps.component.ts (1184 bytes)
 UPDATE projectsng-openlayerssrclibsourcescluster.component.ts (1444 bytes)
 UPDATE projectsng-openlayerssrclibtilegridwmts.component.ts (714 bytes)
 UPDATE projectsng-openlayerssrclibsourcestilewmts.component.ts (3079 bytes)
 UPDATE projectsng-openlayerssrclibsourcesvectortile.component.ts (1842 bytes)
 UPDATE projectsng-openlayerssrclibsourcestilewms.component.ts (1518 bytes)
 UPDATE projectsng-openlayerssrclibsourcestilejson.component.ts (775 bytes)
 UPDATE projectsng-openlayerssrclibsourcesgeojson.component.ts (1095 bytes)
 UPDATE projectsng-openlayerssrclibsourcesimagestatic.component.ts (2471 bytes)
 UPDATE projectsng-openlayerssrclibsourcesimagewms.component.ts (2109 bytes)
 UPDATE projectsng-openlayerssrclibsourcesimagearcgisrest.component.ts (2059 bytes)
 UPDATE projectsng-openlayerssrclibsourcesraster.component.ts (1768 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrycircle.component.ts (905 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrylinestring.component.ts (765 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrymultilinestring.component.ts (816 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrymultipoint.component.ts (765 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrymultipolygon.component.ts (841 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrypoint.component.ts (706 bytes)
 UPDATE projectsng-openlayerssrclibgeomgeometrypolygon.component.ts (784 bytes)
 UPDATE projectsng-openlayerssrclibcontent.component.ts (248 bytes)
 UPDATE projectsng-openlayerssrcliboverlay.component.ts (1218 bytes)
 UPDATE projectsng-openlayerssrclibcoordinate.component.ts (2457 bytes)
 UPDATE projectsng-openlayerssrclibcollectioncoordinates.component.ts (3392 bytes)
 UPDATE projectsng-openlayerssrclibstylesstyle.component.ts (1421 bytes)
 UPDATE projectsng-openlayerssrclibstylescircle.component.ts (1621 bytes)
 UPDATE projectsng-openlayerssrclibstylestext.component.ts (2204 bytes)
 UPDATE projectsng-openlayerssrclibstylesstroke.component.ts (2972 bytes)
 UPDATE projectsng-openlayerssrclibstylesicon.component.ts (2091 bytes)
 UPDATE projectsng-openlayerssrclibstylesfill.component.ts (2201 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsdefault.component.ts (1189 bytes)
 UPDATE projectsng-openlayerssrclibcontrolscontrol.component.ts (914 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsattribution.component.ts (898 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsfullscreen.component.ts (880 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsmouseposition.component.ts (1033 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsoverviewmap.component.ts (1292 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsrotate.component.ts (853 bytes)
 UPDATE projectsng-openlayerssrclibcontrolsscaleline.component.ts (680 bytes)
 UPDATE projectsng-openlayerssrclibcontrolszoom.component.ts (916 bytes)
 UPDATE projectsng-openlayerssrclibcontrolszoomslider.component.ts (862 bytes)
 UPDATE projectsng-openlayerssrclibcontrolszoomtoextent.component.ts (911 bytes)
 UPDATE projectsng-openlayerssrclibformatsmvt.component.ts (667 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdefault.component.ts (1075 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdoubleclickzoom.component.ts (689 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdraganddrop.component.ts (824 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdragbox.component.ts (805 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdragpan.component.ts (739 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdragrotate.component.ts (720 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdragrotateandzoom.component.ts (755 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdragzoom.component.ts (769 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsmousewheelzoom.component.ts (719 bytes)
 UPDATE projectsng-openlayerssrclibinteractionspinchzoom.component.ts (674 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsdraw.component.ts (2579 bytes)
 UPDATE projectsng-openlayerssrclibinteractionskeyboardpan.component.ts (674 bytes)
 UPDATE projectsng-openlayerssrclibinteractionskeyboardzoom.component.ts (673 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsselect.component.ts (2121 bytes)
 UPDATE projectsng-openlayerssrclibinteractionsmodify.component.ts (2173 bytes)
 UPDATE projectsng-openlayerssrclibinteractionstranslate.component.ts (2062 bytes)
 UPDATE projectsng-openlayerssrclibattribution.component.ts (379 bytes)
 UPDATE projectsng-openlayerssrclibattributions.component.ts (869 bytes)
 UPDATE projectsng-openlayerssrclibsourcesutfgrid.component.ts (841 bytes)
  Migration completed (150 files modified).
 ❯ Updates ExperimentalPendingTasks to PendingTasks.
  Migration completed (No changes made).
 ❯ Adds `BootstrapContext` to `bootstrapApplication` calls in `main.server.ts` to support server rendering.
  Migration completed (No changes made).
 Optional migrations of package '@angularcore' 
 This package has 1 optional migration that can be executed.
 Optional migrations may be skipped and executed after the update process, if preferred.
 Select the migrations that you'd like to run [provide-initializer] Replaces `APP_INITIALIZER`, `ENVIRONMENT_INITIALIZER` & `PLATFORM_INITIALIZER` respectively with
 `provideAppInitializer`, `provideEnvironmentInitializer` & `providePlatformInitializer`.
 ❯ Replaces `APP_INITIALIZER`, `ENVIRONMENT_INITIALIZER` & `PLATFORM_INITIALIZER` respectively with `provideAppInitializer`, `provideEnvironmentInitializer` & `providePlatformInitializer`.
 UPDATE projectscommonsrcfmcommon-service.module.ts (3960 bytes)
  Migration completed (1 file modified).
 PS DFarmmapsFarmMapsLib
@@ -1,63 +1,102 @@
 {
  "name": "farmmaps-lib-app",
-  "version": "0.0.1",
+  "version": "4.19.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
-    "lint": "ng lint",
+    "lint": "eslint -c .eslintrc.js --ext .ts",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular-eslint/eslint-plugin": "21.1.0",
-    "@angular/common": "~7.2.0",
+    "@angular/animations": "21.1.0",
-    "@angular/compiler": "~7.2.0",
+    "@angular/common": "21.1.0",
-    "@angular/core": "~7.2.0",
+    "@angular/compiler": "21.1.0",
-    "@angular/forms": "~7.2.0",
+    "@angular/core": "21.1.0",
-    "@angular/platform-browser": "~7.2.0",
+    "@angular/forms": "21.1.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/platform-browser": "21.1.0",
-    "@angular/router": "~7.2.0",
+    "@angular/platform-browser-dynamic": "21.1.0",
-    "@aspnet/signalr": "^1.1.4",
+    "@angular/router": "21.1.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.69 <0.0.1",
+    "@farmmaps/common": "file:dist/common",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.69 <0.0.1",
+    "@farmmaps/common-map": "file:dist/common-map",
-    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
+    "@farmmaps/common-map3d": "file:dist/common-map3d",
-    "@ngrx/effects": "^7.2.0",
+    "@farmmaps/ng-openlayers": "file:dist/ng-openlayers",
-    "@ngrx/router-store": "^7.2.0",
+    "@microsoft/signalr": "10.0.0",
-    "@ngrx/store": "^7.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "bootstrap": "^4.3.1",
+    "@ngrx/effects": "21.0.1",
-    "font-awesome": "^4.7.0",
+    "@ngrx/router-store": "21.0.1",
-    "core-js": "^2.5.4",
+    "@ngrx/store": "21.0.1",
-    "ngrx-store-localstorage": "^8.0.0",
+    "@popperjs/core": "^2.11.8",
    "angular-oauth2-oidc": "20.0.2",
    "assert": "^2.0.0",
    "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": "20.1.0",
    "ngx-avatars": "1.10.1",
    "ngx-clipboard": "^16.0.0",
    "ngx-image-cropper": "9.1.6",
    "ngx-uploadx": "7.0.1",
    "ol": "^8.2.0",
    "olcs": "^2.13.1",
    "resumablejs": "^1.1.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "7.8.1",
    "stream": "^0.0.2",
    "stream-http": "^3.2.0",
    "tassign": "^1.0.0",
-    "zone.js": "~0.8.26"
+    "tslib": "^2.4.0",
    "url": "^0.11.0",
    "util": "^0.12.4",
    "zone.js": "~0.15.1"
  },
  "optionalDependencies": {
    "@lmdb/lmdb-linux-x64": "^3.1.0",
    "@rollup/rollup-linux-x64-gnu": "^4.21.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-builders/custom-webpack": "^21.0.3",
-    "@angular-devkit/build-ng-packagr": "~0.13.0",
+    "@angular-devkit/build-angular": "21.1.0",
-    "@angular/cli": "~7.3.8",
+    "@angular/cli": "21.1.0",
-    "@angular/compiler-cli": "~7.2.0",
+    "@angular/compiler-cli": "21.1.0",
-    "@angular/language-service": "~7.2.0",
+    "@angular/language-service": "21.1.0",
-    "@types/node": "~8.9.4",
+    "@angular/localize": "21.1.0",
    "@types/arcgis-rest-api": "^10.4.5",
    "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "^2.0.9",
-    "codelyzer": "~4.5.0",
+    "@types/node": "^22.5.4",
-    "jasmine-core": "~2.99.1",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "@typescript-eslint/eslint-plugin-tslint": "^6.18.0",
-    "karma": "~4.0.0",
+    "@typescript-eslint/parser": "^6.18.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "codelyzer": "^6.0.2",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "eslint": "^8.35.0",
-    "karma-jasmine": "~1.1.2",
+    "eslint-config-prettier": "^8.6.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "eslint-plugin-import": "^2.27.5",
-    "ng-packagr": "^4.2.0",
+    "jasmine-core": "^4.3.0",
-    "protractor": "~5.4.0",
+    "jasmine-spec-reporter": "^7.0.0",
-    "ts-node": "~7.0.0",
+    "karma": "^6.3.20",
-    "tsickle": ">=0.34.0",
+    "karma-chrome-launcher": "~3.1.0",
-    "tslib": "^1.9.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "tslint": "~5.11.0",
+    "karma-jasmine": "^5.1.0",
-    "typescript": "~3.2.2"
+    "karma-jasmine-html-reporter": "^2.0.0",
    "ng-packagr": "^21.1.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.8.1",
    "typescript": "~5.9.3"
  },
  "overrides": {
    "ngx-avatars": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core"
    },
    "ngx-uploadx": {
      "@angular/core": "$@angular/core"
    }
  }
 }
@@ -0,0 +1,22 @@
 module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
 }
@@ -4,7 +4,7 @@
  "lib": {
    "entryFile": "src/public-api.ts"
  },
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
    "."
  ]
 }
@@ -1,108 +1,287 @@
 {
  "name": "@farmmaps/common-map",
-  "version": "0.0.1",
+  "version": "2.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@farmmaps/common-map",
      "version": "2.0.0",
      "dependencies": {
-    "@farmmaps/common": {
+        "tslib": "^2.0.0"
-      "version": "0.0.1-prerelease.56",
+      },
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.56.tgz",
+      "peerDependencies": {
-      "integrity": "sha512-m9KxWsLkTSz2JI074gIJH1kDR0PCLsFAug8oBjtlU/QxgBySrvqHCRiODpNmNWnFyNTZHqKHJQefn3Q9iAil4g==",
+        "@angular/core": "21.1.0",
-      "requires": {
+        "@farmmaps/common": "file:../../dist/common",
-        "angular-oauth2-oidc": "^5.0.2",
+        "@farmmaps/ng-openlayers": "file:../../dist/ng-openlayers",
-        "ngx-uploadx": "^3.1.3",
+        "@ngrx/effects": "21.0.1",
-        "tslib": "^1.9.0"
+        "@ngrx/router-store": "21.0.1",
        "@ngrx/store": "21.0.1",
        "ngrx-store-localstorage": "20.1.0",
        "rxjs": "7.8.1",
        "tassign": "^1.0.0"
      }
    },
-    "angular-oauth2-oidc": {
+    "../../../../dist/common": {
-      "version": "5.0.2",
+      "extraneous": true
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
+    },
-      "integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
+    "../../../../dist/ng-openlayers": {
-      "requires": {
+      "extraneous": true
-        "jsrsasign": "^8.0.12",
+    },
-        "tslib": "^1.9.0"
+    "../../../dist/ng-openlayers": {
      "extraneous": true
    },
    "../../dist/common": {
      "name": "@farmmaps/common",
      "version": "21.1.0",
      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
      "peerDependencies": {
        "@angular/common": "21.1.0",
        "@angular/core": "21.1.0",
        "@angular/forms": "21.1.0",
        "@microsoft/signalr": "10.0.0",
        "@ng-bootstrap/ng-bootstrap": "^20.0.0",
        "@ngrx/effects": "21.0.1",
        "@ngrx/router-store": "21.0.1",
        "@ngrx/store": "21.0.1",
        "angular-oauth2-oidc": "20.0.2",
        "bootstrap": "^5.3.3",
        "moment": "^2.29.4",
        "ngx-avatars": "1.10.1",
        "ngx-clipboard": "^16.0.0",
        "ngx-image-cropper": "9.1.6",
        "ngx-uploadx": "7.0.1",
        "tassign": "^1.0.0"
      }
    },
-    "ieee754": {
+    "../../dist/libs/ng-openlayers": {
-      "version": "1.1.13",
+      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
+      "extraneous": true,
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
+      "license": "MPL-2.0",
      "dependencies": {
        "tslib": "^2.3.0"
      },
-    "jsrsasign": {
+      "peerDependencies": {
-      "version": "8.0.12",
+        "@angular/common": "^18.2.3",
-      "resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
+        "@angular/core": "^18.2.3",
-      "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
+        "ol": "^8.2.0"
    },
    "ngx-openlayers": {
      "version": "1.0.0-next.9",
      "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.9.tgz",
      "integrity": "sha512-14UFxJX9oeOXtq+HJCJyXn0sBmYmCqj2AnFtetKk1FsDe8EUMFGIRju8UOFegCr2oEu5JsuRjALcfW7lCe+teg==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
-    "ngx-uploadx": {
+    "../../dist/ng-openlayers": {
-      "version": "3.3.2",
+      "name": "@farmmaps/ng-openlayers",
-      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
+      "version": "20.0.1",
-      "integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
+      "peer": true,
-      "requires": {
+      "dependencies": {
-        "tslib": "^1.9.0"
+        "tslib": "^2.3.0"
      },
      "peerDependencies": {
        "@angular/common": ">=19.0.0 <=20.x.x",
        "@angular/core": ">=19.0.0 <=20.x.x",
        "ol": "~10.7.0"
      }
    },
-    "ol": {
+    "../ng-openlayers": {
-      "version": "5.3.3",
+      "name": "@farmmaps/ng-openlayers",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
+      "version": "20.0.1",
-      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "extraneous": true,
-      "requires": {
+      "peerDependencies": {
-        "pbf": "3.1.0",
+        "@angular/common": ">=19.0.0 <=20.x.x",
-        "pixelworks": "1.1.0",
+        "@angular/core": ">=19.0.0 <=20.x.x",
-        "rbush": "2.0.2"
+        "ol": "~10.7.0"
      }
    },
-    "pbf": {
+    "dist/common": {
-      "version": "3.1.0",
+      "extraneous": true
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
+    },
-      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+    "dist/ng-openlayers": {
-      "requires": {
+      "extraneous": true
-        "ieee754": "^1.1.6",
+    },
-        "resolve-protobuf-schema": "^2.0.0"
+    "node_modules/@angular/common": {
      "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": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
        "@angular/core": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
-    "pixelworks": {
+    "node_modules/@angular/core": {
-      "version": "1.1.0",
+      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
-      "integrity": "sha1-Hwla1I3Ki/ihyCWOAJIDGkTyLKU="
+      "integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
-    "protocol-buffers-schema": {
+      "engines": {
-      "version": "3.3.2",
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz",
      "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
      },
-    "quickselect": {
+      "peerDependencies": {
-      "version": "1.1.1",
+        "@angular/compiler": "21.1.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
+        "rxjs": "^6.5.3 || ^7.4.0",
-      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+        "zone.js": "~0.15.0 || ~0.16.0"
      },
-    "rbush": {
+      "peerDependenciesMeta": {
-      "version": "2.0.2",
+        "@angular/compiler": {
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
+          "optional": true
-      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+        },
-      "requires": {
+        "zone.js": {
-        "quickselect": "^1.0.1"
+          "optional": true
        }
      }
    },
-    "resolve-protobuf-schema": {
+    "node_modules/@angular/platform-browser": {
-      "version": "2.1.0",
+      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.0.tgz",
-      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "integrity": "sha512-Drkal25x+OuRQosAE/cL4uM5WDmgFehanCpsjQ1jGp6Rxoad6Q5Do1uQAE3qgMKHL1aqCPZ+uWzcVVG+Bn1ddg==",
-      "requires": {
+      "license": "MIT",
-        "protocol-buffers-schema": "^3.3.1"
+      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
      "engines": {
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
        "@angular/animations": "21.1.0",
        "@angular/common": "21.1.0",
        "@angular/core": "21.1.0"
      },
      "peerDependenciesMeta": {
        "@angular/animations": {
          "optional": true
        }
      }
    },
-    "tslib": {
+    "node_modules/@angular/router": {
-      "version": "1.10.0",
+      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+      "integrity": "sha512-Sneu0ePuH+bf8ZslRX3iQk1iLziindLskdTeHV1ZCrXdT0ZScsZyI/gjxQKBtsIU9692D2DnFQRLGnzTBYVGVw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
      "engines": {
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
        "@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/@farmmaps/common": {
      "resolved": "../../dist/common",
      "link": true
    },
    "node_modules/@farmmaps/ng-openlayers": {
      "resolved": "../../dist/ng-openlayers",
      "link": true
    },
    "node_modules/@ngrx/effects": {
      "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": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
        "@angular/core": "^21.0.0",
        "@ngrx/store": "21.0.1",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
    "node_modules/@ngrx/router-store": {
      "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": "^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": "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": "^21.0.0",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/ngrx-store-localstorage": {
      "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": ">=20.0.0",
        "@angular/core": ">=20.0.0",
        "@ngrx/store": ">=20.0.0"
      }
    },
    "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==",
      "peer": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/tassign": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/tassign/-/tassign-1.0.0.tgz",
      "integrity": "sha512-k0Ti9f+A1R0BRdArEbiUHldd+A40kZ5qsiNSNk4czx61wkAoSZYjqkaQs0jC63AfgPdCXVPstDq2ZW5ZLRTCgw==",
      "peer": true
    },
    "node_modules/tslib": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
    }
  }
 }
@@ -1,20 +1,21 @@
 {
  "name": "@farmmaps/common-map",
-  "version": "0.0.1",
+  "version": "2.0.0",
  "publishConfig": {
    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
  "dependencies": {
-    "ngx-openlayers": "1.0.0-next.9",
+    "tslib": "^2.0.0"
    "ol": "^5.3.3"
  },
  "peerDependencies": {
-    "@angular/core": "^7.2.0",
+    "@angular/core": "21.1.0",
-    "ngrx-store-localstorage": "^8.0.0",
+    "@farmmaps/common": "file:../../dist/common",
-    "@ngrx/effects": "^7.2",
+    "@farmmaps/ng-openlayers": "file:../../dist/ng-openlayers",
-    "@ngrx/router-store": "^7.2",
+    "ngrx-store-localstorage": "20.1.0",
-    "@ngrx/store": "^7.2",
+    "@ngrx/effects": "21.0.1",
    "@ngrx/router-store": "21.0.1",
    "@ngrx/store": "21.0.1",
    "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.56 <0.0.1"
+    "rxjs": "7.8.1"
  }
 }
@@ -1,2 +0,0 @@
 //$theme-colors: ( "primary": #a7ce39, "secondary": #ffc800 );
 //$theme-colors: ( "primary": #a7ce39);
@@ -1,25 +1,36 @@
 import { Action } from '@ngrx/store';
-import { IMapState,IItemLayer,IQueryState } from '../models';
+import { IMapState } from '../models/map.state';
 import { IItemLayer } from '../models/item.layer';
 import { ILayervalue } from '../models/layer.value';
 import { IQueryState } from '@farmmaps/common';
 import { IItem } from '@farmmaps/common';
 import { Feature } from 'ol';
-import { Extent } from 'ol/extent';
+import { Style } from 'ol/style';
 import { Geometry } from 'ol/geom';
 import { IPeriodState } from '../models/period.state';
 export const SETSTATE = '[Map] SetState';
 export const SETMAPSTATE = '[Map] MapState';
 export const SETVIEWEXTENT = '[Map] SetViewExtent';
 export const INIT = '[Map] Init';
 export const SETPARENT = '[Map] SetParent';
 export const SETPERIOD = '[Map] SetPeriod';
 export const STARTSEARCH = '[Map] StartSearch';
 export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
 export const CLICKFEATURE = '[Map] ClickFeature';
 export const SELECTFEATURE = '[Map] SelectFeature';
 export const SELECTITEM = '[Map] SelectItem';
 export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
 export const SETSELECTEDITEMLAYER = '[Map] SetSelectedItemLayer';
 export const SELECTTEMPORALITEMSSUCCESS = '[Map] SelectTemporalItemsSuccess';
 export const NEXTTEMPORAL = '[Map] NextTemporal';
 export const PREVIOUSTEMPORAL = '[Map] PreviousTemporal';
 export const SELECTTEMPORAL = '[Map] SelectTemporal';
 export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
 export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
 export const EXPANDSEARCH = '[Map] ExpandSearch';
 export const COLLAPSESEARCH = '[Map] CollapseSearch';
 export const TOGGLEMENU = '[Map] ToggleMenu';
 export const SETEXTENT = '[Map] SetExtent';
 export const SETQUERYSTATE = '[Map] SetQueryState';
 export const SETTIMESPAN = '[Map] SetTimeSpan';
@@ -28,12 +39,33 @@ export const SETVISIBILITY = '[Map] SetVisibility';
 export const SETOPACITY = '[Map] SetOpacity';
 export const SETLAYERINDEX = '[Map] SetLayerIndex';
 export const REMOVELAYER = '[Map] RemoveLayer';
 export const CLEARLAYERS = '[Map] ClearLayers';
 export const LOADBASELAYERS = '[Map] LoadLayers';
 export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
 export const SELECTBASELAYER = '[Map] SelectBaseLayers';
 export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
 export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
 export const DOQUERY = '[Map] DoQuery';
 export const SETSTYLE = '[Map] SetStyle';
 export const SHOWLAYERSWITCHER = '[Map] ShowLayerSwitcher';
 export const CLEAR = '[Map] Clear';
 export const SETREPLACEURL = '[Map] SetReplaceUrl';
 export const SETFEATURES = '[Map] SetFeatures'
 export const SETLAYERVALUESLOCATION = '[Map] SetLayerValuesLocation'
 export const TOGGLELAYERVALUESENABLED = '[Map] ToggleLayerValuesEnabled'
 export const GETLAYERVALUE = '[Map] GetLayerValue'
 export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
 export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
 export const SETVIEWSTATE = '[Map] SetViewState'
 export const CLEARFEATURES = '[Map] ClearFeatures';
 export const SETPANELEXTRAWIDE = '[Map] SetPanelExtraWide';
 export const BACKUPFEATURES = '[Map] BackupFeatures';
 export const RESTOREFEATURES = '[Map] RestoreFeatures';
 export class Clear implements Action {
  readonly type = CLEAR;
  constructor() {}
 }
 export class SetState implements Action {
  readonly type = SETSTATE;
@@ -65,6 +97,12 @@ export class SetParent implements Action {
  constructor(public parentCode:string) { }
 }
 export class SetPeriod implements Action {
  readonly type = SETPERIOD;
  constructor(public period:IPeriodState) { }
 }
 export class StartSearch implements Action {
  readonly type = STARTSEARCH;
@@ -74,13 +112,19 @@ export class StartSearch implements Action {
 export class StartSearchSuccess implements Action {
  readonly type = STARTSEARCHSUCCESS;
-  constructor(public features: Array<Feature>, public query:IQueryState) { }
+  constructor(public features: Array<Feature<Geometry>>, public query:IQueryState) { }
 }
 export class ClickFeature implements Action {
  readonly type = CLICKFEATURE;
  constructor(public feature:Feature<Geometry>) { }
 }
 export class SelectFeature implements Action {
  readonly type = SELECTFEATURE;
-  constructor(public feature:Feature) { }
+  constructor(public feature:Feature<Geometry>) { }
 }
 export class SelectItem implements Action {
@@ -92,19 +136,43 @@ export class SelectItem implements Action {
 export class SelectItemSuccess implements Action {
  readonly type = SELECTITEMSUCCESS;
-  constructor(public item: IItem) { }
+  constructor(public item: IItem, public parentItem: IItem) { }
 }
 export class SelectTemporalItemsSuccess implements Action {
  readonly type = SELECTTEMPORALITEMSSUCCESS;
  constructor(public temporalItems: IItem[]) { }
 }
 export class NextTemporal implements Action {
  readonly type = NEXTTEMPORAL;
  constructor() { }
 }
 export class PreviousTemporal implements Action {
  readonly type = PREVIOUSTEMPORAL;
  constructor() { }
 }
 export class SelectTemporal implements Action {
  readonly type = SELECTTEMPORAL;
  constructor(item:IItem) { }
 }
 export class AddFeatureSuccess implements Action {
  readonly type = ADDFEATURESUCCESS;
-  constructor(public feature: Feature) { }
+  constructor(public feature: Feature<Geometry>) { }
 }
 export class UpdateFeatureSuccess implements Action {
  readonly type = UPDATEFEATURESUCCESS;
-  constructor(public feature: Feature) { }
+  constructor(public feature: Feature<Geometry>) { }
 }
 export class ExpandSearch implements Action {
@@ -119,12 +187,6 @@ export class CollapseSearch implements Action {
  constructor() { }
 }
 export class ToggleMenu implements Action {
  readonly type = TOGGLEMENU;
  constructor() { }
 }
 export class SetExtent implements Action {
  readonly type = SETEXTENT;
@@ -134,7 +196,7 @@ export class SetExtent implements Action {
 export class SetQueryState implements Action {
  readonly type = SETQUERYSTATE;
-  constructor(public queryState: IQueryState) { }
+  constructor(public queryState: IQueryState,public replaceUrl:boolean = true) { }
 }
 export class SetTimeSpan implements Action {
@@ -149,6 +211,12 @@ export class AddLayer implements Action {
  constructor(public item:IItem,public layerIndex=-1) { }
 }
 export class SetSelectedItemLayer implements Action {
  readonly type = SETSELECTEDITEMLAYER;
  constructor(public item:IItem,public layerIndex=-1) { }
 }
 export class SetVisibility implements Action {
  readonly type = SETVISIBILITY;
@@ -173,6 +241,12 @@ export class RemoveLayer implements Action {
  constructor(public itemLayer: IItemLayer) { }
 }
 export class ClearLayers implements Action {
  readonly type = CLEARLAYERS;
  constructor() { }
 }
 export class LoadBaseLayers implements Action {
  readonly type = LOADBASELAYERS;
@@ -206,27 +280,109 @@ export class ZoomToExtent implements Action {
 export class DoQuery implements Action {
  readonly type = DOQUERY;
-  constructor(public query:IQueryState) { }
+  constructor(public query:IQueryState,public replace:boolean = false) { }
 }
 export class SetStyle implements Action {
  readonly type = SETSTYLE;
  constructor(public itemType:string,public style: Style | ((feature:Feature<Geometry>) => Style )) { }
 }
 export class ShowLayerSwitcher implements Action {
  readonly type = SHOWLAYERSWITCHER;
  constructor(public show:boolean) {}
 }
 export class SetReplaceUrl implements Action {
  readonly type = SETREPLACEURL;
  constructor(public replaceUrl:boolean) {}
 }
 export class SetFeatures implements Action {
  readonly type = SETFEATURES;
  constructor(public features: Array<Feature<Geometry>>, public zoomToExtent: boolean = true) { }
 }
 export class SetLayerValuesLocation implements Action {
  readonly type = SETLAYERVALUESLOCATION;
  constructor(public x:number, public y:number) { }
 }
 export class ToggleLayerValuesEnabled implements Action {
  readonly type = TOGGLELAYERVALUESENABLED;
  constructor() { }
 }
 export class GetLayerValue implements Action {
  readonly type = GETLAYERVALUE;
  constructor(public itemLayer:IItemLayer,public x:number,public y:number) { }
 }
 export class GetLayerValueSuccess implements Action {
  readonly type = GETLAYERVALUESUCCESS;
  constructor(public layervalue:ILayervalue) { }
 }
 export class ToggleShowDataLayerSlide implements Action {
  readonly type = TOGGLESHOWDATALAYERSLIDE;
  constructor() {}
 }
 export class SetViewState implements Action {
  readonly type = SETVIEWSTATE;
  constructor(public enabled:boolean) {}
 }
 export class ClearFeatures implements Action {
  readonly type = CLEARFEATURES;
  constructor() {}
 }
 export class SetPanelExtraWide implements Action {
  readonly type = SETPANELEXTRAWIDE;
  constructor(public panelExtraWide:boolean) {}
 }
 export class BackupFeatures implements Action {
  readonly type = BACKUPFEATURES;
  constructor() {}
 }
 export class RestoreFeatures implements Action {
  readonly type = RESTOREFEATURES;
  constructor() {}
 }
 export type Actions = SetMapState
  | Init
  | Clear
  | SetParent
  | StartSearch
  | StartSearchSuccess
  | ClickFeature
  | SelectFeature
  | SelectItem
  | SelectItemSuccess
  | SelectTemporalItemsSuccess
  | NextTemporal
  | PreviousTemporal
  | SelectTemporal
  | AddFeatureSuccess
  | UpdateFeatureSuccess
  | ExpandSearch
  | CollapseSearch
  | ToggleMenu
  | SetExtent
  | SetQueryState
  | SetTimeSpan
  | AddLayer
  | RemoveLayer
  | ClearLayers
  | SetVisibility
  | SetOpacity
  | SetLayerIndex
@@ -237,5 +393,21 @@ export type Actions = SetMapState
  | ZoomToExtent
  | SetState
  | SetViewExtent
-  | DoQuery;
+  | DoQuery
  | SetStyle
  | ShowLayerSwitcher
  | SetReplaceUrl
  | SetFeatures
  | SetSelectedItemLayer
  | SetLayerValuesLocation
  | ToggleLayerValuesEnabled
  | GetLayerValueSuccess
  | GetLayerValue
  | SetPeriod
  | ToggleShowDataLayerSlide
  | SetViewState
  | ClearFeatures
  | SetPanelExtraWide
  | BackupFeatures
  | RestoreFeatures;
@@ -4,21 +4,21 @@ import { MapComponent } from './components/map/map.component';
 import { AuthGuard } from '@farmmaps/common';
 const routes = [
    {
    path: '', canActivateChild: [AuthGuard], children: [
    {
        path: '',
        component: MapComponent   
            }
        ]
    },
    {
-      path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
+        path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer',
-            {
+        component: MapComponent
-                path: '',
+    },
    {
       path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
       component: MapComponent
    },
    {
       path: ':queryState', 
       component: MapComponent
            }
        ]
    }
 ];
@@ -1,134 +1,124 @@
 import { NgModule ,ModuleWithProviders} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 //external modules
 import { AngularOpenlayersModule } from 'ngx-openlayers';
 import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { EffectsModule } from '@ngrx/effects';
 import { ActionReducer, MetaReducer, StoreModule } from '@ngrx/store';
 import { AngularOpenlayersModule } from '@farmmaps/ng-openlayers';
 //common modules
 import { AppCommonModule } from '@farmmaps/common';
 import { MODULE_NAME } from './module-name';
 import * as mapReducers from './reducers/map.reducer';
 import * as mapActions from './actions/map.actions';
 import * as mapEffects from './effects/map.effects';
 import { MODULE_NAME } from './module-name';
 import * as mapReducers from './reducers/map.reducer';
-import { IMapState} from './models';
+import { IClickedFeature } from './models/clicked.feature';
-import { ISelectedFeatures } from './models';
+import { IItemLayer, ItemLayer, ITemporalItemLayer, TemporalItemLayer } from './models/item.layer';
-import { IItemLayer } from './models';
+import { IMapState } from './models/map.state';
-import { ItemLayer} from './models';
+import { IPeriodState } from './models/period.state';
-import { IQueryState } from './models';
+import { ISelectedFeatures } from './models/selected.features';
 import { IPeriodState } from './models';
 // components
-import { GpsLocation} from './components/aol/gps-location/gps-location.component';
+import { MapRoutingModule } from './common-map-routing.module';
 //import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
 import {FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
 import { FeatureListFeatureCroppingschemeComponent} from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
 import { ItemWidgetListComponent} from './components/item-widget-list/item-widget-list.component';
 import { AbstractItemListItemComponent, ItemListItemComponent, AbstractItemWidgetComponent } from './components/item-list-item/item-list-item.component';
 import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
 import { AbstractItemListComponent,ItemListComponent} from './components/item-list/item-list.component';
 import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
 import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
 import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
 import {SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
 import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
 import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
 import {FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
 import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
 import {FeatureListCropfieldComponent  } from './components/feature-list-cropfield/feature-list-cropfield.component';
 import {FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
 import { WidgetHostDirective} from './components/widget-host/widget-host.directive';
 import { FeatureListComponent,AbstractFeatureListComponent} from './components/feature-list/feature-list.component';
 import { FileDropTargetComponent } from './components/aol/file-drop-target/file-drop-target.component';
-import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
+import { GpsLocation } from './components/aol/gps-location/gps-location.component';
 import { ItemFeaturesSourceComponent } from './components/aol/item-features-source/item-features-source.component';
 import { ItemLayersComponent } from './components/aol/item-layers/item-layers.component';
-import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
+import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
 import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
 import { LayerListComponent } from './components/aol/layer-list/layer-list.component';
 import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
 import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
 import { PanToLocation } from './components/aol/pan-to-location/pan-to-location.component';
 import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
 import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
 import { FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
 import { FeatureListCropfieldComponent } from './components/feature-list-cropfield/feature-list-cropfield.component';
 import { FeatureListObservationComponent } from './components/feature-list-observation/feature-list-observation.component';
 import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
 import { FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
 import { FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
 import { FeatureListFeatureCroppingschemeComponent } from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
 import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
 import { AbstractFeatureListComponent, FeatureListComponent } from './components/feature-list/feature-list.component';
 import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
 import { ForChild } from './components/for-item/for-child.decorator';
 import { ForItemType } from './components/for-item/for-itemtype.decorator';
 import { ForPackage } from './components/for-item/for-package.decorator';
 import { ForSourceTask } from './components/for-item/for-sourcetask.decorator';
 import { ifZoomToShowDirective } from './components/if-zoom-to-show/if-zoom-to-show.directive';
 import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
 import { AbstractItemListItemComponent, AbstractItemWidgetComponent, ItemListItemComponent } from './components/item-list-item/item-list-item.component';
 import { AbstractItemListComponent, ItemListComponent } from './components/item-list/item-list.component';
 import { ItemWidgetListComponent } from './components/item-widget-list/item-widget-list.component';
 import { LayerSwitcher } from './components/layer-switcher/layer-switcher.component';
 import { HistogramDetailsComponent } from './components/legend/histogram-details/histogram-details.component';
 import { LegendComponent } from './components/legend/legend.component';
 import { StatisticsDetailsComponent } from './components/legend/statistics-details/statistics-details.component';
 import { MapSearchComponent } from './components/map-search/map-search.component';
 import { MapComponent } from './components/map/map.component';
 import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
 import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
-import { MapComponent } from './components/map/map.component';
+import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
-import { MapSearchComponent } from './components/map-search';
+import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
-import { MapRoutingModule } from './common-map-routing.module';
+import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
-import { LegendComponent } from './components/legend/legend.component';
+import { SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
-import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
+import { SelectedItemTemporalComponent } from './components/selected-item-temporal/selected-item-temporal.component';
-import { StateSerializerService } from './services/state-serializer.service';
+import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
-import { GeolocationService } from './services/geolocation.service';
+import { WidgetHostDirective } from './components/widget-host/widget-host.directive';
 import { localStorageSync } from 'ngrx-store-localstorage';
 import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
-import { ForChild} from './components/for-item/for-child.decorator';
+import { ZoomToShowAlert } from './components/zoom-to-show-alert/zoom-to-show-alert.component';
-import {ForItemType } from './components/for-item/for-itemtype.decorator';
+import { DeviceOrientationService } from './services/device-orientation.service';
-import { ForSourceTask} from './components/for-item/for-sourcetask.decorator';
+import { FeatureIconService } from './services/feature-icon.service';
 import { GeolocationService } from './services/geolocation.service';
 import { TemporalService } from './services/temporal.service';
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
  const r = function(state, action) {
    const r2 = reducer(state, action);
    if(action.type == "@ngrx/store/update-reducers") {
        const ms = window.localStorage.getItem(MODULE_NAME+"_mapState");
        if(ms) {
          r2["mapState"] = JSON.parse(ms);
        }
        const sp = window.localStorage.getItem(MODULE_NAME+"_searchPeriod");
        if(sp) {          
          const p = JSON.parse(sp);
          r2["period"] = { startDate: new Date(Date.parse(p.startDate)),endDate:new Date(Date.parse(p.endDate))};
        }
    }
    if(action.type == "[Map] MapState" || action.type == "[Map] SetState") {
      window.localStorage.setItem(MODULE_NAME + "_mapState",JSON.stringify(r2["mapState"]));
    }
    if(action.type == "[Map] SetPeriod" ) {
      window.localStorage.setItem(MODULE_NAME + "_searchPeriod",JSON.stringify(r2["period"]));
    }
    return r2;
  };
  return r;
 }
 const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
 export {
  mapEffects,
  mapReducers,
  mapActions,
  ZoomToExtentComponent,
  ItemVectorSourceComponent,
  ItemFeaturesSourceComponent,
  ItemLayersComponent,
  FileDropTargetComponent,
  MapComponent,
  MetaDataModalComponent,
  RotationResetComponent,
  MapSearchComponent,
  SelectPeriodModalComponent,
  LayerListComponent,
  LegendComponent,
  LayerVectorImageComponent,
  FeatureListComponent,
  WidgetHostDirective,
  FeatureListContainerComponent,
  FeatureListCroppingschemeComponent,
  FeatureListCropfieldComponent,
  FeatureListFeatureContainerComponent,
  FeatureListFeatureComponent,
  FeatureListFeatureCroppingschemeComponent,
  FeatureListFeatureCropfieldComponent,
  SelectedItemContainerComponent,
  SelectedItemComponent,
  SelectedItemCropfieldComponent,
  SelectedItemGeotiffComponent,
  SelectedItemShapeComponent,
  ItemListItemComponent,
  ItemListItemContainerComponent,
  ItemListComponent,
  ItemWidgetListComponent,
  WidgetStatusComponent,
  GpsLocation,
  AbstractFeatureListComponent,
-  AbstractFeatureListFeatureComponent,
+  AbstractFeatureListFeatureComponent, AbstractItemListComponent, AbstractItemListItemComponent, AbstractItemWidgetComponent, AbstractSelectedItemComponent, DeviceOrientationService, FeatureIconService, FeatureListComponent, FeatureListContainerComponent, FeatureListCropfieldComponent, FeatureListObservationComponent, FeatureListCroppingschemeComponent, FeatureListFeatureComponent, FeatureListFeatureContainerComponent, FeatureListFeatureCropfieldComponent, FeatureListFeatureCroppingschemeComponent, FileDropTargetComponent, ForChild,
-  AbstractSelectedItemComponent,
+  ForItemType, ForPackage, ForSourceTask, GeolocationService, GeometryThumbnailComponent, GpsLocation, IClickedFeature, ifZoomToShowDirective, IItemLayer, IMapState, IPeriodState, ISelectedFeatures, ItemLayer, ItemLayersComponent, ItemListComponent, ItemListItemComponent,
-  AbstractItemWidgetComponent,
+  ItemListItemContainerComponent, ITemporalItemLayer, ItemVectorSourceComponent, ItemWidgetListComponent, LayerListComponent, LayerSwitcher, LayerVectorImageComponent, LegendComponent, mapActions, MapComponent, mapEffects,
-  AbstractItemListItemComponent,
+  mapReducers, MapSearchComponent, MetaDataModalComponent, PanToLocation, RotationResetComponent, SelectedItemComponent, SelectedItemContainerComponent, SelectedItemCropfieldComponent,
-  AbstractItemListComponent,
+  SelectedItemGeotiffComponent, SelectedItemShapeComponent, SelectedItemTemporalComponent, SelectPeriodModalComponent, TemporalItemLayer, TemporalService, WidgetHostDirective, WidgetStatusComponent, ZoomToExtentComponent, ZoomToShowAlert
-  StateSerializerService,
+};
  GeolocationService,
  IMapState,
  ISelectedFeatures,
  IItemLayer,
  ItemLayer,
  IQueryState,
  IPeriodState,
  ForChild,
  ForItemType,
  ForSourceTask
 }
@NgModule({
    imports: [
        CommonModule,
        AngularOpenlayersModule,
        MapRoutingModule,
-    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer),
+        StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
        EffectsModule.forFeature([mapEffects.MapEffects]),
        NgbModule,
        FormsModule,
@@ -138,7 +128,6 @@ export {
    declarations: [
        ZoomToExtentComponent,
        ItemVectorSourceComponent,
    ItemFeaturesSourceComponent,
        ItemLayersComponent,
        FileDropTargetComponent,
        MapComponent,
@@ -154,6 +143,7 @@ export {
        FeatureListContainerComponent,
        FeatureListCroppingschemeComponent,
        FeatureListCropfieldComponent,
        FeatureListObservationComponent,
        FeatureListFeatureContainerComponent,
        FeatureListFeatureComponent,
        FeatureListFeatureCroppingschemeComponent,
@@ -162,6 +152,7 @@ export {
        SelectedItemComponent,
        SelectedItemCropfieldComponent,
        SelectedItemGeotiffComponent,
        SelectedItemTemporalComponent,
        SelectedItemShapeComponent,
        ItemListItemComponent,
        ItemListItemContainerComponent,
@@ -169,29 +160,24 @@ export {
        ItemWidgetListComponent,
        WidgetStatusComponent,
        GpsLocation,
-  ],
+        PanToLocation,
-  entryComponents: [
+        LayerSwitcher,
-    FeatureListComponent,
+        HistogramDetailsComponent,
-    FeatureListCroppingschemeComponent,
+        StatisticsDetailsComponent,
-    FeatureListCropfieldComponent,
+        ifZoomToShowDirective,
-    FeatureListFeatureComponent,
+        ZoomToShowAlert,
-    FeatureListFeatureCroppingschemeComponent,
+        LayerValuesComponent,
-    FeatureListFeatureCropfieldComponent,
+        GeometryThumbnailComponent
    SelectedItemComponent,
    SelectedItemCropfieldComponent,
    SelectedItemGeotiffComponent,
    SelectedItemShapeComponent,
    ItemListComponent,
    ItemListItemComponent,
    ],
    exports: [
        ItemVectorSourceComponent,
       ItemFeaturesSourceComponent,
        ItemLayersComponent,
        FileDropTargetComponent,
        MetaDataModalComponent,
        MapComponent,
        GpsLocation,
        PanToLocation,
        LayerSwitcher,
        FeatureListFeatureComponent,
        FeatureListFeatureCropfieldComponent,
        FeatureListFeatureCroppingschemeComponent,
@@ -199,6 +185,7 @@ export {
        SelectedItemComponent,
        SelectedItemCropfieldComponent,
        SelectedItemGeotiffComponent,
        SelectedItemTemporalComponent,
        SelectedItemShapeComponent,
        ItemListItemComponent,
        ItemListItemContainerComponent,
@@ -216,30 +203,34 @@ export {
        FeatureListContainerComponent,
        FeatureListCroppingschemeComponent,
        FeatureListCropfieldComponent,
        FeatureListObservationComponent,
        FeatureListFeatureContainerComponent,
-       ZoomToExtentComponent
+        ZoomToExtentComponent,
-  ]
+        ifZoomToShowDirective,
-})
+        ZoomToShowAlert,
-
+        GeometryThumbnailComponent
-export class AppCommonMapModule {
+    ],
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppCommonMapModule,      
    providers: [
-        StateSerializerService,
+        FeatureIconService,
        GeolocationService,
        DeviceOrientationService,
        TemporalService,
        { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
        { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
        { provide: AbstractFeatureListComponent, useClass: FeatureListObservationComponent, multi: true },        
        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },       
        { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
        { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
        { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
        { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
        { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
        { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
        { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
    ]
-    };
+})
-  }
+
 export class AppCommonMapModule {  
 }
@@ -1,10 +1,10 @@
 import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from '@farmmaps/ng-openlayers';
 import * as proj  from 'ol/proj';
 import {Point,Geometry} from 'ol/geom';
 import { GeoJSON } from 'ol/format';
-import { Feature } from 'ol';
+import { Feature} from 'ol';
 export interface IDroppedFile {
  files: any,
@@ -15,20 +15,21 @@ export interface IDroppedFile {
@Component({
    selector: 'fm-map-file-drop-target',
-  template: ''
+    template: '',
    standalone: false
 })
 export class FileDropTargetComponent implements OnInit, OnDestroy {
  element: Element;
  @Output() onFileDropped = new EventEmitter<IDroppedFile>();
  @Input() parentCode: string;
-  @Input() features: Array<Feature>;
+  @Input() features: Array<Feature<Geometry>>;
  constructor(private map: MapComponent) {
  }
  ngOnInit() {
    this.element = this.map.instance.getViewport();
-    let other = this;
+    const other = this;
    this.element.addEventListener('drop', this.onDrop, false);
    this.element.addEventListener('dragover', this.preventDefault, false);
    this.element.addEventListener('dragenter', this.preventDefault, false);
@@ -36,20 +37,20 @@ export class FileDropTargetComponent implements OnInit, OnDestroy {
  private onDrop = (event: DragEvent) => {
    this.stopEvent(event);
-    let geojsonFormat = new GeoJSON(); 
+    const geojsonFormat = new GeoJSON(); 
-    var parentCode = this.parentCode;
+    let parentCode = this.parentCode;
-    var coordinate = this.map.instance.getEventCoordinate(event);
+    const coordinate = this.map.instance.getEventCoordinate(event);
    //coordinate = proj.transform(coordinate, this.map.instance.getView().getProjection(), 'EPSG:4326');
-    var geometry:Geometry = new Point(coordinate);
+    let geometry:Geometry = new Point(coordinate);
-    var hitFeatures = this.map.instance.getFeaturesAtPixel([event.pageX, event.pageY]);
+    const hitFeatures = this.map.instance.getFeaturesAtPixel([event.pageX, event.pageY]);
-    var hitFeature = hitFeatures && hitFeatures.length > 0 ? hitFeatures[0] : null;
+    const hitFeature = hitFeatures && hitFeatures.length > 0 ? hitFeatures[0] : null;
    if (hitFeature) {
      if (hitFeature.get("code")) {
        parentCode = hitFeature.get("code");
      }
      geometry = geojsonFormat.readGeometry(geojsonFormat.writeGeometry(geometry)); // create copy instead of reference
    }
-    var projectedGeometry = geometry.transform(this.map.instance.getView().getProjection(), 'EPSG:4326');   
+    const projectedGeometry = geometry.transform(this.map.instance.getView().getProjection(), 'EPSG:4326');   
    if (event.dataTransfer && event.dataTransfer.files) {
      this.onFileDropped.emit({ files: event.dataTransfer.files, event: event, geometry: JSON.parse(geojsonFormat.writeGeometry(projectedGeometry)),parentCode:parentCode})
@@ -6,8 +6,8 @@
        <stop offset="100%" class="stop2" />
      </linearGradient>
    </defs>
-    <circle class="tolerance" cx="500" cy="500" stroke="none" [attr.r]="locTolerancePixels" />
+    <circle class="tolerance hidden" [ngClass]="{'hidden':!showTolerance}" cx="500" cy="500" stroke="none" [attr.r]="locTolerancePixels" />
-    <path *ngIf="showHeading" class="heading" stroke="none" [attr.d]="path" fill="url(#grad1)" [attr.transform]="rotate"></path>
+    <path class="heading hidden" [ngClass]="{'hidden': !showHeading }" stroke="none" [attr.d]="path" fill="url(#grad1)" [attr.transform]="rotate"></path>
    <circle class="border" cx="500" cy="500" r="7" stroke="none" />
    <circle class="center" cx="500" cy="500" r="6" stroke="none" />
@@ -1,7 +1,3 @@
@import "../../../_theme.scss";
@import "~bootstrap/scss/bootstrap.scss";
 .gps-location {
  display:none; 
 }
@@ -10,26 +6,34 @@
  stroke-width: 0;
 }
 .heading.hidden {
  display: none;
 }
 .tolerance {
-  fill: theme-color();
+  fill: var(--bs-primary);
  fill-opacity:0.4;
 }
 .tolerance.hidden {
  display: none
 }
 .border {
-  fill: white;
+  fill: var(--bs-white);
 }
 .center {
-  fill: theme-color();
+  fill: var(--bs-primary);
 }
 .stop1 {
-  stop-color: theme-color();
+  stop-color: var(--bs-primary);
  stop-opacity:1;
 }
 .stop2 {
-  stop-color: theme-color();
+  stop-color:var(--bs-primary);
  stop-opacity: 0;
 }
@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from '@farmmaps/ng-openlayers';
 import  Overlay  from 'ol/Overlay';
 import { fromLonLat, toLonLat } from 'ol/proj';
@@ -7,23 +7,26 @@ import { fromLonLat, toLonLat } from 'ol/proj';
@Component({
    selector: 'fm-map-gps-location',
    templateUrl: './gps-location.component.html',
-  styleUrls: ['./gps-location.component.scss']
+    styleUrls: ['./gps-location.component.scss'],
    standalone: false
 })
 export class GpsLocation  implements OnInit,OnChanges{
  @Input() enable:boolean;
  public instance: Overlay;
-  @Input() position: Position;
+  @Input() position: GeolocationPosition;
  @Input() location: number[]=[0,0];
-  @Input() locationTolerance: number = 0;
+  @Input() locationTolerance = 0;
-  @Input() showHeading: boolean = false;
+  @Input() showHeading = false;
-  @Input() heading: number = 0;
+  @Input() showTolerance = false;
-  @Input() headingTolerance: number = 0;
+  @Input() heading = 0;
-  public locTolerancePixels: number = 0;
+  @Input() headingTolerance = 0;
-  public path: string = "";
+  public locTolerancePixels = 0;
-  public rotate: string = "";
+  public path = "";
-  private resolution: number = 0;
+  public rotate = "";
-  @ViewChild('location') locationElement: ElementRef;
+  private resolution = 0;
  initialized = false;
  @ViewChild('location', { static: true }) locationElement: ElementRef;
  constructor(private map: MapComponent) {
@@ -40,29 +43,34 @@ export class GpsLocation  implements OnInit,OnChanges{
      position: fromLonLat( this.location),
      element: this.locationElement.nativeElement
    });
-    var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
+    const x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
-    var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
+    const y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
-    var y1 = Math.round(500 - y);
+    const y1 = Math.round(500 - y);
-    var x1 = Math.round(500 - x);
+    const x1 = Math.round(500 - x);
-    var y2 = Math.round(y1);
+    const y2 = Math.round(y1);
-    var x2 = Math.round(500 + x);
+    const x2 = Math.round(500 + x);
    this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
    this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
    this.locTolerancePixels = this.locationTolerance;
    this.map.instance.addOverlay(this.instance);
-    this.map.instance.getView().on('change:resolution', (evt) => {
+    this.map.instance.getView().on('change:resolution', (evt:any) => {
      this.resolution = evt.target.get('resolution');
      this.recalcLocationTolerance();
    });
    this.initialized = true;
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes.position && this.instance) {
-      var p = changes.position.currentValue as Position;
+      const p = changes.position.currentValue as GeolocationPosition;
      if(p && this.initialized) {
        this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
        this.locationTolerance = p.coords.accuracy;
        this.recalcLocationTolerance();  
-      this.heading = p.coords.heading;
+      }
    }
    if(changes.heading && this.instance) {
      this.rotate = "rotate(" +   Math.round(changes.heading.currentValue) + " 500 500)";
    }
  }
 }
@@ -1,90 +0,0 @@
 import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
 import { HttpClient } from "@angular/common/http";
 import { LayerVectorComponent, SourceVectorComponent, MapComponent, LayerImageComponent } from 'ngx-openlayers';
 import { LayerVectorImageComponent } from '../layer-vector-image/layer-vector-image.component';
 import { ItemService } from '@farmmaps/common';
 import { IItem } from '@farmmaps/common';
 import { ISelectedFeatures } from '../../../models';
 import {Vector} from 'ol/source';
 import {Feature,Collection} from 'ol';
 import {Extent} from 'ol/extent';
 import * as style from 'ol/style';
 import * as proj from 'ol/proj';
 import Projection from 'ol/proj/Projection';
 import * as loadingstrategy from 'ol/loadingstrategy';
 import {GeoJSON} from 'ol/format';
@Component({
  selector: 'fm-map-item-features-source',
  template: `<ng-content></ng-content>`,
  providers: [
    { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemFeaturesSourceComponent) }
  ]
 })
 export class ItemFeaturesSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
  instance:Vector;
  features: Collection<Feature>;
  @Input() item: IItem;
  @Input() layerIndex: number = 0;
  constructor(@Host() private layer: LayerVectorImageComponent, private itemService: ItemService, @Host() private map: MapComponent) {
    super(layer);
  }
  private colorIndex = 0;
  private styleCache = {};
  ngOnInit() {
    this.instance = new Vector({
      loader: (extent: Extent, resolution: number, projection: Projection) => {
        let format = new GeoJSON();
        this.itemService.getItemFeatures(this.item.code, extent, projection.getCode(), this.layerIndex).subscribe((data) => {
          var features = format.readFeatures(data);        
          // TODO 13/6/2019 The line below causes an endless loop. Action required?
          this.instance.addFeatures(features);
          // TODO 13/6/2019 Action required: check if feature collection hasn't been changed (Willem)
          // var t = this.vectorSource.getFeatures();
        });
      },
      format: new GeoJSON(),
      strategy: loadingstrategy.bbox
    });
    this.features = new Collection<Feature>();
    this.layer.instance
    this.layer.instance.setStyle((feature) => {
      var resolution = this.map.instance.getView().getResolution();
      var r = (2 / resolution) / 2;
      var color = feature.get("color");
      return new style.Style(
        {
          fill: new style.Fill({
            color: color
          }),
          image: new style.Circle({
            fill: new style.Fill({
              color: color
            }),
            stroke: new style.Stroke({
              color: color,
              width: 1.25
            }),
            radius: r
          }),
          stroke: new style.Stroke({
            color: color,
            width: 1.25
          })
        });           
    });
    this.host.instance.setSource(this.instance);
  }
  ngOnChanges(changes: SimpleChanges) {
    if (this.instance) {
      if (changes['layerIndex']) {
        this.instance.clear();
      }      
    }
  }
 }
@@ -1,38 +1,49 @@
-import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { HttpClient } from "@angular/common/http";
+import { LayerGroupComponent, MapComponent } from '@farmmaps/ng-openlayers';
-import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { ItemService,IItem,AppConfig } from '@farmmaps/common';
-import { ItemService } from '@farmmaps/common';
+import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
-import { AppConfig } from '@farmmaps/common';
+import { ILayerData} from '../../../models/layer.data';
-import { IItemLayer, ILayerData, IRenderoutputTiles, IRenderoutputImage, IGradientstop, ILayer, IHistogram } from '../../../models';
+import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram,IColor} from '../../../models/color.map';
 import {Extent} from 'ol/extent';
 import Projection from 'ol/proj/Projection';
 import * as proj from 'ol/proj';
 import * as loadingstrategy from 'ol/loadingstrategy';
 import * as style from 'ol/style';
 import {Tile,Layer,Image} from 'ol/layer';
-import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest} from 'ol/source';
+import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest,TileJSON,Source} from 'ol/source';
 import {Vector as VectorSource} from 'ol/source';
 import { Vector as VectorLayer } from 'ol/layer';
 import { VectorImage as VectorImageLayer } from 'ol/layer';
 import VectorTileSource from 'ol/source/VectorTile';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import {GeoJSON,MVT} from 'ol/format';
-import { from } from 'rxjs';
+import { Geometry } from 'ol/geom';
 import BaseLayer from 'ol/layer/Base';
 import Feature from 'ol/Feature';
@Component({
    selector: 'fm-map-item-layers',
    template: `<ng-content></ng-content>`,
    providers: [
        { provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
-  ]
+    ],
    standalone: false
 })
-export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
+export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit,OnDestroy {
  @Input() itemLayers: IItemLayer[];
  @Input() itemLayer: IItemLayer;
  @Output() onFeatureSelected: EventEmitter<any> = new EventEmitter<any>();
  @Output() onFeatureHover: EventEmitter<any> = new EventEmitter<any>();
  @Output() onPrerender: EventEmitter<any> = new EventEmitter<any>();
  private _apiEndPoint: string;
  private initialized = false;
  private mapEventHandlerInstalled = false;
  private topLayerPrerenderEventhandlerInstalled = false;
  private selectedFeatures = {};
  private selectionLayer:Layer<Source> = null;
-  constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
+  constructor(private itemService: ItemService, private map: MapComponent, public appConfig: AppConfig) {
    super(map);
    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
  }
@@ -40,7 +51,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
  private styleCache = {}
  componentToHex(c) {
-    var hex = c.toString(16);
+    const hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }
@@ -48,102 +59,133 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a);
  }
-  getColorFromGradient(layer: ILayer,  feature): style.Style {
+  getColorFromGradient(layer: ILayer, value: number): IColor {
-    var value = feature.get(layer.name);
+    const gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
-    var gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
+    const histogram: IHistogram = layer.renderer.band.histogram;
-    var histogram: IHistogram = layer.renderer.band.histogram;
+    const index = (value - histogram.min) / histogram.max;
-    var index = (value - histogram.min) / histogram.max;
+    let min = gradient[0];
-    var min = gradient[0];
+    let max = gradient[gradient.length - 1];
-    var max = gradient[gradient.length - 1];
+    for (let n = 0; n < gradient.length; n++) {
-    for (var n = 0; n < gradient.length; n++) {
+      const s = gradient[n];
      var s = gradient[n];
      if (s.relativestop <= index && min.relativestop < s.relativestop && n < gradient.length - 1) min = s;
      if (s.relativestop >= index && max.relativestop > s.relativestop && n > 0) max = s;
    }
-    var i = index - min.relativestop;
+    const i = index - min.relativestop;
-    var size = max.relativestop - min.relativestop;
+    const size = max.relativestop - min.relativestop;
-    var alpha = Math.round( min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size));
+    const alpha = Math.round(min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size));
-    var red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size));
+    const red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size));
-    var green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size));
+    const green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size));
-    var blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size));
+    const blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size));
-    return new style.Style(
+    return { alpha: alpha, red: red, green: green, blue: blue };
  }
  getColorForValue(layer: ILayer, value: number): IColor {
    let color: IColor =  { alpha:0,red:0,green:0,blue:0};
    if(layer.renderer.colorMap.entries.length>0) {
      color=layer.renderer.colorMap.noValue;
    }
    layer.renderer.colorMap.entries.forEach((entry) => {
        if(entry.value==value) {
          color =entry.color;
          return;
        }
    });
    return color;
  }
  getColor(item: IItem, layer: ILayer, feature): style.Style {
    const value = layer.indexKey ? feature.get(layer.indexKey) : feature.get(layer.name);
    const key = item.code + "_" + value;
    if (!this.styleCache[key]) {
      let color: IColor;
      if(layer.renderer.colorMap.colormapType == "manual") {
        color = this.getColorForValue(layer, value);
      } else {
        color = this.getColorFromGradient(layer, value);
      }
      this.styleCache[key] = new style.Style(
        {
          image: new style.Circle({
            fill: new style.Fill({
-            color: this.rgbaToHex(red,green,blue,alpha)
+              color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha)
            }),
            radius: 3
          }),
          fill: new style.Fill({
-          color: this.rgbaToHex(red, green, blue, alpha)
+            color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha)
          }),
          stroke: new style.Stroke({
-          color: this.rgbaToHex(red, green, blue, alpha),
+            color: this.rgbaToHex(color.red, color.green, color.blue, 255),
            width: 1.25
          }),
        });
    }
    return this.styleCache[key];
  }
-  createLayer(itemLayer: IItemLayer): Layer {
+  createGeotiffLayer(item:IItem,itemLayer:IItemLayer):Layer<Source> {
-    var layer: Layer = null;    
+    let layerIndex = -1;
-    if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') {
+    let layer: Layer<Source> = null;  
-      let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
+    layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : item.data.layers[0].index;
    const source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${Date.parse(item.updated)}` });
    layer = new Tile({ source: source });
-      var data = itemLayer.item.data;
+    const data = item.data;
-      var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null;
+    const l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null;
    if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
-        var rt = l.rendering as IRenderoutputTiles;
+      const rt = l.rendering as IRenderoutputTiles;
-        let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
+      const source = new XYZ({crossOrigin: 'use-credentials', maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${Date.parse(item.updated)}` });
      layer = new Tile({ source: source });
    }
    if (l && l.rendering && l.rendering.renderoutputType == "Image") {
-        var ri = l.rendering as IRenderoutputImage;
+      const ri = l.rendering as IRenderoutputImage;  
-        let projection = new Projection({
+      const source = new ImageStatic({ imageExtent:ri.extent,projection:'EPSG:3857',  crossOrigin: 'use-credentials', url: `${this._apiEndPoint}/api/v1/items/${item.code}/mapimage/${layerIndex}?v=${Date.parse(item.updated)}` });
          code: 'image',
          units: 'pixels',
          extent: ri.extent
        });
        let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/mapimage?v=${itemLayer.item.updated.getTime()}` });
      layer = new Image({ source: source });
    }
-    } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
+    return layer;
-      var data = itemLayer.item.data;
+  }
-      var layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
+
-      var l = itemLayer.item.data.layers[layerIndex];
+  createShapeLayer(item:IItem,itemLayer:IItemLayer):Layer<Source> {
    let layerIndex = -1;
    let layer: Layer<Source> = null; 
    layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : item.data.layers[0].index;
    const data = item.data;
    const l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
    if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
-        var rt = itemLayer.item.data.layers[layerIndex].rendering as IRenderoutputTiles;
+      var rt = l.rendering as IRenderoutputTiles;
      layer = new VectorTileLayer({
        declutter: true,
        source: new VectorTileSource({
          maxZoom: rt.maxzoom,
          minZoom: rt.minzoom,
          format: new MVT(),
-            url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${itemLayer.item.updated.getTime()}`
+          url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${Date.parse(item.updated)}`
        }),
        style: (feature) => {
-            return this.getColorFromGradient(l, feature);           
+          return this.getColor(item,l, feature);
        }
      })
-      } if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
+    } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
      var rt = l.rendering as IRenderoutputTiles;
      layer = new Tile({
        source: new XYZ({
          maxZoom: rt.maxzoom,
          minZoom: rt.minzoom,
-            url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}`
+          url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${Date.parse(item.updated)}`
        })
      });
    } else {
-        let __this = this;
+      const __this = this;
-        let format = new GeoJSON();
+      const format = new GeoJSON();
-        let source = new VectorSource({
+      const source = new VectorSource({
        strategy: loadingstrategy.bbox,
        loader: function (extent: Extent, resolution: number, projection: Projection) {
-            var source = this as VectorSource;
+          const source = this as VectorSource<Feature<Geometry>>;
-            __this.itemService.getItemFeatures(itemLayer.item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
+          __this.itemService.getItemFeatures(item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
-              var features = format.readFeatures(data);
+            const features = format.readFeatures(data).filter(feature => feature instanceof Feature) as Feature[];
-              for (let f of features) {
+            for (const f of features) {
              if (f.get("code")) {
                f.setId(f.get("code"));
              }
@@ -152,12 +194,13 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
          });
        }
      });
-        layer = new VectorLayer({
+      layer = new VectorImageLayer({
        declutter: true,
        source: source,
        style: (feature) => {
-            var key = feature.get("color");
+          const key =feature.get("code") + "_" + feature.get("color");
          if (!this.styleCache[key]) {
-              var color = feature.get("color");
+            const color = feature.get("color");
            this.styleCache[key] = new style.Style(
              {
                fill: new style.Fill({
@@ -184,37 +227,110 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
        }
      });
    }
-    } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') {
+    if(l.minzoom) {
-      let data = itemLayer.item.data as ILayerData;
+      layer.setMinZoom(l.minzoom);
    }
    if(l.maxzoom) {
      layer.setMaxZoom(l.maxzoom);
    }
    return layer;
  }
  createSelectionLayer(itemLayer:IItemLayer):Layer<Source> {
    let layerIndex = -1;
    const layer: Layer<Source> = null; 
    layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
    const data = itemLayer.item.data;
    const l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
    if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
      return new VectorTileLayer({
        renderMode: 'vector',
        source: (itemLayer.layer as VectorTileLayer).getSource(),
        style: (feature) => {
          if (feature.getId() in this.selectedFeatures) {
            return new style.Style(
              {               
                stroke: new style.Stroke({
                  color: '#0d6efd',
                  width: 3
                })
              }
            );
          }
        },
        minZoom: itemLayer.layer.getMinZoom(),
        maxZoom: itemLayer.layer.getMaxZoom()        
      });
    }
    return null;
  }
  createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer<Source> {
    const data = item.data as ILayerData;
    let layer: Layer<Source> = null; 
    switch (data.interfaceType) {
      case 'OSM': {
-          let source = new OSM();
+        const source = new OSM();
        layer = new Tile({ source: source });
        break;
      }
      case 'BingMaps': {
-          let source = new BingMaps(data.options);
+        const source = new BingMaps(data.options);
        layer = new Tile({ source: source });
        break;
      }
      case 'TileWMS': {
-          let source = new TileWMS(data.options);
+        const source = new TileWMS(data.options);
        layer = new Tile({ source: source });
        break;
      }
      case 'TileJSON': {
        const source = new TileJSON(data.options);
        layer = new Tile({ source: source });
        break;
      }
      case 'TileArcGISRest': {
-          let source = new TileArcGISRest(data.options);
+        const source = new TileArcGISRest(data.options);
        layer = new Tile({ source: source });
        break;
      }
      case 'VectorWFSJson': {
        const source = new VectorSource({
          format: new GeoJSON(),
          url: function (extent) {
            return (
              data.options.url + '&srsname=' + data.projection +
              '&bbox=' +
              extent.join(',') +
              ',EPSG:3857'
            );
          },
          strategy: loadingstrategy.bbox,
        });
        layer = new VectorLayer({ source: source });
        break;
      }
      default: {
        break;
      }
    }
    return layer;
  }
  createLayer(itemLayer: IItemLayer): Layer<Source> {
    let layer: Layer<Source> = null;   
    const layerIndex = -1;
    if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') {
      layer = this.createGeotiffLayer(itemLayer.item,itemLayer);
    } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
      layer = this.createShapeLayer(itemLayer.item,itemLayer);
    } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') {
      layer = this.createExternalLayer(itemLayer.item,itemLayer);
    }
    if (layer) {
-      let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
+      const geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
-      let extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null;
+      const extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null;
      if (extent) layer.setExtent(extent);
    }
@@ -223,54 +339,192 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
  ngOnInit() {
    super.ngOnInit();
    if(this.itemLayers) {
      this.updateLayers(this.itemLayers);
    } else if(this.itemLayer) {
      if(this.getItemlayer(this.itemLayer).item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
        this.installMapEventHandler();
      }
      this.updateLayers([this.itemLayer])
    } else {
      this.updateLayers([]);
    }
    this.initialized=true;
  }
-  updateLayers(itemLayers: IItemLayer[]) {
+  installMapEventHandler() {
-    if (itemLayers) {
+    if(!this.mapEventHandlerInstalled) {
-      var olLayers = this.instance.getLayers();
+      this.map.instance.on(['click', 'pointermove'],this.mapEventHandler);
-      itemLayers.forEach((itemLayer, index) => {
+      this.mapEventHandlerInstalled=true;
    }
  }
-        var layer = itemLayer.layer;
+  unInstallMapEventHandler() {
-        let olIndex = olLayers.getArray().indexOf(layer);
+    if(this.mapEventHandlerInstalled) {
      this.map.instance.un(['click', 'pointermove'],this.mapEventHandler);
      this.mapEventHandlerInstalled=false;
    }
  }
  installTopLayerPrerenderEventhandler(olLayer : Layer<Source>) {
    if(!this.topLayerPrerenderEventhandlerInstalled  && this.onPrerender.observers.length > 0  && olLayer) {
      if(this.instance.getVisible()) {
        olLayer.on('prerender',this.topLayerPrerenderEventhandler);
        olLayer.on('postrender',this.topLayerPostrenderEventhandler);
        this.topLayerPrerenderEventhandlerInstalled = true;
      }
    }
  }
  unInstallTopLayerPrerenderEventhandler() {
    if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
    {
      if(this.instance.getVisible()) {
        const olLayers = this.instance.getLayers().getArray().forEach((l:any) => {
          l.un('prerender',this.topLayerPrerenderEventhandler);
          l.un('postrender',this.topLayerPostrenderEventhandler);
        });
        this.topLayerPrerenderEventhandlerInstalled = false;
      }
    }
  }
  addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer<Source> {
    if(!itemLayer) return null;
    const olLayers = this.instance.getLayers();
    let layer = itemLayer.layer;
    const olIndex = olLayers.getArray().indexOf(layer);
    if (olIndex < 0) {
      // New layer: we add it to the map
      layer = this.createLayer(itemLayer);
      if (layer) {
            itemLayer.layer = layer;
          }
        olLayers.insertAt(index, layer);
      }
    } else if (index !== olIndex) {
      // layer has moved inside the layers list
      olLayers.removeAt(olIndex);
      olLayers.insertAt(index, layer);
    }
    if(layer) {
      itemLayer.layer = layer;
      layer.setOpacity(itemLayer.opacity);
      layer.setVisible(itemLayer.visible); 
    }
    return layer;
  }
  updateLayers(itemLayers: IItemLayer[] | IItemLayer) {
    this.unInstallTopLayerPrerenderEventhandler();
    let dataLayer = false;
    let ils:IItemLayer[] = [];
    if(Array.isArray(itemLayers)) {
       ils = itemLayers;
    } else {
      dataLayer=true;
       ils=[itemLayers];
    }
    const newLayers: Layer<Source>[] = [];
    if (ils) {
      ils.forEach((itemLayer, index) => {
        if(itemLayer.item.itemType ==  'vnd.farmmaps.itemtype.temporal') {
          const il = itemLayer as ITemporalItemLayer;
          const previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length);          
          if(previousLayer) newLayers.push(previousLayer);
          const selectedLayer = this.addOrUpdateOlLayer(il.selectedItemLayer,newLayers.length);
          if(selectedLayer) newLayers.push(selectedLayer);
          const nextLayer = this.addOrUpdateOlLayer(il.nextItemLayer,newLayers.length);
          if(nextLayer) newLayers.push(nextLayer);
          this.installTopLayerPrerenderEventhandler(selectedLayer);
        } else {
          const layer = this.addOrUpdateOlLayer(itemLayer,newLayers.length);
          if(layer) newLayers.push(layer);    
          this.installTopLayerPrerenderEventhandler(layer);       
        }
      });
      // Remove the layers that have disapeared from childrenLayers
-      if (olLayers.getLength() > itemLayers.length) {
+      const olLayers = this.instance.getLayers();
-        for (let i = itemLayers.length; i < olLayers.getLength(); i++) {
+      while(olLayers.getLength() > newLayers.length) {
-          olLayers.removeAt(i);
+        olLayers.removeAt(newLayers.length);
      }
      this.selectionLayer=null;
      if(this.mapEventHandlerInstalled && ils.length==1 && this.getItemlayer(itemLayers[0]).item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
        this.selectionLayer = this.createSelectionLayer(this.getItemlayer(itemLayers[0]));
        if(this.selectionLayer) olLayers.push(this.selectionLayer)
      }
    }
  }
  topLayerPrerenderEventhandler = (event) => {
     this.onPrerender.emit(event);
  }
  topLayerPostrenderEventhandler = (event) => {
    const ctx = event.context;
    ctx.restore();
  }
  mapEventHandler = (event) => {
    // select only when having observers
    if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;
    if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return;
    const itemLayer= this.getItemlayer(this.itemLayer);
    if(itemLayer && itemLayer.layer) {
       this.selectedFeatures = {};
       if(itemLayer.layer ) {
        const minZoom = itemLayer.layer.getMinZoom();
        const currentZoom = this.map.instance.getView().getZoom();
        if(currentZoom>minZoom) {
            itemLayer.layer.getFeatures(event.pixel).then((features) => {      
            if(!features.length) {
              this.onFeatureHover.emit(null);
              return;
            }
           const fid = features[0].getId();
           const feature = features[0];
           if(event.type === 'pointermove') {
             this.selectedFeatures[fid] = features[0];
             this.onFeatureHover.emit({ "feature": feature,"itemCode":itemLayer.item.code });
           } else {
             this.onFeatureSelected.emit({ "feature": feature,"itemCode":itemLayer.item.code });
           }
          })
          if(this.selectionLayer) this.selectionLayer.changed(); 
        }      
       }
    }    
  }
  getItemlayer(itemLayer:IItemLayer):IItemLayer {     
     if((itemLayer as ITemporalItemLayer).selectedItemLayer) return (itemLayer as ITemporalItemLayer).selectedItemLayer;
     return itemLayer;
  }
  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance) {
+    if (this.instance && this.initialized) {
      if (changes['itemLayers']) {
-        var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
+        const itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
        this.updateLayers(itemLayers);
      }
      if (changes['itemLayer']) {      
-        var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
+        const itemLayer = changes['itemLayer'].currentValue as IItemLayer;
        this.itemLayer = itemLayer
        if(itemLayer) {
          if(this.getItemlayer(this.itemLayer).item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
            this.installMapEventHandler();
          }
          this.updateLayers([itemLayer]);
        } else {
          this.unInstallMapEventHandler();
          this.updateLayers([]);          
        }
      }
    }
  }
  ngOnDestroy() {
    this.unInstallMapEventHandler();
    super.ngOnDestroy();
  }
 }
@@ -1,80 +1,60 @@
-import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core';
-import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from '@farmmaps/ng-openlayers';
-import { ItemService,ItemTypeService,IItem, IItemType } from '@farmmaps/common';
+import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
 import { Feature } from 'ol';
-import { Point } from 'ol/geom';
+import { Point, Geometry } from 'ol/geom';
 import { MapBrowserEvent } from 'ol';
 import { Types } from 'ol/MapBrowserEventType';
 import * as style from 'ol/style';
 import * as color from 'ol/color';
 import * as loadingstrategy from 'ol/loadingstrategy';
 import * as condition from 'ol/events/condition';
 import * as extent from 'ol/extent';
-import {Vector,Cluster} from 'ol/source';
+import { Vector, Cluster, Source } from 'ol/source';
-import {Layer} from 'ol/layer';
+import { Layer } from 'ol/layer';
-import {GeoJSON} from 'ol/format';
+import { GeoJSON } from 'ol/format';
-import {Select} from 'ol/interaction';
+import { Select } from 'ol/interaction';
 import { IStyles } from '../../../models/style.cache';
 import { FeatureIconService } from '../../../services/feature-icon.service';
 import { Subscription } from 'rxjs';
 import { getCenter } from 'ol/extent';
 import { formatNumber } from '@angular/common';
@Component({
    selector: 'fm-map-item-source-vector',
    template: `<ng-content></ng-content>`,
    providers: [
-    { provide: SourceVectorComponent , useExisting: forwardRef(() => ItemVectorSourceComponent) }
+        { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemVectorSourceComponent) }
-  ]
+    ],
    standalone: false
 })
-export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
+export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnDestroy, OnChanges {
-  instance: Vector;
+  instance: Vector<Feature<Geometry>>;
  private _format: GeoJSON;
  private _select: Select;
  private _hoverSelect: Select;
-  private _iconScale: number = 0.05;
+  private _iconScale = 0.05;
-  @Input() features: Array<Feature>;
+  @Input() features: Array<Feature<Geometry>>;
-  @Input() selectedFeature: Feature;
+  @Input() selectedFeature: Feature<Geometry>;
  @Input() selectedItem: IItem;
-  @Output() onFeaturesSelected: EventEmitter<Feature> = new EventEmitter<Feature>();
+  @Input() styles: IStyles;
-  private styleCache = {
+  @Output() onFeatureSelected: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
-    'file': new style.Style({
+  @Output() onFeatureHover: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
-      image: new style.Icon({
+  private stylesCache: IStyles = {};
-          anchor: [0.5, 1],
+  private sub: Subscription;
-          scale: 0.05,
+  private displayMapFeatureSettings: { [code: string]: string[] } = defaultDisplayMapFeatureSettings();
        src: this.getIconImageDataUrl("fa fa-file-o")
      }),         
      stroke: new style.Stroke({
        color: 'red',
        width: 1
      }),
      fill: new style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      }),
      geometry: (feature) => this.geometry(feature)
    }),
    'selected': new style.Style({
      image: new style.Icon({
        anchor: [0.5, 1],
        scale: 0.08,
        src: this.getIconImageDataUrl(null)
      }),
      stroke: new style.Stroke({
        color: 'red',
        width: 3
      }),
      fill: new style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      }),
      geometry: (feature) => this.geometry(feature)
    })
    };
-  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, @Host() private map: MapComponent, private itemTypeService: ItemTypeService) {
+  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService, private folderService: FolderService, @Inject(LOCALE_ID) private locale: string) {
    super(layer);
    this._format = new GeoJSON();
  }
-  geometry(feature: Feature) {
+  geometry(feature: Feature<Geometry>) {
-    let view = this.map.instance.getView();
+    const view = this.map.instance.getView();
-    let resolution = view.getResolution();
+    const resolution = view.getResolution();
-    var geometry = feature.getGeometry();
+    let geometry = feature.getGeometry();
-    let e = geometry.getExtent();
+    const e = geometry.getExtent();
    //var size = Math.max((e[2] - e[0]) / resolution, (e[3] - e[1]) / resolution);
    if (resolution > 12) {
      geometry = new Point(extent.getCenter(e));
@@ -82,83 +62,88 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
    return geometry;
  }
-  getIconImageDataUrl(iconClass:string, backgroundColor: string = "#c80a6e",color:string = "#ffffff"): string {
+  getSelectedStyle(feature: Feature<Geometry>): style.Style {
-    var canvas = document.createElement('canvas');
+    const key = feature.get('itemType') + "_selected";
-    canvas.width = 365;
+    let evaluatedStyle: style.Style = undefined;
-    canvas.height = 560;
+    const styleEntry = this.stylesCache[key];
-    var ctx = canvas.getContext('2d');
+    if (styleEntry) {
-    ctx.lineWidth = 6;
+      if (typeof styleEntry === 'function') {
-    ctx.fillStyle = backgroundColor;
+        evaluatedStyle = styleEntry(feature);
-    ctx.strokeStyle = "#000000";
+      } else {
-    var path = new Path2D("m182.9 551.7c0 0.1 0.2 0.3 0.2 0.3s175.2-269 175.2-357.4c0-130.1-88.8-186.7-175.4-186.9-86.6 0.2-175.4 56.8-175.4 186.9 0 88.4 175.3 357.4 175.3 357.4z");
+        evaluatedStyle = styleEntry;
    ctx.fill(path)
    var iconCharacter = "";
    if (iconClass != null) {
      var element = document.createElement("i");
      element.style.display = "none";
      element.className = iconClass;
      document.body.appendChild(element);
      iconCharacter = getComputedStyle(element, "::before").content.replace(/"/g, '');
      let iconFont = "200px " +getComputedStyle(element, "::before").fontFamily
      document.body.removeChild(element);
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = 15;
      ctx.font = iconFont;
      var ts = ctx.measureText(iconCharacter);
      ctx.fillText(iconCharacter, 182.9 - (ts.width / 2), 250);
      ctx.strokeText(iconCharacter, 182.9 - (ts.width / 2), 250);
      }
-
+    } else {
-    return canvas.toDataURL();
+      evaluatedStyle = this.stylesCache["selected"] as style.Style;
    }
    if (evaluatedStyle) {
      evaluatedStyle.setGeometry((feature: Feature<Geometry>) => this.geometry(feature));
    }
    return evaluatedStyle as style.Style
  }
  ngOnInit() {
    this.sub = this.folderService.getFolder('my_settings').subscribe(
      userSettingsRoot => {
        if (userSettingsRoot == undefined) return;
        this.itemService.getChildItemList(userSettingsRoot.code, 'vnd.farmmaps.itemtype.settings.general').subscribe(
          items => {
            if (items && items.length > 0 && items[0].data?.displayMapFeatureSettings) {
              this.displayMapFeatureSettings = items[0].data?.displayMapFeatureSettings;
            }
          }
        )
      }
    );
    this.strategy = loadingstrategy.bbox;
    this.format = new GeoJSON();
    this._select = new Select({
-      style: (feature) => {        
+      style: null,
        return this.styleCache['selected'];
      },
      hitTolerance: 10,
-      layers: [this.layer.instance as Layer]
+      layers: [this.layer.instance as Layer<Source>]
    });
    this._hoverSelect = new Select({
-      style: (feature) => {
+      style: (feature: Feature<Geometry>) => {
-        return this.styleCache['selected'];
+        return this.getSelectedStyle(feature);
      },
      hitTolerance: 10,
-      condition: (e: MapBrowserEvent) => {
+      condition: (e: MapBrowserEvent<UIEvent>) => {
        return e.type == 'pointermove';
      },
-      layers: [this.layer.instance as Layer]
+      layers: [this.layer.instance as Layer<Source>]
    });
    this.map.instance.addInteraction(this._select);
    this.map.instance.addInteraction(this._hoverSelect);
    this._select.on('select', (e) => {
      if (e.selected.length > 0 && e.selected[0]) {
-        this.onFeaturesSelected.emit(e.selected[0]);
+        this.onFeatureSelected.emit(e.selected[0]);
      } else {
-        this.onFeaturesSelected.emit(null);
+        this.onFeatureSelected.emit(null);
      }
    });
    this._hoverSelect.on('select', (e) => {
      if (e.selected.length > 0 && e.selected[0]) {
        this.onFeatureHover.emit(e.selected[0]);
      } else {
        this.onFeatureHover.emit(null);
      }
    });
    this.instance = new Vector(this);
    this.host.instance.setSource(this.instance);
    this.host.instance.setStyle((feature) => {
-      var key = feature.get('itemType') + (this.selectedItem?"_I":"");
+      const itemType = feature.get('itemType');
-      if (!this.styleCache[key]) {
+      let key = itemType + (this.selectedItem ? "_I" : "");
-        if (this.itemTypeService.itemTypes[key]) {
+      if (!this.stylesCache[key]) {
-          let itemType = this.itemTypeService.itemTypes[key];
+        if (this.itemTypeService.itemTypes[itemType]) {
-          let fillColor = color.asArray(itemType.iconColor);
+          const itemTypeEntry = this.itemTypeService.itemTypes[itemType];
-          fillColor[3] = this.selectedItem?0:0.5;
+          const fillColor = color.asArray(itemTypeEntry.iconColor);
-          this.styleCache[key] = new style.Style({
+          fillColor[3] = 0;
-              image: itemType.icon ? new style.Icon({
+          this.stylesCache[key] = new style.Style({
            image: itemTypeEntry.icon ? new style.Icon({
              anchor: [0.5, 1],
              scale: 0.05,
-                  src: this.getIconImageDataUrl(itemType.icon)
+              src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon)
-                }):null,
+            }) : null,
            stroke: new style.Stroke({
              color: 'red',
              width: 1
@@ -166,17 +151,31 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
            fill: new style.Fill({
              color: fillColor
            }),
-              geometry: (feature) => this.geometry(feature)
+            geometry: (feature: Feature<Geometry>) => this.geometry(feature),
            text: this.getDisplayTextForFeature(feature, this.map.instance.getView().getZoom())
          });
        } else {
          key = 'file';
        }
      }
-      var styleEntry = this.styleCache[key];
+      let evaluatedStyle = null;
-      return styleEntry;
+      const styleEntry = this.stylesCache[key];
      if (typeof styleEntry === 'function') {
        evaluatedStyle = styleEntry(feature);
      } else {
        evaluatedStyle = styleEntry;
      }
      if (evaluatedStyle && evaluatedStyle.geometry_ == null && !Array.isArray(evaluatedStyle)) {
        evaluatedStyle.setGeometry((feature) => this.geometry(feature));
      }
      return evaluatedStyle;
    });
  }
  ngOnDestroy(): void {
    if (this.sub) this.sub.unsubscribe();
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes["features"] && this.instance) {
      this.instance.clear(true);
@@ -185,8 +184,8 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
    }
    if (changes["selectedFeature"] && this.instance) {
-      var features = this._select.getFeatures();
+      const features = this._hoverSelect.getFeatures();
-      var feature = changes["selectedFeature"].currentValue
+      const feature = changes["selectedFeature"].currentValue
      //this.instance.clear(false);
      //this.instance.addFeatures(features.getArray());
      features.clear();
@@ -196,12 +195,67 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
      }
    }
    if (changes["selectedItem"] && this.instance) {
-      var item = changes["selectedItem"].currentValue
+      const item = changes["selectedItem"].currentValue
      if (item) {
        this.map.instance.removeInteraction(this._hoverSelect);
      } else {
        this.map.instance.addInteraction(this._hoverSelect);
      }
    }
    if (changes["styles"]) {
      const styles = changes["styles"].currentValue;
      for (const key in styles) {
        if (styles.hasOwnProperty(key)) {
          this.stylesCache[key] = styles[key];
        }
      }
    }
  }
  getDisplayTextForFeature(feature: Feature<Geometry>, zoom: number, overrule?: style.Text) {
    if (!feature) return null;
    const propertiesToShow: string[] = this.displayMapFeatureSettings[feature.get('itemType')];
    if (!propertiesToShow) return null;
    if (propertiesToShow.length <= 0) return null;
    if (zoom < 14) return null;
    let displayText = '';
    for (let i = 0; i < propertiesToShow.length; i++) {
      let value = feature.get(propertiesToShow[i]);
      switch (propertiesToShow[i]) {
        case "area": value = formatNumber(value, this.locale, '0.1-2') + ' ha'; break;
        case "centroid": {
          if (feature.getGeometry()) {
            const centroid = getCenter(feature.getGeometry().getExtent());
            value = Math.round(centroid[0]) + ',' + Math.round(centroid[1]);
          }
        }
          if (value) {
            displayText += value + (i < propertiesToShow.length ? '\n' : '');
          }
      }
      const styleText = new style.Text({
        font: '13px Calibri,sans-serif',
        fill: new style.Fill({ color: '#ffffff' }),
        stroke: new style.Stroke({ color: '#000000', width: 2 }),
        text: displayText
      });
      if (overrule) {
        if (overrule.getFont()) styleText.setFont(overrule.getFont());
        if (overrule.getFill()) styleText.setFill(overrule.getFill());
        if (overrule.getStroke()) styleText.setStroke(overrule.getStroke());
      }
      return styleText;
    }
  }
 }
 function defaultDisplayMapFeatureSettings() {
  return {
    'vnd.farmmaps.itemtype.cropfield': ['name', 'cropTypeName', 'area']
  };
 }
@@ -1,29 +1,50 @@
-<div class="layerlist" *ngIf="itemLayers.length > 0;else noLayers">
+<div>
  @if (itemLayers.length > 0) {
    <div class="layerlist">
      <div class="list-group">
-    <div *ngFor="let itemLayer of itemLayers" class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
+        @for (itemLayer of itemLayers; track itemLayer) {
          <div class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
            <div (click)="handleSelectLayer($event,itemLayer)"  [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
-        <div class="mt-1" *ngIf="selectedLayer==itemLayer && !baseLayers">
+            @if (selectedLayer==itemLayer && !baseLayers) {
              <div class="mt-1">
                <span class="btn-group">
                  <a title="Toggle visibility"href="#" class="btn btn-light btn-sm" (click)="handleToggleVisibility($event,itemLayer)"><i class="fa" aria-hidden="true" [ngClass]="{'fa-eye':!itemLayer.visible,'fa-eye-slash':itemLayer.visible}"></i></a>
-            <a title="Transparency 25%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.25)">25%</a>
+                  @if (itemLayer.visible) {
-            <a title="Transparency 50%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.5)">50%</a>
+                    <a title="Transparency 25%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.25)">25%</a>
-            <a title="Transparency 75%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
+                  }
-            <a title="No transparency" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
+                  @if (itemLayer.visible) {
                    <a title="Transparency 50%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.5)">50%</a>
                  }
                  @if (itemLayer.visible) {
                    <a title="Transparency 75%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
                  }
                  @if (itemLayer.visible) {
                    <a title="No transparency" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
                  }
                </span>
-          <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
+                <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
-          <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="fa fa-bar-chart" aria-hidden="true"></i></a></span>
+                @if (firstLayer(itemLayer)) {
-          <span class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fa fa-minus" aria-hidden="true"></i></a></span>
+                  <span><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
                }
                @if (!dataLayers) {
                  <span class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
                }
              </div>
-        <div *ngIf="itemLayer.legendVisible">
+            }
            @if (itemLayer.legendVisible) {
              <div>
                <div class="card legend">
-            <fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);"></fm-map-layer-legend>
+                  <fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);" [histogramenabled]="true"></fm-map-layer-legend>
                </div>
              </div>
            }
          </div>
        }
      </div>
    </div>
-</div>
+  } @else {
 <ng-template #noLayers>
    <div class="list-group">
      <div class="list-group-item" i18n>No layers</div>
    </div>
-</ng-template>
+  }
 </div>
@@ -1,15 +1,17 @@
 import { Component,Input,Output,EventEmitter } from '@angular/core';
-import { IItemLayer } from '../../../models';
+import { IItemLayer } from '../../../models/item.layer';
@Component({
    selector: 'fm-map-layer-list',
    templateUrl: './layer-list.component.html',
-  styleUrls: ['./layer-list.component.scss']
+    styleUrls: ['./layer-list.component.scss'],
    standalone: false
 })
 export class LayerListComponent  {
-  @Input() itemLayers: IItemLayer[];
+  @Input() itemLayers: IItemLayer[] = [];
-  @Input() baseLayers: boolean = false;
+  @Input() baseLayers = false;
  @Input() dataLayers = false;
  @Output() onToggleVisibility = new EventEmitter<IItemLayer>();
  @Output() onSetOpacity = new EventEmitter<{layer: IItemLayer,opacity:number }>();
  @Output() onDelete = new EventEmitter<IItemLayer>();
@@ -0,0 +1,27 @@
 <div #layerValues class="layer-values">
  @if (enabled$ | async) {
    <div class="cross" >
      <div class="pointer"></div>
      @if ((layerValues$ | async ); as layers) {
        <div class="values-container border border-dark rounded p-2">
          <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
          @if (layers.length>0 ) {
            <ul class="value-list p-0 mb-0">
              @for (layerValue of layers; track layerValue) {
                <li class="border-top pt-1 pb-1 value">
                  <div>{{layerValue.layerName}}</div>
                  <div>{{layerValue.date|date}}</div>
                  <div>@if (layerValue.quantity) {
                    <span><span class="me-1">{{layerValue.quantity}}</span> </span>
                    }<span class="me-1 font-weight-bold">{{getScaledValue(layerValue)}}</span><span>{{layerValue.unit}}</span></div>
                  </li>
                }
              </ul>
            } @else {
              <div i18n class="border-top pt-1 pb-1">No data at location</div>
            }
          </div>
        }
      </div>
    }
  </div>
@@ -0,0 +1,37 @@
 .layer-values {
    position: absolute;
    left: 50%;
    top: 30%;
 }
 .cross {
    display: block;
    position: relative;
    width: 1em;
    height: 1em;    
    left: -0.5em;
    top: -0.5em;
 }
 .values-container {
    position: relative;
    background-color: white;
    left: calc( 1em - 1px);
    top: -1.3em;
    min-width: 15em;
 }
 .value-list {
    list-style: none;
 }
 .pointer {
    position: relative;
    width: 0px;
    height: 0px;
    left: 0.5em;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-right: 0.5em solid  black;
 }
@@ -0,0 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LayerValuesComponent } from './layer-values.component';
 describe('LayerValuesComponent', () => {
  let component: LayerValuesComponent;
  let fixture: ComponentFixture<LayerValuesComponent>;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ LayerValuesComponent ]
    })
    .compileComponents();
  });
  beforeEach(() => {
    fixture = TestBed.createComponent(LayerValuesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 });
@@ -0,0 +1,71 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { IItemLayer } from '../../../models/item.layer';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../../reducers/map.reducer';
 import * as mapActions from '../../../actions/map.actions';
 import { MapComponent } from '@farmmaps/ng-openlayers';
 import { ILayervalue } from '../../../models/layer.value';
 import { Observable, interval, Subject } from 'rxjs';
 import { debounce, throttle } from 'rxjs/operators';
 import { toLonLat } from 'ol/proj';
 import { toStringHDMS } from 'ol/coordinate';
 import { ClipboardService } from 'ngx-clipboard'
 import { GeoJSON, WKT } from 'ol/format';
 import { Point } from 'ol/geom';
@Component({
    selector: 'fm-map-layer-values',
    templateUrl: './layer-values.component.html',
    styleUrls: ['./layer-values.component.scss'],
    standalone: false
 })
 export class LayerValuesComponent implements OnInit, AfterViewInit {
  @ViewChild('layerValues') containerRef: ElementRef;
  offsetX$ = 0;
  offsetY$ = 0;
  lonlat$ = "";
  wkt$ = "";
  layerValues$: Observable<Array<ILayervalue>> = this.store.select(mapReducers.selectGetLayerValues);
  enabled$: Observable<boolean> = this.store.select(mapReducers.selectGetLayerValuesEnabled);
  wktFormat$: WKT;
  constructor(private store: Store<mapReducers.State>, private map: MapComponent, private clipboardService$: ClipboardService) {
    this.wktFormat$ = new WKT();
  }
  ngOnInit(): void {
  }
  moveEndSubject = new Subject<any>();
  ngAfterViewInit(): void {
    this.offsetY$ = this.containerRef.nativeElement.offsetTop;
    this.offsetX$ = this.containerRef.nativeElement.offsetLeft;
    this.map.instance.on('moveend', () => {
      this.moveEndSubject.next({});
    });
    this.moveEndSubject.pipe(throttle(ev => interval(100))).subscribe(() => this.updateValuesLocation());
  }
  updateValuesLocation() {
    const xy = this.map.instance.getCoordinateFromPixel([this.offsetX$, this.offsetY$])
    const lonlat = toLonLat(xy);
    this.wkt$ = this.wktFormat$.writeGeometry(new Point(lonlat))
    this.lonlat$ = toStringHDMS(lonlat);
    this.store.dispatch(new mapActions.SetLayerValuesLocation(xy[0], xy[1]));
  }
  copyToClipboard() {
    this.clipboardService$.copy(this.wkt$);
  }
  public getScaledValue(layerValue: ILayervalue): number {
    let v = layerValue.value;
    if (layerValue.scale && layerValue.scale != 0) {
      v = layerValue.scale * layerValue.value;
    }
    return v;
  }
 }
@@ -1,21 +1,22 @@
-import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnDestroy, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Vector } from 'ol/layer';
+import { LayerVectorComponent, MapComponent } from '@farmmaps/ng-openlayers';
-import { Style } from 'ol/style';
+import  RenderType  from 'ol/layer/Vector';
-import { StyleFunction } from 'ol/style/Style';
+import { Vector as VectorSource } from 'ol/source';
-import { LayerVectorComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { Geometry } from 'ol/geom';
-import { RenderType  } from 'ol/layer/Vector';
+import Feature from 'ol/Feature';
@Component({
    selector: 'fm-map-aol-layer-vector-image',
    template: `
    <ng-content></ng-content>
  `,
    standalone: false
 })
 export class LayerVectorImageComponent extends LayerVectorComponent implements OnInit, OnDestroy, OnChanges {
-  public source: Vector;
+  //public source: Vector;
  @Input()
-  renderMode: RenderType | string = "image";  
+  renderMode: RenderType<VectorSource<Feature<Geometry>>> | string = "image";  
  constructor(map: MapComponent) {
    super(map);
@@ -0,0 +1,13 @@
 <div (click)="handleClick($event)" class="btn btn-outline-primary gps-location">
  <svg height="100%" width="100%" viewBox="0 0 96 96">
    <g
    id="XMLID_1_"><circle      
      class="pan-to"  [ngClass]="{'pan-to-centered':centered(),'pan-to-disabled':disabled()}"
      cx="48"
      cy="48"
      r="9.8000002"/><path     
      class="pan-to" [ngClass]="{'pan-to-centered':centered(),'pan-to-disabled':disabled()}"
      d="M 80.5,44.8 H 73.8 C 72.3,33 63,23.7 51.3,22.2 v -6.7 h -6.5 v 6.7 C 33,23.7 23.7,33 22.2,44.8 h -6.7 v 6.5 h 6.7 C 23.7,63 33,72.3 44.8,73.8 v 6.7 h 6.5 V 73.8 C 63,72.3 72.3,63 73.8,51.3 h 6.7 z M 48,67.5 C 37.2,67.5 28.5,58.8 28.5,48 28.5,37.2 37.2,28.5 48,28.5 c 10.8,0 19.5,8.7 19.5,19.5 0,10.8 -8.7,19.5 -19.5,19.5 z"
      inkscape:connector-curvature="0"/></g>
  </svg>
 </div>
@@ -0,0 +1,34 @@
 .gps-location {
  display:block; 
  width:2.5em;
  height:2.5em;
  background-color: var(--bs-body-bg);
  background-size: contain;
  margin-top:0.5em;
  border-radius: 1.75em;
  padding:0
 }
 .center, .tolerance, .border {
  stroke-width: 0;
 }
 .pan-to {
  fill: var(--bs-secondary);
 }
 div.gps-location:hover .pan-to {
  fill: var(--bs-white);
 }
 .pan-to-centered {
  fill: var(--bs-primary);
 }
 div.gps-location:hover .pan-to-centered {
  fill: theme-color-level(primary, -10) 
 }
 .pan-to.pan-to-disabled {
  fill: var(--bs-gray-300);
 }
@@ -0,0 +1,85 @@
 import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
 import { MapComponent } from '@farmmaps/ng-openlayers';
 import {IMapState} from '../../../models/map.state'
 import {View} from 'ol';
 import { fromLonLat } from 'ol/proj';
@Component({
    selector: 'fm-map-pan-to-location',
    templateUrl: './pan-to-location.component.html',
    styleUrls: ['./pan-to-location.component.scss'],
    standalone: false
 })
 export class PanToLocation  implements OnInit,OnChanges{
  view: View;
  map: MapComponent;
  @Input() position: GeolocationPosition;
  @Input() mapState: IMapState;
  @Input() animate: boolean;
  constructor(@Host() map: MapComponent,private changeDetectorRef$: ChangeDetectorRef ) {
    this.map = map;
  }
  ngOnInit() {  
    this.view = this.map.instance.getView();
    this.view.on('change:center', () => {
      this.changeDetectorRef$.detectChanges();
    });
  }
  ngOnChanges(changes: SimpleChanges) {
    // if (changes.position && this.instance) {
    //   var p = changes.position.currentValue as Position;
    //   this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
    //   this.locationTolerance = p.coords.accuracy;
    //   this.recalcLocationTolerance();
    //   this.heading = p.coords.heading;
    // }
  }
  p
  public centered():boolean {
    if(this.position && this.mapState) {
      const center = this.view.getCenter();
      const newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
      const x1 = newCenter[0].toFixed(0);
      const x2 = center[0].toFixed(0);
      const y1 = newCenter[1].toFixed(0);
      const y2 = center[1].toFixed(0);
      return x1==x2 && y1==y2;  
    }
    return false;
  }
  public disabled():boolean {
    return !this.position;
  }
  handleClick(event:Event) {
    if(this.position) {
      const view = this.map.instance.getView();
      const newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
      const extent = [newCenter[0]-500,newCenter[1]-500,newCenter[0]+500,newCenter[1]+500];
      const options = { padding: [0, 0, 0, 0],minResolution:1 };
      const size = this.map.instance.getSize();
      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
      const threshold = 44 * rem;
      let left = 1 * rem;
      const right = 1 * rem;
      let bottom = Math.round(size[1] / 2);
      const top = 1 * rem;
      if (size[0] > threshold) {
        bottom = 1 * rem;
        left = 23 * rem;
      }
      //options.padding = [top, right, bottom, left];
      if (this.animate) options["duration"] = 2000;
      view.fit(extent, options);  
    }
    event.preventDefault();
  }
 }
@@ -0,0 +1,35 @@
 <div (click)="handleClick($event)" class="btn btn-outline-primary compass" [style.transform]="Rotation()" [ngClass]="{'compass-n':IsNorth()}">
  <svg height="100%" width="100%" viewBox="0 0 132.29166 132.29167">
    <g
     inkscape:label="Laag 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-164.70832)">
    <g
       id="g4550"
       transform="translate(2.3213753,-1.8555167)">
      <path
         id="top-r"
         d="m 63.824458,179.82737 v 52.8823 H 48.380953 Z"
         style="stroke:none;stroke-width:0.15389842px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="top-l"
         d="m 63.824458,179.82737 v 52.8823 h 15.443505 z"
         style="stroke:none;stroke-width:0.15389842px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="bottom-l"
         d="m 63.824458,285.59197 v -52.8823 h -15.4435 z"
         style="stroke:none;stroke-width:0.15389842px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         id="bottom-r"
         d="m 63.824458,285.59197 v -52.8823 h 15.443505 z"
         style="stroke:none;stroke-width:0.15389842px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
         <path
         id="north"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:2.95481014"
         d="m 50.702335,239.32724 h 9.926315 l 12.534859,23.63848 v -23.63848 h 8.425825 v 34.46509 H 71.663019 L 59.12816,250.15385 v 23.63848 h -8.425825 z" />         
    </g>
  </g>
  </svg>
 </div>
@@ -0,0 +1,66 @@
 .compass {
  width:2.5em;
  height:2.5em;
  background-color: white; 
  opacity: 1;
  border-radius:1.75em;
  padding:0;
  margin-top:0.5em;
  display: block;
 }
 #north {
  display: none;
  fill:var(--bs-black);
 }
 #top-l {
  fill:#d40000;
 }
 #top-r {
  fill:#ff0000;
 }
 #bottom-l {
  fill:#000000;
 }
 #bottom-r {
  fill:#666666;
 }
 div.compass:hover #top-l {
  fill:var(--bs-white);
 }
 div.compass:hover #top-r {
  fill:var(--bs-gray-300);
 }
 div.compass:hover #bottom-l {
  fill:var(--bs-gray-300);
 }
 div.compass:hover #bottom-r {
  fill:var(--bs-white);
 }
 div.compass:hover #north {
  fill:var(--bs-white);
 }
 .compass-n {    
  transition: opacity 1s ease-out 2s,height 1s ease-out 3s,margin-top 1s ease-out 3s;
  opacity:0;
  height:0;
  margin-top:0;
 }
 .compass-n #bottom-l, .compass-n #bottom-r {
  display: none;
 }
 .compass-n #north {
  display: inline;
 }
@@ -1,5 +1,5 @@
 import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from '@farmmaps/ng-openlayers';
 import {View} from 'ol';
@@ -7,28 +7,15 @@ import {View} from 'ol';
@Component({
    selector: 'fm-map-rotation-reset',
-  template: `<div (click)="handleClick($event)" class="rounded-circle compass" [style.transform]="Rotation()" [ngClass]="{'compass-n':IsNorth()}"></div>`,
+    templateUrl: './rotation-reset.component.html',
-  styles: [`.compass {
+    styleUrls: ['./rotation-reset.component.scss'],
-      width:2.5em;
+    standalone: false
      height:2.5em;
      background-color: white;
      background-size: contain;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAF6AAABegB0iYb4wAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAmlSURBVHic7d39c1xVHcfxz92kCVh0BojVRpABRGBAKj6P4+io1LYp/hv9O/I/dNqmmU2mP9sf7SMFsSBaRMU+ZUAFB8HC1FKqJLR52D3+cJNm0ySb3XvPOd9zN+/XTGfa3eTe76T7yT3n3Hu/VwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMlz0iMXpEes68CymnUBWGGkJu2xLgLLCEha9i7+AdDKSXc76bNL0s0/SZ+zrgc5jiDpeE7S3ZLuGpR+Zl0McgQkHSNLf6m1/B22CEg6bk/OnfS8ZSFYRkAS4KRvSHqo5aUHp6SnrerBMgKShlUrV01Ws5JAQNKwas7hmIckIbMuYLNz0r2Srkrql6TLi69nUkPStqek61a1gSNICnZpMRytnNTXlHYa1IMWBMTeunONGvMQcwTEkMt//r9o8/4ex/+RKX74tr4naVub94empO/GKgarERBbGw6hHMMsUwTEFgFJHAEx4qTtkr650ddl0rNvScMRSsIaCIidEXV2Hiqbl3aHLgZrIyB2Oh46ZQyzzHAm3YCTBiRdk/T5O9+7vPrLJWl6UBp6TJoNWxnuxBHExo+1RjjauGdO+lGoYrA+AmKj6wsRuXjRBgGx0fWcgnmIDQISmcv7Xn29wPc9fln6WoCS0AYBie+XRb+xyTArOgISX+EPeUZAomOZNyInbVW+vHvXel+zzjLvktlMGnpKmvZbGdbDESSu59QmHB0YFD2zoiIgcZVeieLixbgISFy7PGxjxDE0joaAROKkHZK+6mFTD1zK+2ghAgISj7ehEfeqx0NA4vH2oWYeEg9j2QicdJ/y3ld9G33tBsu8kvKeWTXpS09KH5cuDm1xBIljtzoIR6ec1Ndo0w0F/hCQOLwPiRhmxUFAAnP5kcPH8u4KmbTnVx6PSlgbAQnvB5LuD7Dd+56Uvh9gu2hBQMILdoEhT6IKj4CEF2yuwDwkPAISkMv7WT0TcBc7zksPBNz+pkdAwnpeYc81ZX0tzzaEfwQkrOBzBJo5hMWZ9EBcfu/Gf9Rde5+OzqTfYWZQup+eWWFwBAnnJ+oyHAVtvZX32UIABCScaEMf7lUPh4CEE/NDW7hTCtojIAG4vO/VYxF3+ehU3P1tGgQkjOgn8JqcNAyCgIQRfU7APCQMlnk9c9I9yntfDRb5/gLLvEvm+qWhJ6RPi28Cd+II4t9OFQxHSQNN6ecG++1pBMQ/s7kA8xD/CIhHi/2qLJ8nuJeeWX4REL+elfQVw/1vn+rgybnoHAHxy3wliUck+EVA/DKfA9BUzi/Gq544aUjSRyrZSKHEMu+SZkPaviPvw4WSOIL4s0dpdBmp1eiZ5Q0B8SeZsT9n1f0hIB4s9r7aaV1Hi90vS/3WRfQCAuLHDxWm91VR927L+3GhJALiR3JDGpZ7/SAgfiS3tJolWFMVEZCSnPSgpKet61jDM1PSQ9ZFVB0BKW+vEj2f5GyvC+sJBKS8ZMf69MwqL8nffFWx2PvqmvKbpLzwcCa91cxWaehh6ZbfzW4eHEHK+ak8hiOArTN5fy4UREDKSX6liA7w5RCQcpJvHF3LG2ijIAJSkJOekPSodR0bcdLD56XHreuoKgJSXGWGLv0VqjU1BKS4ynzomIcUxzJvAU76gvJHGwz43rbnZd4l87ekL35H+m+YzfcujiDF7FSAcAS0ZZCeWYUQkGIqN2ThXvViCEiXFvtO7bKuo1tOGqFnVvcISPe+rfzptVXz5YvSt6yLqBpuy+xS6F/B+/btC7btZrMp1evBtt+LOIJ078+SrlgXUcBH9Xr9L9ZFVA0B6Z6TdNq6iAJOKK8dXSAgxRy3LqBbWZZVruYUEJBizkiasy6iC/POuZesi6giAlLM/yS9Zl1Ep7Ise3V8fJyz6AUQkOKqNGSpUq1JISDFVeZDV6vVKlNraghIcW9Jese6iA7889ChQ29bF1FVBKSck9YFbMQ5d8y6hiojIOVUYehShRqTRUDKeVnStHURbczMz8+ftS6iyghIObPKQ5Kql44cOUJPrBIISHknrAtoI+XaKoGAlHdciV7j1Gg0TlnXUHUEpLz3JV2yLmINFyYmJt6zLqLqCIgfya0UcXGiHwTEj+TG+s655GqqIgLix+8lfWxdRItPhoeHz1kX0QsIiB8N5ZfAJ8E5d2p0dHTBuo5eQED8SWZIU6vVkqml6giIPyeVH0msNbMse8G6iF5BQPy5JukN6yIkvT42NnbVuoheQUD8SmFpNYUaegYB8ct87M/8wy8C4tebkv5tuP8Px8bG/mq4/55DQPxykiyvf0r2urCqIiD+Wc4BmH94RkD8O6P8PpHY5hYWFuh95RkB8W9a0quxd+qcOzs5Oflp7P32OgISRvSVpCzLWL0KgICEEX0uwOXtYRCQMP4m6e8R9/fO4cOHY+5v0yAg4cQc8vw64r42FQISTrSAMP8Ih4CEc1ZSjFWlmYGBgVci7GdTIiDhzEr6TYT9nNm/f7/FeZdNgYCEFXzow73nYRGQsI4p7LVRzjmXfAPtKiMgYV2RdCHg9s/X6/UPAm5/0yMg4YU8gcfJwcAISHjB5gjMP8IjIOGdU5ieWddv3LjxeoDtogUBCa8h6bTvjWZZdvLo0aMpdFHpaQQkjhBzBeYfERCQOE7Jb8+sRn9/P72vIiAgcVyX5G2+4Jw7d+DAgZR6AfcsAhKPzyERw6tICEg83j7UzjkCEgkBiee8pH952M4H9Xr9ooftoAMEJC4fy70nRO+raAhIXKWHRgyv4iIgcb0oqcxzy2e3bNkS4x4TLCIgcc1IKnz3X5Zlvz148OC0x3qwAQISX+ELDLk4MT4CEl/hDiSNRoOAREZA4ntXed+sbr09MTHxD9/FoD0CYqPrlShWr2wQEBtdD5V4cpQNAmLjFXXXM2t6YGDgd6GKwfoIiI055edEOvUCva9sEBA7Hc8pmH/YISB2Or2myjUaDcvnHm5qBMTOh5I6eSLtm5OTk1dCF4O1ERBbnQydGF4ZIiC2CEjiCIitP0q62ub9a8PDw2/EKgarERBbTUntupOcHB0dbcYqBqsREHvrDqF4MKc9AmLvtKSFNV5vLCwsnIldDFYiIPY+kfSHNV5/bWJi4nrsYrASAUnDqgsReTBnGghIGlbNNZh/pIGApOGipPda/v3+2NjYJatisIyApKP1WYPHzKrACgQkHbfnHDRnSEe/dQG47UVJNyVlWZbR+yoRBCQdNyWdleTGx8c/sy4GOQKSluOi725SCEhaTvT19VnXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOvB/FOHOpgoUlk8AAAAASUVORK5CYII=);
      opacity: 1;
    }
    .compass-n {    
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAF6AAABegB0iYb4wAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAe9SURBVHic7d07jB1XHcfx712vDXYinDhegw2YOOERYhzLxAhhAhhE4sSORUdDKioaKpoIEBHhIR4NSomgBEEdCQqKCImKAhHwxilAbpASiC3iOMkGr3cPxXizu/Zd37kz5zW734+0ze6Zmb/u3d89Z87MnAuSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSpE0qwCjAqHQdWjVTugCtc3QeHihdhFbNli5A65wJEIDnSxeihj1IXc6M4EzpIqTqBNgT4No8XDsPd5WuRw17kHo8BmwLsG0ZTpUuRg0DUo+3h1bBYZa0KjQ9x8UA4Vzzc+k5J1CqYA9Sh0+x/rxjzxx8slQxWmVA6nD6xl+MxvxO+RmQOtx0zuF5SB0MSGEB3gccGfOno/NwMHc9Ws+AlHeGje+/ejRnIbqZASlvw3ON4HlIcd45WlCAdwAXgdtXfje/vskbt8HeQ/BW3sq0wh6krJOsCccYt70On81Ui8YwIGVNHELNOMwqyoCUNfGfP8DZHIVoPANSSICPAB9s0fSe8/Dh1PVoPANSTusLgUteNCzGgJQzzT+9ASnEad4CQjNzdZFmmned+ZubA1ydhb33wZW0lelG9iBlPMKYcNzCjkX4YqpitDEDUsbUQ6YZh1lFGJDMrq97NfU9VgFOu2ZWfgYkv48DBzpst/88HItdjG7NgOTX+cr4slfVszMg+XU+l/Ahqvwc02YUYA54mVt8MG0wzbtieQn2H4X/xK1MG7EHyesx+r3mMzOumZWVAcmr9zmEiznkZUAyCbANeDjCrk65ZlY+BiSfTwN7Iuznzn3NOlrKwIDkE21o5LPq+RiQfKJN0foVCfkYkAwCvB/4WMT9HXkBPhBrf9qYAcnj8dg7XGqmjJWYAckj+jmD0715eCU9sQDvBC4Bu9q0n3Al/W0jWLgMd52Ahc7FaSJ7kPQ+T8twTCPAzt3wudj71XoGJL1kM07evJieAUkv2QLUTvemZ0ASCvBR4N6E+z/0N7gv1f5lQFJL/gm/zV4kKQOSVvJ/Xs9D0nKaN5EA76JZ+2r7NNu1neZdY3ER9h2DV6ffVJPYg6RziinD0dH2Ha6ZlYwBSSfblW4Xc0jHgCQQmtc12/cLjuBM8L1Mwhc1jQeB92Q83r5zzXpbisyApJF9ZsmlSdMwIGlkPyfwKcM0nOaNLMA+4CU6fvh0mOZdsRzgwBH4d/dd6Eb2IPGdpszrOjPKODGwVRiQ+IoNdRxmxecQK6LQrFf1CnBH1330GGIxgssLMHccFnvsRmvYg8T1ED3C0VeA3TvgRKnjb0YGJK7iU63e3RuXAYmr+DmA5yFxGZBIAhwE7i9dB3D4PNxduojNwoDEc7Z0ASuW7EWiMSDxVDP29yGqeJzmjSDATpqHo3ov79NnmnfFCBYWYO9xeDPC7rY0e5A4vkCCta+6CrBzF5wsXcdmYEDiqG5Is1xhTUNkQOKocSHp6Atmb0UGpKfQfK3B3aXrGOPgPBwuXcTQGZD+qp1S9Vn1/gxIf9WO9X3KsD+neXsIsJvm7t1oy/vEmOZd49oizLlmVnf2IP08Sp61r7qanYVHShcxZAakn+rH+H4TVT8GpKPr61CdKl3HJCM47ZpZ3fnCdfcJ4N2li5gkwNwLcLx0HUNlQLobzAyRNy92Z0C6G9LYfki1VsWAdBCaZUWHtNTngy/CgdJFDJEB6eY0w7qGNFoawIRCjQxIN4Mb03se0s2QPgWrEJoLg6/QXEWPLvKV9LVeG8HcYbia7hCbz2zpAgbofuAfqXae8hPr+rfuPp/wEJIkSZIkSZIkSZI0fN5q0s+dwB+m3OYtmpsdX+tx3GeB/S3bPgz8t8expM7mgNDh5+mex70wxbHmeh5L6qxrQK7Q73FdA5KJt7uXcTvwzdJFaDIDUs7XgHtKF6FbMyDl7ACeKl2Ebs2AlPUEcLR0EdqYASlrBvhu6SK0MQNS3peAE6WL0HgGpA4/Kl2AxjMgdfgMzUrxqowBqceP8f2ojm9IPR4Avly6CK1nQOryNHV/Ic+WY0DyuQRcntDmQ8BXM9SilgxIPleAn7Zo9xSwK3EtasmA5PUz4OUJbfYDX89Qi1owIHm9AXy/RbsngT2Ja1ELBiS/nwP/nNDmDuAbGWqRkprmgakLa7Z7okX7N4H3bnBcH5jKxB6kjF8Df53QZic+VKWB69qDAJxtsc1V4N4xx7UHycQepJxngT9OaLMdb4fXgPXpQQAearHdEnDshu3sQTKxBynrT8DvJrSZAb6XoRYpur49CMARml5i0vYn12xjD5KJPUh5fwd+06JdmwuMUlVi9CAAh4D/tdjH49fb24NkYg9ShwvAL1u0+yG+ZxqQWD0INDcpvt5iP1/BHiQbP43q8RLwTIt2PlSlwYjZg0Bzk+KlKfZpD5KYPUhdXgV+UroIrTIg9XkG+FfpItQwIPVZAH5Qugg1DEidfgG8WLoIGZBaXcO7eKtgQOr1W+AvpYvY6gxIvQLw7dJFbHUGpG6/B54rXcRWZkDq9yRNb6ICDEj9/kzzeK4KMCDD8C2ah6qUmQEZhnPAr0oXsRUZkOH4Ds1DVZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkbSX/B0lc8D0skvAeAAAAAElFTkSuQmCC);
      transition: opacity 1s ease-out;
      transition-delay: 2s;
      opacity:0;
    }
 `]
 })
 export class RotationResetComponent implements OnInit {
  view: View;
  public Rotation() {
-    let rotation =  this.view ? this.view.getRotation() : 0;
+    const rotation =  this.view ? this.view.getRotation() : 0;
    return `rotate(${rotation}rad)`;
  }
@@ -43,7 +30,7 @@ export class RotationResetComponent implements OnInit {
    });
  }
-  constructor( @Host() private map: MapComponent, private changeDetectorRef$: ChangeDetectorRef ) {
+  constructor( private map: MapComponent, private changeDetectorRef$: ChangeDetectorRef ) {
  }
  handleClick(event:Event) {
@@ -1,40 +0,0 @@
 // import { Component, OnInit,Input  } from '@angular/core';
 //import { MapComponent } from 'ngx-openlayers';
 //import OLCesium from 'olcs/OLCesium.js';
 // @Component({
 //   selector: 'fm-map-switch2d3d',
 //   template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
 //   styles: [`.twotreed {
 //     width:2.5em;
 //     height:2.5em;
 //     background-color: white;
 //     text-align:center;
 //     line-height:2.5em;
 //     font-weight:bold;
 //     cursor:default;}`]
 // })
 // export class Switch2D3DComponent {
 //   @Input() enable:boolean;
 //   public label: string = "3D";
 //   private ol3d: OLCesium;
 //   constructor(private map: MapComponent) {
 //   }
 //   ngOnInit() {
 //     this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
 //   }
 //   handleClick(event) {
 //     this.enable = !this.enable;
 //     if (this.enable)
 //       this.ol3d.setEnabled(this.enable);
 //       this.label = this.enable?"2D":"3D";
 //   }
 // }
@@ -1,38 +1,52 @@
 import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ActivatedRoute  } from '@angular/router';
 import { ViewComponent, MapComponent } from '@farmmaps/ng-openlayers';
@Component({
    selector: 'fm-map-zoom-to-extent',
-  template: `<ng-content></ng-content>`
+    template: `<ng-content></ng-content>`,
    standalone: false
 })
 export class ZoomToExtentComponent implements OnChanges {
  view: ViewComponent;
  map: MapComponent;
-  @Input() extent: number[];
+  paddingTop = 0;
-  @Input() animate: boolean = false;
+  paddingLeft = 0;
  paddingBottom = 0;
  paddingRight = 0;
-  constructor(@Host() view: ViewComponent, @Host() map: MapComponent) {
+  @Input() extent: number[];
  @Input() animate = false;
  constructor(@Host() view: ViewComponent, @Host() map: MapComponent,route: ActivatedRoute ) {
    this.view = view;
    this.map = map;
    if(route && route.snapshot && route.snapshot.data && route.snapshot.data["fm-map-zoom-to-extent"]) {
      const params = route.snapshot.data["fm-map-zoom-to-extent"];
      this.paddingTop = params["padding-top"] ? params["padding-top"] : 0;
      this.paddingBottom = params["padding-bottom"] ? params["padding-bottom"] : 0;
      this.paddingLeft = params["padding-left"] ? params["padding-left"] : 0;
      this.paddingRight = params["padding-right"] ? params["padding-right"] : 0;
    }
  }
  ngOnChanges(changes: SimpleChanges) {
    if (this.extent) {
-      var options = { padding: [0, 0, 0, 0],minResolution:1 };
+      const options = { padding: [0, 0, 0, 0],minResolution:1 };
-      let size = this.map.instance.getSize();
+      const size = this.map.instance.getSize();
-      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-      let threshold = 44 * rem;
+      const threshold = 40 * rem;
-      var left = 1 * rem;
+      let left = 1 * rem;
-      var right = 1 * rem;
+      const right = 1 * rem;
-      var bottom = Math.round(size[1] / 2);
+      let bottom = Math.round((size[1] / 2) + (4*rem));
-      var top = 1 * rem;
+      const top = 1 * rem;
      if (size[0] > threshold) {
-        bottom = 1 * rem;
+        bottom = 5 * rem;
        left = 23 * rem;
      }
-      options.padding = [top, right, bottom, left];
+      options.padding = [top + (this.paddingTop*rem), right+ (this.paddingRight*rem), bottom + (this.paddingBottom*rem), left+ (this.paddingLeft*rem)];
-      if (this.animate) options["duration"] = 2000;
+      if (this.animate) options["duration"] = 1000;
      this.view.instance.fit(this.extent, options);
    }
  }
@@ -1,15 +1,10 @@
@import "../../_theme.scss";
@import "~bootstrap/scss/bootstrap.scss";
 .row {
-  border-bottom: 1px solid gray('500');
+  border-bottom: 1px solid var(--bs-gray-500);
  user-select: none;
 }
-.row:hover {
+.row.selected {
-  background-color: gray('100');
+  background-color: var(--bs-gray-100);
 }
@media screen and (min-width: 44rem)  {
@@ -1,59 +1,93 @@
-import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
+import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject} from '@angular/core';
 import { Feature } from 'ol';
 import { Geometry} from 'ol/geom';
 import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
-import  {IQueryState } from '../../models/query.state';
+import  {IQueryState,PackageService } from '@farmmaps/common';
 import * as mapReducers from '../../reducers/map.reducer';
 import * as mapActions from '../../actions/map.actions';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@Component({
    selector: 'fm-map-feature-list-container',
    templateUrl: './feature-list-container.component.html',
-  styleUrls: ['./feature-list-container.component.scss']
+    styleUrls: ['./feature-list-container.component.scss'],
    standalone: false
 })
 export class FeatureListContainerComponent {
-  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[] ) {
+  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[],private packageService:PackageService ) {
    this.featureLists = [...this.featureLists].reverse();
  }
-  @Input() features: Array<Feature>
+  @Input() features: Array<Feature<Geometry>>
  @Input() queryState: IQueryState;
  @Input() selectedFeature: Feature<Geometry>;
  @Input() clickedFeature:Observable<Feature<Geometry>>;
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
  componentRef:any;
  loadComponent(queryState:IQueryState) {
-    var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
+    let componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
-    var selected = -1;
+    let selected = -1;
-    for (var i = 0; i < this.featureLists.length; i++) {
+    let maxMatches =0;
-      if (this.featureLists[i]['forItemType'] == queryState.itemType && this.featureLists[i]['forChild'] && queryState.parentCode && queryState.parentCode != "") {
+    const showItem = true;
-        selected = i;
+    for (let i = 0; i < this.featureLists.length; i++) {
-        break;
+      let matches=0;
-      } else if (this.featureLists[i]['forItemType'] == queryState.itemType) {
+      let criteria=0;
-        selected = i;        
+      if (this.featureLists[i]['forItemType']) {
-        break;
+        criteria++;
        if( this.featureLists[i]['forItemType'].split(",").filter(part => part == queryState.itemType).length == 1) {
          matches++;
        }
      }
      if(this.featureLists[i]['forChild'] ) {
        criteria++;
        if(queryState.parentCode && queryState.parentCode != "") {
          matches++;
        }
      }     
      if(criteria == matches && matches > maxMatches) {
        selected=i;
        maxMatches = matches;
      }
    }
    if (selected >= 0) {
-      componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
+      componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[selected]['constructor'] as any);
      if (this.featureLists[selected]['collapseSearch'] === true) {
        this.store.dispatch(new mapActions.CollapseSearch());
      }     
    }
    const viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();
    if(showItem) {
      this.componentRef = viewContainerRef.createComponent(componentFactory);
      (<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
      (<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
    }    
  }
-    const componentRef = viewContainerRef.createComponent(componentFactory);
+  ngOnInit() {
-    (<AbstractFeatureListComponent>componentRef.instance).features = this.features;
+    this.clickedFeature.subscribe((feature => {
-    (<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
+      (<AbstractFeatureListComponent>this.componentRef.instance).handleFeatureClick(feature);
    }));
  }
  ngOnChanges(changes: SimpleChanges) {
-    if (changes["features"] && changes["features"].currentValue) {
+    if ((changes["queryState"] && changes["queryState"].currentValue)) {
-      if (this.queryState) {
+        this.loadComponent(changes["queryState"].currentValue);
        this.loadComponent(this.queryState);
    }
    if ((changes["features"] && changes["features"].currentValue)) {
      (<AbstractFeatureListComponent>this.componentRef.instance).features = changes["features"].currentValue;
      this.componentRef.changeDetectorRef.detectChanges();
    }
    if(changes["selectedFeature"]) {
      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = changes["selectedFeature"].currentValue;
      this.componentRef.changeDetectorRef.detectChanges();
    }
  }
 }
@@ -1,14 +1,20 @@
-<div *ngIf="features;let features">
+<div class="card border-0">
-  <div class="card border-0">
+  @if ((schemeItem|async); as schemeItem) {
-    <div class="card-body" *ngIf="(schemeItem|async);let schemeItem">
+    <div class="card-body">
-      <div><a href="#" (click)="handleBackClick($event)" i18n>back</a></div>
+      <fm-back-button></fm-back-button>
      <h4 i18n>Farm</h4>
      <h3>{{schemeItem.name}}</h3>
      @if (features; as features) {
        <div>
          <div class="cropfields">
-        <div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+            @for (feature of features; track feature) {
              <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
                <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
              </div>
            }
          </div>
        </div>
      }
    </div>
  }
 </div>
@@ -1,23 +1,20 @@
-@import "../../_theme.scss";
+fm-map-feature-list-feature-container {
@import "~bootstrap/scss/bootstrap.scss";
 feature-list-feature-container {
  width:100%;
  pointer-events:none;
 }
 .row {
-  border-bottom: 1px solid gray('500');
+  border-bottom: 1px solid var(--bs-gray-500);
  user-select: none;
  padding-left:1.5rem;
 }
-.row:hover {
+.row.selected {
-  background-color: gray('100');
+  background-color: var(--bs-gray-100);
 }
 .cropfields {
-  border-top: 1px solid gray('500');
+  border-top: 1px solid var(--bs-gray-500);
-  margin-left: -1.5rem;
+  margin-left: -1.25rem;
-  margin-right: -1.5rem;
+  margin-right: -1.25rem;
 }
@@ -1,4 +1,4 @@
-import { Component, Injectable,AfterViewInit, OnInit} from '@angular/core';
+import { Component, Injectable,AfterViewInit, OnInit,SimpleChanges, ChangeDetectorRef} from '@angular/core';
 import { Location } from '@angular/common';
 import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import {ForItemType } from '../for-item/for-itemtype.decorator';
@@ -14,7 +14,8 @@ import { Observable } from 'rxjs';
@Component({
    selector: 'fm-map-feature-list-cropfield',
    templateUrl: './feature-list-cropfield.component.html',
-    styleUrls: ['./feature-list-cropfield.component.scss']
+    styleUrls: ['./feature-list-cropfield.component.scss'],
    standalone: false
 })
 export class FeatureListCropfieldComponent extends AbstractFeatureListComponent implements OnInit {
@@ -1,13 +1,17 @@
-<div *ngIf="features;let features">
+<div class="card border-0">
  <div class="card border-0">
  <div class="card-body">
-      <div><a href="#" (click)="handleBackClick($event)" i18n>Back</a></div>
+    <fm-back-button></fm-back-button>
-      <h3 i18n><i class="fm fm-farm"></i> Farms</h3>
+    <h3><i class="far fa-farm"></i>&nbsp;<span i18n>Farms</span></h3>
    @if (features; as features) {
      <div>
        <div class="farms">
-        <div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+          @for (feature of features; track feature) {
            <div class="row m-0 ps-3 pe-3"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
              <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
            </div>
          }
        </div>
      </div>
    }
  </div>
 </div>
@@ -1,23 +1,20 @@
-@import "../../_theme.scss";
+fm-map-feature-list-feature-container {
@import "~bootstrap/scss/bootstrap.scss";
 feature-list-feature-container {
  width:100%;
  pointer-events:none;
 }
 .row {
-  border-bottom: 1px solid gray('500');
+  border-bottom: 1px solid var(--bs-gray-500);
  user-select: none;
  padding-left:1.5rem;
 }
-.row:hover {
+.row.selected {
-  background-color: gray('100');
+  background-color: var(--bs-gray-100);
 }
 .farms {
-  border-top: 1px solid gray('500');
+  border-top: 1px solid var(--bs-gray-500);
-  margin-left: -1.5rem;
+  margin-left: -1.25rem;
-  margin-right: -1.5rem;
+  margin-right: -1.25rem;
 }
@@ -2,19 +2,22 @@ import { Component, Injectable } from '@angular/core';
 import { Location } from '@angular/common';
 import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { Store } from '@ngrx/store';
+import { Store,Action } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
 import { commonReducers, ItemTypeService } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
 import { tassign } from 'tassign';
 import { Router } from '@angular/router';
 import { Feature } from 'ol';
 import { Geometry} from 'ol/geom';
@ForItemType("vnd.farmmaps.itemtype.croppingscheme")
@Injectable()
@Component({
    selector: 'fm-map-feature-list-croppingscheme',
    templateUrl: './feature-list-croppingscheme.component.html',
-    styleUrls: ['./feature-list-croppingscheme.component.scss']
+    styleUrls: ['./feature-list-croppingscheme.component.scss'],
    standalone: false
 })
 export class FeatureListCroppingschemeComponent extends AbstractFeatureListComponent {
@@ -22,8 +25,8 @@ export class FeatureListCroppingschemeComponent extends AbstractFeatureListCompo
        super(store, itemTypeService, location);
    }
-    handleFeatureClick(feature) {
+    getAction(feature:Feature<Geometry>):Action {
-        var queryState = tassign(mapReducers.initialState.queryState, { parentCode: feature.get('code'), itemType: "vnd.farmmaps.itemtype.cropfield" });
+        const queryState = tassign(mapReducers.initialState.queryState, { parentCode: feature.get('code'), itemType: "vnd.farmmaps.itemtype.cropfield" });
-        this.store.dispatch(new mapActions.DoQuery(queryState));
+        return new mapActions.DoQuery(queryState);
    }
 }
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
@@ -10,24 +11,42 @@ import { WidgetHostDirective } from '../widget-host/widget-host.directive';
              <div>
                 <ng-template fm-map-widget-host></ng-template>
              </div>
-            `
+            `,
    standalone: false
 })
 export class FeatureListFeatureContainerComponent {
  constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListFeatureComponent) public featureLists: AbstractFeatureListFeatureComponent[] ) {
    this.featureLists = [...this.featureLists].reverse();
  }
-  @Input() feature: Feature;
+  @Input() feature: Feature<Geometry>;
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
  loadComponent() {
-    var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
+    let componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
-    for (var i = 0; i < this.featureLists.length; i++) {
+   
-      if (this.featureLists[i]['forItemType'] == this.feature.get("itemType")) {
+    let selected = -1;
-        componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
+    let maxMatches =0;
    for (let i = 0; i < this.featureLists.length; i++) {
      let matches=0;
      let criteria=0;
      if (this.featureLists[i]['forItemType']) {
        criteria++;
        if(this.featureLists[i]['forItemType'].split(",").filter(part => part == this.feature.get("itemType")).length == 1) {
          matches++;
        }
      }         
      if(criteria == matches && matches > maxMatches) {
        selected=i;
        maxMatches = matches;
      }
    }
    if (selected >= 0) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[selected]['constructor'] as any);        
    }     
    const viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();
@@ -1,6 +1,16 @@
-<div *ngIf="feature;let feature" class="row m-0">  
+@if (feature; as feature) {
-  <div class="col p-2">
+  <div class="d-flex m-0">
-    <h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
+    <div class="p-2">
-    <div class="card-text"><span>{{feature.get('datadate')|date}}</span> - <span>{{feature.get('dataenddate')|date}}</span> </div>
+      <div class="thumbnail">
        <fm-map-feature-thumbnail [feature]="feature"></fm-map-feature-thumbnail>
      </div>
-</div>
+    </div>
    <div class="flex-grow p-2 overflow-hidden">
      <h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
      <div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}}
        ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
        <div class="card-text"><span>{{feature.get('datadate')|date}}</span> -
        <span>{{feature.get('dataenddate')|date}}</span> </div>
      </div>
    </div>
  }
@@ -1,8 +1,3 @@
@import "../../_theme.scss";
@import "~bootstrap/scss/bootstrap.scss";
 .card-title {
  font-size: 1rem;
  white-space: nowrap;
@@ -10,21 +5,18 @@
  text-overflow: ellipsis;
 }
-.thumbnail > img {
+.card-text {
-  width: 100%;
+  overflow: hidden;
-  height: auto;
+  white-space: nowrap;
-}
+  text-overflow: ellipsis;
 .thumbnail > div {
  width: 100%;
  font-size: 2rem;
  text-align: center;
  min-height: 3rem;
  color: white;
  padding-top: 0.5rem;
 }
 .col {
  overflow: hidden;
 }
 .thumbnail {
  width: 4em;
  height: 4em;
 }
--- a/Show More
+++ b/Show More
		`@@ -1,2 +0,0 @@`
			`//$theme-colors: ( "primary": #a7ce39, "secondary": #ffc800 );`
			`//$theme-colors: ( "primary": #a7ce39);`