Enable indoor maps in the Mapbox Standard Style | Mapbox GL JS

This example shows how to enable indoor map features in the Mapbox Standard Style. The Mapbox Standard Style includes indoor mapping for supported venues, which allows users to view and navigate indoor spaces such as airports.

Enabling indoor maps requires two steps:

Enable indoor mapping in the Mapbox Standard Style by setting the showIndoor configuration property to true.
Add the IndoorControl() to your map, which presents the map's indoor floors and allows users to switch between them. This control will only appear when the map is zoomed in to a supported indoor venue.

To learn more about indoor mapping, including adding your own indoor venues, see to the indoor mapping guide.

Experimental feature

Indoor mapping is an experimental feature. APIs may change in future releases.

JavaScript


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Enable indoor maps in the Mapbox Standard Style</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.30.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.30.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new mapboxgl.Map({
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
        container: 'map',
        zoom: 16.5,
        center: [-73.78162, 40.64236],
        pitch: 50,
        bearing: -15,
        style: 'mapbox://styles/mapbox/standard',
        config: {
            basemap: {
                showIndoor: true
            }
        }
    });

    // Add the indoor floor selector UI
    map.addControl(new mapboxgl.IndoorControl());

    // Add navigation controls (optional)
    map.addControl(new mapboxgl.NavigationControl());
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

このexampleは役に立ちましたか？