ol-elevation-profile 1.0.0 → 2.0.0

package/dist/ol-elevation-profile.js

@@ -1,9 +1,9 @@
 /*! ol-elevation-profile | MIT License | https://github.com/lc-4918/ol-elevation-profile */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('ol/control/Control.js'), require('ol/Overlay.js'), require('ol/Observable.js'), require('ol/proj.js'), require('ol/sphere.js'), require('ol/extent.js'), require('d3')) :
-  typeof define === 'function' && define.amd ? define(['ol/control/Control.js', 'ol/Overlay.js', 'ol/Observable.js', 'ol/proj.js', 'ol/sphere.js', 'ol/extent.js', 'd3'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.OlElevationProfile = factory(global.ol.control.Control, global.ol.Overlay, global.ol.Observable, global.ol.proj, global.ol.sphere, global.ol.extent, global.d3));
-})(this, (function (Control, Overlay, Observable_js, proj_js, sphere_js, extent_js, d3) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('ol/control/Control.js'), require('ol/Overlay.js'), require('ol/Observable.js'), require('ol/proj.js'), require('ol/TileState.js'), require('ol/sphere.js'), require('ol/extent.js'), require('d3')) :
+  typeof define === 'function' && define.amd ? define(['ol/control/Control.js', 'ol/Overlay.js', 'ol/Observable.js', 'ol/proj.js', 'ol/TileState.js', 'ol/sphere.js', 'ol/extent.js', 'd3'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.OlElevationProfile = factory(global.ol.control.Control, global.ol.Overlay, global.ol.Observable, global.ol.proj, global.ol.TileState, global.ol.sphere, global.ol.extent, global.d3));
+})(this, (function (Control, Overlay, Observable_js, proj_js, TileState, sphere_js, extent_js, d3) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -52,6 +52,53 @@
 
     const POSITIONS = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 
+    /**
+     * Jeux de libellés livrés avec la librairie. `en` est le défaut et la retombée : une
+     * langue inconnue rend l'anglais plutôt que des clés vides ou un mélange.
+     *
+     * Un jeu est complet, jamais partiel. Une traduction à trous laisserait deux langues
+     * cohabiter dans le même panneau, ce qui se voit ; `labels` reste là pour corriger une
+     * clé isolée sans avoir à redéclarer les autres.
+     *
+     * `ascent` et `descent` valent `D+` / `D-` partout : la notation est celle des cartes et
+     * des topos, pas un mot à traduire.
+     */
+    const LOCALES = {
+      en: {
+        distance: 'Distance', elevation: 'Elevation', slope: 'Slope',
+        ascent: 'D+', descent: 'D-', empty: 'Click a track',
+        time: 'Time', duration: 'Duration',
+        durationUnits: { s: 'sec', m: 'min', h: 'h', d: 'd' },
+        zoomStart: 'Set start (A)', zoomEnd: 'Set end (B)', zoomAll: 'Show all',
+        zoomBack: 'Back one level',
+        exportPng: 'Export as PNG',
+        collapse: 'Collapse the profile', expand: 'Expand the profile',
+        loading: 'Loading the elevation profile'
+      },
+      fr: {
+        distance: 'Distance', elevation: 'Altitude', slope: 'Pente',
+        ascent: 'D+', descent: 'D-', empty: 'Cliquez un tracé',
+        time: 'Temps', duration: 'Durée',
+        durationUnits: { s: 'sec', m: 'min', h: 'h', d: 'j' },
+        zoomStart: 'Définir le début (A)', zoomEnd: 'Définir la fin (B)', zoomAll: 'Tout voir',
+        zoomBack: 'Revenir au niveau précédent',
+        exportPng: 'Exporter en PNG',
+        collapse: 'Réduire le profil', expand: 'Agrandir le profil',
+        loading: 'Chargement du profil altimétrique'
+      },
+      es: {
+        distance: 'Distancia', elevation: 'Altitud', slope: 'Pendiente',
+        ascent: 'D+', descent: 'D-', empty: 'Haga clic en una traza',
+        time: 'Tiempo', duration: 'Duración',
+        durationUnits: { s: 'seg', m: 'min', h: 'h', d: 'd' },
+        zoomStart: 'Definir el inicio (A)', zoomEnd: 'Definir el final (B)', zoomAll: 'Ver todo',
+        zoomBack: 'Volver al nivel anterior',
+        exportPng: 'Exportar como PNG',
+        collapse: 'Contraer el perfil', expand: 'Desplegar el perfil',
+        loading: 'Cargando el perfil de elevación'
+      }
+    };
+
     const DEFAULTS = {
       immersion: 'docked',
       position: 'bottom',
@@ -77,6 +124,8 @@
       maxClasses: 8,                // maximum number of slope classes (colours + legend)
       xTicks: null,
       yTicks: null,
+      verticalScale: 'auto',        // 'auto' : le profil remplit la hauteur ;
+                                    // un nombre : mètres par centimètre physique
       show: 'click',
       collapsable: true,
       collapsed: false,
@@ -86,22 +135,23 @@
       responsive: true,             // adapts width/placement, mobile included
       mobileBreakpoint: 640,        // <= screen width -> mobile mode (100% width, top/bottom)
       zoom: false,                  // start/end buttons cropping map + profile to A..B
+      zoomLevels: 3,                // niveaux de recadrage imbriqués (1 = l'ancien niveau unique)
+      exportPng: false,             // toolbar button exporting the panel as a PNG
       ignoreStops: true,            // duration = moving time (stops excluded)
       stopSpeed: 0.5,               // stop threshold in m/s (~1.8 km/h)
       tooltipItems: ['distance', 'elevation'],
       headerItems: ['distance', 'ascent', 'descent', 'minmax'],
       titleProperty: 'name',
       titleLink: null,
-      labels: {
-        distance: 'Distance', elevation: 'Altitude', slope: 'Pente',
-        ascent: 'D+', descent: 'D-', empty: 'Cliquez un tracé',
-        time: 'Temps', duration: 'Durée',
-        durationUnits: { s: 'sec', m: 'min', h: 'h', d: 'j' },
-        zoomStart: 'Définir le début (A)', zoomEnd: 'Définir la fin (B)', zoomAll: 'Tout voir',
-        loading: 'Chargement du profil altimétrique'
-      }
+      lang: 'en',                   // 'en' | 'fr' | 'es' : jeu de libellés livré
+      labels: {}                    // surcharges clé à clé, appliquées par-dessus la langue
     };
 
+    /** Libellés de la langue [lang], corrigés par les surcharges [over]. */
+    function resolveLabels(lang, over) {
+      return deepMerge(LOCALES[lang] || LOCALES.en, over || null);
+    }
+
     // ----- helpers ---------------------------------------------------------
     function deepMerge(base, over) {
       const out = {};
@@ -203,15 +253,21 @@
     const ICON_EXPAND = '<svg viewBox="0 0 24 24"><path d="M3 19l5-7 4 4 4-6 5 9z" fill="currentColor" opacity=".85"/></svg>';
     const ICON_A = '<svg viewBox="0 0 24 24"><path d="M7 5v14M11 12h8m0 0-3-3m3 3-3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
     const ICON_B = '<svg viewBox="0 0 24 24"><path d="M17 5v14M13 12H5m0 0 3-3m-3 3 3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+    const ICON_PNG = '<svg viewBox="0 0 24 24"><path d="M12 4v10m0 0 4-4m-4 4-4-4M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+    const ICON_BACK = '<svg viewBox="0 0 24 24"><path d="M10 6 4 12l6 6M4 12h10a6 6 0 0 1 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
     const ICON_ALL = '<svg viewBox="0 0 24 24"><path d="M4 12h16M4 12l4-4M4 12l4 4M20 12l-4-4M20 12l-4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
+    // Recherche du segment contenant une abscisse. Construit une fois : le survol la sollicite
+    // à chaque mouvement de souris.
+    const bisectX = d3__namespace.bisector((d) => d.x).left;
+
     // ----- digital elevation model (DEM) -----------------------------------
     /**
      * Known terrain-tile sources.
      *
      * A PNG tile carries elevation in its R/G/B channels; it is read on a canvas rather
      * than queried point by point from an API. That is what makes a 10 000-point track a
-     * handful of requests, with no key, no quota and no rate limit — where the free
+     * handful of requests, with no key, no quota and no rate limit, where the free
      * elevation APIs cap out at 100 or 200 points per call.
      *
      * Attribution is not automatic: the library does not own the map. It is up to the
@@ -225,17 +281,335 @@
         encoding: 'terrarium',
         maxZoom: 14,
         attributions: 'Elevation: <a href="https://registry.opendata.aws/terrain-tiles/">Terrain Tiles</a> (AWS Open Data)'
+      },
+      /**
+       * IGN Géoplateforme, serving the RGE ALTI over France and its overseas territories.
+       *
+       * A point API rather than tiles, hence its own sampler: it answers 200 points per
+       * request and announces one request per second, so a 10 000 point track takes about
+       * fifty calls spread over as many seconds. In exchange it is metre-accurate where the
+       * world models are at ninety.
+       *
+       * **No key is required** on the public endpoint - verified against the live service.
+       * `apiKey` exists for a deployment that does demand one; it is appended as a query
+       * parameter, named by `apiKeyParam`.
+       *
+       * Outside its coverage the service does not error: it answers OUT_OF_COVERAGE for the
+       * point. No border is coded here - one asks, and it says itself where it does not know.
+       */
+      ign: {
+        api: 'ign',
+        url: 'https://data.geopf.fr/altimetrie/1.0/calcul/alti/rest/elevation.json',
+        resource: 'ign_rge_alti_wld',
+        batch: 200,            // more fits, but the URL grows ~20 bytes a point and hits 414
+        minInterval: 1100,     // ms between calls; the service announces 1 req/s
+        attributions: 'Elevation: <a href="https://geoservices.ign.fr/rgealti">RGE ALTI</a> (IGN)'
       }
     };
 
+    /** Value the IGN service returns where it holds no measurement. */
+    const IGN_NO_DATA = -99999;
+
+    /**
+     * Request URL for one batch, in the order given: the response returns the elevations in
+     * the same one.
+     *
+     * `zonly=true` cuts the response down to the elevations alone, without echoing the
+     * coordinates - a third of the weight for the same information. Coordinates rounded to
+     * the millionth of a degree, about ten centimetres: beyond that one only adds digits to
+     * the URL.
+     */
+    function ignUrl(cfg, pts) {
+      const f = (v) => v.toFixed(6);
+      const sep = cfg.url.indexOf('?') >= 0 ? '&' : '?';
+      let u = cfg.url + sep + 'resource=' + encodeURIComponent(cfg.resource) +
+        '&delimiter=|&zonly=true' +
+        '&lon=' + pts.map((p) => f(p[0])).join('|') +
+        '&lat=' + pts.map((p) => f(p[1])).join('|');
+      if (cfg.apiKey) u += '&' + (cfg.apiKeyParam || 'apikey') + '=' + encodeURIComponent(cfg.apiKey);
+      return u;
+    }
+
+    /**
+     * Sampler for the IGN service: batches, paces, and maps out-of-coverage to null.
+     *
+     * A batch whose response does not carry exactly as many elevations as points were asked
+     * for fails the whole fill. Elevations one can no longer map to their points are worse
+     * than absent ones: they would land on the wrong places, silently.
+     */
+    function ignSampler(cfg) {
+      const size = Math.max(1, cfg.batch || 200);
+      const gap = cfg.minInterval || 0;
+      return (lonlats) => {
+        const out = [];
+        let last = 0;
+        const step = (i) => {
+          if (i >= lonlats.length) return Promise.resolve(out);
+          const chunk = lonlats.slice(i, i + size);
+          const wait = Math.max(0, gap - (Date.now() - last));
+          return new Promise((r) => setTimeout(r, wait))
+            .then(() => { last = Date.now(); return fetch(ignUrl(cfg, chunk)); })
+            .then((r) => (r && r.ok) ? r.json() : null)
+            .then((body) => {
+              const z = body && body.elevations;
+              if (!Array.isArray(z) || z.length !== chunk.length) return null;
+              for (const v of z) out.push((v == null || v <= IGN_NO_DATA) ? null : v);
+              return step(i + size);
+            });
+        };
+        return step(0);
+      };
+    }
+
     const DEM_DEFAULTS = { source: 'terrarium', zoom: 'auto', maxZoom: 14, maxTiles: 32, concurrency: 6, tileSize: 256 };
 
-    /** RGB → metres decoders, one per encoding convention. */
+    /**
+     * RGB to metres decoders, one per encoding convention.
+     *
+     * `encoding` also takes a function `(r, g, b, a) => metres`, for a tile set that packs
+     * elevation its own way. Return null where the pixel carries no measurement: the fill is
+     * abandoned rather than guessed.
+     *
+     * A GeoServer greyscale DEM is NOT decoded here. What a WMS returns is a rendered image,
+     * stretched and quantised by its style, not the coverage values; reading it back would
+     * be reading the rendering. Those go through `featureInfo`, which asks the server for the
+     * band value itself (see demConfig).
+     */
     const DEM_DECODERS = {
       terrarium: (r, g, b) => (r * 256 + g + b / 256) - 32768,
       mapbox: (r, g, b) => -1e4 + (r * 65536 + g * 256 + b) * 0.1
     };
 
+    /** Half the Web Mercator world, in metres: the bound of EPSG:3857. */
+    const MERC_HALF = 20037508.342789244;
+
+    /** Extent of an XYZ tile in EPSG:3857, for the WMS requests built below. */
+    function tileExtent(z, x, y) {
+      const span = 2 * MERC_HALF / Math.pow(2, z);
+      const minX = -MERC_HALF + x * span, maxY = MERC_HALF - y * span;
+      return [minX, maxY - span, minX + span, maxY];
+    }
+
+    function query(base, params) {
+      const sep = base.indexOf('?') >= 0 ? '&' : '?';
+      return base.replace(/[?&]$/, '') + sep +
+        Object.keys(params).map((k) => k + '=' + encodeURIComponent(params[k])).join('&');
+    }
+
+    /**
+     * WMS GetMap URL covering one XYZ tile, so a WMS behaves like any other tile source.
+     *
+     * The axis-order trap: WMS 1.3.0 names the reference system `CRS`, 1.1.1 names it `SRS`,
+     * and sending the wrong one gets the request rejected or silently mis-georeferenced.
+     * The version actually in force decides, after the caller's params are merged in.
+     */
+    function wmsTileUrl(w, z, x, y, tileSize) {
+      const p = Object.assign({
+        SERVICE: 'WMS', REQUEST: 'GetMap', VERSION: '1.3.0', FORMAT: 'image/png',
+        TRANSPARENT: 'false', STYLES: ''
+      }, w.params || {});
+      const key = String(p.VERSION).indexOf('1.1') === 0 ? 'SRS' : 'CRS';
+      delete p.SRS; delete p.CRS;
+      p[key] = w.projection || 'EPSG:3857';
+      p.LAYERS = w.layers;
+      p.WIDTH = tileSize; p.HEIGHT = tileSize;
+      p.BBOX = tileExtent(z, x, y).join(',');
+      return query(w.url, p);
+    }
+
+    /**
+     * Where a tile comes from: an OpenLayers source, a WMS, or an XYZ template.
+     *
+     * Handing an `ol/source/TileImage` (XYZ, TileWMS, or any subclass) delegates URL building
+     * to OpenLayers itself, which already knows that source's quirks - subdomains, custom
+     * params, tile grid. Cheaper and safer than reimplementing each one here.
+     */
+    function tileUrlFn(cfg) {
+      const src = cfg.olSource;
+      if (src && typeof src.getTileUrlFunction === 'function') {
+        const fn = src.getTileUrlFunction();
+        const proj = proj_js.get('EPSG:3857');
+        return (z, x, y) => fn([z, x, y], 1, proj);
+      }
+      if (cfg.wms) return (z, x, y) => wmsTileUrl(cfg.wms, z, x, y, cfg.tileSize);
+      return (z, x, y) => cfg.url.replace('{z}', z).replace('{x}', x).replace('{y}', y);
+    }
+
+    /**
+     * Values of one DataTile, or null if it never arrived.
+     *
+     * A DataTile carries no URL: it is loaded by the source itself and its values are read
+     * back with getData(). The state has to be watched rather than awaited - OpenLayers
+     * announces it through a `change` event, not a promise.
+     */
+    function loadDataTile(tile) {
+      return new Promise((resolve) => {
+        const settle = () => {
+          const st = tile.getState();
+          if (st === TileState.LOADED) { resolve(tile.getData ? tile.getData() : null); return true; }
+          if (st === TileState.ERROR || st === TileState.EMPTY) { resolve(null); return true; }
+          return false;
+        };
+        if (settle()) return;
+        const onChange = () => { if (settle()) tile.removeEventListener('change', onChange); };
+        tile.addEventListener('change', onChange);
+        if (tile.load) tile.load();
+      });
+    }
+
+    /**
+     * Sampler for an `ol/source/DataTile` - `ol/source/GeoTIFF` above all.
+     *
+     * Its own path because such a source shares nothing with the XYZ one: no URL, no Web
+     * Mercator, no 256 pixel tiles. A GeoTIFF keeps **its own projection and its own tile
+     * grid**, both only known once `getView()` has resolved, and its values are real numbers
+     * rather than colours - so nothing here goes through a decoder.
+     *
+     * Positions are held in grid pixels, as with the XYZ tiles and for the same reason: the
+     * four neighbours of a point straddle two tiles as soon as it runs along an edge.
+     *
+     * `normalize: false` matters on the source, otherwise OpenLayers rescales the values to
+     * 0..1 and the profile comes out in fractions of nothing.
+     */
+    function dataTileSampler(cfg) {
+      const src = cfg.olSource;
+      const band = cfg.band || 0;
+      return (lonlats) => {
+        // getView() is only awaited when the grid is not known yet - which is the GeoTIFF
+        // case, where it settles once the metadata has been read. On a plain DataTile that
+        // promise never settles at all, and awaiting it unconditionally hangs the fill.
+        const known = src.getTileGrid && src.getTileGrid();
+        const ready = known ? Promise.resolve(null) : Promise.resolve(src.getView ? src.getView() : null);
+        return ready.then((view) => {
+        const grid = known || (src.getTileGrid && src.getTileGrid()) || (view && view.tileGrid);
+        if (!grid) return null;
+        const proj = proj_js.get((view && view.projection) || (src.getProjection && src.getProjection()) || 'EPSG:3857');
+        const zs = grid.getResolutions ? grid.getResolutions().length - 1 : 0;
+        const bands = src.bandCount || 1;
+        const coords = lonlats.map((ll) => proj_js.transform([ll[0], ll[1]], 'EPSG:4326', proj));
+
+        // Finest level whose tile count stays within maxTiles, as for the XYZ tiles: it is
+        // the tiling that widens with the track, not the model that degrades.
+        // Pixel bounds of the coverage, when it declares an extent. A point inside the raster
+        // but within half a pixel of its edge lands on a neighbour that does not exist: its
+        // tile would come back empty and the all-or-nothing rule would drop the whole track.
+        // Half a pixel of tolerance at the borders, as on any regular grid.
+        const ext = (grid.getExtent && grid.getExtent()) || (view && view.extent) || null;
+        const plan = (z) => {
+          const res = grid.getResolution(z), origin = grid.getOrigin(z);
+          let ts = grid.getTileSize(z); ts = Array.isArray(ts) ? ts : [ts, ts];
+          const cols = ext ? Math.round((ext[2] - ext[0]) / res) : Infinity;
+          const rows = ext ? Math.round((ext[3] - ext[1]) / res) : Infinity;
+          const clampI = (i) => Math.min(cols - 1, Math.max(0, i));
+          const clampJ = (j) => Math.min(rows - 1, Math.max(0, j));
+          const need = new Map();
+          const at = coords.map((c) => {
+            const px = (c[0] - origin[0]) / res - 0.5, py = (origin[1] - c[1]) / res - 0.5;
+            const i0 = clampI(Math.floor(px)), j0 = clampJ(Math.floor(py));
+            for (let di = 0; di < 2; di++) for (let dj = 0; dj < 2; dj++) {
+              const tx = Math.floor(clampI(i0 + di) / ts[0]), ty = Math.floor(clampJ(j0 + dj) / ts[1]);
+              need.set(tx + '/' + ty, [tx, ty]);
+            }
+            // Interpolation fractions clamped too: a point beyond the last pixel centre keeps
+            // that pixel's value rather than extrapolating past the edge of the data.
+            return { i0, j0, tx: Math.min(1, Math.max(0, px - i0)), ty: Math.min(1, Math.max(0, py - j0)), clampI, clampJ };
+          });
+          return { res, origin, ts, need, at, clampI, clampJ };
+        };
+        let z = zs, p = plan(z);
+        while (z > 0 && p.need.size > cfg.maxTiles) { z--; p = plan(z); }
+        if (p.need.size > cfg.maxTiles) return null;
+
+        const keys = Array.from(p.need.keys());
+        return Promise.all(keys.map((k) => {
+          const t = p.need.get(k);
+          return loadDataTile(src.getTile(z, t[0], t[1], 1, proj)).then((d) => [k, d]);
+        })).then((pairs) => {
+          const tiles = new Map(pairs);
+          const value = (i, j) => {
+            const tx = Math.floor(p.clampI(i) / p.ts[0]), ty = Math.floor(p.clampJ(j) / p.ts[1]);
+            i = p.clampI(i); j = p.clampJ(j);
+            const d = tiles.get(tx + '/' + ty);
+            if (!d) return null;
+            const col = i - tx * p.ts[0], row = j - ty * p.ts[1];
+            const v = d[(row * p.ts[0] + col) * bands + band];
+            return (v == null || !isFinite(v)) ? null : v;
+          };
+          return p.at.map((n) => {
+            const a = value(n.i0, n.j0), b = value(n.i0 + 1, n.j0);
+            const c = value(n.i0, n.j0 + 1), e = value(n.i0 + 1, n.j0 + 1);
+            if (a == null || b == null || c == null || e == null) return null;
+            const north = a + (b - a) * n.tx, south = c + (e - c) * n.tx;
+            return north + (south - north) * n.ty;
+          });
+        });
+        });
+      };
+    }
+
+    /**
+     * WMS GetFeatureInfo sampler: one request per point, for a coverage served as a rendered
+     * greyscale that cannot be decoded from its pixels.
+     *
+     * **It is slow**, unavoidably: a thousand-point track is a thousand round trips, where a
+     * tile source needs a handful. Worth it only when nothing else can reach the data - and
+     * `concurrency` is what keeps it bearable.
+     */
+    function featureInfoSampler(cfg) {
+      const fi = cfg.featureInfo;
+      const lanes = Math.max(1, cfg.concurrency || 6);
+      return (lonlats) => {
+        const out = new Array(lonlats.length);
+        let next = 0, broken = false;
+        const one = () => {
+          if (broken || next >= lonlats.length) return Promise.resolve();
+          const i = next++;
+          return fetch(featureInfoUrl(fi, lonlats[i]))
+            .then((r) => (r && r.ok) ? r.json() : null)
+            .then((body) => { out[i] = bandValue(body, fi.property); return one(); })
+            .catch(() => { broken = true; });
+        };
+        const running = [];
+        for (let i = 0; i < Math.min(lanes, lonlats.length); i++) running.push(one());
+        return Promise.all(running).then(() => broken ? null : out);
+      };
+    }
+
+    /** GetFeatureInfo URL for one point: a one-pixel image centred on it. */
+    function featureInfoUrl(fi, ll) {
+      const c = proj_js.fromLonLat([ll[0], ll[1]]);
+      const d = fi.resolution || 1;                       // half-size of the box, in metres
+      const p = Object.assign({
+        SERVICE: 'WMS', REQUEST: 'GetFeatureInfo', VERSION: '1.3.0',
+        INFO_FORMAT: 'application/json', STYLES: '', FEATURE_COUNT: 1
+      }, fi.params || {});
+      const key = String(p.VERSION).indexOf('1.1') === 0 ? 'SRS' : 'CRS';
+      delete p.SRS; delete p.CRS;
+      p[key] = fi.projection || 'EPSG:3857';
+      p.LAYERS = fi.layers;
+      p.QUERY_LAYERS = fi.queryLayers || fi.layers;
+      p.WIDTH = 1; p.HEIGHT = 1; p.I = 0; p.J = 0; p.X = 0; p.Y = 0;   // I/J is 1.3.0, X/Y is 1.1.1
+      p.BBOX = [c[0] - d, c[1] - d, c[0] + d, c[1] + d].join(',');
+      return query(fi.url, p);
+    }
+
+    /**
+     * Band value in a GetFeatureInfo response.
+     *
+     * The band's property name is not standard - GeoServer calls it GRAY_INDEX for a
+     * single-band coverage, but a styled or renamed layer answers otherwise. Without an
+     * explicit `property` the first finite number wins, which is right whenever the coverage
+     * carries one band, and is why `property` exists for when it does not.
+     */
+    function bandValue(body, property) {
+      const f = body && body.features && body.features[0];
+      const props = f && f.properties;
+      if (!props) return null;
+      if (property) { const v = Number(props[property]); return isFinite(v) ? v : null; }
+      for (const k of Object.keys(props)) { const v = Number(props[k]); if (props[k] !== null && props[k] !== '' && isFinite(v)) return v; }
+      return null;
+    }
+
     /** Web Mercator pixel coordinates at zoom `z`, origin at the top-left corner of the world. */
     function worldPixel(lon, lat, z, tileSize) {
       const n = tileSize * Math.pow(2, z);
@@ -255,7 +629,9 @@
       /** @param {Object} cfg `url`, `encoding`, `tileSize`, `concurrency`. */
       constructor(cfg) {
         this.cfg = cfg;
-        this.decode = DEM_DECODERS[cfg.encoding] || DEM_DECODERS.terrarium;
+        this.decode = (typeof cfg.encoding === 'function') ? cfg.encoding
+          : (DEM_DECODERS[cfg.encoding] || DEM_DECODERS.terrarium);
+        this.tileUrl = tileUrlFn(cfg);
         this.tiles = new Map();          // "z/x/y" -> RGBA pixels, or null if the tile was lost
       }
 
@@ -287,7 +663,8 @@
         const data = this.tiles.get(r.key);
         if (!data) return null;
         const o = ((r.jj % ts) * ts + (r.ii % ts)) * 4;
-        return this.decode(data[o], data[o + 1], data[o + 2]);
+        const v = this.decode(data[o], data[o + 1], data[o + 2], data[o + 3]);
+        return (v == null || !isFinite(v)) ? null : v;
       }
 
       /**
@@ -296,7 +673,7 @@
        *
        * Bilinear rather than "the pixel containing the point": on a 30 or 90 m model, taking
        * the pixel value makes the profile advance in stairs, and every stair counts as a
-       * climb then a descent in the ascent total. The interpolation invents no relief — it
+       * climb then a descent in the ascent total. The interpolation invents no relief: it
        * renders the same surface, without the steps of the sampling grid.
        */
       sample(lon, lat, z) {
@@ -321,7 +698,7 @@
       /** Pixels of one tile, or null if it could not be read. */
       _fetch(key) {
         const parts = key.split('/');
-        const url = this.cfg.url.replace('{z}', parts[0]).replace('{x}', parts[1]).replace('{y}', parts[2]);
+        const url = this.tileUrl(+parts[0], +parts[1], +parts[2]);
         return new Promise((resolve) => {
           const img = new Image();
           // Without this attribute the canvas is tainted and getImageData throws: the tile
@@ -363,13 +740,44 @@
       }
     }
 
-    /** The `dem` option (true | source name | object) → a full configuration, or null. */
+    /**
+     * The `dem` option (true | source name | sampling function | object) into
+     * a full configuration, or null.
+     *
+     * A `sample` function short-circuits the tile machinery entirely: the application
+     * answers with the elevations itself, from wherever it can reach them - a GeoServer
+     * WCS coverage, a GeoTIFF decoded with geotiff.js, a national elevation API. Only the
+     * transport is delegated; the control keeps the sequencing, the all-or-nothing rule,
+     * the spinner and the `demload` event, which is where the subtle parts live.
+     *
+     * That extension point rather than a WMS/WCS/GeoTIFF mode per protocol: reading a
+     * GeoTIFF means a full decoder, and this library has no runtime dependency to spend
+     * on one that most users would never load.
+     */
     function demConfig(opt) {
       if (!opt) return null;
+      if (typeof opt === 'function') return Object.assign({}, DEM_DEFAULTS, { sample: opt });
       const raw = (opt === true || typeof opt === 'string') ? { source: opt === true ? 'terrarium' : opt } : Object.assign({}, opt);
-      const preset = DEM_PRESETS[raw.source] || (raw.url ? {} : DEM_PRESETS.terrarium);
+      if (typeof raw.sample === 'function') return Object.assign({}, DEM_DEFAULTS, raw);
+      // A point-query source: no tile grid, no pixel decoding.
+      if (raw.featureInfo) {
+        const fiCfg = Object.assign({}, DEM_DEFAULTS, raw);
+        fiCfg.sample = featureInfoSampler(fiCfg);
+        return fiCfg;
+      }
+      // An ol/source/DataTile (GeoTIFF above all) carries values, not URLs: its own path.
+      if (raw.olSource && typeof raw.olSource.getTileUrlFunction !== 'function' &&
+          typeof raw.olSource.getTile === 'function') {
+        const dtCfg = Object.assign({}, DEM_DEFAULTS, raw);
+        dtCfg.sample = dataTileSampler(dtCfg);
+        return dtCfg;
+      }
+      // Tiles: an OpenLayers source or a WMS both stand in for the url template.
+      const hasTiles = raw.url || raw.wms || raw.olSource;
+      const preset = DEM_PRESETS[raw.source] || (hasTiles ? {} : DEM_PRESETS.terrarium);
       const cfg = Object.assign({}, DEM_DEFAULTS, preset, raw);
-      return cfg.url ? cfg : null;
+      if (cfg.api === 'ign') { cfg.sample = ignSampler(cfg); return cfg; }   // a point API
+      return (cfg.url || cfg.wms || cfg.olSource) ? cfg : null;
     }
 
     /**
@@ -403,12 +811,19 @@
      * @property {boolean} [slope=false] Split the profile into slope-class colored portions.
      * @property {number} [slopeClassSize=2.5] Slope class width, in percent.
      * @property {number} [maxClasses=8] Maximum number of slope classes (colors + legend).
-     * @property {?string[]} [slopeColors=null] `null` = blue→red ramp; otherwise an interpolated color array.
+     * @property {?string[]} [slopeColors=null] `null` = blue-to-red ramp; otherwise an interpolated color array.
      * @property {boolean} [slopeSeparators=true] Vertical separator at each slope-class change.
      * @property {boolean} [slopeLegend=true] Color legend under the title.
      * @property {number} [smoothing=0] Elevation smoothing window, in METERS (0 = none).
      * @property {?number} [xTicks=null] X axis ticks (null = auto from width).
      * @property {?number} [yTicks=null] Y axis ticks (null = auto from height).
+     * @property {('auto'|number)} [verticalScale='auto'] `'auto'`: the profile fills the
+     *   height, which is legible but changes scale from one track to the next, so a 2 % ramp
+     *   looks like a wall and two profiles cannot be compared. A number fixes the metres
+     *   covered per physical centimetre. It is a **floor**, not a cage: a track whose range
+     *   exceeds what the height can show would spill out of the frame, which is worse than
+     *   losing comparability: the scale then widens silently, nothing being drawn on the
+     *   chart to say so.
      * @property {'click'|'mouseover'} [show='click'] How a track is selected on the map.
      * @property {boolean} [hideOnMapClick=true] Click on empty map hides the profile.
      * @property {boolean} [collapsable=true] Show the collapse/expand button.
@@ -418,15 +833,32 @@
      * @property {boolean} [responsive=true] Adapt width/placement; mobile included.
      * @property {number} [mobileBreakpoint=640] Below this width: mobile mode (100% width, top/bottom only).
      * @property {boolean} [zoom=false] A/B buttons to crop map + profile to a sub-range.
+     * @property {number} [zoomLevels=3] Nested crops allowed: a crop can itself be cropped,
+     *   down to this depth. `1` restores the former single level. A "back" button appears
+     *   from the second level; "show all" empties the stack whatever the depth.
+     * @property {boolean} [exportPng=false] Toolbar button exporting the whole panel as a PNG.
      * @property {boolean} [ignoreStops=true] When computing time, ignore stopped segments (moving time).
      * @property {number} [stopSpeed=0.5] Speed threshold (m/s) below which a segment counts as a stop.
      * @property {Array<'distance'|'elevation'|'slope'|'time'>} [tooltipItems=['distance','elevation']] Tooltip content (`'time'` = elapsed time at the cursor, if the track has time data).
      * @property {Array<string|{property:string,label?:string,asLink?:boolean,linkText?:string}>} [headerItems] Header content (string tokens: distance, ascent, descent, min, max, minmax, `'duration'` = total elapsed time).
+     * @property {('en'|'fr'|'es')} [lang='en'] Language of the shipped labels. An unknown
+     *   code falls back to English rather than leaving keys empty.
+     * @property {Object} [labels={}] Per-key overrides applied on top of `lang`. They survive
+     *   a later language change, so a corrected key stays corrected.
      * @property {string} [titleProperty='name'] Feature property used as the title.
-     * @property {?string} [titleLink=null] Feature property holding a URL → clickable title.
+     * @property {?string} [titleLink=null] Feature property holding a URL, making the title a link.
      * @property {number} [maxPoints=2000] Decimation for render/interaction (stats use full data).
      * @property {?import('ol/proj/Projection').default|string} [dataProjection=null] Projection of the feature coordinates.
-     * @property {?(boolean|string|Object)} [dem='terrarium'] Fill missing elevations from a terrain model. `'terrarium'` (default) or `true` = AWS Terrain Tiles (keyless); `null` disables it; or `{url,encoding:'terrarium'|'mapbox',zoom,maxZoom,maxTiles,tileSize,concurrency}`.
+     * @property {?(boolean|string|Function|Object)} [dem='terrarium'] Fill missing elevations
+     *   from a terrain model. Sources: `'terrarium'` (default) or `true` = AWS Terrain Tiles;
+     *   `'ign'` = IGN Géoplateforme RGE ALTI (France, keyless, `apiKey` optional);
+     *   `{url}` = XYZ template; `{wms:{url,layers,params}}` = WMS tiles;
+     *   `{olSource}` = any `ol/source/TileImage` (XYZ, TileWMS, and so on);
+     *   `{featureInfo:{url,layers,property}}` = WMS GetFeatureInfo, one request per point,
+     *   for a greyscale coverage that cannot be decoded from its pixels (slow);
+     *   a function or `{sample}` `(lonlats, ctx) => number[]|Promise<number[]>` to source them
+     *   yourself; `null` disables the whole thing.
+     *   Decoding: `encoding` is `'terrarium'`, `'mapbox'`, or a function `(r,g,b,a) => metres`.
      */
 
     /**
@@ -443,23 +875,37 @@
       constructor(opts) {
         const o = deepMerge(DEFAULTS, opts || {});
         if (POSITIONS.indexOf(o.position) === -1) o.position = 'bottom';
+        // Les surcharges sont gardées à part de leur résultat : changer de langue plus tard
+        // doit reprendre le jeu neuf de la nouvelle langue sans perdre ce que l'appelant a
+        // corrigé, ce que le seul jeu résolu ne permettrait plus de démêler.
+        const userLabels = o.labels;
+        o.labels = resolveLabels(o.lang, userLabels);
         const element = buildElement(o);
         super({ element, target: opts && opts.target });
 
         this.options = o;
+        this._userLabels = userLabels;
         this.slopeColors = o.slopeColors || null;
         this._feature = null;
         this._fullSamples = null; this._fullStats = null;
         this._samples = null; this._stats = null;
         this._marker = null;
         this._collapsed = !!o.collapsed;
-        this._cropMode = false; this._zoomA = null; this._zoomB = null; this._armed = null; this._fitRes = null;
+        this._crops = []; this._off = 0;
+        this._zoomA = null; this._zoomB = null; this._armed = null;
         this._demZ = null; this._demFor = null; this._demSeq = 0; this._demLoading = false;
         this._onResize = () => { if (this._feature && !this._collapsed) this._render(); };
         this._buildDom(element);
         element.style.display = 'none';
       }
 
+      /** Recadré dès qu'un niveau est empilé. Lu partout où le booléen l'était. */
+      get _cropMode() { return this._crops.length > 0; }
+      /** Profondeur courante ; 0 quand on voit la trace entière. */
+      get _cropDepth() { return this._crops.length; }
+      /** Niveaux imbriqués autorisés, au moins un. */
+      get _cropMax() { const n = this.options.zoomLevels; return n == null ? 3 : Math.max(1, n | 0); }
+
       // ---------- static helpers ----------------------------------------
       /**
        * Whether a feature has any Z (elevation) coordinate.
@@ -506,16 +952,19 @@
         };
         this._btnA = mkBtn('oep-a', ICON_A, o.labels.zoomStart, () => this._arm('A'));
         this._btnB = mkBtn('oep-b', ICON_B, o.labels.zoomEnd, () => this._arm('B'));
+        this._btnBack = mkBtn('oep-back', ICON_BACK, o.labels.zoomBack, () => this._popCrop());
         this._btnAll = mkBtn('oep-all', ICON_ALL, o.labels.zoomAll, () => this._exitZoom());
+        // Last of the toolbar, so it sits to the right of the zoom buttons.
+        this._btnPng = mkBtn('oep-png', ICON_PNG, o.labels.exportPng, () => this.exportPNG());
         header.appendChild(this._toolbar);
 
         const btn = document.createElement('button');
         btn.className = 'oep-toggle'; btn.type = 'button';
-        btn.setAttribute('aria-label', 'Réduire ou agrandir le profil');
         btn.innerHTML = this._collapsed ? ICON_EXPAND : ICON_COLLAPSE;
         btn.addEventListener('click', () => this.toggleCollapsed());
         header.appendChild(btn);
         this._toggleBtn = btn;
+        this._applyToggleLabel();
 
         this._legendEl = document.createElement('div'); this._legendEl.className = 'oep-legend'; this._legendEl.style.display = 'none';
         this._body = document.createElement('div'); this._body.className = 'oep-body';
@@ -526,6 +975,34 @@
         if (this._collapsed) root.classList.add('oep-collapsed');
       }
 
+      /**
+       * Reporte les libellés courants sur ce que le rendu ne réécrit pas.
+       *
+       * Les boutons et le bouton de repli sont construits une fois pour toutes ; sans cela,
+       * changer de langue ne toucherait que le graphe et laisserait les infobulles dans
+       * l'ancienne. Le titre n'est repris que faute de tracé : sinon il porte le nom du tracé,
+       * qui n'est pas un libellé de la librairie.
+       */
+      _applyLabels() {
+        const l = this.options.labels;
+        const set = (b, t) => { if (b && t) { b.title = t; b.setAttribute('aria-label', t); } };
+        set(this._btnA, l.zoomStart); set(this._btnB, l.zoomEnd);
+        set(this._btnBack, l.zoomBack); set(this._btnAll, l.zoomAll); set(this._btnPng, l.exportPng);
+        this._applyToggleLabel();
+        if (this._titleEl && !this._feature) this._titleEl.textContent = l.empty;
+      }
+      /**
+       * Le bouton de repli dit ce qu'il va faire, non ce qu'il montre.
+       *
+       * Un seul libellé pour les deux états ("réduire ou agrandir") laisse deviner lequel
+       * des deux le clic déclenche ; l'icône, elle, a déjà basculé. Le titre suit donc l'état,
+       * et l'infobulle visible dit la même chose que le nom accessible.
+       */
+      _applyToggleLabel() {
+        const l = this.options.labels, t = this._collapsed ? l.expand : l.collapse;
+        if (!this._toggleBtn || !t) return;
+        this._toggleBtn.title = t; this._toggleBtn.setAttribute('aria-label', t);
+      }
       _resolveColor() { const o = this.options; if (!o.color) return null; if (o.color === 'auto') return this._featureColor(); return o.color; }
       _featureColor() {
         const f = this._feature; if (!f) return null;
@@ -566,6 +1043,7 @@
         this._collapsed = (typeof force === 'boolean') ? force : !this._collapsed;
         this.element.classList.toggle('oep-collapsed', this._collapsed);
         this._toggleBtn.innerHTML = this._collapsed ? ICON_EXPAND : ICON_COLLAPSE;
+        this._applyToggleLabel();
         if (!this._collapsed && this._feature) this._render();
         this._adjustAttribution();
       }
@@ -630,19 +1108,32 @@
         });
 
         this._mapKeys = [];
-        this._mapKeys.push(map.on(o.show === 'mouseover' ? 'pointermove' : 'click', (evt) => {
-          const feature = lineAt(evt.pixel); if (feature && feature !== this._feature) this.setFeature(feature);
+        // `show`, `hideOnMapClick` et `followMap` sont relus à l'événement, non à
+        // l'abonnement. Les abonnements sont posés une fois pour toutes, ici ; les figer
+        // rendait ces trois options muettes dès que `setOptions` les changeait ensuite,
+        // basculer en survol ne faisait rien, sans que rien ne le dise. Les deux types
+        // d'événement sont donc écoutés en permanence, et c'est l'option qui tranche.
+        this._mapKeys.push(map.on('click', (evt) => {
+          const feature = lineAt(evt.pixel);
+          if (this.options.show !== 'mouseover' && feature && feature !== this._feature) this.setFeature(feature);
+          if (this.options.hideOnMapClick && !feature && this._feature) this.clear();
         }));
-        if (o.hideOnMapClick) this._mapKeys.push(map.on('click', (evt) => { if (!lineAt(evt.pixel) && this._feature) this.clear(); }));
-        if (o.followMap) this._mapKeys.push(map.on('pointermove', (evt) => {
-          if (!this._feature || this._collapsed) return;
+        this._mapKeys.push(map.on('pointermove', (evt) => {
+          if (this.options.show === 'mouseover') {
+            const feature = lineAt(evt.pixel);
+            if (feature && feature !== this._feature) this.setFeature(feature);
+          }
+          // Le survol coûte un `lineAt` par déplacement : rien n'est cherché tant qu'aucune
+          // des deux options ne le demande.
+          if (!this.options.followMap || !this._feature || this._collapsed) return;
           const cp = this._closestOnProfile(evt.coordinate); if (!cp) return;
           const px = map.getPixelFromCoordinate(cp); if (!px) return;
           if (Math.hypot(px[0] - evt.pixel[0], px[1] - evt.pixel[1]) < 14) this._focusByCoord(cp); else this._clearFocus();
         }));
         // leave the A/B crop when the map is zoomed out
         this._mapKeys.push(map.on('moveend', () => {
-          if (this._cropMode && this._fitRes && map.getView().getResolution() > this._fitRes * 1.25) this._exitZoom();
+          const cur = this._crops[this._crops.length - 1];
+          if (cur && cur.fitRes && map.getView().getResolution() > cur.fitRes * 1.25) this._popCrop();
         }));
         this._mapKeys.push(map.on('change:size', this._onResize));
       }
@@ -657,7 +1148,7 @@
        */
       setFeature(feature) {
         this._feature = feature || null;
-        this._cropMode = false; this._zoomA = null; this._zoomB = null; this._armed = null;
+        this._crops = []; this._off = 0; this._zoomA = null; this._zoomB = null; this._armed = null;
         if (!feature) { this._fullSamples = this._samples = null; this._demZ = this._demFor = null; this._clear(); return this; }
         this.element.style.display = '';
         this._compute();
@@ -691,7 +1182,14 @@
         if (patch && (patch.theme || 'color' in patch)) this._applyTheme();
         if (patch && ('transparency' in patch || 'transparencyLevel' in patch)) this._applyTransparency();
         if (patch && 'collapsable' in patch) this._applyCollapsable();
-        if (patch && 'zoom' in patch) this._updateZoomButtons();
+        if (patch && 'labels' in patch) this._userLabels = deepMerge(this._userLabels || {}, patch.labels);
+        // Recalculé depuis la langue, jamais empilé sur le jeu précédent : passer de 'fr' à
+        // 'es' ne doit rien laisser en français derrière lui, hors surcharges de l'appelant.
+        if (patch && ('lang' in patch || 'labels' in patch)) {
+          this.options.labels = resolveLabels(this.options.lang, this._userLabels);
+          this._applyLabels();
+        }
+        if (patch && ('zoom' in patch || 'exportPng' in patch)) this._updateZoomButtons();
         if (patch && typeof patch.width !== 'undefined' && typeof patch.width === 'number') this.options.width = patch.width;
         if (patch && 'dem' in patch) { this._demZ = null; this._demFor = null; }
         if (this._feature) { this._compute(); this._fillFromDem(this._feature); this._updateZoomButtons(); if (this._collapsed) this._renderTitle(); else this._render(); }
@@ -707,7 +1205,7 @@
        * and the ascent total becomes absurd. Better the flat profile we would have had
        * without the DEM.
        *
-       * Nothing is reported to the user on failure — the fill is a supplement, it has no
+       * Nothing is reported to the user on failure: the fill is a supplement, it has no
        * business breaking a display that succeeded without it. The `demload` event lets the
        * application know if it wants to.
        *
@@ -719,7 +1217,9 @@
         const cfg = demConfig(this.options.dem);
         if (!cfg || !feature || this._demFor === feature) return;
         if (ElevationProfile.featureHasZ(feature)) return;              // the track already carries its Z
-        if (typeof Image === 'undefined' || typeof document === 'undefined') return;
+        // Canvas decoding needs a browser; a `sample` function does not, and must stay
+        // usable where there is no DOM.
+        if (!cfg.sample && (typeof Image === 'undefined' || typeof document === 'undefined')) return;
 
         const geom = feature.getGeometry && feature.getGeometry();
         if (!geom) return;
@@ -732,28 +1232,67 @@
         // Sequence number: a track clicked while another is loading must win, otherwise the
         // slowest response would overwrite the profile on screen.
         const seq = ++this._demSeq;
+        this._demLoading = true;
+
+        // A misconfigured source must not take the profile down with it. _fillFromDem runs
+        // inside setFeature, so anything thrown here would reach the caller and leave no
+        // chart at all - where the whole point is that the fill is a supplement.
+        try {
+          this._startFill(cfg, seq, feature, lonlats, dataProj);
+        } catch (e) {
+          this._demDone(seq, feature, null, lonlats.length, null, 0);
+        }
+      }
+
+      /** @private */
+      _startFill(cfg, seq, feature, lonlats, dataProj) {
+        if (cfg.sample) {
+          // Wrapped in a promise chain so a function that throws synchronously fails the
+          // same way as one that rejects - a source that misbehaves must not leave the
+          // spinner turning forever.
+          Promise.resolve()
+            .then(() => cfg.sample(lonlats, { feature, projection: dataProj }))
+            .then((zs) => this._demDone(seq, feature, zs, lonlats.length, null, 0))
+            .catch(() => this._demDone(seq, feature, null, lonlats.length, null, 0));
+          return;
+        }
+
         const sampler = new DemSampler(cfg);
         const z = demZoomFor(sampler, lonlats, cfg);
-        this._demLoading = true;
         sampler.load(sampler.tilesFor(lonlats, z)).then((ok) => {
-          // A newer fill has taken over: it owns _demLoading and will clear it itself.
-          if (seq !== this._demSeq || this._feature !== feature) return;
           const zs = ok ? lonlats.map((ll) => sampler.sample(ll[0], ll[1], z)) : null;
-          const complete = !!zs && zs.every((v) => v != null && isFinite(v));
-          this._demLoading = false;
-          if (complete) { this._demZ = zs; this._demFor = feature; this._compute(); }
-          // Redrawn even on failure: the spinner has to give way to the flat profile.
-          this._updateZoomButtons();
-          if (!this._collapsed) this._render();
-          /**
-           * Fired once a terrain-model fill has completed (or failed).
-           * @event demload
-           * @property {boolean} ok Whether every point could be sampled.
-           * @property {number} zoom Tile zoom level used.
-           * @property {number} tiles Tiles fetched.
-           */
-          this.dispatchEvent({ type: 'demload', ok: complete, zoom: z, tiles: sampler.tiles.size });
-        });
+          this._demDone(seq, feature, zs, lonlats.length, z, sampler.tiles.size);
+        }).catch(() => this._demDone(seq, feature, null, lonlats.length, z, 0));
+      }
+
+      /**
+       * Outcome of a fill, whatever produced it: adopt the elevations, drop the spinner,
+       * redraw, announce.
+       *
+       * A result of the wrong length is refused outright rather than padded. Elevations one
+       * can no longer map to their points are worse than absent ones: they would land on the
+       * wrong places, and nothing downstream would notice.
+       *
+       * @fires demload
+       * @private
+       */
+      _demDone(seq, feature, zs, expected, zoom, tiles) {
+        // A newer fill has taken over: it owns _demLoading and will clear it itself.
+        if (seq !== this._demSeq || this._feature !== feature) return;
+        const usable = Array.isArray(zs) && zs.length === expected && zs.every((v) => v != null && isFinite(v));
+        this._demLoading = false;
+        if (usable) { this._demZ = zs; this._demFor = feature; this._compute(); }
+        // Redrawn even on failure: the spinner has to give way to the flat profile.
+        this._updateZoomButtons();
+        if (!this._collapsed) this._render();
+        /**
+         * Fired once a terrain-model fill has completed (or failed).
+         * @event demload
+         * @property {boolean} ok Whether every point could be sampled.
+         * @property {?number} zoom Tile zoom level used, `null` for a custom sampler.
+         * @property {number} tiles Tiles fetched, `0` for a custom sampler.
+         */
+        this.dispatchEvent({ type: 'demload', ok: usable, zoom, tiles });
       }
 
       // ---------- computation -------------------------------------------
@@ -796,7 +1335,60 @@
         this._addSlope(samples);
         this._fullSamples = samples;
         this._fullStats = this._statsOf(samples, true);
-        this._samples = samples; this._stats = this._fullStats;
+        // Un recalcul (option changée, altitudes arrivées du MNT) ne doit pas défaire le
+        // recadrage : la pile est rejouée sur les nouveaux échantillons. Pile vide, on
+        // retombe sur la trace entière, ce que faisait l'affectation directe d'avant.
+        this._applyCrops();
+      }
+      /**
+       * Pixels CSS d'un centimètre physique, mesurés plutôt que déduits.
+       *
+       * Le rapport nominal est de 96 px par pouce, soit 37,8 px par centimètre, mais le zoom
+       * du navigateur le déplace : mesurer un élément d'un centimètre suit ce zoom là où une
+       * constante mentirait. Non mémorisé - la mesure force un calcul de disposition, mais un
+       * rendu est rare et un cache se périmerait au premier Ctrl+molette.
+       */
+      _pxPerCm() {
+        try {
+          const temoin = document.createElement('div');
+          temoin.style.cssText = 'position:absolute;left:-9999px;top:0;width:1cm;height:1cm';
+          (this.element || document.body).appendChild(temoin);
+          const px = temoin.getBoundingClientRect().height;
+          temoin.remove();
+          if (px > 0) return px;
+        } catch (e) { /* document indisponible : on retombe sur la valeur nominale */ }
+        return 96 / 2.54;
+      }
+
+      /**
+       * Échelle verticale du graphe.
+       *
+       * En `'auto'`, le profil remplit la hauteur : c'est lisible, mais l'échelle change d'une
+       * trace à l'autre, si bien qu'une pente de 2 % y prend l'allure d'un mur et que deux
+       * profils ne se comparent pas. Un nombre fixe au contraire les mètres couverts par
+       * centimètre physique.
+       *
+       * La valeur demandée est un **plancher**, non un carcan : une trace dont l'amplitude
+       * dépasse ce que la hauteur peut montrer déborderait du cadre, ce qui est pire que de
+       * perdre la comparabilité. Le graphe n'en dit rien : l'échelle n'est pas une donnée de
+       * la trace et n'a pas à encombrer le dessin ; l'échelle réellement appliquée est
+       * seulement publiée dans `_vScale`, à qui veut la connaître.
+       *
+       * `nice()` n'est pas appliqué en échelle absolue : il arrondit le domaine vers
+       * l'extérieur, donc il fausserait le rapport qu'on vient de fixer.
+       */
+      _yScale(s, zpad, innerH) {
+        const o = this.options, bas = s.min - zpad, haut = s.max + zpad;
+        const vs = typeof o.verticalScale === 'number' ? o.verticalScale : 0;
+        if (!(vs > 0)) {
+          this._vScale = null;
+          return d3__namespace.scaleLinear().domain([bas, haut]).range([innerH, 0]).nice();
+        }
+        const cm = innerH / this._pxPerCm();            // hauteur du graphe, en centimètres
+        const etendue = Math.max(vs * cm, haut - bas);  // jamais moins qu'il n'en faut
+        const milieu = (bas + haut) / 2;
+        this._vScale = etendue / cm;                    // m/cm effectivement appliqués
+        return d3__namespace.scaleLinear().domain([milieu - etendue / 2, milieu + etendue / 2]).range([innerH, 0]);
       }
       _statsOf(samples, fromTotal) {
         let ascent = 0, descent = 0, zmin = Infinity, zmax = -Infinity, maxAbs = 0;
@@ -868,7 +1460,7 @@
       // 7 sec | 26 min | 1 h 48 min | 2 d 3 h (days + hours normalised)
       _fmtDuration(sec) {
         if (sec == null || !isFinite(sec)) return '';
-        const u = (this.options.labels && this.options.labels.durationUnits) || { s: 'sec', m: 'min', h: 'h', d: 'j' };
+        const u = (this.options.labels && this.options.labels.durationUnits) || LOCALES.en.durationUnits;
         sec = Math.max(0, Math.round(sec));
         if (sec < 60) return sec + ' ' + u.s;
         if (sec < 3600) return Math.round(sec / 60) + ' ' + u.m;
@@ -887,7 +1479,7 @@
        * Track title, and its optional link.
        *
        * Its own method because it is the only part of the header that stays visible once
-       * collapsed — the CSS hides the body, the stats, the legend and the toolbar. `_render`
+       * collapsed: the CSS hides the body, the stats, the legend and the toolbar. `_render`
        * is skipped while collapsed, so without a separate entry point the title would keep
        * naming the previous track after a change of feature.
        */
@@ -920,7 +1512,7 @@
             else if (it === 'descent') { html.push(`<span class="oep-down">${o.labels.descent} ${fmtElevation(s.descent, o.units)}</span>`); text.push(`${o.labels.descent} ${fmtElevation(s.descent, o.units)}`); }
             else if (it === 'min') { html.push(fmtElevation(s.min, o.units)); text.push(fmtElevation(s.min, o.units)); }
             else if (it === 'max') { html.push(fmtElevation(s.max, o.units)); text.push(fmtElevation(s.max, o.units)); }
-            else if (it === 'minmax') { const v = `${fmtElevation(s.min, o.units)}–${fmtElevation(s.max, o.units)}`; html.push(v); text.push(v); }
+            else if (it === 'minmax') { const v = `${fmtElevation(s.min, o.units)}-${fmtElevation(s.max, o.units)}`; html.push(v); text.push(v); }
             else if (it === 'duration') { if (s.duration != null) { const v = this._fmtDuration(s.duration); html.push(`<span class="oep-time">${esc(o.labels.duration)} ${v}</span>`); text.push(`${o.labels.duration} ${v}`); } }
           } else if (it && it.property) {
             const val = f.get && f.get(it.property); if (val == null || val === '') return;
@@ -937,7 +1529,7 @@
           const sc = this._slopeScale();
           for (let idx = 0; idx <= sc.maxIdx; idx++) {
             const color = sc.colorByIndex(idx);
-            const label = (sc.capped && idx === sc.maxIdx) ? `≥ ${idx * sc.classSize} %` : `${idx * sc.classSize}–${(idx + 1) * sc.classSize} %`;
+            const label = (sc.capped && idx === sc.maxIdx) ? `≥ ${idx * sc.classSize} %` : `${idx * sc.classSize}-${(idx + 1) * sc.classSize} %`;
             const item = document.createElement('span'); item.className = 'oep-leg-it';
             item.innerHTML = `<i class="oep-sw" style="background:${color}"></i>${label}`;
             this._legendEl.appendChild(item);
@@ -1000,7 +1592,7 @@
 
         const x = d3__namespace.scaleLinear().domain([0, s.distance]).range([0, innerW]);
         const zpad = (s.max - s.min) * 0.1 || 10;
-        const y = d3__namespace.scaleLinear().domain([s.min - zpad, s.max + zpad]).range([innerH, 0]).nice();
+        const y = this._yScale(s, zpad, innerH);
         this._x = x; this._y = y; this._dims = { innerW, innerH };
 
         if (o.grid) g.append('g').attr('class', 'oep-grid').call(d3__namespace.axisLeft(y).ticks(yTicks).tickSize(-innerW).tickFormat(''));
@@ -1033,7 +1625,7 @@
         g.append('g').attr('class', 'oep-axis oep-axis-y').call(d3__namespace.axisLeft(y).ticks(yTicks).tickFormat((d) => o.units === 'imperial' ? Math.round(d * 3.28084) : d));
 
         // A / B markers while a range is being picked
-        if (o.zoom && !this._cropMode) {
+        if (o.zoom && this._cropDepth < this._cropMax) {
           [['A', this._zoomA], ['B', this._zoomB]].forEach(([nm, val]) => {
             if (val == null) return;
             const px = x(val);
@@ -1048,61 +1640,264 @@
         const lbl = focus.append('g').attr('class', 'oep-focus-label'); lbl.append('rect').attr('class', 'oep-focus-bg'); lbl.append('text').attr('class', 'oep-focus-txt');
         this._focus = focus;
 
-        const bisect = d3__namespace.bisector((d) => d.x).left;
         const pick = (event) => { const mx = d3__namespace.pointer(event, g.node())[0]; return Math.max(0, Math.min(s.distance, x.invert(mx))); };
         const overlay = svg.append('rect').attr('class', 'oep-overlay').attr('x', ml).attr('y', mt).attr('width', innerW).attr('height', innerH);
         overlay.on('mousemove', (event) => {
-          const x0 = pick(event); const idx = bisect(data, x0, 1);
-          const d0 = data[idx - 1], d1 = data[idx] || d0; const d = (x0 - d0.x) > (d1.x - x0) ? d1 : d0;
+          const d = this._sampleAt(pick(event)); if (!d) return;
           this._setFocus(d); if (this._marker) this._marker.setPosition(d.coord);
         }).on('mouseout', () => this._clearFocus());
-        overlay.on('click', (event) => {
-          if (!this._armed || this._cropMode) return;
-          const x0 = pick(event);
-          if (this._armed === 'A') this._zoomA = x0; else this._zoomB = x0;
-          this._armed = null; this._updateZoomButtons();
-          if (this._zoomA != null && this._zoomB != null) this._applyZoom(); else this._render();
-        });
+        overlay.on('click', (event) => this._placeBound(pick(event)));
         if (this._armed) overlay.style('cursor', 'col-resize');
         this._adjustAttribution();
       }
 
+      // ---------- PNG export ---------------------------------------------
+      /**
+       * Properties frozen onto the exported clone.
+       *
+       * A serialized SVG carries no stylesheet: rules that live in the CSS file, and every
+       * `var(--oep-*)` they resolve, vanish the moment the markup leaves the document. The
+       * export would come out as black shapes on nothing. So the computed value of each
+       * painting property is written inline, node by node.
+       */
+      static get _EXPORT_PROPS() {
+        return ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-dasharray',
+          'stroke-linecap', 'stroke-linejoin', 'opacity', 'font-family', 'font-size',
+          'font-weight', 'text-anchor', 'shape-rendering'];
+      }
+
+      /** Copies the computed painting styles of `src` onto `dst`, recursively. */
+      _freezeStyles(src, dst) {
+        const props = ElevationProfile._EXPORT_PROPS;
+        const cs = getComputedStyle(src);
+        let inline = '';
+        for (const p of props) { const v = cs.getPropertyValue(p); if (v) inline += `${p}:${v};`; }
+        dst.setAttribute('style', inline);
+        const a = src.children, b = dst.children;
+        for (let i = 0; i < a.length && i < b.length; i++) this._freezeStyles(a[i], b[i]);
+      }
+
+      /**
+       * The whole panel as an SVG string: background, title, stats, legend, chart.
+       *
+       * Rebuilt rather than screenshotted. The header is HTML and the chart is SVG, and the
+       * only way to put HTML in an SVG is a `foreignObject`, which browsers refuse to
+       * rasterise consistently. Redrawing the two text lines as `<text>` is a handful of
+       * lines and works everywhere.
+       *
+       * The current-position indicator is dropped: it marks where the pointer happens to be,
+       * which means nothing once the image is saved.
+       */
+      _exportSvg() {
+        const chart = this._body.querySelector('svg');
+        if (!chart) return null;
+        const cs = getComputedStyle(this.element);
+        const bg = cs.getPropertyValue('--oep-bg').trim() || '#fff';
+        const fg = cs.getPropertyValue('--oep-text').trim() || '#222';
+        const font = cs.fontFamily || 'system-ui, sans-serif';
+        const W = +chart.getAttribute('width'), H = +chart.getAttribute('height');
+        const pad = 8, titleH = 20, statsH = this._statsEl.textContent ? 15 : 0;
+        const legend = (this._legendEl.style.display !== 'none') ? this._legendEl : null;
+        const legH = legend ? 18 : 0;
+        const top = pad + titleH + statsH + legH;
+
+        const clone = chart.cloneNode(true);
+        // The pointer indicator and the hit-test overlay have no place in a saved image.
+        clone.querySelectorAll('.oep-focus, .oep-overlay').forEach((n) => n.remove());
+        this._freezeStyles(chart, clone);
+        // width/height are kept: a nested <svg> without them fills the parent viewport, so
+        // the chart would be stretched over the header's height as well.
+
+        const esc2 = (t) => esc(String(t));
+        const parts = [];
+        parts.push(`<rect width="${W + 2 * pad}" height="${H + top + pad}" fill="${esc2(bg)}"/>`);
+        parts.push(`<text x="${pad}" y="${pad + 13}" style="font-family:${esc2(font)};font-size:13px;font-weight:600;fill:${esc2(fg)}">${esc2(this._titleEl.textContent)}</text>`);
+        if (statsH) parts.push(`<text x="${pad}" y="${pad + titleH + 10}" style="font-family:${esc2(font)};font-size:11px;fill:${esc2(fg)};opacity:.85">${esc2(this._statsEl.textContent)}</text>`);
+        if (legend) {
+          let x = pad;
+          const y = pad + titleH + statsH + 12;
+          for (const item of legend.querySelectorAll('.oep-leg-it')) {
+            const sw = item.querySelector('.oep-sw');
+            const color = sw ? getComputedStyle(sw).backgroundColor : 'none';
+            const label = item.textContent.trim();
+            parts.push(`<rect x="${x}" y="${y - 8}" width="10" height="10" fill="${esc2(color)}"/>`);
+            parts.push(`<text x="${x + 14}" y="${y}" style="font-family:${esc2(font)};font-size:10px;fill:${esc2(fg)}">${esc2(label)}</text>`);
+            x += 14 + label.length * 5.6 + 10;
+          }
+        }
+        parts.push(`<g transform="translate(${pad},${top})">${new XMLSerializer().serializeToString(clone)}</g>`);
+        return {
+          width: W + 2 * pad, height: H + top + pad,
+          svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${W + 2 * pad}" height="${H + top + pad}" ` +
+               `viewBox="0 0 ${W + 2 * pad} ${H + top + pad}">${parts.join('')}</svg>`
+        };
+      }
+
+      /**
+       * Export the whole panel - title, stats, legend and chart - as a PNG.
+       *
+       * Resolves with the Blob. Unless `download` is false, it also saves the file, which is
+       * what the toolbar button does.
+       *
+       * @param {{scale?:number, filename?:string, download?:boolean}} [opts]
+       *   `scale` defaults to the device pixel ratio, so the image is not soft on a retina
+       *   screen. `filename` defaults to the track title.
+       * @returns {Promise<Blob>}
+       */
+      exportPNG(opts) {
+        const o = opts || {};
+        const built = this._exportSvg();
+        if (!built) return Promise.reject(new Error('ol-elevation-profile: nothing to export'));
+        const scale = o.scale || (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+        return new Promise((resolve, reject) => {
+          const img = new Image();
+          img.onload = () => {
+            try {
+              const cv = document.createElement('canvas');
+              cv.width = Math.round(built.width * scale);
+              cv.height = Math.round(built.height * scale);
+              const ctx = cv.getContext('2d');
+              ctx.scale(scale, scale);
+              ctx.drawImage(img, 0, 0);
+              cv.toBlob((blob) => {
+                if (!blob) { reject(new Error('ol-elevation-profile: PNG encoding failed')); return; }
+                if (o.download !== false) this._save(blob, o.filename);
+                resolve(blob);
+              }, 'image/png');
+            } catch (e) { reject(e); }
+          };
+          img.onerror = () => reject(new Error('ol-elevation-profile: SVG could not be rasterised'));
+          // Encoded as a data URL rather than a blob: URL - a blob: source taints the canvas
+          // in some browsers, and toBlob would then throw a security error.
+          img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(built.svg);
+        });
+      }
+
+      /** @private */
+      _save(blob, filename) {
+        const name = filename || `${(this._titleEl.textContent || 'profile').replace(/[\\/:*?"<>|]+/g, '-').trim()}.png`;
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = name;
+        document.body.appendChild(a); a.click(); a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      }
+
       // ---------- zoom A/B ----------------------------------------------
       _arm(which) { this._armed = (this._armed === which) ? null : which; this._updateZoomButtons(); if (this._focus) this._render(); }
+      /**
+       * Pose la borne armée à l'abscisse [x0], puis arme l'autre tant qu'elle manque.
+       *
+       * Poser A n'a d'intérêt que pour poser B ensuite : enchaîner d'un clic sur l'autre
+       * évite l'aller-retour par la barre d'outils entre les deux. Les deux bornes réunies,
+       * le recadrage part et rien ne reste armé.
+       */
+      _placeBound(x0) {
+        if (!this._armed || this._cropDepth >= this._cropMax) return;
+        const autre = this._armed === 'A' ? 'B' : 'A';
+        if (this._armed === 'A') this._zoomA = x0; else this._zoomB = x0;
+        const complet = this._zoomA != null && this._zoomB != null;
+        this._armed = complet ? null : autre;
+        this._updateZoomButtons();
+        if (complet) this._pushCrop(this._zoomA, this._zoomB); else this._render();
+      }
       _updateZoomButtons() {
-        const show = !!this.options.zoom && !!this._feature;
-        this._toolbar.style.display = show ? '' : 'none';
-        const crop = this._cropMode;
-        this._btnA.style.display = show && !crop ? '' : 'none';
-        this._btnB.style.display = show && !crop ? '' : 'none';
-        this._btnAll.style.display = show && crop ? '' : 'none';
+        const o = this.options, has = !!this._feature;
+        const show = !!o.zoom && has;
+        const png = !!o.exportPng && has;
+        // The toolbar carries both: it stays visible as long as either has something to show.
+        this._toolbar.style.display = (show || png) ? '' : 'none';
+        this._btnPng.style.display = png ? '' : 'none';
+        const deep = this._cropDepth, peutDescendre = deep < this._cropMax;
+        this._btnA.style.display = show && peutDescendre ? '' : 'none';
+        this._btnB.style.display = show && peutDescendre ? '' : 'none';
+        // Au premier niveau, revenir et tout voir sont le même geste : seul "tout voir"
+        // paraît, ce qui laisse le niveau unique (zoomLevels: 1) exactement tel qu'il était.
+        this._btnBack.style.display = show && deep > 1 ? '' : 'none';
+        this._btnAll.style.display = show && deep > 0 ? '' : 'none';
         this._btnA.classList.toggle('armed', this._armed === 'A');
         this._btnB.classList.toggle('armed', this._armed === 'B');
       }
-      _applyZoom() {
-        const a = Math.min(this._zoomA, this._zoomB), b = Math.max(this._zoomA, this._zoomB);
+      /**
+       * Recadre sur le sommet de la pile : échantillons, statistiques, origine des abscisses.
+       *
+       * Les bornes empilées sont gardées en abscisse de la trace **entière**, jamais dans le
+       * repère du niveau courant : sinon chaque cran se lirait dans celui du précédent et
+       * l'erreur de rebasage se composerait de niveau en niveau. Rend les coordonnées
+       * cartographiques du niveau, dont le cadrage a besoin.
+       */
+      _applyCrops() {
+        if (!this._crops.length) {
+          this._off = 0; this._samples = this._fullSamples; this._stats = this._fullStats;
+          return null;
+        }
+        const { a, b } = this._crops[this._crops.length - 1];
         const raw = this._fullSamples.filter((p) => p.x >= a && p.x <= b);
-        if (raw.length < 2) return;
-        const off = raw[0].x;                       // A devient 0
-        const tOff = raw[0].t != null ? raw[0].t : 0;
-        const cropped = raw.map((p) => ({ x: p.x - off, z: p.z, coord: p.coord, slope: p.slope, t: (p.t != null ? p.t - tOff : null) }));
-        const coords = raw.map((p) => p.coord);
-        this._samples = cropped; this._stats = this._statsOf(cropped, false); this._cropMode = true;
-        this._updateZoomButtons(); this._render();
-        const map = this.getMap();
-        if (map) {
-          const ext = extent_js.boundingExtent(coords);
-          const view = map.getView();
-          try { this._fitRes = view.getResolutionForExtent(ext, map.getSize()); } catch (e) { this._fitRes = null; }
-          view.fit(ext, { padding: [40, 40, 40, 40], duration: 400 });
+        if (raw.length < 2) { this._crops.pop(); return this._applyCrops(); }
+        const off = raw[0].x, tOff = raw[0].t != null ? raw[0].t : 0;
+        this._off = off;
+        this._samples = raw.map((p) => ({ x: p.x - off, z: p.z, coord: p.coord, slope: p.slope, t: (p.t != null ? p.t - tOff : null) }));
+        this._stats = this._statsOf(this._samples, false);
+        return raw.map((p) => p.coord);
+      }
+
+      /** Cadre la carte sur un niveau, ou sur la trace entière si [coords] est nul. */
+      _fitMap(coords) {
+        const map = this.getMap(); if (!map) return null;
+        let ext = null;
+        if (coords && coords.length) ext = extent_js.boundingExtent(coords);
+        else if (this._feature) ext = this._feature.getGeometry().getExtent();
+        if (!ext) return null;
+        const view = map.getView();
+        let res = null;
+        try { res = view.getResolutionForExtent(ext, map.getSize()); } catch (e) { res = null; }
+        view.fit(ext, { padding: [40, 40, 40, 40], duration: 400 });
+        return res;
+      }
+
+      /** Empile un niveau. [a0] et [b0] sont lus dans le repère du niveau courant. */
+      _pushCrop(a0, b0) {
+        this._zoomA = null; this._zoomB = null; this._armed = null;
+        if (this._cropDepth >= this._cropMax) { this._updateZoomButtons(); this._render(); return; }
+        const a = this._off + Math.min(a0, b0), b = this._off + Math.max(a0, b0);
+        let n = 0;
+        for (let k = 0; k < this._fullSamples.length; k++) {
+          const px = this._fullSamples[k].x; if (px >= a && px <= b) n++;
         }
+        if (n < 2) { this._updateZoomButtons(); this._render(); return; }
+        this._crops.push({ a, b, fitRes: null });
+        const coords = this._applyCrops();
+        this._updateZoomButtons(); this._render();
+        const cur = this._crops[this._crops.length - 1];
+        if (cur) cur.fitRes = this._fitMap(coords);
       }
+
+      /**
+       * Recadre sur A..B déjà posés. Conservé : c'était le point d'entrée du niveau unique,
+       * et le supprimer casserait ce qui l'appelle sans rien apporter.
+       */
+      _applyZoom() {
+        if (this._zoomA == null || this._zoomB == null) return;
+        this._pushCrop(this._zoomA, this._zoomB);
+      }
+
+      /** Remonte d'un niveau. */
+      _popCrop() {
+        if (!this._crops.length) return;
+        this._crops.pop();
+        this._zoomA = null; this._zoomB = null; this._armed = null;
+        const coords = this._applyCrops();
+        this._updateZoomButtons(); if (!this._collapsed) this._render();
+        this._fitMap(coords);
+      }
+
+      /** Vide la pile d'un coup, quel que soit le nombre de niveaux. */
       _exitZoom() {
-        this._cropMode = false; this._zoomA = null; this._zoomB = null; this._armed = null; this._fitRes = null;
-        this._samples = this._fullSamples; this._stats = this._fullStats;
+        this._crops.length = 0;
+        this._zoomA = null; this._zoomB = null; this._armed = null;
+        this._applyCrops();
         this._updateZoomButtons(); if (!this._collapsed) this._render();
-        const map = this.getMap();
-        if (map && this._feature) map.getView().fit(this._feature.getGeometry().getExtent(), { padding: [40, 40, 40, 40], duration: 400 });
+        this._fitMap(null);
       }
 
       /**
@@ -1117,13 +1912,31 @@
         const g = this._feature && this._feature.getGeometry();
         if (!g) return null;
         if (!/Polygon/.test(g.getType())) return g.getClosestPoint(coordinate);
-        const data = this._fullSamples;
+        const hit = this._projectOn(this._fullSamples, coordinate);
+        return hit ? hit.coord : null;
+      }
+
+      /**
+       * Projeté d'une coordonnée sur la ligne brisée [data] : le point, et son abscisse
+       * curviligne dans le repère de [data].
+       *
+       * Retenir l'échantillon le plus proche ferait sauter le marqueur de sommet en sommet,
+       * l'écart entre deux points de trace étant souvent bien plus grand que le pas du
+       * pointeur. La projection sur les segments donne le point réellement visé.
+       */
+      _projectOn(data, coord) {
         if (!data || !data.length) return null;
+        if (data.length === 1) return { x: data[0].x, coord: data[0].coord.slice(0, 2) };
         let best = null, bd = Infinity;
-        for (const p of data) {
-          const dx = p.coord[0] - coordinate[0], dy = p.coord[1] - coordinate[1];
-          const dd = dx * dx + dy * dy;
-          if (dd < bd) { bd = dd; best = p.coord; }
+        for (let i = 1; i < data.length; i++) {
+          const a = data[i - 1].coord, b = data[i].coord;
+          const abx = b[0] - a[0], aby = b[1] - a[1], len2 = abx * abx + aby * aby;
+          // Segment dégénéré (deux points confondus) : le projeté est le point lui-même.
+          let r = len2 > 0 ? ((coord[0] - a[0]) * abx + (coord[1] - a[1]) * aby) / len2 : 0;
+          r = r < 0 ? 0 : (r > 1 ? 1 : r);
+          const px = a[0] + abx * r, py = a[1] + aby * r;
+          const dx = px - coord[0], dy = py - coord[1], dd = dx * dx + dy * dy;
+          if (dd < bd) { bd = dd; best = { x: data[i - 1].x + (data[i].x - data[i - 1].x) * r, coord: [px, py] }; }
         }
         return best;
       }
@@ -1153,11 +1966,42 @@
         else if (x(d.x) - bb.width / 2 < 0) t.attr('text-anchor', 'start');
         else t.attr('text-anchor', 'middle');
       }
+      /**
+       * Point du profil à une abscisse quelconque, interpolé entre les deux échantillons qui
+       * l'encadrent.
+       *
+       * Se caler sur l'échantillon le plus proche ferait avancer le curseur de sommet en
+       * sommet : sur un tracé peu dense, ou décimé par `maxPoints`, le saut est franc et le
+       * survol perd sa continuité. Les échantillons sont les points *mesurés*, non les seules
+       * positions que le curseur ait le droit d'occuper.
+       *
+       * La pente n'est pas interpolée : `_addSlope` la pose sur le segment qui précède chaque
+       * échantillon, elle est donc constante sur ce segment et vaut celle de son extrémité.
+       * Le temps l'est, mais seulement si les deux bornes en portent un.
+       */
+      _sampleAt(x0) {
+        const data = this._samples;
+        if (!data || !data.length) return null;
+        if (data.length === 1) return data[0];
+        const xa = data[0].x, xb = data[data.length - 1].x;
+        const xc = Math.max(xa, Math.min(xb, x0));
+        const i = Math.min(Math.max(bisectX(data, xc, 1), 1), data.length - 1);
+        const d0 = data[i - 1], d1 = data[i];
+        const span = d1.x - d0.x, r = span > 0 ? (xc - d0.x) / span : 0;
+        const lerp = (a, b) => a + (b - a) * r;
+        return {
+          x: xc,
+          z: lerp(d0.z, d1.z),
+          coord: [lerp(d0.coord[0], d1.coord[0]), lerp(d0.coord[1], d1.coord[1])],
+          slope: d1.slope,
+          t: (d0.t != null && d1.t != null) ? lerp(d0.t, d1.t) : null
+        };
+      }
+      /** Suit une coordonnée de la carte, projetée sur le tracé courant. */
       _focusByCoord(coord) {
-        const data = this._samples; if (!data) return;
-        let best = null, bd = Infinity;
-        for (const p of data) { const dx = p.coord[0] - coord[0], dy = p.coord[1] - coord[1]; const dd = dx * dx + dy * dy; if (dd < bd) { bd = dd; best = p; } }
-        if (best) { this._setFocus(best); if (this._marker) this._marker.setPosition(best.coord); }
+        const hit = this._projectOn(this._samples, coord); if (!hit) return;
+        const d = this._sampleAt(hit.x); if (!d) return;
+        this._setFocus(d); if (this._marker) this._marker.setPosition(d.coord);
       }
       _clearFocus() { if (this._focus) this._focus.style('display', 'none'); if (this._marker) this._marker.setPosition(undefined); }
       _clear() {
@@ -1165,7 +2009,7 @@
         this._legendEl.innerHTML = ''; this._legendEl.style.display = 'none';
         this._titleEl.textContent = this.options.labels.empty; this._titleEl.removeAttribute('title');
         this._statsEl.innerHTML = ''; this._statsEl.removeAttribute('title');
-        this._cropMode = false; this._demLoading = false; this._updateZoomButtons();
+        this._crops = []; this._off = 0; this._demLoading = false; this._updateZoomButtons();
         this._clearFocus();
         this.element.style.display = 'none';
         this._adjustAttribution();