Improve signal features rendering (#149)

Changes:
- Show references for speed and electrification signals
- Fix sizes of some icons
- Merge layers of symbol text into same layer as the icons.

import/sql/tile_views.sql

@@ -282,7 +282,8 @@ CREATE OR REPLACE VIEW speed_railway_signals AS
     speed_feature as feature,
     speed_feature_type as type,
     azimuth,
-    (signal_direction = 'both') as direction_both
+    (signal_direction = 'both') as direction_both,
+    ref
   FROM signals_with_azimuth
   WHERE railway = 'signal'
     AND speed_feature IS NOT NULL
@@ -346,7 +347,8 @@ CREATE OR REPLACE VIEW electrification_signals AS
     way,
     electrification_feature as feature,
     azimuth,
-    (signal_direction = 'both') as direction_both
+    (signal_direction = 'both') as direction_both,
+    ref
   FROM signals_with_azimuth
   WHERE
     railway = 'signal'

martin/configuration.yml

@@ -243,6 +243,7 @@ postgres:
         id: integer
         feature: string
         type: string
+        ref: string
         azimuth: number
         direction_both: boolean
 
@@ -279,6 +280,7 @@ postgres:
         feature: string
         azimuth: number
         direction_both: boolean
+        ref: string
 
 
   functions:

proxy/js/styles.mjs

@@ -2256,9 +2256,23 @@ const layers = {
           16,
           ['!=', ['get', 'feature'], null],
         ],
+        paint: {
+          'text-halo-color': ['case',
+            ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
+            'white'
+          ],
+          'text-halo-width': 1.5,
+          'text-halo-blur': 1,
+        },
         layout: {
           'symbol-z-order': 'source',
           'icon-overlap': 'always',
+          'text-field': '{ref}',
+          'text-font': ['Noto Sans Medium'],
+          'text-size': 9,
+          'text-optional': true,
+          'text-anchor': 'top',
+          'text-offset': ['literal', [0, 1.5]],
         },
       },
     ),
@@ -2301,7 +2315,7 @@ const layers = {
         'text-font': ['Noto Sans Bold'],
         'text-size': 11,
         'text-padding': 30,
-        'symbol-spacing': 100,
+        'symbol-spacing': 200,
       },
     },
     searchResults,
@@ -2503,9 +2517,35 @@ const layers = {
         minzoom: 16,
         source: 'openrailwaymap_signals',
         'source-layer': 'signals_railway_signals',
+        paint: {
+          'text-halo-color': ['case',
+            ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
+            'white'
+          ],
+          'text-halo-width': ['case',
+            ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], 2.0,
+            1.5,
+          ],
+          'text-halo-blur': 1,
+        },
         layout: {
           'symbol-z-order': 'source',
           'icon-overlap': 'always',
+          'text-field': ['case',
+            ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], ['get', 'ref_multiline'],
+            ['get', 'ref'],
+          ],
+          'text-font': ['Noto Sans Medium'],
+          'text-size': 9,
+          'text-optional': true,
+          'text-anchor': ['case',
+            ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], 'center',
+            'top',
+          ],
+          'text-offset': ['case',
+            ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], ['literal', [0, 0]],
+            ['literal', [0, 1.5]],
+          ],
         },
       },
     ),
@@ -2565,71 +2605,6 @@ const layers = {
         'text-size': 11,
       }
     },
-    {
-      id: 'railway_signals_blockkennzeichen_text',
-      type: 'symbol',
-      minzoom: 16,
-      source: 'openrailwaymap_signals',
-      'source-layer': 'signals_railway_signals',
-      filter: ['all',
-        ['!=', ['get', 'ref_multiline'], null],
-        ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'],
-      ],
-      paint: {
-        'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
-        ],
-        'text-halo-width': 2,
-      },
-      layout: {
-        'text-field': '{ref_multiline}',
-        'text-font': ['Noto Sans Bold'],
-        'text-size': 9,
-        'text-anchor': 'center',
-        'text-overlap': 'always',
-      },
-    },
-    {
-      id: 'railway_signals_text',
-      type: 'symbol',
-      minzoom: 13,
-      source: 'openrailwaymap_signals',
-      'source-layer': 'signals_railway_signals',
-      filter: ['all',
-        ['!=', ['get', 'ref'], null],
-        ['!=', ['get', 'feature'], ''],
-        ['!=', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'],
-      ],
-      paint: {
-        'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
-        ],
-        'text-halo-width': 1.5,
-        'text-halo-blur': 1,
-      },
-      layout: {
-        'text-field': '{ref}',
-        'text-font': ['Noto Sans Medium'],
-        'text-size': 9,
-        'text-anchor': 'top',
-        'text-offset': ['case',
-          ['==', ['get', 'main_height'], 'dwarf'], ['literal', [0, 1]],
-          ['any',
-            ['all',
-              ['==', ['get', 'main_form'], 'light'],
-              ['==', ['get', 'speed_limit_form'], 'light'],
-            ],
-            ['all',
-              ['==', ['get', 'distant_form'], 'light'],
-              ['==', ['get', 'speed_limit_form'], 'light'],
-            ],
-          ], ['literal', [0, 2]],
-          ['literal', [0, 1.5]],
-        ],
-      }
-    },
     searchResults,
   ],
 
@@ -2759,9 +2734,23 @@ const layers = {
         minzoom: 15,
         source: 'openrailwaymap_electrification',
         'source-layer': 'electrification_signals',
+        paint: {
+          'text-halo-color': ['case',
+            ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
+            'white'
+          ],
+          'text-halo-width': 1.5,
+          'text-halo-blur': 1,
+        },
         layout: {
           'symbol-z-order': 'source',
           'icon-overlap': 'always',
+          'text-field': '{ref}',
+          'text-font': ['Noto Sans Medium'],
+          'text-size': 9,
+          'text-optional': true,
+          'text-anchor': 'top',
+          'text-offset': ['literal', [0, 1.5]],
         },
       },
     ),

proxy/js/ui.js

@@ -668,7 +668,6 @@ function popupContent(properties) {
       ${properties.tunnel === true ? `<span class="badge rounded-pill text-bg-light">tunnel</span>` : ''}
       ${properties.bridge === true ? `<span class="badge rounded-pill text-bg-light">bridge</span>` : ''}
       ${properties.railway_local_operated === true ? `<span class="badge rounded-pill text-bg-light">operated locally</span>` : ''}
-      ${properties.maxspeed ? `<span class="badge rounded-pill text-bg-light">maximum speed: ${properties.maxspeed} km/h</span>` : ''}
       ${properties.track_class ? `<span class="badge rounded-pill text-bg-light">track class: ${properties.track_class}</span>` : ''}
       ${properties.direction_both ? `<span class="badge rounded-pill text-bg-light">both directions</span>` : ''}
       ${properties.train_protection ? `<span class="badge rounded-pill text-bg-light">train protection: <span class="text-monospace">${properties.train_protection}</span></span>` : ''}