ol-elevation-profile 0.5.0

package/dist/ol-elevation-profile.min.js

@@ -0,0 +1,16 @@
+/*! ol-elevation-profile | MIT License | https://github.com/lc-4918/ol-elevation-profile */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(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")):"function"==typeof define&&define.amd?define(["ol/control/Control.js","ol/Overlay.js","ol/Observable.js","ol/proj.js","ol/sphere.js","ol/extent.js","d3"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).OlElevationProfile=e(t.ol.control.Control,t.ol.Overlay,t.ol.Observable,t.ol.proj,t.ol.sphere,t.ol.extent,t.d3)}(this,function(t,e,s,o,i,l,n){"use strict";function a(t){var e=Object.create(null);return t&&Object.keys(t).forEach(function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,o.get?o:{enumerable:!0,get:function(){return t[s]}})}}),e.default=t,Object.freeze(e)}var r=a(n);
+/**
+   * Synchronized elevation profile control for OpenLayers, rendered with d3.
+   *
+   * Reads elevation (Z) directly from 3D line geometries (`[lon, lat, z]`),
+   * so no external elevation service is queried. Clicking (or hovering) a track
+   * shows its profile; a marker stays synchronized on both the map and the chart.
+   *
+   * Peer dependencies (provided by the host application, not bundled):
+   *  - OpenLayers >= 6  (https://openlayers.org/)
+   *  - d3 >= 7          (https://d3js.org/)
+   *
+   * @module ol-elevation-profile
+   * @license MIT
+   */const h={steelblue:{area:"#4682b4",line:"#3a6d96",axis:"#555",text:"#222",focus:"#e6550d"},lime:{area:"#9ccc2f",line:"#7da521",axis:"#555",text:"#222",focus:"#d62728"},purple:{area:"#9467bd",line:"#76529c",axis:"#555",text:"#222",focus:"#ff9f1c"},slate:{area:"#7c8a99",line:"#4a5560",axis:"#5a6570",text:"#26303a",focus:"#2f81f7"},graphite:{area:"#9a948c",line:"#5c574f",axis:"#5c574f",text:"#2b2823",focus:"#e07a3f"},amber:{area:"#f0a23b",line:"#c4671a",axis:"#7a5a36",text:"#3a2a16",focus:"#1f6fb2"}},p=["top","bottom","left","right","top-left","top-right","bottom-left","bottom-right"],c={immersion:"docked",position:"bottom",width:520,height:180,margins:{unit:"px",top:20,right:24,bottom:30,left:48},units:"meters",dataProjection:null,maxPoints:2e3,smoothing:0,theme:"steelblue",color:null,trackLayer:null,transparency:!1,transparencyLevel:.45,grid:!0,slope:!1,slopeClassSize:2.5,slopeColors:null,slopeSeparators:!0,slopeLegend:!0,maxClasses:8,maxLegendClasses:8,xTicks:null,yTicks:null,show:"click",collapsable:!0,collapsed:!1,followMap:!0,marker:!0,hideOnMapClick:!0,responsive:!0,mobileBreakpoint:640,zoom:!1,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é",zoomStart:"Définir le début (A)",zoomEnd:"Définir la fin (B)",zoomAll:"Tout voir"}};function d(t,e){const s={};return Object.keys(t).forEach(e=>{s[e]=t[e]}),e&&Object.keys(e).forEach(o=>{e[o]&&"object"==typeof e[o]&&!Array.isArray(e[o])&&t[o]&&"object"==typeof t[o]?s[o]=d(t[o],e[o]):s[o]=e[o]}),s}const u=t=>String(t).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t])),m=t=>"string"==typeof t&&/^(https?:)?\/\/|^mailto:/i.test(t);function _(t,e,s){let o=t;if("function"==typeof o)try{o=o(e,s)}catch(t){return null}if(Array.isArray(o)&&(o=o[0]),o&&o.getStroke){const t=o.getStroke();if(t)return t.getColor()}return null}const f=(t,e)=>{if("imperial"===e){const e=t/1609.344;return e<.2?`${Math.round(3.28084*t)} ft`:`${e.toFixed(e<10?2:1)} mi`}return t<1e3?`${Math.round(t)} m`:`${(t/1e3).toFixed(t<1e4?2:1)} km`},g=(t,e)=>"imperial"===e?`${Math.round(3.28084*t)} ft`:`${Math.round(t)} m`;const y='<svg viewBox="0 0 24 24"><path d="M5 13h14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>',x='<svg viewBox="0 0 24 24"><path d="M3 19l5-7 4 4 4-6 5 9z" fill="currentColor" opacity=".85"/></svg>';class b extends t{constructor(t){const e=d(c,t||{});-1===p.indexOf(e.position)&&(e.position="bottom");const s=function(t){const e=document.createElement("div");return e.className=`ol-elevation-profile ol-unselectable ol-control oep-pos-${t.position} oep-theme-${"string"==typeof t.theme?t.theme:"custom"}`+("floating"===t.immersion?" oep-floating":""),e}(e);super({element:s,target:t&&t.target}),this.options=e,this.slopeColors=e.slopeColors||null,this._feature=null,this._fullSamples=null,this._fullStats=null,this._samples=null,this._stats=null,this._marker=null,this._collapsed=!!e.collapsed,this._cropMode=!1,this._zoomA=null,this._zoomB=null,this._armed=null,this._fitRes=null,this._onResize=()=>{this._feature&&!this._collapsed&&this._render()},this._buildDom(s),s.style.display="none"}static featureHasZ(t){const e=t&&t.getGeometry&&t.getGeometry();if(!e)return!1;const s="MultiLineString"===e.getType()?e.getCoordinates():[e.getCoordinates()];for(const t of s)for(const e of t)if(e.length>2&&isFinite(e[2]))return!0;return!1}_buildDom(t){const e=this.options;this._applyTheme(),this._applyTransparency();const s=document.createElement("div");s.className="oep-header",this._titleEl=document.createElement("span"),this._titleEl.className="oep-title",this._titleEl.textContent=e.labels.empty,this._statsEl=document.createElement("span"),this._statsEl.className="oep-stats",s.appendChild(this._titleEl),s.appendChild(this._statsEl),this._toolbar=document.createElement("span"),this._toolbar.className="oep-toolbar";const o=(t,e,s,o)=>{const i=document.createElement("button");return i.type="button",i.className=`oep-tbtn ${t}`,i.innerHTML=e,i.title=s,i.setAttribute("aria-label",s),i.addEventListener("click",o),this._toolbar.appendChild(i),i};this._btnA=o("oep-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>',e.labels.zoomStart,()=>this._arm("A")),this._btnB=o("oep-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>',e.labels.zoomEnd,()=>this._arm("B")),this._btnAll=o("oep-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>',e.labels.zoomAll,()=>this._exitZoom()),s.appendChild(this._toolbar);const i=document.createElement("button");i.className="oep-toggle",i.type="button",i.setAttribute("aria-label","Réduire ou agrandir le profil"),i.innerHTML=this._collapsed?x:y,i.addEventListener("click",()=>this.toggleCollapsed()),s.appendChild(i),this._toggleBtn=i,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",t.appendChild(s),t.appendChild(this._legendEl),t.appendChild(this._body),this._applyCollapsable(),this._updateZoomButtons(),this._collapsed&&t.classList.add("oep-collapsed")}_resolveColor(){const t=this.options;return t.color?"auto"===t.color?this._featureColor():t.color:null}_featureColor(){const t=this._feature;if(!t)return null;const e=this.getMap()?this.getMap().getView().getResolution():1;let s=_(t.getStyle&&t.getStyle(),t,e);return!s&&this.options.trackLayer&&(s=_(this.options.trackLayer.getStyle&&this.options.trackLayer.getStyle(),t,e)),function(t){if(null==t)return null;if("string"==typeof t)return t;if(Array.isArray(t)){const e=t.length>3?t[3]:1;return`rgba(${0|t[0]},${0|t[1]},${0|t[2]},${e})`}return null}(s)}_applyTheme(){const t=this.options,e="object"==typeof t.theme?t.theme:h[t.theme]||h.steelblue;this.themeColors=e;const s=this.element,o=this._resolveColor(),i=o||e.area;let l=e.line;if(o)try{l=String(r.color(o).darker(.7))}catch(t){l=o}s.style.setProperty("--oep-area",i),s.style.setProperty("--oep-line",l),s.style.setProperty("--oep-axis",e.axis),s.style.setProperty("--oep-text",e.text),s.style.setProperty("--oep-focus",e.focus)}_applyTransparency(){const t=this.options.transparency;let e;e=!1===t||null==t?1:!0===t?this.options.transparencyLevel:Math.max(0,Math.min(1,+t)),this.element.style.setProperty("--oep-bg",`rgba(255,255,255,${e})`),this.element.classList.toggle("oep-transparent",e<1)}_applyCollapsable(){const t=this.options.collapsable;this._toggleBtn.style.display=t?"":"none",!t&&this._collapsed&&this.toggleCollapsed(!1)}toggleCollapsed(t){this._collapsed="boolean"==typeof t?t:!this._collapsed,this.element.classList.toggle("oep-collapsed",this._collapsed),this._toggleBtn.innerHTML=this._collapsed?x:y,!this._collapsed&&this._feature&&this._render(),this._adjustAttribution()}_availWidth(){const t=this.getMap(),e=t&&t.getTargetElement&&t.getTargetElement();return e&&e.clientWidth||("undefined"!=typeof window?window.innerWidth:1024)}_isMobile(){return this.options.responsive&&"undefined"!=typeof window&&window.innerWidth<=(this.options.mobileBreakpoint||640)}_applyPlacement(){const t=this._isMobile();let e=this.options.position;return t&&(e=/top/.test(e)?"top":"bottom"),this.element.className=this.element.className.replace(/oep-pos-\S+/,`oep-pos-${e}`),this.element.classList.toggle("oep-mobile",t),t}_adjustAttribution(){const t=this.getMap(),e=t&&t.getTargetElement&&t.getTargetElement(),s=e&&e.querySelector&&e.querySelector(".ol-attribution");if(!s)return;if(s.style.bottom="",s.style.right="","none"===this.element.style.display||this._collapsed)return;const o=e.getBoundingClientRect(),i=this.element.getBoundingClientRect();if(!i.height)return;const l=o.bottom-i.bottom,n=o.right-i.right;l<i.height&&n<24&&(s.style.right=`${Math.max(0,Math.round(n))}px`,s.style.bottom=`${Math.round(i.height+2*l)}px`)}setMap(t){const o=this.getMap();if(super.setMap(t),this._mapKeys&&(this._mapKeys.forEach(s.unByKey),this._mapKeys=null),o&&"undefined"!=typeof window&&window.removeEventListener("resize",this._onResize),this._marker&&!t&&this._marker.setPosition(void 0),!t)return;const i=this.options;if(i.dataProjection||(i.dataProjection=t.getView().getProjection()),i.marker&&!this._marker){const s=document.createElement("div");s.className="oep-marker",this._marker=new e({element:s,positioning:"center-center",stopEvent:!1}),t.addOverlay(this._marker)}"undefined"!=typeof window&&window.addEventListener("resize",this._onResize);const l=e=>t.forEachFeatureAtPixel(e,t=>{const e=t.getGeometry();return e&&/LineString/.test(e.getType())?t:void 0});this._mapKeys=[],this._mapKeys.push(t.on("mouseover"===i.show?"pointermove":"click",t=>{const e=l(t.pixel);e&&e!==this._feature&&this.setFeature(e)})),i.hideOnMapClick&&this._mapKeys.push(t.on("click",t=>{!l(t.pixel)&&this._feature&&this.clear()})),i.followMap&&this._mapKeys.push(t.on("pointermove",e=>{if(!this._feature||this._collapsed)return;const s=this._feature.getGeometry().getClosestPoint(e.coordinate),o=t.getPixelFromCoordinate(s);o&&(Math.hypot(o[0]-e.pixel[0],o[1]-e.pixel[1])<14?this._focusByCoord(s):this._clearFocus())})),this._mapKeys.push(t.on("moveend",()=>{this._cropMode&&this._fitRes&&t.getView().getResolution()>1.25*this._fitRes&&this._exitZoom()})),this._mapKeys.push(t.on("change:size",this._onResize))}setFeature(t){return this._feature=t||null,this._cropMode=!1,this._zoomA=null,this._zoomB=null,this._armed=null,t?(this.element.style.display="",this._compute(),this._updateZoomButtons(),this._collapsed||this._render(),this):(this._fullSamples=this._samples=null,this._clear(),this)}clear(){return this.setFeature(null)}getStats(){return this._stats}setTheme(t){return this.options.theme=t,this._applyTheme(),this._feature&&!this._collapsed&&this._render(),this}setColor(t){return this.options.color=t||null,this._applyTheme(),this._feature&&!this._collapsed&&this._render(),this}setOptions(t){return this.options=d(this.options,t||{}),t&&"slopeColors"in t&&(this.slopeColors=t.slopeColors||null),t&&(t.theme||"color"in t)&&this._applyTheme(),t&&("transparency"in t||"transparencyLevel"in t)&&this._applyTransparency(),t&&"collapsable"in t&&this._applyCollapsable(),t&&"zoom"in t&&this._updateZoomButtons(),t&&void 0!==t.width&&"number"==typeof t.width&&(this.options.width=t.width),this._feature&&(this._compute(),this._updateZoomButtons(),this._collapsed||this._render()),this}_compute(){const t=this.options,e=this._feature.getGeometry(),s="MultiLineString"===e.getType()?e.getCoordinates():[e.getCoordinates()],l=t.dataProjection||this.getMap()&&this.getMap().getView().getProjection()||"EPSG:3857",n=[];let a=0,r=null;for(const t of s)for(const e of t){const t=o.toLonLat(e,l);r&&(a+=i.getDistance(r,t)),r=t,n.push({x:a,z:e.length>2&&isFinite(e[2])?e[2]:0,coord:e})}t.smoothing>0&&this._smooth(n,t.smoothing);const h=this._decimate(n,t.maxPoints);this._addSlope(h),this._fullSamples=h,this._fullStats=this._statsOf(h,!0),this._samples=h,this._stats=this._fullStats}_statsOf(t,e){let s=0,o=0,i=1/0,l=-1/0,n=0;for(let e=0;e<t.length;e++){const a=t[e].z;if(a<i&&(i=a),a>l&&(l=a),e>0){const i=a-t[e-1].z;i>0?s+=i:o-=i}const r=Math.abs(t[e].slope||0);r>n&&(n=r)}return{distance:t.length?t[t.length-1].x-t[0].x:0,ascent:s,descent:o,min:isFinite(i)?i:0,max:isFinite(l)?l:0,maxAbsSlope:n,points:t.length}}_smooth(t,e){if(!(e>0)||t.length<3)return;const s=e/2,o=t.map(t=>t.z);let i=0,l=0,n=0;for(let e=0;e<t.length;e++){const a=t[e].x;for(;i<t.length&&t[i].x<a-s;)n-=o[i],i++;for(;l<t.length&&t[l].x<=a+s;)n+=o[l],l++;t[e].z=l>i?n/(l-i):o[e]}}_decimate(t,e){const s=t=>({x:t.x,z:t.z,coord:t.coord});if(!e||t.length<=e)return t.map(s);const o=t.length/e,i=[];for(let l=0;l<e;l++)i.push(s(t[Math.floor(l*o)]));return i.push(s(t[t.length-1])),i}_addSlope(t){for(let e=1;e<t.length;e++){const s=t[e].x-t[e-1].x;t[e].slope=s>0?(t[e].z-t[e-1].z)/s*100:0}t.length&&(t[0].slope=t.length>1?t[1].slope:0)}_slopeScale(){const t=this.options.slopeClassSize||2.5,e=this.options.maxClasses||8,s=Math.max(1,Math.floor((this._stats.maxAbsSlope||0)/t)),o=Math.min(s,e-1),i=s>o;let l;if(this.slopeColors&&this.slopeColors.length){const t=r.interpolateRgbBasis(this.slopeColors);l=e=>t(o?e/o:0)}else{const t=r.scaleLinear().domain([0,.16,.42,.68,1]).range(["#2166ac","#27a35a","#ffe000","#f4791f","#d7191c"]).interpolate(r.interpolateRgb).clamp(!0);l=e=>String(t(o?e/o:0))}return{classSize:t,maxIdx:o,capped:i,colorByIndex:l}}_classIndex(t,e){return Math.min(e.maxIdx,Math.floor(Math.abs(t)/e.classSize))}_renderHeader(){const t=this.options,e=this._stats,s=this._feature,o=s.get&&s.get(t.titleProperty)||"Profil",i=t.titleLink&&s.get&&s.get(t.titleLink);m(i)?this._titleEl.innerHTML=`<a href="${u(i)}" target="_blank" rel="noopener">${u(o)}</a>`:this._titleEl.textContent=o,this._titleEl.setAttribute("title",o);const l=[],n=[];if(t.headerItems.forEach(o=>{if("string"==typeof o){if("distance"===o)l.push(`<b>${f(e.distance,t.units)}</b>`),n.push(f(e.distance,t.units));else if("ascent"===o)l.push(`<span class="oep-up">${t.labels.ascent} ${g(e.ascent,t.units)}</span>`),n.push(`${t.labels.ascent} ${g(e.ascent,t.units)}`);else if("descent"===o)l.push(`<span class="oep-down">${t.labels.descent} ${g(e.descent,t.units)}</span>`),n.push(`${t.labels.descent} ${g(e.descent,t.units)}`);else if("min"===o)l.push(g(e.min,t.units)),n.push(g(e.min,t.units));else if("max"===o)l.push(g(e.max,t.units)),n.push(g(e.max,t.units));else if("minmax"===o){const s=`${g(e.min,t.units)}–${g(e.max,t.units)}`;l.push(s),n.push(s)}}else if(o&&o.property){const t=s.get&&s.get(o.property);if(null==t||""===t)return;const e=o.label?`${o.label} `:"";o.asLink&&m(t)?(l.push(`${e}<a href="${u(t)}" target="_blank" rel="noopener">${u(o.linkText||o.label||t)}</a>`),n.push(`${o.label||""} ${t}`)):(l.push(u(e+t)),n.push(e+t))}}),this._statsEl.innerHTML=l.join(" · "),this._statsEl.setAttribute("title",n.join("  ·  ")),this._legendEl.innerHTML="",t.slope&&t.slopeLegend){const t=this._slopeScale();for(let e=0;e<=t.maxIdx;e++){const s=t.colorByIndex(e),o=t.capped&&e===t.maxIdx?`≥ ${e*t.classSize} %`:`${e*t.classSize}–${(e+1)*t.classSize} %`,i=document.createElement("span");i.className="oep-leg-it",i.innerHTML=`<i class="oep-sw" style="background:${s}"></i>${o}`,this._legendEl.appendChild(i)}this._legendEl.style.display=""}else this._legendEl.style.display="none"}_render(){const t=this.options,e=this._stats,s=this._samples;if(!s||!s.length)return;this._applyTheme();const o=this._applyPlacement();this._renderHeader();const i=t.margins,l=i.unit||"px",n=t=>"px"===l?t:t*(parseFloat(getComputedStyle(this.element).fontSize)||16),a=this._availWidth(),h="auto"===t.width||"100%"===t.width||"full"===t.width?a:Math.min("number"==typeof t.width?t.width:parseFloat(t.width)||a,a);this.element.style.width=o?"":`${h}px`;const p=this.element.clientWidth||(o?a:h),c=Math.max(220,p-16),d="number"==typeof t.height?t.height:180,u=n(i.top),m=n(i.right),_=n(i.bottom),f=n(i.left),g=Math.max(10,c-f-m),y=Math.max(10,d-u-_),x=null!=t.xTicks?t.xTicks:Math.max(2,Math.round(g/80)),b=null!=t.yTicks?t.yTicks:Math.max(2,Math.round(y/40));this._body.innerHTML="";const M=r.select(this._body).append("svg").attr("class","oep-svg").attr("width",c).attr("height",d).attr("viewBox",`0 0 ${c} ${d}`),k=M.append("g").attr("transform",`translate(${f},${u})`),v=r.scaleLinear().domain([0,e.distance]).range([0,g]),z=.1*(e.max-e.min)||10,E=r.scaleLinear().domain([e.min-z,e.max+z]).range([y,0]).nice();this._x=v,this._y=E,this._dims={innerW:g,innerH:y},t.grid&&k.append("g").attr("class","oep-grid").call(r.axisLeft(E).ticks(b).tickSize(-g).tickFormat(""));const C="imperial"===t.units?1609.344:1e3;const w=r.area().x(t=>v(t.x)).y0(y).y1(t=>E(t.z));if(t.slope){const e=this._slopeScale(),o=[];let i=1;for(;i<s.length;){const t=this._classIndex(s[i].slope,e);let l=i;for(;l+1<s.length&&this._classIndex(s[l+1].slope,e)===t;)l++;k.append("path").datum(s.slice(i-1,l+1)).attr("class","oep-area-slope").attr("fill",e.colorByIndex(t)).attr("d",w),i>1&&o.push(s[i-1]),i=l+1}t.slopeSeparators&&o.forEach(t=>{k.append("line").attr("class","oep-slope-sep").attr("x1",v(t.x)).attr("x2",v(t.x)).attr("y1",E(t.z)).attr("y2",y)})}else k.append("path").datum(s).attr("class","oep-area").attr("d",w);k.append("path").datum(s).attr("class","oep-line").attr("d",r.line().x(t=>v(t.x)).y(t=>E(t.z))),k.append("g").attr("class","oep-axis oep-axis-x").attr("transform",`translate(0,${y})`).call(r.axisBottom(v).ticks(x).tickFormat(t=>(t/C).toFixed(t/C<10?1:0))),k.append("text").attr("class","oep-axis-label").attr("x",g).attr("y",y+_-4).attr("text-anchor","end").text((t=>"imperial"===t?"mi":"km")(t.units)),k.append("g").attr("class","oep-axis oep-axis-y").call(r.axisLeft(E).ticks(b).tickFormat(e=>"imperial"===t.units?Math.round(3.28084*e):e)),t.zoom&&!this._cropMode&&[["A",this._zoomA],["B",this._zoomB]].forEach(([t,e])=>{if(null==e)return;const s=v(e);k.append("line").attr("class","oep-ab-line").attr("x1",s).attr("x2",s).attr("y1",0).attr("y2",y),k.append("text").attr("class","oep-ab-label").attr("x",s).attr("y",-6).attr("text-anchor","middle").text(t)});const S=k.append("g").attr("class","oep-focus").style("display","none");S.append("line").attr("class","oep-focus-line").attr("y1",0).attr("y2",y),S.append("circle").attr("class","oep-focus-dot").attr("r",4);const $=S.append("g").attr("class","oep-focus-label");$.append("rect").attr("class","oep-focus-bg"),$.append("text").attr("class","oep-focus-txt"),this._focus=S;const B=r.bisector(t=>t.x).left,L=t=>{const s=r.pointer(t,k.node())[0];return Math.max(0,Math.min(e.distance,v.invert(s)))},T=M.append("rect").attr("class","oep-overlay").attr("x",f).attr("y",u).attr("width",g).attr("height",y);T.on("mousemove",t=>{const e=L(t),o=B(s,e,1),i=s[o-1],l=s[o]||i,n=e-i.x>l.x-e?l:i;this._setFocus(n),this._marker&&this._marker.setPosition(n.coord)}).on("mouseout",()=>this._clearFocus()),T.on("click",t=>{if(!this._armed||this._cropMode)return;const e=L(t);"A"===this._armed?this._zoomA=e:this._zoomB=e,this._armed=null,this._updateZoomButtons(),null!=this._zoomA&&null!=this._zoomB?this._applyZoom():this._render()}),this._armed&&T.style("cursor","col-resize"),this._adjustAttribution()}_arm(t){this._armed=this._armed===t?null:t,this._updateZoomButtons(),this._focus&&this._render()}_updateZoomButtons(){const t=!!this.options.zoom&&!!this._feature;this._toolbar.style.display=t?"":"none";const e=this._cropMode;this._btnA.style.display=t&&!e?"":"none",this._btnB.style.display=t&&!e?"":"none",this._btnAll.style.display=t&&e?"":"none",this._btnA.classList.toggle("armed","A"===this._armed),this._btnB.classList.toggle("armed","B"===this._armed)}_applyZoom(){const t=Math.min(this._zoomA,this._zoomB),e=Math.max(this._zoomA,this._zoomB),s=this._fullSamples.filter(s=>s.x>=t&&s.x<=e);if(s.length<2)return;const o=s[0].x,i=s.map(t=>({x:t.x-o,z:t.z,coord:t.coord,slope:t.slope})),n=s.map(t=>t.coord);this._samples=i,this._stats=this._statsOf(i,!1),this._cropMode=!0,this._updateZoomButtons(),this._render();const a=this.getMap();if(a){const t=l.boundingExtent(n),e=a.getView();try{this._fitRes=e.getResolutionForExtent(t,a.getSize())}catch(t){this._fitRes=null}e.fit(t,{padding:[40,40,40,40],duration:400})}}_exitZoom(){this._cropMode=!1,this._zoomA=null,this._zoomB=null,this._armed=null,this._fitRes=null,this._samples=this._fullSamples,this._stats=this._fullStats,this._updateZoomButtons(),this._collapsed||this._render();const t=this.getMap();t&&this._feature&&t.getView().fit(this._feature.getGeometry().getExtent(),{padding:[40,40,40,40],duration:400})}_tooltipText(t){const e=this.options,s=[];return e.tooltipItems.forEach(o=>{var i;"distance"===o?s.push(f(t.x,e.units)):"elevation"===o?s.push(g(t.z,e.units)):"slope"===o&&s.push(`${(i=t.slope||0)>=0?"+":""}${i.toFixed(1)} %`)}),s.join(" · ")}_setFocus(t){if(!this._focus)return;const e=this._x,s=this._y;this._focus.style("display",null),this._focus.select(".oep-focus-line").attr("x1",e(t.x)).attr("x2",e(t.x)),this._focus.select(".oep-focus-dot").attr("cx",e(t.x)).attr("cy",s(t.z));let o=s(t.z)-16;o<12&&(o=s(t.z)+22);const i=this._focus.select(".oep-focus-txt").attr("x",e(t.x)).attr("y",o).text(this._tooltipText(t)),l=i.node().getBBox();this._focus.select(".oep-focus-bg").attr("x",l.x-4).attr("y",l.y-2).attr("width",l.width+8).attr("height",l.height+4),e(t.x)+l.width/2>this._dims.innerW?i.attr("text-anchor","end"):e(t.x)-l.width/2<0?i.attr("text-anchor","start"):i.attr("text-anchor","middle")}_focusByCoord(t){const e=this._samples;if(!e)return;let s=null,o=1/0;for(const i of e){const e=i.coord[0]-t[0],l=i.coord[1]-t[1],n=e*e+l*l;n<o&&(o=n,s=i)}s&&(this._setFocus(s),this._marker&&this._marker.setPosition(s.coord))}_clearFocus(){this._focus&&this._focus.style("display","none"),this._marker&&this._marker.setPosition(void 0)}_clear(){this._body.innerHTML="",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=!1,this._updateZoomButtons(),this._clearFocus(),this.element.style.display="none",this._adjustAttribution()}}return b.addTheme=(t,e)=>{h[t]=e},b.THEMES=h,b.POSITIONS=p,b.version="0.5.0",b});

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "ol-elevation-profile",
+  "version": "0.5.0",
+  "description": "Synchronized elevation profile control for OpenLayers, rendered with d3. Reads elevation directly from 3D GPX/GeoJSON geometries.",
+  "type": "module",
+  "main": "dist/ol-elevation-profile.js",
+  "module": "dist/ol-elevation-profile.esm.js",
+  "unpkg": "dist/ol-elevation-profile.min.js",
+  "jsdelivr": "dist/ol-elevation-profile.min.js",
+  "style": "dist/ol-elevation-profile.css",
+  "exports": {
+    ".": {
+      "import": "./dist/ol-elevation-profile.esm.js",
+      "require": "./dist/ol-elevation-profile.js",
+      "default": "./dist/ol-elevation-profile.js"
+    },
+    "./css": "./dist/ol-elevation-profile.css",
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "rollup -c && cp src/ol-elevation-profile.css dist/ol-elevation-profile.css",
+    "prepublishOnly": "npm run build",
+    "test": "node test/smoke.js",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "keywords": [
+    "openlayers",
+    "ol",
+    "d3",
+    "elevation",
+    "profile",
+    "altitude",
+    "gpx",
+    "geojson",
+    "cycling",
+    "mtb",
+    "hiking"
+  ],
+  "peerDependencies": {
+    "d3": ">=7",
+    "ol": ">=6"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^1.0.0",
+    "d3": "^7.9.0",
+    "jsdom": "^25.0.0",
+    "rollup": "^4.62.2",
+    "vitepress": "^1.6.4"
+  },
+  "license": "MIT",
+  "author": "lc-4918",
+  "homepage": "https://lc-4918.github.io/ol-elevation-profile/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lc-4918/ol-elevation-profile.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lc-4918/ol-elevation-profile/issues"
+  }
+}

package/src/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; }