Indoor mapping | Mapbox GL JS

Mapbox GL JS supports indoor mapping, allowing your application to display detailed floor plans and let users switch between floors. There are two ways to use indoor mapping:

Built-in Standard style indoor data — A set of supported venues (such as airports) are available by enabling a configuration option in the Mapbox Standard style.
Custom indoor data — You can supply your own vector data to render indoor maps for any location. Coverage for most buildings and venues requires this approach.

Experimental feature

Indoor mapping is an experimental feature. APIs may change in future releases and data coverage is limited.

Built-in Standard style indoor data

The Mapbox Standard style includes indoor map data for a set of supported venues — for example, major airports. Coverage is limited; not all buildings or venue types are included.

To use built-in indoor mapping, you must complete both of the following steps:

Enable indoor data by setting showIndoor to true in the map's style configuration.
Add IndoorControl to provide a floor selector UI.

Both steps are required — enabling the configuration renders floor plan geometry, but without the control users have no way to switch floors.

Set the `showIndoor` configuration property

To enable built-in indoor maps, set the showIndoor configuration property on the basemap style configuration to true:


const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/standard',
    config: {
        basemap: {
            showIndoor: true
        }
    }
});

Once enabled, supported venues with indoor data will render floor plans at zoom level 16 and above.

Add the floor selector control

IndoorControl provides a UI for users to browse and switch between floors at supported venues. Add it to your map after initializing:


const indoorControl = new mapboxgl.IndoorControl();
map.addControl(indoorControl);

The control automatically populates with available floors when the viewport is over a supported venue at zoom level 16 or greater. It remains empty elsewhere.

Disable indoor mapping

To turn off indoor mapping at runtime, set showIndoor to false:


map.setConfigProperty('basemap', 'showIndoor', false);

To also remove the floor selector:


map.removeControl(indoorControl);

Custom indoor maps

If you want to display indoor maps for a location not covered by Mapbox's built-in data, you can bring your own vector data. Custom indoor mapping requires authoring your own floor plan data with the appropriate layer structure and attributes, and styling it from scratch.