feat: add location search component (WIP)

.github/workflows/test-ts.yml

@@ -28,7 +28,7 @@ jobs:
           cache-dependency-path: "./viewer/package-lock.json"
 
       - name: Install
-        run: npm ci
+        run: npm ci 
 
       - name: Cypress run
         uses: cypress-io/github-action@v6

.gitignore

@@ -10,3 +10,5 @@ viewer/dist
 viewer/node_modules
 viewer/cypress.env.json
 hack/tmp
+viewer/src/assets/*.json
+viewer/view-component-*.tgz

viewer/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "root": true,
+  "ignorePatterns": ["src/app/api1/**", "src/app/api2/**"],
   "overrides": [
     {
       "files": ["*.ts"],

viewer/angular.json

@@ -11,15 +11,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "statsJson": true,
             "outputPath": "dist/view-component",
             "index": "src/index.html",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/assets"],
-            "styles": ["node_modules/ol/ol.css", "src/styles.css"],
+            "styles": ["src/styles.css", "node_modules/ol/ol.css"],
             "scripts": [],
             "browser": "src/main.ts"
           },
@@ -55,7 +55,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "view-component:build:production"
@@ -67,13 +67,13 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "view-component:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
@@ -96,6 +96,35 @@
   },
   "cli": {
     "schematicCollections": ["@angular-eslint/schematics"],
-    "analytics": false
+    "analytics": false,
+    "cache": {
+      "enabled": true
+    }
+  },
+  "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": "."
+    }
   }
 }

viewer/cypress.config.ts

@@ -8,4 +8,10 @@ export default defineConfig({
     },
     specPattern: '**/*.cy.ts',
   },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
 })

viewer/cypress/feature-view-test.cy.ts

@@ -1,4 +1,6 @@
+import { Feature } from 'ol'
 import { idle, injectAxe, intercept, logAccessibility, mountFeatureComponent, screenshot } from './shared'
+import { Polygon } from 'ol/geom'
 
 type ProjectionTest = { code: string; testName: string; projection: string; geofix: string }
 
@@ -57,3 +59,24 @@ tests.forEach(i => {
     })
   })
 })
+
+describe('searchbox for location API', () => {
+  it('It can draw feature on it', () => {
+    intercept('amsterdam-epgs28992.json')
+
+    const coordinates = [
+      [115000, 500000], // Top-left corner (northwest)
+      [125000, 500000], // Top-right corner (northeast)
+      [125000, 480000], // Bottom-right corner (southeast)
+      [115000, 480000], // Bottom-left corner (southwest)
+      [115000, 500000], // Closing the polygon by returning to the first point
+    ]
+
+    const drawFeature = new Feature({
+      geometry: new Polygon([coordinates]),
+    })
+
+    mountFeatureComponent('http://www.opengis.net/def/crs/EPSG/0/28992', 'BRT', 'default', { itemsUrl: 'https://test/items' }, drawFeature)
+    screenshot('drawFeature')
+  })
+})

viewer/cypress/fixtures/collectionfix.json

@@ -0,0 +1,133 @@
+{
+  "links": [
+    {
+      "rel": "self",
+      "type": "application/json",
+      "title": "This document as JSON",
+      "href": "https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod/collections?f=json"
+    },
+    {
+      "rel": "alternate",
+      "type": "text/html",
+      "title": "This document as HTML",
+      "href": "https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod/collections?f=html"
+    },
+    {
+      "rel": "license",
+      "type": "text/html",
+      "title": "CC0 1.0",
+      "href": "http://creativecommons.org/publicdomain/zero/1.0/deed.nl"
+    }
+  ],
+  "collections": [
+    {
+      "id": "functioneel_gebied",
+      "title": "functioneel_gebied",
+      "version": 1,
+      "displayNameTemplate": "{{.typefunctioneelgebied | firstupper}} {{.naamnl}}",
+      "links": [
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "functioneel_gebied_multivlak",
+          "href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/functioneel_gebied_multivlak"
+        },
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "functioneel_gebied_punt",
+          "href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/functioneel_gebied_punt"
+        },
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "functioneel_gebied_vlak",
+          "href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/functioneel_gebied_vlak"
+        }
+      ]
+    },
+    {
+      "id": "geografisch_gebied",
+      "title": "geografisch_gebied",
+      "version": 1,
+      "displayNameTemplate": "{{.typegeografischgebied | firstupper}} {{.naamnl}}",
+      "links": [
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "geografisch_gebied_multivlak",
+          "href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/geografisch_gebied_multivlak"
+        },
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "geografisch_gebied_punt",
+          "href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/geografisch_gebied_punt"
+        },
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "geografisch_gebied_vlak",
+          "href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/geografisch_gebied_vlak"
+        }
+      ]
+    },
+    {
+      "id": "ligplaats",
+      "title": "ligplaats",
+      "version": 1,
+      "displayNameTemplate": "{{.openbare_ruimte_naam}} {{.huisnummer}}{{.huisletter}}, {{.postcode}} {{.woonplaats_naam}} ({{.bronhouder_naam}})",
+      "links": [
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "ligplaats",
+          "href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/ligplaats"
+        }
+      ]
+    },
+    {
+      "id": "standplaats",
+      "title": "standplaats",
+      "version": 1,
+      "displayNameTemplate": "{{.openbare_ruimte_naam}} {{.huisnummer}}{{.huisletter}}, {{.postcode}} {{.woonplaats_naam}} ({{.bronhouder_naam}})",
+      "links": [
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "standplaats",
+          "href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/standplaats"
+        }
+      ]
+    },
+    {
+      "id": "verblijfsobject",
+      "title": "verblijfsobject",
+      "version": 1,
+      "displayNameTemplate": "{{.openbare_ruimte_naam}} {{.huisnummer}}{{.huisletter}}, {{.postcode}} {{.woonplaats_naam}} ({{.bronhouder_naam}})",
+      "links": [
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "verblijfsobject",
+          "href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/verblijfsobject"
+        }
+      ]
+    },
+    {
+      "id": "woonplaats",
+      "title": "woonplaats",
+      "version": 1,
+      "displayNameTemplate": "{{.woonplaats}} ({{.bronhouder_naam}})",
+      "links": [
+        {
+          "rel": "source",
+          "type": "text/html",
+          "title": "woonplaats",
+          "href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/woonplaats"
+        }
+      ]
+    }
+  ],
+  "numberReturned": 6
+}