itowns 2.44.3-next.29 → 2.44.3-next.30

package/dist/itowns_widgets.js

@@ -1,2 +1,2 @@
-"use strict";!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("itowns_widgets",[],e):"object"==typeof exports?exports.itowns_widgets=e():t.itowns_widgets=e()}(self,(()=>(self.webpackChunkitowns=self.webpackChunkitowns||[]).push([[605],{12587:(t,e,o)=>{o.r(e),o.d(e,{C3DTilesStyle:()=>A,Minimap:()=>f,Navigation:()=>c,Scale:()=>y,Searchbar:()=>T,Widget:()=>n});var i=o(84354);const n=class{#t;constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;this.parentElement=e.parentElement||t.domElement,this.position=e.position||o.position,["top-left","top-right","bottom-left","bottom-right","top","bottom","left","right"].includes(this.position)||(console.warn(`'position' optional parameter for 'Widget' constructor is not a valid option. It will be set to '${o.position}'.`),this.position=o.position),this.domElement=document.createElement("div"),this.parentElement.appendChild(this.domElement),this.domElement.style.width=`${e.width||e.size||o.width}px`,this.domElement.style.height=`${e.height||e.size||o.height}px`;const i=this.position.split("-");if(this.domElement.classList.add(`${i[0]}-widget`),i[1])this.domElement.classList.add(`${i[1]}-widget`);else switch(i[0]){case"top":case"bottom":this.domElement.style.left=`calc(50% - ${this.domElement.offsetWidth/2}px)`;break;case"left":case"right":this.domElement.style.top=`calc(50% - ${this.domElement.offsetHeight/2}px)`}e.translate&&(this.domElement.style.transform=`translate(${e.translate.x||0}px, ${e.translate.y||0}px)`),this.domElement.addEventListener("pointerdown",(t=>{t.stopPropagation()})),this.domElement.addEventListener("mousedown",(t=>{t.stopPropagation()}))}show(){this.domElement.style.display=this.#t}hide(){this.#t=window.getComputedStyle(this.domElement).display,this.domElement.style.display="none"}},s={displayCompass:!0,display3DToggle:!0,displayZoomIn:!0,displayZoomOut:!0,animationDuration:500,position:"bottom-left",direction:"column"},a={id:"compass",content:"",info:"Rotate the camera to face North",parentId:"widgets"},l={id:"3d-button",content:"3D",info:"Tilt the camera"},r={id:"zoom-in-button",content:'<span class="widget-zoom-button-logo"></span>',info:"Zoom in",parentId:"zoom-button-bar"},d={id:"zoom-out-button",content:'<span id="zoom-out-logo" class="widget-zoom-button-logo"></span>',info:"Zoom out",parentId:"zoom-button-bar"},c=class extends n{#e;#o(t){return t.time=this.animationDuration,this.#e.controls.lookAtCoordinate(t)}#i(t,e){return this.addButton(t.id,t.content,t.info,e,t.parentId)}constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t.isGlobeView)throw new Error("'Navigation' plugin only supports 'GlobeView'. Therefore, the 'view' parameter must be a 'GlobeView'.");["top","bottom","left","right"].includes(e.position)&&(console.warn(`'position' optional parameter for 'Navigation' is not a valid option. It will be set to '${s.position}'.`),e.position=s.position),super(t,e,s),this.#e=t,this.direction=e.direction||s.direction,["column","row"].includes(this.direction)||(console.warn(`'direction' optional parameter for 'Navigation' constructor is not a valid option. It will be set to '${s.direction}'.`),this.direction=s.direction),this.animationDuration=void 0===e.animationDuration?s.animationDuration:e.animationDuration,this.domElement.id="widgets-navigation",this.domElement.classList.add(`${this.direction}-widget`),(e.displayCompass??s.displayCompass)&&(this.compass=this.#i(a,(()=>{this.#o({heading:0,tilt:89.5})})),t.addEventListener(i.G.CAMERA_MOVED,(t=>{this.compass.style.transform=`rotate(${-t.heading}deg)`}))),(e.display3DToggle??s.display3DToggle)&&(this.toggle3D=this.#i(l,(()=>{this.#o({tilt:this.#e.controls.getTilt()<89?89.5:40})})),t.addEventListener(i.G.CAMERA_MOVED,(t=>{this.toggle3D.innerHTML=t.tilt<89?"2D":"3D"}))),(e.displayZoomIn??s.displayZoomIn)&&(this.zoomIn=this.#i(r,(()=>{this.#o({zoom:Math.min(20,this.#e.controls.getZoom()+1)})}))),(e.displayZoomOut??s.displayZoomOut)&&(this.zoomOut=this.#i(d,(()=>{this.#o({zoom:Math.max(3,this.#e.controls.getZoom()-1)})})))}addButton(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:()=>{},n=arguments.length>4?arguments[4]:void 0,s=document.getElementById(n);s||(s=this.addButtonBar(n));const a=document.createElement("button");return a.className="widget-button",a.id=t,a.innerHTML=e,a.title=o,a.onclick=i,s.appendChild(a),a.tabIndex=-1,window.addEventListener("pointerup",(()=>{document.activeElement===a&&this.#e.domElement.focus()})),a}addButtonBar(t){const e=document.createElement("div");return e.className="widget-button-bar",t&&(e.id=t),this.domElement.appendChild(e),e}};var m=o(52404),h=o(87196),p=o(8917),u=o(93320);const g={minScale:2e-6,maxScale:2e-9,zoomRatio:1/30,width:150,height:150,position:"bottom-left"},f=class extends n{constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!t.isGlobeView)throw new Error("'Minimap' plugin only supports 'GlobeView'. Therefore, the 'view' parameter must be a 'GlobeView'.");if(!e.isColorLayer)throw new Error("'layer' parameter form 'Minimap' constructor should be a 'ColorLayer'.");if(super(t,o,g),this.minScale=o.minScale||g.minScale,this.maxScale=o.maxScale||g.maxScale,this.zoomRatio=o.zoomRatio||g.zoomRatio,this.domElement.id="widgets-minimap",o.cursor){const t=document.createElement("div");t.id="cursor-wrapper",this.domElement.appendChild(t),"string"==typeof o.cursor?t.innerHTML=o.cursor:o.cursor instanceof HTMLElement&&t.appendChild(o.cursor)}this.view=new p.A(this.domElement,e.source.extent,{camera:{type:u.d.ORTHOGRAPHIC},placement:e.source.extent,noControls:!0,maxSubdivisionLevel:t.tileLayer.maxSubdivisionLevel,disableFocusOnStart:!0}),this.view.addLayer(e),this.domElement.addEventListener("pointerdown",(t=>{t.preventDefault()}));const i=this.view.getScale(o.pitch),n=this.view.camera3D.zoom*this.maxScale/i,s=this.view.camera3D.zoom*this.minScale/i,a=new m.A(t.referenceCrs),l=new m.A(this.view.referenceCrs),r=t.controls.getCameraTargetPosition();t.addFrameRequester(h.n7.AFTER_RENDER,(()=>{const e=t.camera3D.position.distanceTo(r),i=t.getScaleFromDistance(o.pitch,e);this.view.camera3D.zoom=this.zoomRatio*s*i/this.minScale,this.view.camera3D.zoom=Math.min(Math.max(this.view.camera3D.zoom,n),s),this.view.camera3D.updateProjectionMatrix(),a.setFromVector3(t.controls.getCameraTargetPosition()),a.as(this.view.referenceCrs,l),this.view.camera3D.position.x=l.x,this.view.camera3D.position.y=l.y,this.view.camera3D.updateMatrixWorld(!0),this.view.notifyChange(this.view.camera3D)}))}};var w=o(98211),v=o(86397),E=o(72682);const b={width:200,height:30,position:"bottom-left"},y=class extends n{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e,b),this.domElement.id="widgets-scale",this.view=t,this.domElement.innerHTML="Scale",this.width=e.width||b.width,this.view.isGlobeView?(this.view.addEventListener(v.S.GLOBE_INITIALIZED,(()=>{this.update()})),this.view.controls.addEventListener(w.W.RANGE_CHANGED,(()=>{this.update()}))):this.view.isPlanarView?(this.view.addEventListener(i.G.INITIALIZED,(()=>{this.update()})),this.view.addEventListener(E.w7.MOVED,(()=>{this.update()}))):console.warn("The 'view' linked to scale widget is neither a 'GlobeView' nor a 'PlanarView'. The scale wont automatically update. You can implement its update automation using 'Scale.update' method.")}addEventListeners(){}update(){let t=Math.round(this.view.getPixelsToMeters(this.width));const e=10**(t.toString().length-1);t=Math.round(t/e)*e;const o=this.view.getMetersToPixels(t);let i="m";t>=1e3&&(t/=1e3,i="km"),this.domElement.innerHTML=`${t} ${i}`,this.domElement.style.width=`${o}px`}};var C=o(7794);const x={width:300,height:38,position:"top",maxSuggestionNumber:10,fontSize:16,placeholder:"Search location"};function L(t,e){return t?(D(t),e>=t.length?e=0:e<0&&(e=t.length-1),t[e]?.classList.add("active"),e):e}function D(t){for(let e=0;e<t.length;e++)t[e].classList.remove("active")}function S(t){for(;t.children.length>1;)t.removeChild(t.lastChild)}const T=class extends n{#n;constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(super(t,o,x),!e||!e.url||!e.parser||"function"!=typeof e.parser)throw new Error("'geocodingOptions' parameter for 'Searchbar' constructor is not a valid option. Please refer to the documentation.");this.#n=e.onSelected??(()=>{}),this.domElement.id="widgets-searchbar",this.domElement.style.height="auto";const i=document.createElement("form");i.setAttribute("autocomplete","off"),i.id="searchbar-autocompletion-form",this.domElement.appendChild(i);const n=document.createElement("input");let s;n.setAttribute("type","text"),n.setAttribute("name","mySearch"),n.setAttribute("placeholder",o.placeholder||x.placeholder),n.style.height=`${o.height||o.size||x.height}px`,n.style.fontSize=`${o.fontSize||x.fontSize}px`,i.appendChild(n),n.addEventListener("input",(()=>{const t=n.value;if(S(i),s=-1,!t)return!1;e.url.searchParams.set("text",t),C.A.json(e.url).then((a=>{const l=e.parser(a);let r=0;l.forEach(((e,a)=>{if(r===Math.min(l.size,o.maxSuggestionNumber||x.maxSuggestionNumber))return;const d=r;r++;const c=a.toUpperCase().indexOf(t.toUpperCase());if(c>-1){const l=document.createElement("div");l.style.minHeight=n.style.height,l.style.fontSize=`${o.fontSize||x.fontSize}px`;const r=a.slice(0,c),m=a.slice(c,c+t.length),h=a.slice(c+t.length,a.length);l.innerHTML=`<p>${r}<strong>${m}</strong>${h}</p>`,l.setAttribute("location",a),i.appendChild(l),l.addEventListener("mouseover",(()=>{D(i.children),s=d,l.classList.add("active")})),l.addEventListener("click",(()=>{this.#n(e),n.value=l.getAttribute("location"),S(i)}))}}))}))}));const a=(o.position||x.position).includes("top")?1:-1;n.addEventListener("keydown",(e=>{e.stopPropagation();const o=i.getElementsByTagName("div");switch(e.code){case"Escape":S(i),n.value="",t.domElement.focus();break;case"ArrowDown":e.preventDefault(),s=L(o,s+a);break;case"ArrowUp":e.preventDefault(),s=L(o,s-a);break;case"Enter":e.preventDefault(),o[Math.max(s,0)]&&(o[Math.max(s,0)].click(),t.domElement.focus())}})),n.addEventListener("focus",(()=>{i.classList.add("focus")})),n.addEventListener("blur",(()=>{i.classList.remove("focus"),D(i.children)})),i.addEventListener("mouseleave",(()=>{D(i.children),s=-1}))}};var _=o(14333);const M={width:200,position:"top-right"};class z extends n{constructor(t,e){super(t,e,M),this.domElement.onclick=t=>t.stopImmediatePropagation();const o=document.createElement("select");this.domElement.appendChild(o);const i=new Map,n=()=>{for(const[t,e]of i)e.hidden=t!==o.selectedOptions[0]};o.onchange=n,t.getLayers().filter((t=>!0===t.isC3DTilesLayer)).forEach((e=>{const n=document.createElement("option");n.innerText=e.name,o.add(n);const s=document.createElement("div");this.domElement.appendChild(s),i.set(n,s),e.addEventListener(_.s.ON_TILE_CONTENT_LOADED,(()=>{for(;s.firstChild;)s.firstChild.remove();const o=new Map;for(const[,t]of e.tilesC3DTileFeatures)for(const[,e]of t)for(const t in e.getInfo().batchTable){o.has(t)||o.set(t,[]);const i=e.getInfo().batchTable[t];o.get(t).includes(i)||o.get(t).push(i)}const i=new Map,n=new Map,a=(o,a,l)=>{const r=document.createElement("input");r.setAttribute("type","color"),s.appendChild(r),r.onchange=()=>{const n=o();if(!l.includes(n))return;const s=r.value;i.set(n,(t=>t.getInfo().batchTable[a]==n?s:null)),e.updateStyle(),t.notifyChange()};const d=document.createElement("input");return d.setAttribute("type","range"),d.min=0,d.max=1,d.step=.1,d.value=1,s.appendChild(d),d.onchange=()=>{const i=o();if(!l.includes(i))return;const s=d.value;n.set(i,(t=>t.getInfo().batchTable[a]==i?s:null)),e.updateStyle(),t.notifyChange()},{inputColor:r,opacityElement:d}},l=(t,e)=>{const o=document.createElement("label");o.innerText=t,s.appendChild(o);const i=document.createElement("select");s.appendChild(i),e.forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,i.add(e)})),a((()=>i.selectedOptions[0].value),t,e)},r=(o,l)=>{const r=document.createElement("label");r.innerText=o,s.appendChild(r);const d=document.createElement("input");d.setAttribute("type","text"),s.appendChild(d);const{inputColor:c,opacityElement:m}=a((()=>d.value),o,l);d.onchange=()=>{if(!l.includes(d.value))return;const s=c.value,a=d.value;i.set(a,(t=>t.getInfo().batchTable[o]==a?s:null));const r=m.value;n.set(a,(t=>t.getInfo().batchTable[o]==a?r:null)),e.updateStyle(),t.notifyChange()}};for(const[t,e]of o)e.length<z.MAX_SELECT_VALUE?l(t,e):r(t,e);e.style={fill:{color:t=>{let e=null;for(const[,o]of i)e=o(t)||e;return e},opacity:t=>{let e=1;for(const[,o]of n)e=o(t)||e;return e}}}}))})),n()}static get MAX_SELECT_VALUE(){return 10}}const A=z}},t=>t(t.s=12587)])));
+"use strict";!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("itowns_widgets",[],e):"object"==typeof exports?exports.itowns_widgets=e():t.itowns_widgets=e()}(self,(()=>(self.webpackChunkitowns=self.webpackChunkitowns||[]).push([[605],{12587:(t,e,o)=>{o.r(e),o.d(e,{C3DTilesStyle:()=>A,Minimap:()=>f,Navigation:()=>c,Scale:()=>y,Searchbar:()=>T,Widget:()=>n});var i=o(84354);const n=class{#t;constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;this.parentElement=e.parentElement||t.domElement,this.position=e.position||o.position,["top-left","top-right","bottom-left","bottom-right","top","bottom","left","right"].includes(this.position)||(console.warn(`'position' optional parameter for 'Widget' constructor is not a valid option. It will be set to '${o.position}'.`),this.position=o.position),this.domElement=document.createElement("div"),this.parentElement.appendChild(this.domElement),this.domElement.style.width=`${e.width||e.size||o.width}px`,this.domElement.style.height=`${e.height||e.size||o.height}px`;const i=this.position.split("-");if(this.domElement.classList.add(`${i[0]}-widget`),i[1])this.domElement.classList.add(`${i[1]}-widget`);else switch(i[0]){case"top":case"bottom":this.domElement.style.left=`calc(50% - ${this.domElement.offsetWidth/2}px)`;break;case"left":case"right":this.domElement.style.top=`calc(50% - ${this.domElement.offsetHeight/2}px)`}e.translate&&(this.domElement.style.transform=`translate(${e.translate.x||0}px, ${e.translate.y||0}px)`),this.domElement.addEventListener("pointerdown",(t=>{t.stopPropagation()})),this.domElement.addEventListener("mousedown",(t=>{t.stopPropagation()}))}show(){this.domElement.style.display=this.#t}hide(){this.#t=window.getComputedStyle(this.domElement).display,this.domElement.style.display="none"}},s={displayCompass:!0,display3DToggle:!0,displayZoomIn:!0,displayZoomOut:!0,animationDuration:500,position:"bottom-left",direction:"column"},a={id:"compass",content:"",info:"Rotate the camera to face North",parentId:"widgets"},l={id:"3d-button",content:"3D",info:"Tilt the camera"},r={id:"zoom-in-button",content:'<span class="widget-zoom-button-logo"></span>',info:"Zoom in",parentId:"zoom-button-bar"},d={id:"zoom-out-button",content:'<span id="zoom-out-logo" class="widget-zoom-button-logo"></span>',info:"Zoom out",parentId:"zoom-button-bar"},c=class extends n{#e;#o(t){return t.time=this.animationDuration,this.#e.controls.lookAtCoordinate(t)}#i(t,e){return this.addButton(t.id,t.content,t.info,e,t.parentId)}constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t.isGlobeView)throw new Error("'Navigation' plugin only supports 'GlobeView'. Therefore, the 'view' parameter must be a 'GlobeView'.");["top","bottom","left","right"].includes(e.position)&&(console.warn(`'position' optional parameter for 'Navigation' is not a valid option. It will be set to '${s.position}'.`),e.position=s.position),super(t,e,s),this.#e=t,this.direction=e.direction||s.direction,["column","row"].includes(this.direction)||(console.warn(`'direction' optional parameter for 'Navigation' constructor is not a valid option. It will be set to '${s.direction}'.`),this.direction=s.direction),this.animationDuration=void 0===e.animationDuration?s.animationDuration:e.animationDuration,this.domElement.id="widgets-navigation",this.domElement.classList.add(`${this.direction}-widget`),(e.displayCompass??s.displayCompass)&&(this.compass=this.#i(a,(()=>{this.#o({heading:0,tilt:89.5})})),t.addEventListener(i.G.CAMERA_MOVED,(t=>{this.compass.style.transform=`rotate(${-t.heading}deg)`}))),(e.display3DToggle??s.display3DToggle)&&(this.toggle3D=this.#i(l,(()=>{this.#o({tilt:this.#e.controls.getTilt()<89?89.5:40})})),t.addEventListener(i.G.CAMERA_MOVED,(t=>{this.toggle3D.innerHTML=t.tilt<89?"2D":"3D"}))),(e.displayZoomIn??s.displayZoomIn)&&(this.zoomIn=this.#i(r,(()=>{this.#o({zoom:Math.min(20,this.#e.controls.getZoom()+1)})}))),(e.displayZoomOut??s.displayZoomOut)&&(this.zoomOut=this.#i(d,(()=>{this.#o({zoom:Math.max(3,this.#e.controls.getZoom()-1)})})))}addButton(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:()=>{},n=arguments.length>4?arguments[4]:void 0,s=document.getElementById(n);s||(s=this.addButtonBar(n));const a=document.createElement("button");return a.className="widget-button",a.id=t,a.innerHTML=e,a.title=o,a.onclick=i,s.appendChild(a),a.tabIndex=-1,window.addEventListener("pointerup",(()=>{document.activeElement===a&&this.#e.domElement.focus()})),a}addButtonBar(t){const e=document.createElement("div");return e.className="widget-button-bar",t&&(e.id=t),this.domElement.appendChild(e),e}};var m=o(43147),h=o(87196),p=o(8917),u=o(93320);const g={minScale:2e-6,maxScale:2e-9,zoomRatio:1/30,width:150,height:150,position:"bottom-left"},f=class extends n{constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!t.isGlobeView)throw new Error("'Minimap' plugin only supports 'GlobeView'. Therefore, the 'view' parameter must be a 'GlobeView'.");if(!e.isColorLayer)throw new Error("'layer' parameter form 'Minimap' constructor should be a 'ColorLayer'.");if(super(t,o,g),this.minScale=o.minScale||g.minScale,this.maxScale=o.maxScale||g.maxScale,this.zoomRatio=o.zoomRatio||g.zoomRatio,this.domElement.id="widgets-minimap",o.cursor){const t=document.createElement("div");t.id="cursor-wrapper",this.domElement.appendChild(t),"string"==typeof o.cursor?t.innerHTML=o.cursor:o.cursor instanceof HTMLElement&&t.appendChild(o.cursor)}this.view=new p.A(this.domElement,e.source.extent,{camera:{type:u.d.ORTHOGRAPHIC},placement:e.source.extent,noControls:!0,maxSubdivisionLevel:t.tileLayer.maxSubdivisionLevel,disableFocusOnStart:!0}),this.view.addLayer(e),this.domElement.addEventListener("pointerdown",(t=>{t.preventDefault()}));const i=this.view.getScale(o.pitch),n=this.view.camera3D.zoom*this.maxScale/i,s=this.view.camera3D.zoom*this.minScale/i,a=new m.A(t.referenceCrs),l=new m.A(this.view.referenceCrs),r=t.controls.getCameraTargetPosition();t.addFrameRequester(h.n7.AFTER_RENDER,(()=>{const e=t.camera3D.position.distanceTo(r),i=t.getScaleFromDistance(o.pitch,e);this.view.camera3D.zoom=this.zoomRatio*s*i/this.minScale,this.view.camera3D.zoom=Math.min(Math.max(this.view.camera3D.zoom,n),s),this.view.camera3D.updateProjectionMatrix(),a.setFromVector3(t.controls.getCameraTargetPosition()),a.as(this.view.referenceCrs,l),this.view.camera3D.position.x=l.x,this.view.camera3D.position.y=l.y,this.view.camera3D.updateMatrixWorld(!0),this.view.notifyChange(this.view.camera3D)}))}};var w=o(98211),v=o(86397),E=o(72682);const b={width:200,height:30,position:"bottom-left"},y=class extends n{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e,b),this.domElement.id="widgets-scale",this.view=t,this.domElement.innerHTML="Scale",this.width=e.width||b.width,this.view.isGlobeView?(this.view.addEventListener(v.S.GLOBE_INITIALIZED,(()=>{this.update()})),this.view.controls.addEventListener(w.W.RANGE_CHANGED,(()=>{this.update()}))):this.view.isPlanarView?(this.view.addEventListener(i.G.INITIALIZED,(()=>{this.update()})),this.view.addEventListener(E.w7.MOVED,(()=>{this.update()}))):console.warn("The 'view' linked to scale widget is neither a 'GlobeView' nor a 'PlanarView'. The scale wont automatically update. You can implement its update automation using 'Scale.update' method.")}addEventListeners(){}update(){let t=Math.round(this.view.getPixelsToMeters(this.width));const e=10**(t.toString().length-1);t=Math.round(t/e)*e;const o=this.view.getMetersToPixels(t);let i="m";t>=1e3&&(t/=1e3,i="km"),this.domElement.innerHTML=`${t} ${i}`,this.domElement.style.width=`${o}px`}};var C=o(7794);const x={width:300,height:38,position:"top",maxSuggestionNumber:10,fontSize:16,placeholder:"Search location"};function L(t,e){return t?(D(t),e>=t.length?e=0:e<0&&(e=t.length-1),t[e]?.classList.add("active"),e):e}function D(t){for(let e=0;e<t.length;e++)t[e].classList.remove("active")}function S(t){for(;t.children.length>1;)t.removeChild(t.lastChild)}const T=class extends n{#n;constructor(t,e){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(super(t,o,x),!e||!e.url||!e.parser||"function"!=typeof e.parser)throw new Error("'geocodingOptions' parameter for 'Searchbar' constructor is not a valid option. Please refer to the documentation.");this.#n=e.onSelected??(()=>{}),this.domElement.id="widgets-searchbar",this.domElement.style.height="auto";const i=document.createElement("form");i.setAttribute("autocomplete","off"),i.id="searchbar-autocompletion-form",this.domElement.appendChild(i);const n=document.createElement("input");let s;n.setAttribute("type","text"),n.setAttribute("name","mySearch"),n.setAttribute("placeholder",o.placeholder||x.placeholder),n.style.height=`${o.height||o.size||x.height}px`,n.style.fontSize=`${o.fontSize||x.fontSize}px`,i.appendChild(n),n.addEventListener("input",(()=>{const t=n.value;if(S(i),s=-1,!t)return!1;e.url.searchParams.set("text",t),C.A.json(e.url).then((a=>{const l=e.parser(a);let r=0;l.forEach(((e,a)=>{if(r===Math.min(l.size,o.maxSuggestionNumber||x.maxSuggestionNumber))return;const d=r;r++;const c=a.toUpperCase().indexOf(t.toUpperCase());if(c>-1){const l=document.createElement("div");l.style.minHeight=n.style.height,l.style.fontSize=`${o.fontSize||x.fontSize}px`;const r=a.slice(0,c),m=a.slice(c,c+t.length),h=a.slice(c+t.length,a.length);l.innerHTML=`<p>${r}<strong>${m}</strong>${h}</p>`,l.setAttribute("location",a),i.appendChild(l),l.addEventListener("mouseover",(()=>{D(i.children),s=d,l.classList.add("active")})),l.addEventListener("click",(()=>{this.#n(e),n.value=l.getAttribute("location"),S(i)}))}}))}))}));const a=(o.position||x.position).includes("top")?1:-1;n.addEventListener("keydown",(e=>{e.stopPropagation();const o=i.getElementsByTagName("div");switch(e.code){case"Escape":S(i),n.value="",t.domElement.focus();break;case"ArrowDown":e.preventDefault(),s=L(o,s+a);break;case"ArrowUp":e.preventDefault(),s=L(o,s-a);break;case"Enter":e.preventDefault(),o[Math.max(s,0)]&&(o[Math.max(s,0)].click(),t.domElement.focus())}})),n.addEventListener("focus",(()=>{i.classList.add("focus")})),n.addEventListener("blur",(()=>{i.classList.remove("focus"),D(i.children)})),i.addEventListener("mouseleave",(()=>{D(i.children),s=-1}))}};var _=o(14333);const M={width:200,position:"top-right"};class z extends n{constructor(t,e){super(t,e,M),this.domElement.onclick=t=>t.stopImmediatePropagation();const o=document.createElement("select");this.domElement.appendChild(o);const i=new Map,n=()=>{for(const[t,e]of i)e.hidden=t!==o.selectedOptions[0]};o.onchange=n,t.getLayers().filter((t=>!0===t.isC3DTilesLayer)).forEach((e=>{const n=document.createElement("option");n.innerText=e.name,o.add(n);const s=document.createElement("div");this.domElement.appendChild(s),i.set(n,s),e.addEventListener(_.s.ON_TILE_CONTENT_LOADED,(()=>{for(;s.firstChild;)s.firstChild.remove();const o=new Map;for(const[,t]of e.tilesC3DTileFeatures)for(const[,e]of t)for(const t in e.getInfo().batchTable){o.has(t)||o.set(t,[]);const i=e.getInfo().batchTable[t];o.get(t).includes(i)||o.get(t).push(i)}const i=new Map,n=new Map,a=(o,a,l)=>{const r=document.createElement("input");r.setAttribute("type","color"),s.appendChild(r),r.onchange=()=>{const n=o();if(!l.includes(n))return;const s=r.value;i.set(n,(t=>t.getInfo().batchTable[a]==n?s:null)),e.updateStyle(),t.notifyChange()};const d=document.createElement("input");return d.setAttribute("type","range"),d.min=0,d.max=1,d.step=.1,d.value=1,s.appendChild(d),d.onchange=()=>{const i=o();if(!l.includes(i))return;const s=d.value;n.set(i,(t=>t.getInfo().batchTable[a]==i?s:null)),e.updateStyle(),t.notifyChange()},{inputColor:r,opacityElement:d}},l=(t,e)=>{const o=document.createElement("label");o.innerText=t,s.appendChild(o);const i=document.createElement("select");s.appendChild(i),e.forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,i.add(e)})),a((()=>i.selectedOptions[0].value),t,e)},r=(o,l)=>{const r=document.createElement("label");r.innerText=o,s.appendChild(r);const d=document.createElement("input");d.setAttribute("type","text"),s.appendChild(d);const{inputColor:c,opacityElement:m}=a((()=>d.value),o,l);d.onchange=()=>{if(!l.includes(d.value))return;const s=c.value,a=d.value;i.set(a,(t=>t.getInfo().batchTable[o]==a?s:null));const r=m.value;n.set(a,(t=>t.getInfo().batchTable[o]==a?r:null)),e.updateStyle(),t.notifyChange()}};for(const[t,e]of o)e.length<z.MAX_SELECT_VALUE?l(t,e):r(t,e);e.style={fill:{color:t=>{let e=null;for(const[,o]of i)e=o(t)||e;return e},opacity:t=>{let e=1;for(const[,o]of n)e=o(t)||e;return e}}}}))})),n()}static get MAX_SELECT_VALUE(){return 10}}const A=z}},t=>t(t.s=12587)])));
 //# sourceMappingURL=itowns_widgets.js.map

package/examples/jsm/OGC3DTilesHelper.js

@@ -47,7 +47,7 @@ function zoomToSphere(view, tile, sphere) {
     const distance = radius * Math.tan(fov * 2);
 
     return {
-        coord: new Coordinates('EPSG:4978', center),
+        coord: new Coordinates('EPSG:4978').setFromVector3(center),
         range: distance + radius,
     };
 }

package/lib/Controls/GlobeControls.js

@@ -710,7 +710,7 @@ class GlobeControls extends THREE.EventDispatcher {
     const range = this.getRange(point);
     if (point && range > this.minDistance) {
       return this.lookAtCoordinate({
-        coord: new Coordinates('EPSG:4978', point),
+        coord: new Coordinates('EPSG:4978').setFromVector3(point),
         range: range * (event.direction === 'out' ? 1 / 0.6 : 0.6),
         time: 1500
       });
@@ -978,7 +978,7 @@ class GlobeControls extends THREE.EventDispatcher {
    */
 
   getCameraCoordinate() {
-    return new Coordinates('EPSG:4978', this.camera.position).as('EPSG:4326');
+    return new Coordinates('EPSG:4978').setFromVector3(this.camera.position).as('EPSG:4326');
   }
 
   /**
@@ -1173,7 +1173,7 @@ class GlobeControls extends THREE.EventDispatcher {
     if (!pickedPosition) {
       return;
     }
-    return new Coordinates('EPSG:4978', pickedPosition).as('EPSG:4326');
+    return new Coordinates('EPSG:4978').setFromVector3(pickedPosition).as('EPSG:4326');
   }
 }
 export default GlobeControls;

package/lib/Core/Geographic/Coordinates.js

@@ -2,7 +2,6 @@ import * as THREE from 'three';
 import proj4 from 'proj4';
 import * as CRS from "./Crs.js";
 import Ellipsoid from "../Math/Ellipsoid.js";
-proj4.defs('EPSG:4978', '+proj=geocent +datum=WGS84 +units=m +no_defs');
 const ellipsoid = new Ellipsoid();
 const projectionCache = {};
 const v0 = new THREE.Vector3();
@@ -20,53 +19,62 @@ function proj4cache(crsIn, crsOut) {
 }
 
 /**
- * A Coordinates object, defined by a [crs](http://inspire.ec.europa.eu/theme/rs)
- * and three values. These values are accessible through `x`, `y` and `z`,
- * although it can also be accessible through `latitude`, `longitude` and
- * `altitude`. To change a value, prefer the `set()` method below.
+ * A class representing a geographic or geocentric coordinate.
  *
- * `EPSG:4978` and `EPSG:4326` are supported by default. To use another CRS,
- * you have to declare it with `proj4`. You can find most projections and their
- * proj4 code at [epsg.io](https://epsg.io/).
+ * A coordinate is defined by a [CRS](http://inspire.ec.europa.eu/theme/rs)
+ * (Coordinate Reference System) and a 3-dimensional vector `(x, y, z)`.
+ * For geocentric projections, it is recommended to use the `latitude`,
+ * `longitude` and `altitude` aliases to refer to vector components.
  *
- * @example
- * new Coordinates('EPSG:4978', 20885167, 849862, 23385912); //Geocentric coordinates
- * new Coordinates('EPSG:4326', 2.33, 48.24, 24999549); //Geographic coordinates
+ * To change a value, prefer the use of the `set*` methods.
  *
- * @example
- * // Declare EPSG:3946 with proj4
- * itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+ * By default, the `EPSG:4978` and `EPSG:4326` projections are supported. To use
+ * a different projection, it must have been declared previously with `proj4`.
+ * A comprehensive list of projections and their corresponding proj4 string can
+ * be found at [epsg.io](https://epsg.io/).
  *
- * @property {boolean} isCoordinates - Used to checkout whether this coordinates
- * is a Coordinates. Default is true. You should not change this, as it is used
- * internally for optimisation.
- * @property {string} crs - A supported crs by default in
- * [`proj4js`](https://github.com/proj4js/proj4js#named-projections), or an
- * added crs to `proj4js` (using `proj4.defs`). Note that `EPSG:4978` is also
- * supported by default in itowns.
- * @property {number} x - The first value of the coordinate.
- * @property {number} y - The second value of the coordinate.
- * @property {number} z - The third value of the coordinate.
- * @property {number} latitude - The first value of the coordinate.
- * @property {number} longitude - The second value of the coordinate.
- * @property {number} altitude - The third value of the coordinate.
- * @property {THREE.Vector3} geodesicNormal - The geodesic normal of the
- * coordinate.
+ * @example Geocentric coordinates
+ * ```js
+ * new Coordinates('EPSG:4978', 20885167, 849862, 23385912);
+ * ```
+ *
+ * @example Geographic coordinates
+ * ```js
+ * new Coordinates('EPSG:4326', 2.33, 48.24, 24999549);
+ * ```
+ *
+ * @example Defining the EPSG:2154 projection with proj4
+ * ```js
+ * proj4.defs('EPSG:2154', `+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44
+ * +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m
+ * +no_defs +type=crs`);
+ * ```
  */
 class Coordinates {
   /**
-   * @param {string} crs - A supported Coordinate Reference System.
-   * @param {number|Array<number>|Coordinates|THREE.Vector3} [v0=0] -
-   * x or longitude value, or a more complex one: it can be an array of three
-   * numbers, being x/lon, y/lat, z/alt, or it can be `THREE.Vector3`. It can
-   * also simply be a Coordinates.
-   * @param {number} [v1=0] - y or latitude value.
-   * @param {number} [v2=0] - z or altitude value.
+   * Read-only flag to check if a given object is of type `Coordinates`.
+   */
+
+  /**
+   * A default or user-defined CRS (see {@link ProjectionLike}).
+   */
+
+  /** The x value (or longitude) of this coordinate. */
+
+  /** The y value (or latitude) of this coordinate. */
+
+  /** The z value (or altitude) of this coordinate. */
+
+  /**
+   * @param crs - A default or user-defined CRS (see {@link ProjectionLike}).
+   * @param x - x or longitude value.
+   * @param y - y or latitude value.
+   * @param z - z or altitude value.
    */
   constructor(crs) {
-    let v0 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    let v1 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let v2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    let x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let y = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let z = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     this.isCoordinates = true;
     CRS.isValid(crs);
     this.crs = crs;
@@ -79,53 +87,60 @@ class Coordinates {
 
     // Normal
     this._normal = new THREE.Vector3();
-    if (v0.length > 0) {
-      this.setFromArray(v0);
-    } else if (v0.isVector3 || v0.isCoordinates) {
-      this.setFromVector3(v0);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (x.length > 0) {
+      // deepscan-disable-line
+      console.warn('Deprecated Coordinates#constructor(string, number[]),', 'use `new Coordinates(string).setFromArray(number[])` instead.');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.setFromArray(x);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } else if (x.isVector3 || x.isCoordinates) {
+      console.warn('Deprecated Coordinates#constructor(string, Vector3),', 'use `new Coordinates(string).setFromVector3(Vector3)` instead.');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.setFromVector3(x);
     } else {
-      this.setFromValues(v0, v1, v2);
+      this.setFromValues(x, y, z);
     }
     this._normalNeedsUpdate = true;
   }
 
   /**
    * Sets the Coordinate Reference System.
-   * @param {String} crs Coordinate Reference System (e.g. 'EPSG:4978')
+   * @param crs - Coordinate Reference System (e.g. 'EPSG:4978')
    */
   setCrs(crs) {
     CRS.isValid(crs);
     this.crs = crs;
+    return this;
   }
 
   /**
-   * Set the values of this Coordinates.
-   *
-   * @param {number} [v0=0] - x or longitude value.
-   * @param {number} [v1=0] - y or latitude value.
-   * @param {number} [v2=0] - z or altitude value.
+   * Sets the x, y and z components of this coordinate.
    *
-   * @return {Coordinates} This Coordinates.
+   * @param x - x or longitude value.
+   * @param y - y or latitude value.
+   * @param z - z or altitude value.
    */
   setFromValues() {
-    let v0 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let v1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    let v2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    this.x = v0 == undefined ? 0 : v0;
-    this.y = v1 == undefined ? 0 : v1;
-    this.z = v2 == undefined ? 0 : v2;
+    let x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    this.x = x;
+    this.y = y;
+    this.z = z;
     this._normalNeedsUpdate = true;
     return this;
   }
 
   /**
-   * Set the values of this Coordinates from an array.
-   *
-   * @param {Array<number>} array - An array of number to assign to the
-   * Coordinates.
-   * @param {number} [offset] - Optional offset into the array.
+   * Sets the coordinates's {@link Coordinates#x | x} component to
+   * `array[offset + 0]`, {@link Coordinates#y | y} component to
+   * `array[offset + 1]` and {@link Coordinates#z | z} component to
+   * `array[offset + 2]`.
    *
-   * @return {Coordinates} This Coordinates.
+   * @param array - The source array.
+   * @param offset - Optional offset into the array. Default is 0.
    */
   setFromArray(array) {
     let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -133,35 +148,29 @@ class Coordinates {
   }
 
   /**
-   * Set the values of this Coordinates from a `THREE.Vector3` or an `Object`
-   * having `x/y/z` properties, like a `Coordinates`.
+   * Sets the `(x, y, z)` vector of this coordinate from a 3-dimensional
+   * vector-like object. This object shall have both `x`, `y` and `z`
+   * properties.
    *
-   * @param {THREE.Vector3|Coordinates} v0 - The object to read the values
-   * from.
-   *
-   * @return {Coordinates} This Coordinates.
+   * @param v - The source object.
    */
-  setFromVector3(v0) {
-    return this.setFromValues(v0.x, v0.y, v0.z);
+  setFromVector3(v) {
+    return this.setFromValues(v.x, v.y, v.z);
   }
 
   /**
-   * Returns a new Coordinates with the same values as this one. It will
-   * instantiate a new Coordinates with the same CRS as this one.
-   *
-   * @return {Coordinates} The target with its new coordinates.
+   * Returns a new coordinate with the same `(x, y, z)` vector and crs as this
+   * one.
    */
   clone() {
-    return new Coordinates(this.crs, this);
+    return new Coordinates(this.crs, this.x, this.y, this.z);
   }
 
   /**
-   * Copies the values of the passed Coordinates to this one. The CRS is
-   * however not copied.
+   * Copies the `(x, y, z)` vector components and crs of the passed coordinate
+   * to this coordinate.
    *
-   * @param {Coordinates} src - The source to copy from.
-   *
-   * @return {Coordinates} This Coordinates.
+   * @param src - The source coordinate to copy from.
    */
   copy(src) {
     this.crs = src.crs;
@@ -179,6 +188,10 @@ class Coordinates {
   set altitude(value) {
     this.z = value;
   }
+
+  /**
+   * The geodesic normal of the coordinate.
+   */
   get geodesicNormal() {
     if (this._normalNeedsUpdate) {
       this._normalNeedsUpdate = false;
@@ -194,12 +207,13 @@ class Coordinates {
   }
 
   /**
-   * Return this Coordinates values into a `THREE.Vector3`.
+   * Copies the `x`, `y` and `z` components into the provided `THREE.Vector3`.
    *
-   * @param {THREE.Vector3} [target] - The target to put the values in. If not
+   * @param target - An object to store this vector to. If this is not
    * specified, a new vector will be created.
    *
-   * @return {THREE.Vector3}
+   * @returns A vector `(x, y, z)`, or copies x, y and z into the provided
+   * vector.
    */
   toVector3() {
     let target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new THREE.Vector3();
@@ -207,14 +221,14 @@ class Coordinates {
   }
 
   /**
-   * Copy values coordinates to array
+   * Copies the `x`, `y` and `z` components into the provided array.
    *
-   * @param  {number[]} array - array to store this vector to. If this is not
+   * @param array - An array to store this vector to. If this is not
    * provided a new array will be created.
-   * @param  {number} [offset=0] - optional offset into the array.
+   * @param offset - An optional offset into the array.
    *
-   * @return {number[]} Returns an array [x, y, z], or copies x, y and z into
-   * the provided array.
+   * @returns An array [x, y, z], or copies x, y and z into the provided
+   * array.
    */
   toArray() {
     let array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -223,12 +237,9 @@ class Coordinates {
   }
 
   /**
-   * Calculate planar distance between this coordinates and `coord`.
-   * Planar distance is the straight-line euclidean distance calculated in a 2D cartesian coordinate system.
-   *
-   * @param  {Coordinates}  coord  The coordinate
-   * @return {number} planar distance
-   *
+   * Computes the planar distance from this coordinates to `coord`.
+   * **Planar distance** is the straight-line euclidean distance calculated in
+   * a 2D cartesian coordinate system.
    */
   planarDistanceTo(coord) {
     this.toVector3(v0).setZ(0);
@@ -237,15 +248,9 @@ class Coordinates {
   }
 
   /**
-   * Calculate geodetic distance between this coordinates and `coord`.
-   * **Geodetic distance** is calculated in an ellispoid space as the shortest distance
-   * across the curved surface of the world.
-   *
-   * => As the crow flies/ Orthodromy
-   *
-   * @param  {Coordinates}  coord  The coordinate
-   * @return {number} geodetic distance
-   *
+   * Computes the geodetic distance from this coordinates to `coord`.
+   * **Geodetic distance** is calculated in an ellipsoid space as the shortest
+   * distance across the curved surface of the ellipsoid.
    */
   geodeticDistanceTo(coord) {
     this.as('EPSG:4326', coord0);
@@ -254,11 +259,11 @@ class Coordinates {
   }
 
   /**
-   * Calculate earth euclidean distance between this coordinates and `coord`.
-   *
-   * @param  {Coordinates}  coord  The coordinate
-   * @return {number} earth euclidean distance
+   * Computes the euclidean distance from this coordinates to `coord` in a
+   * WGS84 projection.
    *
+   * @param coord - The coordinate
+   * @returns earth euclidean distance
    */
   spatialEuclideanDistanceTo(coord) {
     this.as('EPSG:4978', coord0).toVector3(v0);
@@ -267,39 +272,45 @@ class Coordinates {
   }
 
   /**
-   * Multiplies this `coordinates` (with an implicit 1 in the 4th dimension) and `mat`.
+   * Multiplies this coordinate (with an implicit 1 in the 4th dimension)
+   * by `mat`, and divides by perspective.
    *
-   * @param      {THREE.Matrix4}  mat The matrix.
-   * @return     {Coordinates}  return this object.
+   * @param mat - The matrix.
    */
   applyMatrix4(mat) {
-    return THREE.Vector3.prototype.applyMatrix4.call(this, mat);
+    THREE.Vector3.prototype.applyMatrix4.call(this, mat);
+    return this;
   }
 
   /**
-   * Returns coordinates in the wanted [CRS](http://inspire.ec.europa.eu/theme/rs).
-   *
-   * @param {string} crs - The CRS to convert the Coordinates into.
-   * @param {Coordinates} [target] - The target to put the converted
-   * Coordinates into. If not specified a new one will be created.
-   *
-   * @return {Coordinates} - The resulting Coordinates after the conversion.
+   * Projects this coordinate to the specified
+   * [CRS](http://inspire.ec.europa.eu/theme/rs).
    *
-   * @example
-   * const position = { longitude: 2.33, latitude: 48.24, altitude: 24999549 };
-   * const coords = new Coordinates('EPSG:4326', position.longitude, position.latitude, position.altitude); // Geographic system
-   * const coordinates = coords.as('EPSG:4978'); // Geocentric system
+   * @param crs - The target CRS to which the coordinate will be converted.
+   * @param target - The target to store the projected coordinate. If this not
+   * provided a new coordinate will be created.
    *
-   * @example
-   * const position = { x: 20885167, y: 849862, z: 23385912 };
-   * const coords = new Coordinates('EPSG:4978', position.x, position.y, position.z);  // Geocentric system
-   * const coordinates = coords.as('EPSG:4326');  // Geographic system
+   * @returns The coordinate projected into the specified CRS.
    *
-   * @example
-   * new Coordinates('EPSG:4326', longitude: 2.33, latitude: 48.24, altitude: 24999549).as('EPSG:4978'); // Geocentric system
+   * @example Conversion from a geographic to a geocentric reference system
+   * ```js
+   * const geographicCoords = new Coordinates('EPSG:4326',
+   *     2.33,        // longitude
+   *     48.24,       // latitude
+   *     24999549,    // altitude
+   * );
+   * const geocentricCoords = geographicCoords.as('EPSG:4978');
+   * ```
    *
-   * @example
-   * new Coordinates('EPSG:4978', x: 20885167, y: 849862, z: 23385912).as('EPSG:4326'); // Geographic system
+   * @example Conversion from a geocentric to a geographic reference system
+   * ```js
+   * const geocentricCoords = new Coordinates('EPSG:4978',
+   *     20885167,    // x
+   *     849862,      // y
+   *     23385912,    // z
+   * );
+   * const geographicCoords = geocentricCoords.as('EPSG:4326');
+   * ```
    */
   as(crs) {
     let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Coordinates(crs);