@stadiamaps/ferrostar-webcomponents 0.19.0 → 0.20.0

package/dist/ferrostar-webcomponents.umd.cjs

@@ -75,7 +75,7 @@
         margin: 10px 0 0 0;
       }
     `],V([n()],S.prototype,"tripState",2),S=V([f("instructions-view")],S);var j1=Object.defineProperty,k1=Object.getOwnPropertyDescriptor,R=(l,t,e,a)=>{for(var i=a>1?void 0:a?k1(t,e):t,o=l.length-1,r;o>=0;o--)(r=l[o])&&(i=(a?r(t,e,i):r(i))||i);return a&&i&&j1(t,e,i),i};function m(l,t){return Math.round(l/t)*t}let y=class extends c.LitElement{constructor(){super(...arguments),this.tripState=null}getArrivalTime(l){const t=new Date,e=Math.round(l/60),a=new Date(t.getTime()+e*60*1e3),i=a.getHours(),o=a.getMinutes();return`${i}:${o<10?"0":""}${o}`}getDistanceRemaining(l){if(l>1e3){let t=l/1e3;return t>1e4?t=m(t,1):t=m(t,.1),`${t.toLocaleString()}km`}else{let t;return l>100?t=m(l,100):l>10?t=m(l,10):t=m(l,5),`${t.toLocaleString()}m`}}getDurationRemaining(l){return`${Math.floor(l/60)}m`}render(){if(this.tripState?.Navigating)return c.html`
-        <div class="arrival-view-card">
+        <div class="progress-view-card">
           <p class="arrival-text">
             ${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}
           </p>
@@ -87,7 +87,7 @@
           </p>
         </div>
       `}};y.styles=[c.css`
