The <mi-list-item-location> element can be used to display information about a MapsIndoors Location.

Working example:

Example usage:

<!-- HTML -->
    .then(location => {
        location.properties.imageURL = 'https://app.mapsindoors.com/mapsindoors/cms/assets/icons/building-icons/hall.png';
        document.querySelector('mi-list-item-location').location = location;

location attribute

A location attribute is available on the <mi-list-item-location> element, which should be used to set the MapsIndoors Location to display information for. The attribute is required.

unit attribute

A unit attribute is available on the <mi-list-item-location> element, which can be used to specify the unit the location distance (if any) should be displayed in.

It accepts the following values:

If no value is given it will default to metric unless the browser is running US English. In that case if will default to imperial.

iconBadge attribute

If given, the component will add a badge to the location image. Possible values:

iconBadgeValue attribute

In combination with the iconBadge attribute, the value of the iconBadgeValue will be used to determine the content of the badge.

locationClicked event

A locationClicked event is emitted from the <mi-list-item-location> element when it is clicked.

listItemDidRender event

A listItemDidRender event is emitted from the <mi-list-item-location> element when is has been rendered.


Property Attribute Description Type Default
iconBadge icon-badge string undefined
iconBadgeValue icon-badge-value string undefined
location location any undefined
unit unit UnitSystem.Imperial or UnitSystem.Metric undefined


Event Description Type
listItemDidRender CustomEvent<any>
locationClicked CustomEvent<any>