ol-elevation-profile 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 lc-4918
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# ol-elevation-profile
+
+<p>
+  <a href="https://www.npmjs.com/package/ol-elevation-profile"><img src="https://img.shields.io/npm/v/ol-elevation-profile.svg" alt="npm version"></a>
+  <a href="https://openlayers.org/"><img src="https://img.shields.io/badge/OpenLayers-6%20%E2%80%93%2010.9.0-1f6feb.svg" alt="OpenLayers 6 to 10.9.0"></a>
+  <a href="https://d3js.org/"><img src="https://img.shields.io/badge/d3-%E2%89%A5%207-f9a03c.svg" alt="d3 >= 7"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License: MIT"></a>
+</p>
+
+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.
+
+## Screenshots
+
+![Elevation profile coloured by slope class](./assets/screenshot-profile.png)
+
+> Animated demos (hover sync, A↔B crop, slope colouring) are best seen live — see the [demo](#demo). GIFs can be added under `assets/`.
+
+## Installation
+
+### Script tags (UMD)
+
+The control expects `ol` and `d3` to be present as globals (provided by your map page):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.9.0/ol.css">
+<script src="https://cdn.jsdelivr.net/npm/ol@10.9.0/dist/ol.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+
+<link rel="stylesheet" href="ol-elevation-profile.css">
+<script src="ol-elevation-profile.js"></script>
+<!-- exposes window.OlElevationProfile -->
+```
+
+### npm / bundler (ESM)
+
+```bash
+npm i ol-elevation-profile
+# ol and d3 are peer dependencies you install yourself
+```
+
+```js
+import OlElevationProfile from 'ol-elevation-profile'
+import 'ol-elevation-profile/css'
+```
+
+## Usage
+
+```js
+const profile = new OlElevationProfile({
+  position: 'bottom',
+  theme: 'steelblue',
+  units: 'meters',
+  color: 'auto',                              // chart uses the track colour
+  trackLayer: vectorLayer,                    // layer to read that colour from
+  slope: true,                                // colour the profile by gradient class
+  tooltipItems: ['distance', 'elevation', 'slope'],
+  titleLink: 'link'                           // title becomes a link from a feature property
+})
+map.addControl(profile)
+
+const feats = new ol.format.GeoJSON().readFeatures(geojson, {
+  dataProjection: 'EPSG:4326',
+  featureProjection: map.getView().getProjection()
+})
+vectorSource.addFeatures(feats)
+profile.setFeature(feats[0])  // or let a click on the track select it
+```
+
+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.
+
+### 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.
+
+### 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.
+
+## Demo
+
+Live, interactive demo (toggle every option): **https://lc-4918.github.io/ol-elevation-profile/demo/**
+
+## Documentation
+
+Full guide and API (English & French): **https://lc-4918.github.io/ol-elevation-profile/**
+
+## License
+
+[MIT](./LICENSE) © lc-4918

package/dist/ol-elevation-profile.css

@@ -0,0 +1,110 @@
+/*! ol-elevation-profile — styles (MIT) */
+
+.ol-elevation-profile {
+  --oep-area: #4682b4;
+  --oep-line: #3a6d96;
+  --oep-axis: #555;
+  --oep-text: #222;
+  --oep-focus: #e6550d;
+  --oep-bg: rgba(255, 255, 255, 1);
+
+  position: absolute;
+  box-sizing: border-box;
+  background: var(--oep-bg);
+  color: var(--oep-text);
+  font: 12px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  padding: 6px 8px 4px;
+  z-index: 5;
+  max-width: 100%;
+}
+.ol-elevation-profile.oep-transparent { backdrop-filter: blur(2px); }
+
+/* ---- 8 ancrages ---- */
+.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%); }
+.ol-elevation-profile.oep-pos-right        { right: .6em; top: 50%;   transform: translateY(-50%); }
+.ol-elevation-profile.oep-pos-top-left     { left: .6em;  top: .6em; }
+.ol-elevation-profile.oep-pos-top-right    { right: .6em; top: .6em; }
+.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 ---- */
+.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 ---- */
+.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; }
+.oep-stats  { flex: 1 1 auto; min-width: 0; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.oep-stats a { color: var(--oep-focus); }
+.oep-stats .oep-up   { color: #c0392b; }
+.oep-stats .oep-down { color: #2471a3; }
+
+/* ---- barre d'outils zoom ---- */
+.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;
+  border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--oep-text);
+  opacity: .7; border-radius: 4px; padding: 0;
+}
+.oep-tbtn:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
+.oep-tbtn.armed { opacity: 1; border-color: var(--oep-focus); color: var(--oep-focus); }
+.oep-tbtn svg { width: 16px; height: 16px; display: block; }
+
+.oep-toggle {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
+  color: var(--oep-text); opacity: .65; border-radius: 4px;
+}
+.oep-toolbar + .oep-toggle { margin-left: 0; }
+.oep-toggle:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
+.oep-toggle svg { width: 15px; height: 15px; display: block; }
+
+/* ---- légende de pente ---- */
+.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 ---- */
+.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; }
+.ol-elevation-profile.oep-collapsed .oep-stats,
+.ol-elevation-profile.oep-collapsed .oep-toolbar { display: none !important; }
+.ol-elevation-profile.oep-collapsed .oep-header { width: auto; }
+
+/* ---- chart ---- */
+.oep-svg { display: block; }
+.oep-area { fill: var(--oep-area); opacity: .6; }
+.oep-line { fill: none; stroke: var(--oep-line); stroke-width: 1.4; }
+.oep-area-slope { opacity: .92; stroke: none; }
+.oep-slope-sep { stroke: rgba(40, 40, 40, .35); stroke-width: .8; shape-rendering: crispEdges; }
+
+.oep-ab-line  { stroke: var(--oep-focus); stroke-width: 1.4; }
+.oep-ab-label { fill: var(--oep-focus); font-size: 11px; font-weight: 700; }
+
+.oep-axis path, .oep-axis line { stroke: var(--oep-axis); shape-rendering: crispEdges; }
+.oep-axis text { fill: var(--oep-text); font-size: 10px; }
+.oep-axis-label { fill: var(--oep-text); font-size: 10px; opacity: .8; }
+.oep-grid line { stroke: var(--oep-axis); opacity: .16; shape-rendering: crispEdges; }
+.oep-grid path { stroke: none; }
+
+.oep-overlay { fill: transparent; cursor: crosshair; }
+.oep-focus-line { stroke: var(--oep-focus); stroke-width: 1; stroke-dasharray: 3 2; }
+.oep-focus-dot  { fill: var(--oep-focus); stroke: #fff; stroke-width: 1.5; }
+.oep-focus-txt  { fill: var(--oep-text); font-size: 10px; font-weight: 600; }
+.oep-focus-bg   { fill: rgba(255, 255, 255, .9); }
+
+.oep-marker {
+  width: 14px; height: 14px; border-radius: 50%;
+  background: var(--oep-focus, #e6550d); border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
+}
+.ol-elevation-profile.oep-floating { transform: none; }