-      .arrival-view-card {
+      .progress-view-card {
         display: flex;
         align-items: center;
         justify-content: space-around;
@@ -102,14 +102,16 @@
         margin: 0 15px;
         white-space: nowrap;
       }
-    `],R([n()],y.prototype,"tripState",2),y=R([f("arrival-view")],y);function H(l){let t=null;return l.coords.speed&&(t={value:l.coords.speed}),{coordinates:{lat:l.coords.latitude,lng:l.coords.longitude},horizontalAccuracy:l.coords.accuracy,courseOverGround:{degrees:Math.floor(l.coords.heading||0)},timestamp:l.timestamp,speed:t}}class j{constructor(){this.simulationState=null,this.isRunning=!1,this.lastLocation=null,this.lastHeading=null,this.warpFactor=1,this.updateCallback=()=>{}}setSimulatedRoute(t){this.simulationState=u.locationSimulationFromRoute(t,10),this.lastLocation=this.simulationState?.current_location,this.start()}async start(){if(!this.isRunning){for(this.isRunning=!0;this.simulationState!==null;){await new Promise(a=>setTimeout(a,1/this.warpFactor*1e3));const t=this.simulationState,e=u.advanceLocationSimulation(t);if(t===e)return;this.simulationState=e,this.lastLocation=e.current_location,this.updateCallback&&this.updateCallback()}this.isRunning=!1}}stop(){this.simulationState=null}}class G1{constructor(){this.geolocationWatchId=null,this.lastLocation=null,this.lastHeading=null,this.updateCallback=()=>{}}start(){if(navigator.geolocation&&!this.geolocationWatchId){const t={enableHighAccuracy:!0};this.geolocationWatchId=navigator.geolocation.watchPosition(e=>{this.lastLocation=H(e),this.updateCallback&&this.updateCallback()},e=>{this.geolocationWatchId=null,alert(e.message)},t)}}getCurrentLocation(t){if(!navigator.geolocation)return new Promise((a,i)=>{i("This navigator does not support geolocation.")});const e=new Date().getTime()-t;return this.lastLocation&&this.lastLocation.timestamp>e?this.lastLocation:new Promise((a,i)=>{navigator.geolocation.getCurrentPosition(o=>{const r=H(o);this.lastLocation=r,a(r)},i)})}stop(){this.lastLocation=null,navigator.geolocation&&this.geolocationWatchId&&(navigator.geolocation.clearWatch(this.geolocationWatchId),this.geolocationWatchId=null)}}var W1=Object.defineProperty,K1=Object.getOwnPropertyDescriptor,g=(l,t,e,a)=>{for(var i=a>1?void 0:a?K1(t,e):t,o=l.length-1,r;o>=0;o--)(r=l[o])&&(i=(a?r(t,e,i):r(i))||i);return a&&i&&W1(t,e,i),i};s.FerrostarMap=class extends c.LitElement{constructor(){super(),this.valhallaEndpointUrl="",this.styleUrl="",this.profile="",this.center=null,this.pitch=60,this.zoom=6,this.httpClient=fetch,this.options={},this._tripState=null,this.useVoiceGuidance=!1,this.geolocateOnLoad=!0,this.routeAdapter=null,this.map=null,this.geolocateControl=null,this.navigationController=null,this.simulatedLocationMarker=null,this.lastSpokenUtteranceId=null,this.httpClient===fetch&&(this.httpClient=this.httpClient.bind(window))}updated(t){t.has("locationProvider")&&this.locationProvider&&(this.locationProvider.updateCallback=this.onLocationUpdated.bind(this)),this.map&&(t.has("styleUrl")&&this.map.setStyle(this.styleUrl),t.has("center")&&(t.get("center")===null&&this.center!==null?this.map.jumpTo({center:this.center}):this.center!==null&&(this.map.getCenter().distanceTo(_.LngLat.convert(this.center))>5e5?this.map.jumpTo({center:this.center}):this.map.flyTo({center:this.center}))),t.has("pitch")&&this.map.setPitch(this.pitch),t.has("zoom")&&this.map.setZoom(this.zoom))}firstUpdated(){this.map=new _.Map({container:this.shadowRoot.getElementById("map"),style:this.styleUrl?this.styleUrl:"https://demotiles.maplibre.org/style.json",center:this.center??[0,0],pitch:this.pitch,bearing:0,zoom:this.zoom,attributionControl:{compact:!0}}),this.geolocateControl=new _.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),this.map.addControl(this.geolocateControl),this.map.on("load",t=>{this.geolocateOnLoad&&this.geolocateControl?.trigger(),this.configureMap!==void 0&&this.configureMap(t.target)})}async getRoutes(t,e){this.routeAdapter=new u.RouteAdapter(this.valhallaEndpointUrl,this.profile,JSON.stringify(this.options));const a=this.routeAdapter.generateRequest(t,e),i=a.get("method");let o=new URL(a.get("url"));const r=a.get("body"),h=await this.httpClient(o,{method:i,body:new Uint8Array(r).buffer}),v=new Uint8Array(await h.arrayBuffer());return this.routeAdapter.parseResponse(v)}startNavigation(t,e){this.locationProvider.start(),this.onNavigationStart&&this.map&&this.onNavigationStart(this.map),this.navigationController=new u.NavigationController(t,e),this.locationProvider.updateCallback=this.onLocationUpdated.bind(this);const a=this.locationProvider.lastLocation?this.locationProvider.lastLocation:{coordinates:t.geometry[0],horizontalAccuracy:0,courseOverGround:null,timestamp:Date.now(),speed:null};this._tripState=this.navigationController.getInitialState(a),this.clearMap(),this.map?.addSource("route",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:t.geometry.map(i=>[i.lng,i.lat])}}}),this.map?.addLayer({id:"route",type:"line",source:"route",layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":"#3700B3","line-width":8}}),this.map?.setCenter(t.geometry[0]),this.locationProvider instanceof j&&(this.simulatedLocationMarker=new _.Marker({color:"green"}).setLngLat(t.geometry[0]).addTo(this.map))}async stopNavigation(){this.routeAdapter?.free(),this.routeAdapter=null,this.navigationController?.free(),this.navigationController=null,this._tripState=null,this.clearMap(),this.locationProvider&&(this.locationProvider.updateCallback=null),this.onNavigationStop&&this.map&&this.onNavigationStop(this.map)}onLocationUpdated(){if(!this.navigationController)return;this._tripState=this.navigationController.updateUserLocation(this.locationProvider.lastLocation,this._tripState),this.simulatedLocationMarker?.setLngLat(this.locationProvider.lastLocation.coordinates),this.map?.easeTo({center:this.locationProvider.lastLocation.coordinates,bearing:this.locationProvider.lastLocation.courseOverGround.degrees||0});const t=this._tripState;this.useVoiceGuidance&&t!=null&&typeof t=="object"&&"Navigating"in t&&t.Navigating?.spokenInstruction&&t.Navigating?.spokenInstruction.utteranceId!==this.lastSpokenUtteranceId&&(this.lastSpokenUtteranceId=t.Navigating?.spokenInstruction.utteranceId,window.speechSynthesis.cancel(),window.speechSynthesis.speak(new SpeechSynthesisUtterance(t.Navigating?.spokenInstruction.text)))}clearMap(){this.map?.getLayer("route")&&this.map?.removeLayer("route"),this.map?.getSource("route")&&this.map?.removeSource("route"),this.simulatedLocationMarker?.remove()}render(){return c.html`
+    `],R([n()],y.prototype,"tripState",2),y=R([f("trip-progress-view")],y);function H(l){let t=null;return l.coords.speed&&(t={value:l.coords.speed}),{coordinates:{lat:l.coords.latitude,lng:l.coords.longitude},horizontalAccuracy:l.coords.accuracy,courseOverGround:{degrees:Math.floor(l.coords.heading||0)},timestamp:l.timestamp,speed:t}}class j{constructor(){this.simulationState=null,this.isRunning=!1,this.lastLocation=null,this.lastHeading=null,this.warpFactor=1,this.updateCallback=()=>{}}setSimulatedRoute(t){this.simulationState=u.locationSimulationFromRoute(t,10,"None"),this.lastLocation=this.simulationState?.current_location,this.start()}async start(){if(!this.isRunning){for(this.isRunning=!0;this.simulationState!==null;){await new Promise(a=>setTimeout(a,1/this.warpFactor*1e3));const t=this.simulationState,e=u.advanceLocationSimulation(t);if(t===e)return;this.simulationState=e,this.lastLocation=e.current_location,this.updateCallback&&this.updateCallback()}this.isRunning=!1}}stop(){this.simulationState=null}}class G1{constructor(){this.geolocationWatchId=null,this.lastLocation=null,this.lastHeading=null,this.updateCallback=()=>{}}start(){if(navigator.geolocation&&!this.geolocationWatchId){const t={enableHighAccuracy:!0};this.geolocationWatchId=navigator.geolocation.watchPosition(e=>{this.lastLocation=H(e),this.updateCallback&&this.updateCallback()},e=>{this.geolocationWatchId=null,alert(e.message)},t)}}getCurrentLocation(t){if(!navigator.geolocation)return new Promise((a,i)=>{i("This navigator does not support geolocation.")});const e=new Date().getTime()-t;return this.lastLocation&&this.lastLocation.timestamp>e?this.lastLocation:new Promise((a,i)=>{navigator.geolocation.getCurrentPosition(o=>{const r=H(o);this.lastLocation=r,a(r)},i)})}stop(){this.lastLocation=null,navigator.geolocation&&this.geolocationWatchId&&(navigator.geolocation.clearWatch(this.geolocationWatchId),this.geolocationWatchId=null)}}var W1=Object.defineProperty,K1=Object.getOwnPropertyDescriptor,g=(l,t,e,a)=>{for(var i=a>1?void 0:a?K1(t,e):t,o=l.length-1,r;o>=0;o--)(r=l[o])&&(i=(a?r(t,e,i):r(i))||i);return a&&i&&W1(t,e,i),i};s.FerrostarMap=class extends c.LitElement{constructor(){super(),this.valhallaEndpointUrl="",this.styleUrl="",this.profile="",this.center=null,this.pitch=60,this.zoom=6,this.httpClient=fetch,this.options={},this._tripState=null,this.useVoiceGuidance=!1,this.geolocateOnLoad=!0,this.routeAdapter=null,this.map=null,this.geolocateControl=null,this.navigationController=null,this.simulatedLocationMarker=null,this.lastSpokenUtteranceId=null,this.httpClient===fetch&&(this.httpClient=this.httpClient.bind(window))}updated(t){t.has("locationProvider")&&this.locationProvider&&(this.locationProvider.updateCallback=this.onLocationUpdated.bind(this)),this.map&&(t.has("styleUrl")&&this.map.setStyle(this.styleUrl),t.has("center")&&(t.get("center")===null&&this.center!==null?this.map.jumpTo({center:this.center}):this.center!==null&&(this.map.getCenter().distanceTo(_.LngLat.convert(this.center))>5e5?this.map.jumpTo({center:this.center}):this.map.flyTo({center:this.center}))),t.has("pitch")&&this.map.setPitch(this.pitch),t.has("zoom")&&this.map.setZoom(this.zoom))}firstUpdated(){this.map=new _.Map({container:this.shadowRoot.getElementById("map"),style:this.styleUrl?this.styleUrl:"https://demotiles.maplibre.org/style.json",center:this.center??[0,0],pitch:this.pitch,bearing:0,zoom:this.zoom,attributionControl:{compact:!0}}),this.geolocateControl=new _.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),this.map.addControl(this.geolocateControl),this.map.on("load",t=>{this.geolocateOnLoad&&this.geolocateControl?.trigger(),this.configureMap!==void 0&&this.configureMap(t.target)})}async getRoutes(t,e){this.routeAdapter=new u.RouteAdapter(this.valhallaEndpointUrl,this.profile,JSON.stringify(this.options));const a=this.routeAdapter.generateRequest(t,e),i=a.get("method");let o=new URL(a.get("url"));const r=a.get("body"),h=await this.httpClient(o,{method:i,body:new Uint8Array(r).buffer}),v=new Uint8Array(await h.arrayBuffer());return this.routeAdapter.parseResponse(v)}startNavigation(t,e){this.locationProvider.start(),this.onNavigationStart&&this.map&&this.onNavigationStart(this.map),this.navigationController=new u.NavigationController(t,e),this.locationProvider.updateCallback=this.onLocationUpdated.bind(this);const a=this.locationProvider.lastLocation?this.locationProvider.lastLocation:{coordinates:t.geometry[0],horizontalAccuracy:0,courseOverGround:null,timestamp:Date.now(),speed:null};this._tripState=this.navigationController.getInitialState(a),this.clearMap(),this.map?.addSource("route",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:t.geometry.map(i=>[i.lng,i.lat])}}}),this.map?.addLayer({id:"route",type:"line",source:"route",layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":"#3700B3","line-width":8}}),this.map?.setCenter(t.geometry[0]),this.locationProvider instanceof j&&(this.simulatedLocationMarker=new _.Marker({color:"green"}).setLngLat(t.geometry[0]).addTo(this.map))}async stopNavigation(){this.routeAdapter?.free(),this.routeAdapter=null,this.navigationController?.free(),this.navigationController=null,this._tripState=null,this.clearMap(),this.locationProvider&&(this.locationProvider.updateCallback=null),this.onNavigationStop&&this.map&&this.onNavigationStop(this.map)}onLocationUpdated(){if(!this.navigationController)return;this._tripState=this.navigationController.updateUserLocation(this.locationProvider.lastLocation,this._tripState),this.simulatedLocationMarker?.setLngLat(this.locationProvider.lastLocation.coordinates),this.map?.easeTo({center:this.locationProvider.lastLocation.coordinates,bearing:this.locationProvider.lastLocation.courseOverGround.degrees||0});const t=this._tripState;this.useVoiceGuidance&&t!=null&&typeof t=="object"&&"Navigating"in t&&t.Navigating?.spokenInstruction&&t.Navigating?.spokenInstruction.utteranceId!==this.lastSpokenUtteranceId&&(this.lastSpokenUtteranceId=t.Navigating?.spokenInstruction.utteranceId,window.speechSynthesis.cancel(),window.speechSynthesis.speak(new SpeechSynthesisUtterance(t.Navigating?.spokenInstruction.text)))}clearMap(){this.map?.getLayer("route")&&this.map?.removeLayer("route"),this.map?.getSource("route")&&this.map?.removeSource("route"),this.simulatedLocationMarker?.remove()}render(){return c.html`
       <style>
         ${this.customStyles}
       </style>
       <div id="map">
         <instructions-view .tripState=${this._tripState}></instructions-view>
         <div id="bottom-component">
-          <arrival-view .tripState=${this._tripState}></arrival-view>
+          <trip-progress-view
+            .tripState=${this._tripState}
+          ></trip-progress-view>
           <button
             id="stop-button"
             @click=${this.stopNavigation}