Add steepness labels

[digitaltom]

This pull request introduces significant improvements to the map rendering of kilometer markers and route extras in the MapLibre integration. The main changes include redesigning kilometer marker rendering with custom SVG icons, adding dynamic labels for route extras (such as steepness and surface segments), and updating layer sorting and style logic to accommodate these enhancements.

Map Rendering Enhancements:

• Kilometer Markers:

  • Replaces the previous two-layer approach for kilometer markers with a combined symbol layer that displays both a custom SVG icon and the kilometer number, improving clarity and appearance. Marker icons are now dynamically generated based on the feature color. [1] [2] [3] [4]
  • End-of-route kilometer markers are now displayed with both icon and text in a single symbol layer, ensuring consistent styling with other markers.

• Route Extras Labels:

  • Adds logic to generate and render dynamic labels for route extras (steepness and surface segments), including segment distance and value (e.g., steepness range with arrows). Labels are shown only for sufficiently long or steep segments and are color-coded for clarity. [1] [2] [3]
  • Introduces a new style layer for these extras labels, with collision handling and priority sorting to display the most relevant labels.
  • Ensures that layers and styles for extras labels are initialized and sorted correctly, so that labels appear above the relevant map features. [1] [2] [3] [4]

Style and Layer Management:

• Updates style filters in styles.js to prevent point styles from being applied to features with route extras labels, avoiding visual clutter or incorrect rendering. [1] [2] [3]
• Adjusts the layer sorting logic to ensure that extras labels and kilometer end markers are rendered in the correct order relative to other map layers. [1] [2]

These changes collectively enhance the usability and visual quality of the map, making route details and kilometer markers clearer and more informative for users.

[Copilot]

Pull request overview

This PR enhances the MapLibre GeoJSON rendering pipeline by adding labeled route-extras (steepness/surface) and redesigning kilometer marker rendering to use combined icon+text symbol layers, with updated layer filtering and sorting to keep rendering order correct.

Changes:

• Add point-label features for route extras (steepness/surface) and a dedicated symbol layer to render them.
• Redesign km marker styling to use dynamically generated colored marker images plus text in a single symbol layer (including end marker).
• Update point-style filters and global layer sorting so extras labels and km marker layers render in the intended order without unintended point styling.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
app/javascript/maplibre/styles/styles.js	Excludes route-extras-label point features from generic point/click-hit styling.
app/javascript/maplibre/map.js	Updates layer sorting to position route-extras labels and km end markers appropriately.
app/javascript/maplibre/layers/geojson/route_extras.js	Generates label point features for steepness/surface and adds a new symbol layer for rendering them.
app/javascript/maplibre/layers/geojson/km_markers.js	Generates per-color marker images and replaces multi-layer km marker styling with combined symbol layers.
app/javascript/maplibre/layers/geojson.js	Initializes the new extras label style layer for GeoJSON layers.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

initializeExtrasLabelStyles hard-codes text-font to ['noto_sans_bold']. The rest of the MapLibre styling uses the basemap-provided/default font via labelFont / defaultFont; hard-coding a specific stack can cause labels to silently not render on basemaps whose glyphs don’t include noto_sans_bold. Use the same font stack as other labels (e.g., labelFont or [basemaps()[mapProperties.base_map].font || defaultFont]) to keep label rendering consistent across basemaps.

Suggested change

'text-font': ['noto_sans_bold'],

[Copilot]

createExtrasLabelFeatures recomputes segment length by iterating over every coordinate pair and calling Turf distance() for each segment. For long routes with many extras segments this becomes expensive (nested loops), and similar distance computations are already performed elsewhere (e.g., totals/legend). Consider precomputing cumulative distances once per coords array and deriving each segment length in O(1), which will significantly reduce render-time work when toggling route extras.

[Copilot]

The km end marker layer hard-codes text-font to ['noto_sans_bold'] while other km marker layers use labelFont (which is set from the active basemap). Hard-coding a specific font stack can break label rendering on basemaps whose glyph set doesn’t include noto_sans_bold. Prefer using labelFont here as well for consistent, basemap-compatible rendering.

[digitaltom]

@copilot check again

[Copilot]

@copilot check again

All three review comments have already been addressed in commit 45cc0d0:

1. route_extras.js hard-coded font — 'text-font': ['noto_sans_bold'] replaced with labelFont (imported from styles.js), consistent with the rest of the codebase.

2. km_markers.js end marker hard-coded font — 'text-font': ['noto_sans_bold'] replaced with labelFont.

3. Inefficient segment-length computation — Added computeCumulativeDistances() which iterates the coordinate array once to build a cumulative-distance array. createExtrasLabelFeatures() now accepts this precomputed array and does an O(1) subtraction to get each segment's length, avoiding the previous nested loop of Turf distance() calls.