mi-floor-selector

The <mi-floor-selector> element can be used to display a floor-selector.

Working example:

Example usage:

<!-- HTML -->

<div>
    <div id="map"></div>
</div>

    mapsindoors.MapsIndoors.setMapsIndoorsApiKey('173386a6ff5e43cead3e396b');
    mapsindoors.MapsIndoors.setLanguage('en');

    const accessToken = 'pk.eyJ1IjoiZW5lcHBlciIsImEiOiJjazVzNjB5a3EwODd0M2Ztb3FjYmZmbzJhIn0._fo_iTl7ZHPrl634-F2qYg';
    const mapView = new mapsindoors.mapView.MapboxView({
        accessToken: accessToken,
        element: document.getElementById('map'),
        center: { lat: 57.047912598086846, lng: 9.932579446029946 },
        zoom: 15,
        maxZoom: 21
    });
    
    const mi = new mapsindoors.MapsIndoors({
        mapView: mapView,
        labelOptions: {
            pixelOffset: { width: 0, height: 14 }
        }
    });

    const mapBox = mapView.getMap();

    const floorSelectorElement = document.createElement('mi-floor-selector');
    floorSelectorElement.mapsindoors = mi;
    floorSelectorElement.primaryColor = '#FFC0CB';

    mapBox.addControl({ onAdd: function () { return floorSelectorElement }, onRemove: function () { } });

mapsindoors attribute

A mapsindoors attribute is available on the <mi-floor-selector> element, which is required to generate the floor-selector.

primaryColor attribute

A primaryColor attribute is available on the <mi-floor-selector> element, which can be used to set the background color of the selected floor inside the floor-selector. Dafult value is '#005655'.

Properties