replace popup feature variables in style

CONTRIBUTING.md

@@ -81,7 +81,7 @@ features:
   # ...
 ```
 
-A final example for speed signals which display an icon depending on the matched speed value. The `value` property contains `{}` as part of the icon, which is replaced automatically with the matched tag value. In particular an `example` must be given, which is used in the legend:
+A final example for speed signals which display an icon depending on the matched speed value. The `value` property contains `{}` as part of the icon, which is replaced automatically with the matched tag value, for example `{80}`. In particular an `example` must be given, which is used in the legend:
 
 ```yaml
 features:
@@ -94,14 +94,15 @@ features:
       cases:
         - regex: '^(1[02]|[1-9])0$'
           value: 'at/geschwindigkeitsvoranzeiger-{}-sign'
-          example: 'at/geschwindigkeitsvoranzeiger-80-sign'
+          example: 'at/geschwindigkeitsvoranzeiger-{80}-sign'
       default: 'at/geschwindigkeitsvoranzeiger-empty-sign'
     tags:
       - { tag: 'railway:signal:speed_limit_distant', value: 'AT-V2:geschwindigkeitsvoranzeiger' }
       - { tag: 'railway:signal:speed_limit_distant:form', value: 'sign' }
 
   # ...
 ```
+Note that the icon files will also contain the `{` and `}` characters, the filename will be for example `at/geschwindigkeitsvoranzeiger-{80}-sign.svg`.
 
 If the railway signal uses tags that are not in the list at the top of the file, ensure the tag is added there. For example:
 ```yaml

import/sql/signals_with_azimuth.sql.js

@@ -37,7 +37,7 @@ CREATE OR REPLACE VIEW signals_with_azimuth_view AS
       -- ${feature.country ? `(${feature.country}) ` : ''}${feature.description}
       WHEN ${feature.tags.map(tag => `"${tag.tag}" ${tag.value ? `= '${tag.value}'`: tag.values ? `IN (${tag.values.map(value => `'${value}'`).join(', ')})` : ''}`).join(' AND ')}
         THEN ${feature.icon.match ? `CASE ${feature.icon.cases.map(iconCase => `
-          WHEN "${feature.icon.match}" ~ '${iconCase.regex}' THEN ${iconCase.value.includes('{}') ? `CONCAT('${iconCase.value.replace(/\{}.*$/, '')}', "${feature.icon.match}", '${iconCase.value.replace(/^.*\{}/, '')}')` : `'${iconCase.value}'`}`).join('')}
+          WHEN "${feature.icon.match}" ~ '${iconCase.regex}' THEN ${iconCase.value.includes('{}') ? `CONCAT('${iconCase.value.replace(/\{}.*$/, '{')}', "${feature.icon.match}", '${iconCase.value.replace(/^.*\{}/, '}')}')` : `'${iconCase.value}'`}`).join('')}
           ${feature.icon.default ? `ELSE '${feature.icon.default}'` : ''}
         END` : `'${feature.icon.default}'`}
     `).join('')}

proxy/js/features.mjs

@@ -26,10 +26,9 @@ const generateSignalFeatures = features =>
       ]
     ].concat(
       feature.icon.match
-        // TODO dynamic match for speed signals, need difference between feature and icon
-        ? feature.icon.cases.map(iconCase => [iconCase.example ?? iconCase.value, {
+        ? feature.icon.cases.map(iconCase => [iconCase.value, {
           country: feature.country,
-          name: iconCase.description,
+          name: `${feature.description}${iconCase.description ? ` (${iconCase.description})` : ''}`,
         }])
         : []
     ),
@@ -233,7 +232,7 @@ const features = {
         [
           [feature.feature, {name: feature.description}]
         ].concat(
-          (feature.variants || []).map(variant => [variant.feature, {name: variant.description}])
+          (feature.variants || []).map(variant => [variant.feature, {name: `${feature.description}${variant.description ? ` (${variant.description})` : ''}`}])
         ))
     ),
   },

proxy/js/ui.js

@@ -815,12 +815,19 @@ function popupContent(feature) {
   }
 
   const featureProperty = featureCatalog.featureProperty || 'feature';
-  const featureContent = featureCatalog.features && featureCatalog.features[properties[featureProperty]];
+  // Remove the variable part of the property to get the key
+  const catalogKey = properties[featureProperty] && properties[featureProperty].replace(/\{[^}]+}/, '{}');
+  // Capture the variable part as well for display
+  const keyVariable = properties[featureProperty]
+    ? properties[featureProperty].match(/\{([^}]+)}/)?.[1]
+    : null;
+
+  const featureContent = featureCatalog.features && featureCatalog.features[catalogKey];
   if (!featureContent) {
-    console.warn(`Could not feature description for feature property "${featureProperty}" with value "${properties[featureProperty]}" in catalog "${layerSource}", feature:`, feature);
+    console.warn(`Could not determine feature description content for feature property "${featureProperty}" with key "${catalogKey}" in catalog "${layerSource}", feature:`, feature);
   }
   const label = featureCatalog.labelProperty && properties[featureCatalog.labelProperty];
-  const featureDescription = featureContent ? `${featureContent.name}${featureContent.country ? ` (${featureContent.country})` : ''}` : null;
+  const featureDescription = featureContent ? `${featureContent.name}${keyVariable ? ` (${keyVariable})` : ''}${featureContent.country ? ` (${featureContent.country})` : ''}` : null;
 
   const featureType = featureContent && featureContent.type || 'point';
   const osmType = featureType === 'point' ? 'node' : 'way';