mi-map-mapbox

The <mi-map-mapbox> element can be used to display and interact with MapsIndoors and Mapbox.

Working example:

Previous Step Next Step

Example usage:

<!-- HTML -->

<mi-map-mapbox
    style="width: 600px; height: 400px;"
    access-token="pk.eyJ1IjoiZW5lcHBlciIsImEiOiJjazVzNjB5a3EwODd0M2Ztb3FjYmZmbzJhIn0._fo_iTl7ZHPrl634-F2qYg"
    mi-api-key="demo"
    floor-selector-control-position="top-right"
    my-position-control-position="top-right">
</mi-map-mapbox>

<button onclick="previousStep()">Previous Step</button>
<button onclick="nextStep()">Next Step</button>

// JavaScript

const miMapElement = document.querySelector('mi-map-mapbox');
let miDirectionsServiceInstance;
let miDirectionsRendererInstance;

miMapElement.addEventListener('mapsIndoorsReady', () => {
    miMapElement.getDirectionsServiceInstance().then((directionsServiceInstance) => miDirectionsServiceInstance = directionsServiceInstance);
    miMapElement.getDirectionsRendererInstance().then((directionsRendererInstance) => miDirectionsRendererInstance = directionsRendererInstance);

    miMapElement.getMapInstance().then((mapInstance) => {
        mapInstance.setCenter({ lat: 38.8974905, lng: -77.0362723 }); // The White House
    });

    miMapElement.getMapsIndoorsInstance().then((mapsIndoorsInstance) => {
        mapsIndoorsInstance.addListener('click', (location) => setRoute(location));
    });
})

function getAnchorCoordinates(location) {
    return location.geometry.type.toLowerCase() === 'point' ?
        { lat: location.geometry.coordinates[1], lng: location.geometry.coordinates[0] } :
        { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0] };
}

function setRoute(destination) {
    const destCoordinates = getAnchorCoordinates(destination);
    const routeParams = {
        origin: { lat: 38.8956311, lng: -77.0395035, floor: 0 }, // Coordinate near The White House
        destination: { lat: destCoordinates.lat, lng: destCoordinates.lng, floor: destination.properties.floor },
        travelMode: 'WALKING',
    };

    miDirectionsServiceInstance.getRoute(routeParams)
        .then(directionsResult => miDirectionsRendererInstance.setRoute(directionsResult));
}

function nextStep() {
    miDirectionsRendererInstance.nextStep();
};

function previousStep() {
    miDirectionsRendererInstance.previousStep();
};

accessToken attribute

A accessToken attribute is available on the <mi-map-mapbox> element, which should be used to set the Mapbox access token. The attribute is required.

miApiKey attribute

A miApiKey attribute is available on the <mi-map-mapbox> element, which should be used to set the MapsIndoors API-Key. The attribute is required for the component to automatically insert and initialize the MapsIndoors JS SDK in the DOM.

disableExternalLinks attribute

A disableExternalLinks attribute is available on the <mi-map-mapbox> element, which can be set to true to prevent external links on the map from opening. This can be useful when running the map on a kiosk where you never want the browser to navigate away.

floorSelectorControlPosition attribute

A floorSelectorControlPosition attribute is available on the <mi-map-mapbox> element, which can be used to control where and if the Floor Selector should be rendered.

floorIndex attribute

A floorIndex attribute is available on the <mi-map-mapbox> element, which can be used to set or get the current floor index.

myPositionControlPosition attribute

A myPositionControlPosition attribute is available on the <mi-map-mapbox> element, which can be used to control where and if the Position Control should be rendered.

polygonHighlightOptions attribute

A polygonHighlightOptions attribute is available on the <mi-map-mapbox> element, which can be used to control if and how locations should be highlighted. Set attribute to null to disable highlighting.

polylineOptions attribute

A polylineOptions attribute is available on the <mi-map-mapbox> element, which can be used to style how the polyline looks when getting a route.

zoom attribute

A zoom attribute is available on the <mi-map-mapbox> element, which can be used to set or get the current zoom level of the map.

maxZoom attribute

A maxZoom attribute is available on the <mi-map-mapbox> element, which can be used to set or get the max zoom level of the map.

bearing attribute

A bearing attribute is available on the <mi-map-mapbox> element, which can be used to set or get the current bearing of the map.

pitch attribute

A pitch attribute is available on the <mi-map-mapbox> element, which can be used to set or get the current pitch of the map.

language attribute

A language attribute is available on the <mi-map-mapbox> element, which can be used to set the component language. This attribute will not react to changes. Default is set to English (en).

mapsIndoorsReady event

A mapsIndoorsReady event is emitted from the <mi-map-mapbox> element when MapsIndoors is ready.

getMapInstance method

A getMapInstance method is available on the <mi-map-mapbox> element, which can be used to get the Google Maps instance.

getMapsIndoorsInstance method

A getMapsIndoorsInstance method is available on the <mi-map-mapbox> element, which can be used to get the MapsIndoors instance.

getDirectionsServiceInstance method

A getDirectionsServiceInstance method is available on the <mi-map-mapbox> element, which can be used to get the MapsIndoors DirectionsService Instance.

See the DirectionsService class here: https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.services.DirectionsService.html

getDirectionsRendererInstance method

A getDirectionsRendererInstance method is available on the <mi-map-mapbox> element, which can be used to get the MapsIndoors DirectionsRenderer Instance.

See the DirectionsRenderer class here: https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.directions.DirectionsRenderer.html

highlightLocation method

A highlightLocation method is available on the <mi-map-mapbox> element, which can be used to highlight a single MapsIndoors location. The method accepts a MapsIndoors location object. The highlight options can set at the polygonHighlightOptions attribute.

clearHighlightLocation method

A clearHighlightLocation method is available on the <mi-map-mapbox> element, which can be used to dismiss an already existing MapsIndoors location highlight.

Properties

Events

Methods

clearHighlightLocation() => Promise<void>

Clear existing MapsIndoors location highlight.

Returns

Type: Promise<void>

getDirectionsRendererInstance() => Promise<any>

Get the MapsIndoors Directions Renderer Instance.

Returns

Type: Promise<any>

getDirectionsServiceInstance() => Promise<any>

Get the MapsIndoors Directions Service Instance.

Returns

Type: Promise<any>

getMapInstance() => Promise<any>

Get the map instance.

Returns

Type: Promise<any>

getMapsIndoorsInstance() => Promise<any>

Get the MapsIndoors instance.

Returns

Type: Promise<any>

highlightLocation(location: Location) => Promise<void>

Highlight a MapsIndoors location. Only a single location can be highlighted at the time.

Returns

Type: Promise<void>