mi-route-instructions-heading (WIP)

N.B. the travel mode and from selector is still work in progress.

The <mi-route-instructions-heading> element can be used to display way points, route details and travel mode selector.

Working example:

Example usage:

<!-- HTML -->

<mi-route-instructions-heading
    total-travel-time="1000"
    total-walking-distance="1000"
    travel-mode="walking">
</mi-route-instructions-heading>
// Javascript

const headingElement = document.querySelector('mi-route-instructions-heading');
headingElement.originName = 'My Position';
headingElement.destinationName = 'Library, Level G';

originName attribute

A originName attribute is available on the <mi-route-instruction-heading> element which should be used to set a origin location name. The attribute is required.

destinationName attribute

A destinationName attribute is available on the <mi-route-instruction-heading> element which should be used to set a destination location name. The attribute is required.

totalTravelTime attribute

A totalTravelTime attribute is available on the <mi-route-instruction-heading> element which can be used to set the total travel time in seconds.

totalWalkingDistance attribute

A totalWalkingDistance attribute is available on the <mi-route-instruction-heading> element which can be used to set the total walking distance in meters.

travelMode attribute

A travelMode attribute is available on the <mi-route-instruction-heading> element which can be used to set the preferred travelMode.

unit attribute

A unit attribute is available on the <mi-route-instruction-heading> element which can be used to set the preferred unit.

translations attribute

A translations attribute is available on the <mi-route-instruction-heading> element which can be used to pass a object of translations in preferred language. When set all labels will set using the translations. The default language is English.

Properties

Property Attribute Description Type Default
destinationName destination-name The destination location name. string undefined
originName origin-name The origin location name. string undefined
totalTravelTime total-travel-time The total travel duration in seconds. number undefined
totalWalkingDistance total-walking-distance The total walking distance in meters. number undefined
translations -- { from: string; to: string; avoidStairs: string; walk: string; walking: string; bike: string; bicycling: string; transit: string; car: string; driving: string; } { from: 'From', to: 'To', avoidStairs: 'Avoid stairs', walk: 'Walk', walking: 'Walking', bike: 'Bike', bicycling: 'Bicycling', transit: 'Transit', car: 'Car', driving: 'Driving' }
travelMode travel-mode Set preferred travel mode. Defaults to "walking". RouteTravelMode.Bicycling or RouteTravelMode.Driving or RouteTravelMode.Transit or RouteTravelMode.Walking RouteTravelMode.Walking
unit unit Set 'imperial' or 'metric' as default unit system. UnitSystem.Imperial or UnitSystem.Metric UnitSystem.Metric