Add GPX trail maps to blog posts

This adds a trail flow block so posts can include attached GPX files as
interactive maps with route display, elevation charts, activity
summaries, and start/finish markers.

The trail assets are loaded only when needed, keeping the shared
templates clean while vendoring the Leaflet dependencies required for
offline, self-hosted map rendering.

1 files changed, 45 insertions, 0 deletions

diff --git a/assets/static/vendor/leaflet-elevation/src/handlers/labels.js b/assets/static/vendor/leaflet-elevation/src/handlers/labels.js
new file mode 100644
index 0000000..31b3cd6
--- /dev/null
+++ b/assets/static/vendor/leaflet-elevation/src/handlers/labels.js
@@ -0,0 +1,45 @@
+/**
+ * @see https://github.com/Raruto/leaflet-elevation/issues/211
+ *
+ * @example
+ * ```js
+ * L.control.Elevation({ handlers: [ 'Labels' ], labelsRotation: 25, labelsAlign: 'start' })
+ * ```
+ */
+export function Labels() {
+
+  this.on('elechart_updated', function(e) {
+
+    const pointG = this._chart._chart.pane('point');
+
+    const textRotation = this.options.labelsRotation ?? -90;
+    const textAnchor = this.options.labelsAlign;
+
+    if (90 == Math.abs(textRotation)) {
+
+      pointG.selectAll('text')
+        .attr('dy', '4px')
+        .attr("dx", (d, i, el) => Math.sign(textRotation) * (this._height() - d3.select(el[i].parentElement).datum().y - 8) + 'px')
+        .attr('text-anchor', textRotation > 0 ? 'end' : 'start')
+        .attr('transform', 'rotate(' + textRotation + ')')
+
+      pointG.selectAll('circle')
+        .attr('r', '2.5')
+        .attr('fill', '#fff')
+        .attr("stroke", '#000')
+        .attr("stroke-width", '1.1');
+
+    } else if (!isNaN(textRotation)) {
+
+      pointG.selectAll('text')
+        .attr("dx", "4px")
+        .attr("dy", "-9px")
+        .attr('text-anchor', textAnchor ?? (0 == textRotation ? 'start' : 'middle'))
+        .attr('transform', 'rotate('+ -textRotation +')')
+
+    }
+
+  });
+
+	return { };
+}