WIP: Highlighting of static dataset sources

[tordans]

We can to this in three ways…

Layer in existing source + in filter

This is what we do right now. However, I did not manage to get the filter working. No idea why that is so hard =(. But we want to move away from this anyways, so …

My test cases are removed from this WIP commit.

Geojson source

This is still in the code but inactive. It follows https://github.com/FixMyBerlin/atlas-app/pull/103. We need to add a filter to only use datasets, see code todo.

Use feature state

This might be the better option than Geojson source for datasets. But then again we only want one pattern to do things, so https://github.com/FixMyBerlin/atlas-app/pull/103 will likely win? Advantage

• speed
• styling is part of the static dataset repo, which is kind of nice and allows to specify the style

Issues

• we need to add unique IDs to the static datasets. There is a ticket on this with the idea to hash the feature. We can then remove the highlightKey config because we can check for this internal id in the properties.
• the handleClick needs to be cleaned up and split into helper functions
• feature state only works in paint, not in filter or layout.

Docs

• setfeaturestate https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#setfeaturestate
• example https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/
• expression https://maplibre.org/maplibre-style-spec/expressions/#feature-state

[tordans]

Ein Teil fehlt in diesem PR:

 atlas-static-data % git diff
diff --git a/geojson/region-bb/bb-land-klassifiertes-strassennetz/meta.ts b/geojson/region-bb/bb-land-klassifiertes-strassennetz/meta.ts
index bd08866..954230a 100644
--- a/geojson/region-bb/bb-land-klassifiertes-strassennetz/meta.ts
+++ b/geojson/region-bb/bb-land-klassifiertes-strassennetz/meta.ts
@@ -48,6 +48,31 @@ export const data: MetaData = {
             'line-opacity': 0.5,
           },
         },
+        {
+          id: 'bb-ramboll-strassen-highlight',
+          type: 'line',
+          paint: {
+            // TODO: Abstract into helper
+            'line-color': [
+              'case',
+              ['boolean', ['feature-state', 'selected'], false],
+              'black',
+              'transparent', // Hide via transparency
+            ],
+            'line-width': [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              8,
+              ['match', ['get', 'Strassenklassifikation'], ['B'], 7, ['L'], 5.5, 4.5],
+              14,
+              ['match', ['get', 'Strassenklassifikation'], ['B'], 18, ['L'], 16, 14],
+            ],
+          },
+          // Data expressions of type "feature-state" are not allowed in filter, only paint
+          // Docs: https://maplibre.org/maplibre-style-spec/expressions/#data-expressions
+          // filter: ['case', ['boolean', ['feature-state', 'selected'], false], 1, 0.5],
+        },
       ],
     },
   ],

[tordans]

We will not use this method.