ol-elevation-profile 0.6.0 → 1.1.0

package/README.md

@@ -9,7 +9,7 @@
 
 A synchronized, themeable **elevation profile control for [OpenLayers](https://openlayers.org/)**, rendered with [d3](https://d3js.org/).
 
-It reads elevation (**Z**) directly from a track's geometry (`[lon, lat, z]` GPX/GeoJSON), so **no elevation service is queried** — distance, ascent/descent and min/max are computed from the track itself. Clicking (or hovering) a track shows its profile; a marker stays synchronized on both the map and the chart, and a click on the empty map hides it. The control is fully responsive (full-width docked bar on phones), supports slope-class colouring, metric smoothing, an A↔B crop, six themes, transparency, and a track-colour mode.
+It reads elevation (**Z**) directly from a track's geometry (`[lon, lat, z]` GPX/GeoJSON) — distance, ascent/descent and min/max are computed from the track itself, with no service involved. A track that carries **no** Z is filled from keyless [terrain tiles](#terrain-model), which is on by default; `dem: null` turns it off. Clicking (or hovering) a track shows its profile; a marker stays synchronized on both the map and the chart, and a click on the empty map hides it. The control is fully responsive (full-width docked bar on phones), supports slope-class colouring, metric smoothing, an A↔B crop, six themes, transparency, and a track-colour mode.
 
 ## Screenshots
 
@@ -82,6 +82,32 @@ With `slope: true`, the profile is split into contiguous portions of the same sl
 
 `smoothing` is a sliding-window average over **metres** of track (`0` = none, the default). Because the unit is metric, the result is independent of GPS point density; it softens both the profile and the slope.
 
+### Terrain model
+
+A track with **no Z** — drawn by hand, traced over a basemap, exported by a tool that drops the third dimension — would get no profile. The missing elevations are read from [AWS Terrain Tiles](https://registry.opendata.aws/terrain-tiles/) instead, **by default**: PNG tiles carrying elevation in their R/G/B channels, **no API key, no quota, no rate limit**. A 10 000-point track costs a handful of tiles where a free elevation API would cost 100 requests. Pass `dem: null` to disable it and keep the control off the network.
+
+Elevation is interpolated bilinearly between the four surrounding pixels — reading the containing pixel would make the profile advance in stairs, and every stair counts as a climb then a descent in the D+. A track is filled **entirely or not at all**: a profile missing a few points dives to sea level and its D+ becomes absurd. Tracks that already carry their own Z are untouched.
+
+Accuracy is roughly 30–90 m depending on the region (mean 16 m from IGN's 1 m reference on steep alpine terrain). Any of these can be used instead:
+
+| `dem` | Source |
+|---|---|
+| `'terrarium'` (default) | AWS Terrain Tiles, keyless, worldwide |
+| `'ign'` | IGN Géoplateforme RGE ALTI, France, metre-accurate, keyless |
+| `{ url: '.../{z}/{x}/{y}.png' }` | any XYZ tile set, `terrarium` or `mapbox` encoding, or your own decoder |
+| `{ wms: { url, layers } }` | WMS tiles, one `GetMap` per tile |
+| `{ olSource }` | any `ol/source/TileImage`, or **`ol/source/GeoTIFF`** for a COG or a WCS `GetCoverage` |
+| `{ featureInfo: { url, layers } }` | GeoServer greyscale coverage, through WMS `GetFeatureInfo` |
+| a function | you fetch the elevations yourself, from any API |
+
+Every source but `featureInfo` is sampled with **bilinear interpolation** between the four surrounding pixels. See the [guide](https://lc-4918.github.io/ol-elevation-profile/guide/features#terrain-model).
+
+### PNG export
+
+`exportPng: true` adds a button to the toolbar, to the right of the zoom buttons, saving the **whole panel** as an image: title, stats line, slope legend and the complete chart with both axes. `profile.exportPNG()` does the same from code and resolves with the `Blob`; `{ download: false }` returns it without saving, `scale` defaults to the device pixel ratio.
+
+The position indicator is left out: it marks where the pointer happens to be, which means nothing once the image is saved. The panel is rebuilt as an SVG rather than screenshotted, with every painting property frozen inline, since a serialized SVG carries no stylesheet.
+
 ### Attributions
 
 When the profile occupies the bottom-right corner (or full-width at the bottom), the OpenLayers attribution control is automatically lifted **above** the profile, right-aligned, with a vertical gap equal to the map-edge-to-profile-bottom gap. Other placements leave the attribution untouched.

package/dist/ol-elevation-profile.css

@@ -21,7 +21,7 @@
 }
 .ol-elevation-profile.oep-transparent { backdrop-filter: blur(2px); }
 
-/* ---- 8 ancrages ---- */
+/* ---- 8 anchors ---- */
 .ol-elevation-profile.oep-pos-bottom       { left: 50%; bottom: .6em; transform: translateX(-50%); }
 .ol-elevation-profile.oep-pos-top          { left: 50%; top: .6em;    transform: translateX(-50%); }
 .ol-elevation-profile.oep-pos-left         { left: .6em; top: 50%;    transform: translateY(-50%); }
@@ -31,12 +31,12 @@
 .ol-elevation-profile.oep-pos-bottom-left  { left: .6em;  bottom: .6em; }
 .ol-elevation-profile.oep-pos-bottom-right { right: .6em; bottom: .6em; }
 
-/* ---- mobile : pleine largeur, collé en haut ou en bas ---- */
+/* ---- mobile: full width, pinned to the top or the bottom ---- */
 .ol-elevation-profile.oep-mobile { left: 0 !important; right: 0 !important; width: auto !important; transform: none !important; }
 .ol-elevation-profile.oep-mobile.oep-pos-bottom { bottom: 0; border-radius: 10px 10px 0 0; }
 .ol-elevation-profile.oep-mobile.oep-pos-top    { top: 0;    border-radius: 0 0 10px 10px; }
 
-/* ---- entête ---- */
+/* ---- header ---- */
 .oep-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 2px 2px; }
 .oep-title  { flex: 0 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .oep-title a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@@ -45,7 +45,7 @@
 .oep-stats .oep-up   { color: #c0392b; }
 .oep-stats .oep-down { color: #2471a3; }
 
-/* ---- barre d'outils zoom ---- */
+/* ---- zoom toolbar ---- */
 .oep-toolbar { flex: 0 0 auto; display: inline-flex; gap: 2px; margin-left: auto; }
 .oep-tbtn {
   display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px;
@@ -65,14 +65,14 @@
 .oep-toggle:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
 .oep-toggle svg { width: 15px; height: 15px; display: block; }
 
-/* ---- légende de pente ---- */
+/* ---- slope legend ---- */
 .oep-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0 2px 4px; font-size: 10px; opacity: .9; }
 .oep-leg-it { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
 .oep-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
 
 .oep-body { overflow: hidden; }
 
-/* ---- mode réduit : on rétracte le contrôle à la largeur Titre + bouton ---- */
+/* ---- collapsed mode: the control shrinks to title + button width ---- */
 .ol-elevation-profile.oep-collapsed { width: auto !important; }
 .ol-elevation-profile.oep-collapsed .oep-body,
 .ol-elevation-profile.oep-collapsed .oep-legend { display: none !important; }
@@ -80,6 +80,22 @@
 .ol-elevation-profile.oep-collapsed .oep-toolbar { display: none !important; }
 .ol-elevation-profile.oep-collapsed .oep-header { width: auto; }
 
+/* ---- terrain-model loading spinner ---- */
+/* Takes --oep-area, so it wears the theme colour - and the track colour under color:'auto'. */
+.oep-loading { display: flex; align-items: center; justify-content: center; }
+.oep-spinner {
+  width: 26px; height: 26px; box-sizing: border-box;
+  border: 3px solid var(--oep-area);
+  border-top-color: transparent;
+  border-radius: 50%;
+  opacity: .9;
+  animation: oep-spin .8s linear infinite;
+}
+@keyframes oep-spin { to { transform: rotate(360deg); } }
+/* A still ring reads as a broken control rather than a wait, so the motion stays -
+   slowed to a crawl, which is what the reduced-motion request is really about. */
+@media (prefers-reduced-motion: reduce) { .oep-spinner { animation-duration: 4s; } }
+
 /* ---- chart ---- */
 .oep-svg { display: block; }
 .oep-area { fill: var(--oep-area); opacity: .6; }