@stadiamaps/ferrostar-webcomponents 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"ferrostar-map.d.ts","sourceRoot":"","sources":["../src/ferrostar-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAEvE,OAAO,UAAU,EAAE,EACjB,gBAAgB,EAEhB,UAAU,EACV,GAAG,EACJ,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,oBAAoB,EACpB,YAAY,EACZ,SAAS,EACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AAIxB;;GAEG;AACH,qBACa,YAAa,SAAQ,UAAU;IAE1C,mBAAmB,EAAE,MAAM,CAAM;IAGjC,QAAQ,EAAE,MAAM,CAAM;IAGtB,OAAO,EAAE,MAAM,CAAM;IAGrB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAQ;IAGjC,KAAK,EAAE,MAAM,CAAM;IAGnB,IAAI,EAAE,MAAM,CAAK;IAGjB,UAAU,CAAC,EAAE,QAAQ,CAAS;IAI9B,gBAAgB,EAAG,GAAG,CAAC;IAIvB,OAAO,EAAE,MAAM,CAAM;IAGrB,SAAS,CAAC,UAAU,EAAE,SAAS,GAAG,IAAI,CAAQ;IAI9C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAGlC,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAGvC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAEtC;;;OAGG;IAEH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;;OAGG;IAEH,gBAAgB,EAAE,OAAO,CAAS;IAElC;;;OAGG;IAEH,eAAe,EAAE,OAAO,CAAQ;IAEhC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IACzC,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,IAAI,CAAQ;IAClC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACjD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IACzD,uBAAuB,EAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAQ;IACzD,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5C,MAAM,CAAC,MAAM,4BAuDX;;IAWF,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IA+B/C,YAAY;IAkCN,SAAS,CAAC,eAAe,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IA+BpD,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG;IAgEjC,cAAc;IAYpB,OAAO,CAAC,iBAAiB;IA8CzB,OAAO,CAAC,QAAQ;IAMhB,MAAM;CAoBP"}
1
+ {"version":3,"file":"ferrostar-map.d.ts","sourceRoot":"","sources":["../src/ferrostar-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAEvE,OAAO,UAAU,EAAE,EACjB,gBAAgB,EAEhB,UAAU,EACV,GAAG,EACJ,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,oBAAoB,EACpB,YAAY,EACZ,SAAS,EACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAI9B;;GAEG;AACH,qBACa,YAAa,SAAQ,UAAU;IAE1C,mBAAmB,EAAE,MAAM,CAAM;IAGjC,QAAQ,EAAE,MAAM,CAAM;IAGtB,OAAO,EAAE,MAAM,CAAM;IAGrB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAQ;IAGjC,KAAK,EAAE,MAAM,CAAM;IAGnB,IAAI,EAAE,MAAM,CAAK;IAGjB,UAAU,CAAC,EAAE,QAAQ,CAAS;IAI9B,gBAAgB,EAAG,GAAG,CAAC;IAIvB,OAAO,EAAE,MAAM,CAAM;IAGrB,SAAS,CAAC,UAAU,EAAE,SAAS,GAAG,IAAI,CAAQ;IAI9C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAGlC,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAGvC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAEtC;;;OAGG;IAEH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;;OAGG;IAEH,gBAAgB,EAAE,OAAO,CAAS;IAElC;;;OAGG;IAEH,eAAe,EAAE,OAAO,CAAQ;IAEhC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IACzC,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,IAAI,CAAQ;IAClC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACjD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IACzD,uBAAuB,EAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAQ;IACzD,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5C,MAAM,CAAC,MAAM,4BAuDX;;IAWF,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IA+B/C,YAAY;IAkCN,SAAS,CAAC,eAAe,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IA+BpD,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG;IAgEjC,cAAc;IAYpB,OAAO,CAAC,iBAAiB;IA8CzB,OAAO,CAAC,QAAQ;IAMhB,MAAM;CAsBP"}
@@ -75,7 +75,7 @@ import{css as v,LitElement as u,html as b,unsafeCSS as W}from"lit";import N,{Lng
75
75
  margin: 10px 0 0 0;
76
76
  }
77
77
  `],H([n()],O.prototype,"tripState",2),O=H([f("instructions-view")],O);var S3=Object.defineProperty,y3=Object.getOwnPropertyDescriptor,j=(a,t,e,l)=>{for(var i=l>1?void 0:l?y3(t,e):t,o=a.length-1,r;o>=0;o--)(r=a[o])&&(i=(l?r(t,e,i):r(i))||i);return l&&i&&S3(t,e,i),i};function m(a,t){return Math.round(a/t)*t}let S=class extends u{constructor(){super(...arguments),this.tripState=null}getArrivalTime(a){const t=new Date,e=Math.round(a/60),l=new Date(t.getTime()+e*60*1e3),i=l.getHours(),o=l.getMinutes();return`${i}:${o<10?"0":""}${o}`}getDistanceRemaining(a){if(a>1e3){let t=a/1e3;return t>1e4?t=m(t,1):t=m(t,.1),`${t.toLocaleString()}km`}else{let t;return a>100?t=m(a,100):a>10?t=m(a,10):t=m(a,5),`${t.toLocaleString()}m`}}getDurationRemaining(a){return`${Math.floor(a/60)}m`}render(){var a;if((a=this.tripState)!=null&&a.Navigating)return b`
78
- <div class="arrival-view-card">
78
+ <div class="progress-view-card">
79
79
  <p class="arrival-text">
80
80
  ${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}
81
81
  </p>
@@ -87,7 +87,7 @@ import{css as v,LitElement as u,html as b,unsafeCSS as W}from"lit";import N,{Lng
87
87
  </p>
88
88
  </div>
89
89
  `}};S.styles=[v`
90
- .arrival-view-card {
90
+ .progress-view-card {
91
91
  display: flex;
92
92
  align-items: center;
93
93
  justify-content: space-around;
@@ -102,14 +102,16 @@ import{css as v,LitElement as u,html as b,unsafeCSS as W}from"lit";import N,{Lng
102
102
  margin: 0 15px;
103
103
  white-space: nowrap;
104
104
  }
105
- `],j([n()],S.prototype,"tripState",2),S=j([f("arrival-view")],S);function k(a){let t=null;return a.coords.speed&&(t={value:a.coords.speed}),{coordinates:{lat:a.coords.latitude,lng:a.coords.longitude},horizontalAccuracy:a.coords.accuracy,courseOverGround:{degrees:Math.floor(a.coords.heading||0)},timestamp:a.timestamp,speed:t}}class G{constructor(){this.simulationState=null,this.isRunning=!1,this.lastLocation=null,this.lastHeading=null,this.warpFactor=1,this.updateCallback=()=>{}}setSimulatedRoute(t){var e;this.simulationState=B(t,10),this.lastLocation=(e=this.simulationState)==null?void 0:e.current_location,this.start()}async start(){if(!this.isRunning){for(this.isRunning=!0;this.simulationState!==null;){await new Promise(l=>setTimeout(l,1/this.warpFactor*1e3));const t=this.simulationState,e=Z(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 A3{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=k(e),this.updateCallback&&this.updateCallback()},e=>{this.geolocationWatchId=null,alert(e.message)},t)}}getCurrentLocation(t){if(!navigator.geolocation)return new Promise((l,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((l,i)=>{navigator.geolocation.getCurrentPosition(o=>{const r=k(o);this.lastLocation=r,l(r)},i)})}stop(){this.lastLocation=null,navigator.geolocation&&this.geolocationWatchId&&(navigator.geolocation.clearWatch(this.geolocationWatchId),this.geolocationWatchId=null)}}var C3=Object.defineProperty,L3=Object.getOwnPropertyDescriptor,c=(a,t,e,l)=>{for(var i=l>1?void 0:l?L3(t,e):t,o=a.length-1,r;o>=0;o--)(r=a[o])&&(i=(l?r(t,e,i):r(i))||i);return l&&i&&C3(t,e,i),i};let s=class extends u{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(a){a.has("locationProvider")&&this.locationProvider&&(this.locationProvider.updateCallback=this.onLocationUpdated.bind(this)),this.map&&(a.has("styleUrl")&&this.map.setStyle(this.styleUrl),a.has("center")&&(a.get("center")===null&&this.center!==null?this.map.jumpTo({center:this.center}):this.center!==null&&(this.map.getCenter().distanceTo(K.convert(this.center))>5e5?this.map.jumpTo({center:this.center}):this.map.flyTo({center:this.center}))),a.has("pitch")&&this.map.setPitch(this.pitch),a.has("zoom")&&this.map.setZoom(this.zoom))}firstUpdated(){this.map=new N.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 P({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),this.map.addControl(this.geolocateControl),this.map.on("load",a=>{var t;this.geolocateOnLoad&&((t=this.geolocateControl)==null||t.trigger()),this.configureMap!==void 0&&this.configureMap(a.target)})}async getRoutes(a,t){this.routeAdapter=new T(this.valhallaEndpointUrl,this.profile,JSON.stringify(this.options));const e=this.routeAdapter.generateRequest(a,t),l=e.get("method");let i=new URL(e.get("url"));const o=e.get("body"),r=await this.httpClient(i,{method:l,body:new Uint8Array(o).buffer}),g=new Uint8Array(await r.arrayBuffer());return this.routeAdapter.parseResponse(g)}startNavigation(a,t){var l,i,o;this.locationProvider.start(),this.onNavigationStart&&this.map&&this.onNavigationStart(this.map),this.navigationController=new $(a,t),this.locationProvider.updateCallback=this.onLocationUpdated.bind(this);const e=this.locationProvider.lastLocation?this.locationProvider.lastLocation:{coordinates:a.geometry[0],horizontalAccuracy:0,courseOverGround:null,timestamp:Date.now(),speed:null};this._tripState=this.navigationController.getInitialState(e),this.clearMap(),(l=this.map)==null||l.addSource("route",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:a.geometry.map(r=>[r.lng,r.lat])}}}),(i=this.map)==null||i.addLayer({id:"route",type:"line",source:"route",layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":"#3700B3","line-width":8}}),(o=this.map)==null||o.setCenter(a.geometry[0]),this.locationProvider instanceof G&&(this.simulatedLocationMarker=new N.Marker({color:"green"}).setLngLat(a.geometry[0]).addTo(this.map))}async stopNavigation(){var a,t;(a=this.routeAdapter)==null||a.free(),this.routeAdapter=null,(t=this.navigationController)==null||t.free(),this.navigationController=null,this._tripState=null,this.clearMap(),this.locationProvider&&(this.locationProvider.updateCallback=null),this.onNavigationStop&&this.map&&this.onNavigationStop(this.map)}onLocationUpdated(){var t,e,l,i,o,r;if(!this.navigationController)return;this._tripState=this.navigationController.updateUserLocation(this.locationProvider.lastLocation,this._tripState),(t=this.simulatedLocationMarker)==null||t.setLngLat(this.locationProvider.lastLocation.coordinates),(e=this.map)==null||e.easeTo({center:this.locationProvider.lastLocation.coordinates,bearing:this.locationProvider.lastLocation.courseOverGround.degrees||0});const a=this._tripState;this.useVoiceGuidance&&a!=null&&typeof a=="object"&&"Navigating"in a&&((l=a.Navigating)!=null&&l.spokenInstruction)&&((i=a.Navigating)==null?void 0:i.spokenInstruction.utteranceId)!==this.lastSpokenUtteranceId&&(this.lastSpokenUtteranceId=(o=a.Navigating)==null?void 0:o.spokenInstruction.utteranceId,window.speechSynthesis.cancel(),window.speechSynthesis.speak(new SpeechSynthesisUtterance((r=a.Navigating)==null?void 0:r.spokenInstruction.text)))}clearMap(){var a,t,e,l,i;(a=this.map)!=null&&a.getLayer("route")&&((t=this.map)==null||t.removeLayer("route")),(e=this.map)!=null&&e.getSource("route")&&((l=this.map)==null||l.removeSource("route")),(i=this.simulatedLocationMarker)==null||i.remove()}render(){return b`
105
+ `],j([n()],S.prototype,"tripState",2),S=j([f("trip-progress-view")],S);function k(a){let t=null;return a.coords.speed&&(t={value:a.coords.speed}),{coordinates:{lat:a.coords.latitude,lng:a.coords.longitude},horizontalAccuracy:a.coords.accuracy,courseOverGround:{degrees:Math.floor(a.coords.heading||0)},timestamp:a.timestamp,speed:t}}class G{constructor(){this.simulationState=null,this.isRunning=!1,this.lastLocation=null,this.lastHeading=null,this.warpFactor=1,this.updateCallback=()=>{}}setSimulatedRoute(t){var e;this.simulationState=B(t,10,"None"),this.lastLocation=(e=this.simulationState)==null?void 0:e.current_location,this.start()}async start(){if(!this.isRunning){for(this.isRunning=!0;this.simulationState!==null;){await new Promise(l=>setTimeout(l,1/this.warpFactor*1e3));const t=this.simulationState,e=Z(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 A3{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=k(e),this.updateCallback&&this.updateCallback()},e=>{this.geolocationWatchId=null,alert(e.message)},t)}}getCurrentLocation(t){if(!navigator.geolocation)return new Promise((l,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((l,i)=>{navigator.geolocation.getCurrentPosition(o=>{const r=k(o);this.lastLocation=r,l(r)},i)})}stop(){this.lastLocation=null,navigator.geolocation&&this.geolocationWatchId&&(navigator.geolocation.clearWatch(this.geolocationWatchId),this.geolocationWatchId=null)}}var C3=Object.defineProperty,L3=Object.getOwnPropertyDescriptor,c=(a,t,e,l)=>{for(var i=l>1?void 0:l?L3(t,e):t,o=a.length-1,r;o>=0;o--)(r=a[o])&&(i=(l?r(t,e,i):r(i))||i);return l&&i&&C3(t,e,i),i};let s=class extends u{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(a){a.has("locationProvider")&&this.locationProvider&&(this.locationProvider.updateCallback=this.onLocationUpdated.bind(this)),this.map&&(a.has("styleUrl")&&this.map.setStyle(this.styleUrl),a.has("center")&&(a.get("center")===null&&this.center!==null?this.map.jumpTo({center:this.center}):this.center!==null&&(this.map.getCenter().distanceTo(K.convert(this.center))>5e5?this.map.jumpTo({center:this.center}):this.map.flyTo({center:this.center}))),a.has("pitch")&&this.map.setPitch(this.pitch),a.has("zoom")&&this.map.setZoom(this.zoom))}firstUpdated(){this.map=new N.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 P({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),this.map.addControl(this.geolocateControl),this.map.on("load",a=>{var t;this.geolocateOnLoad&&((t=this.geolocateControl)==null||t.trigger()),this.configureMap!==void 0&&this.configureMap(a.target)})}async getRoutes(a,t){this.routeAdapter=new T(this.valhallaEndpointUrl,this.profile,JSON.stringify(this.options));const e=this.routeAdapter.generateRequest(a,t),l=e.get("method");let i=new URL(e.get("url"));const o=e.get("body"),r=await this.httpClient(i,{method:l,body:new Uint8Array(o).buffer}),g=new Uint8Array(await r.arrayBuffer());return this.routeAdapter.parseResponse(g)}startNavigation(a,t){var l,i,o;this.locationProvider.start(),this.onNavigationStart&&this.map&&this.onNavigationStart(this.map),this.navigationController=new $(a,t),this.locationProvider.updateCallback=this.onLocationUpdated.bind(this);const e=this.locationProvider.lastLocation?this.locationProvider.lastLocation:{coordinates:a.geometry[0],horizontalAccuracy:0,courseOverGround:null,timestamp:Date.now(),speed:null};this._tripState=this.navigationController.getInitialState(e),this.clearMap(),(l=this.map)==null||l.addSource("route",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:a.geometry.map(r=>[r.lng,r.lat])}}}),(i=this.map)==null||i.addLayer({id:"route",type:"line",source:"route",layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":"#3700B3","line-width":8}}),(o=this.map)==null||o.setCenter(a.geometry[0]),this.locationProvider instanceof G&&(this.simulatedLocationMarker=new N.Marker({color:"green"}).setLngLat(a.geometry[0]).addTo(this.map))}async stopNavigation(){var a,t;(a=this.routeAdapter)==null||a.free(),this.routeAdapter=null,(t=this.navigationController)==null||t.free(),this.navigationController=null,this._tripState=null,this.clearMap(),this.locationProvider&&(this.locationProvider.updateCallback=null),this.onNavigationStop&&this.map&&this.onNavigationStop(this.map)}onLocationUpdated(){var t,e,l,i,o,r;if(!this.navigationController)return;this._tripState=this.navigationController.updateUserLocation(this.locationProvider.lastLocation,this._tripState),(t=this.simulatedLocationMarker)==null||t.setLngLat(this.locationProvider.lastLocation.coordinates),(e=this.map)==null||e.easeTo({center:this.locationProvider.lastLocation.coordinates,bearing:this.locationProvider.lastLocation.courseOverGround.degrees||0});const a=this._tripState;this.useVoiceGuidance&&a!=null&&typeof a=="object"&&"Navigating"in a&&((l=a.Navigating)!=null&&l.spokenInstruction)&&((i=a.Navigating)==null?void 0:i.spokenInstruction.utteranceId)!==this.lastSpokenUtteranceId&&(this.lastSpokenUtteranceId=(o=a.Navigating)==null?void 0:o.spokenInstruction.utteranceId,window.speechSynthesis.cancel(),window.speechSynthesis.speak(new SpeechSynthesisUtterance((r=a.Navigating)==null?void 0:r.spokenInstruction.text)))}clearMap(){var a,t,e,l,i;(a=this.map)!=null&&a.getLayer("route")&&((t=this.map)==null||t.removeLayer("route")),(e=this.map)!=null&&e.getSource("route")&&((l=this.map)==null||l.removeSource("route")),(i=this.simulatedLocationMarker)==null||i.remove()}render(){return b`
106
106
  <style>
107
107
  ${this.customStyles}
108
108
  </style>
109
109
  <div id="map">
110
110
  <instructions-view .tripState=${this._tripState}></instructions-view>
111
111
  <div id="bottom-component">
112
- <arrival-view .tripState=${this._tripState}></arrival-view>
112
+ <trip-progress-view
113
+ .tripState=${this._tripState}
114
+ ></trip-progress-view>
113
115
  <button
114
116
  id="stop-button"
115
117
  @click=${this.stopNavigation}