ol-elevation-profile 0.5.0 → 1.0.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
 
@@ -68,29 +68,43 @@ vectorSource.addFeatures(feats)
 profile.setFeature(feats[0])  // or let a click on the track select it
 ```
 
+Any OpenLayers-readable format works (GeoJSON, GPX, KML, …) — the control only consumes OL `Feature`s. Read GPX/KML with `ol.format.GPX` / `ol.format.KML` and pass the line feature to `setFeature`.
+
 Full option reference: see the [documentation](#documentation).
 
 ## Features
 
 ### Slope classes
 
-With `slope: true`, the profile is split into contiguous portions of the same slope class (width `slopeClassSize`, in %), capped at `maxClasses` (default 8). Colours run from **blue** (flattest class) to **red** (steepest), via cyan/green and a pure yellow, spread across the classes that are actually present — not stretched on the real maximum slope. A vertical separator marks each class change, and a legend appears under the title.
+With `slope: true`, the profile is split into contiguous portions of the same slope class (width `slopeClassSize`, in %), capped at `maxClasses` (default 8). Colours run from **blue** (flattest class) to **red** (steepest), via cyan/green and a pure yellow, spread across the classes that are actually present (not stretched on the real maximum slope). A vertical separator marks each class change, and a legend appears under the title.
 
 ### Smoothing
 
 `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 XYZ tile set in `terrarium` or `mapbox` encoding can be used instead. See the [guide](https://lc-4918.github.io/ol-elevation-profile/guide/features#terrain-model).
+
 ### 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.
 
+### Time
+
+If the track carries time data (`coordTimes` ISO timestamps from GPX `<time>`, `coordinateProperties.times`, or a 4th `M` coordinate), add `'duration'` to `headerItems` for the **total elapsed time** in the title, and `'time'` to `tooltipItems` for the **elapsed time at the cursor**. The unit adapts: `7 sec`, `26 min`, `1 h 48 min`, `2 j 3 h`. By default this is **moving time** (stopped segments below `stopSpeed`, 0.5 m/s, are excluded); set `ignoreStops: false` for raw wall-clock time. Detect availability with `OlElevationProfile.featureHasTime(feature)`.
+
 ## Demo
 
-Live, interactive demo (toggle every option): **https://lc-4918.github.io/ol-elevation-profile/demo/**
+Live, interactive [demo](https://lc-4918.github.io/ol-elevation-profile/demo/) (toggle every option)
 
 ## Documentation
 
-Full guide and API (English & French): **https://lc-4918.github.io/ol-elevation-profile/**
+[Full guide and API](https://lc-4918.github.io/ol-elevation-profile/) (English & French)
 
 ## License
 

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; }
@@ -108,3 +124,5 @@
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
 }
 .ol-elevation-profile.oep-floating { transform: none; }
+
+.oep-time{opacity:.85}