Merge pull request #226 from PDOK/metadata-style

feat(viewer): Read metadata gokoala title items from style
PDOK · Sep 2, 2024 · dbb64d1 · dbb64d1
2 parents 4c0192f + 2c7abd0
commit dbb64d1
Show file tree

Hide file tree

Showing 10 changed files with 3,966 additions and 3,313 deletions.
diff --git a/viewer/README.md b/viewer/README.md
@@ -60,6 +60,19 @@ The `<app-legend-view>` component has the following parameters:
 Default layers are used for legend items. Attributes can be specified to create distinct items. For example, for the Dutch BGT, `titleItems = "type,plus_type,functie,fysiek_voorkomen,openbareruimtetype"` can be used. When `titleItems = "id"` is used, the "id" for the layer (layer name) is used to name the legend items.
 Legend uses is shown in the [example directory](./examples)
 
+The parameter **title-items** can also be defined in the Mapbox style input. Add "gokoala:title-items" to the metadata section as follows:
+
+```Json
+{
+  "version": 8,
+  "name": "teststyle",
+  "id": "test style id",
+  "metadata": {
+      "gokoala:title-items": "id"
+  },
+}
+```
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

diff --git a/viewer/cypress/fixtures/teststyle-filter.json b/viewer/cypress/fixtures/teststyle-filter.json
@@ -0,0 +1,68 @@
+{
+  "version": 8,
+  "name": "teststyle",
+  "id": "test style color function",
+  "metadata": {
+    "ol:webfonts": "https://test/resources/fonts/{font-family}/{fontweight}{-fontstyle}.css",
+    "gokoala:title-items": "color,function"
+  },
+  "layers": [
+    {
+      "id": "Area print border",
+      "type": "fill",
+      "paint": {
+        "fill-color": "rgb(255, 0, 0)",
+        "fill-opacity": 0.1
+      },
+      "filter": ["all", ["==", "function", "A"], ["==", "color", "red"]],
+      "source": "test",
+      "source-layer": "testArea"
+    },
+    {
+      "id": "Area label",
+      "filter": ["all", ["==", "function", "A"], ["==", "color", "red"]],
+      "type": "symbol",
+      "paint": {
+        "text-opacity": 1,
+        "text-halo-width": 2,
+        "text-color": "rgb(255, 0, 0)"
+      },
+      "layout": {
+        "symbol-placement": "point",
+        "text-field": "{name}",
+        "text-size": 12
+      },
+      "source": "test",
+      "source-layer": "testArea"
+    },
+    {
+      "id": "line",
+      "filter": ["all", ["==", "function", "A"], ["==", "color", "red"]],
+      "type": "line",
+      "paint": {
+        "line-color": "rgb(255, 0, 0)",
+        "line-width": 2
+      },
+      "source": "test",
+      "source-layer": "testline"
+    },
+    {
+      "id": "circle",
+      "filter": ["all", ["==", "function", "B"], ["==", "color", "green"]],
+      "type": "circle",
+      "source": "test",
+      "source-layer": "testpoint",
+      "paint": {
+        "circle-color": "#7FDF0A",
+        "circle-radius": 4.3,
+        "circle-stroke-color": "#000000"
+      }
+    }
+  ],
+  "sources": {
+    "test": {
+      "type": "vector",
+      "tiles": ["https://test/{z}/{y}/{x}?f=mvt"]
+    }
+  }
+}
diff --git a/viewer/cypress/fixtures/teststyle-id.json b/viewer/cypress/fixtures/teststyle-id.json
@@ -0,0 +1,64 @@
+{
+  "version": 8,
+  "name": "teststyle",
+  "id": "test style id",
+  "metadata": {
+    "ol:webfonts": "https://test/resources/fonts/{font-family}/{fontweight}{-fontstyle}.css",
+    "gokoala:title-items": "id"
+  },
+  "layers": [
+    {
+      "id": "Area print border",
+      "type": "fill",
+      "paint": {
+        "fill-color": "rgb(100, 100,100)",
+        "fill-opacity": 0.1
+      },
+      "source": "test",
+      "source-layer": "testArea"
+    },
+    {
+      "id": "Area label",
+      "type": "symbol",
+      "paint": {
+        "text-opacity": 1,
+        "text-halo-width": 2,
+        "text-color": "rgb(100,0,255)"
+      },
+      "layout": {
+        "symbol-placement": "point",
+        "text-field": "{name}",
+        "text-size": 12
+      },
+      "source": "test",
+      "source-layer": "testArea"
+    },
+    {
+      "id": "line",
+      "type": "line",
+      "paint": {
+        "line-color": "rgb(255, 0, 0)",
+        "line-width": 2
+      },
+      "source": "test",
+      "source-layer": "testline"
+    },
+    {
+      "id": "circle",
+      "type": "circle",
+      "source": "test",
+      "source-layer": "testpoint",
+      "paint": {
+        "circle-color": "#B5DF0A",
+        "circle-radius": 4.3,
+        "circle-stroke-color": "#000000"
+      }
+    }
+  ],
+  "sources": {
+    "test": {
+      "type": "vector",
+      "tiles": ["https://test/{z}/{y}/{x}?f=mvt"]
+    }
+  }
+}
diff --git a/viewer/cypress/fixtures/teststyle.json b/viewer/cypress/fixtures/teststyle.json
@@ -1,7 +1,7 @@
 {
   "version": 8,
   "name": "teststyle",
-  "id": "teststyleid",
+  "id": "test style no metadata",
 
   "layers": [
     {

diff --git a/viewer/cypress/legend-view-test.cy.ts b/viewer/cypress/legend-view-test.cy.ts
@@ -4,9 +4,34 @@ import { LegendViewComponent } from './../src/app/legend-view/legend-view.compon
 import { environment } from './../src/environments/environment'
 import { checkAccessibility, downloadPng, injectAxe, screenshot } from './shared'
 
-describe('Legend-view-test.cy.ts', () => {
-  it('mounts and shows legend items', () => {
+function loadlegend(fixture: string) {
+  cy.intercept('GET', 'https://visualisation.example.com/teststyle*', { fixture: fixture }).as('geo')
+  cy.mount(LegendViewComponent, {
+    imports: [
+      HttpClientModule,
+      LoggerModule.forRoot({
+        level: environment.loglevel,
+      }),
+    ],
+    componentProperties: {
+      styleUrl: 'https://visualisation.example.com/teststyle/',
+    },
+  })
+  cy.wrap(['1', '2', '3']).each(n => {
+    const textsel = ':nth-child(' + n + ') > .legendText'
+    cy.get(textsel).then($value => {
+      const textValue = $value.text()
+
+      const sel = ':nth-child(' + n + ') > app-legend-item > #itemmap > .ol-viewport > .ol-unselectable > .ol-layer > canvas'
+      downloadPng(sel, textValue + '.png')
+    })
+  })
+}
+
+describe('Legend-view-test', () => {
+  it('Has no detectable a11y violations on mount', () => {
     cy.intercept('GET', 'https://visualisation.example.com/teststyle*', { fixture: 'teststyle.json' }).as('geo')
+    injectAxe()
 
     cy.mount(LegendViewComponent, {
       imports: [
@@ -19,37 +44,32 @@ describe('Legend-view-test.cy.ts', () => {
         styleUrl: 'https://visualisation.example.com/teststyle/',
       },
     })
+    checkAccessibility('body')
+  })
 
-    cy.wrap(['1', '2', '3']).each(n => {
-      const textsel = ':nth-child(' + n + ') > .legendText'
-      cy.get(textsel).then($value => {
-        const textValue = $value.text()
-
-        const sel = ':nth-child(' + n + ') > app-legend-item > #itemmap > .ol-viewport > .ol-unselectable > .ol-layer > canvas'
-        downloadPng(sel, textValue + '.png')
-      })
-    })
+  it('mounts and shows legend items from style without metadata', () => {
+    loadlegend('teststyle.json')
     cy.get(':nth-child(1) > .legendText').contains('TestArea')
     cy.get(':nth-child(2) > .legendText').contains('Name')
     cy.get(':nth-child(3) > .legendText').contains('Testline')
     screenshot('legend')
   })
 
-  it('Has no detectable a11y violations on mount', () => {
-    cy.intercept('GET', 'https://visualisation.example.com/teststyle*', { fixture: 'teststyle.json' }).as('geo')
-    injectAxe()
+  it('mounts and shows legend items from style with metadata with "gokoala:title-items": "id" ', () => {
+    loadlegend('teststyle-id.json')
+    cy.get(':nth-child(1) > .legendText').contains('Area label Name')
+    cy.get(':nth-child(2) > .legendText').contains('Area print border')
+    cy.get(':nth-child(3) > .legendText').contains('circle')
+    cy.get(':nth-child(4) > .legendText').contains('line')
+    screenshot('legend')
+  })
 
-    cy.mount(LegendViewComponent, {
-      imports: [
-        HttpClientModule,
-        LoggerModule.forRoot({
-          level: environment.loglevel,
-        }),
-      ],
-      componentProperties: {
-        styleUrl: 'https://visualisation.example.com/teststyle/',
-      },
-    })
-    checkAccessibility('body')
+  it('mounts and shows legend items from style with metadata with "gokoala:title-items": "color,function" ', () => {
+    loadlegend('teststyle-filter.json')
+    cy.get(':nth-child(1) > .legendText').contains('Green B')
+    cy.get(':nth-child(2) > .legendText').contains('Red A')
+    cy.get(':nth-child(3) > .legendText').contains('Red A Name')
+
+    screenshot('legend')
   })
 })