Set initial map's style configuration property | Mapbox GL JS

Upgrade to Mapbox GL JS v3

This feature is available in Mapbox GL JS v3. Learn how to migrate in our migrate to v3 guide

This example demonstrates how to set the initial Mapbox Standard Style configuration property during map creation, rather than changing it at runtime with setConfigProperty.

JavaScript


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set initial map's style configuration property</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.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>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        zoom: 16.2,
        pitch: 75,
        bearing: -170,
        center: [-122.395, 37.792],
        style: 'mapbox://styles/mapbox/standard', // Use the Mapbox Standard style
        config: {
            // Initial configuration for the Mapbox Standard style set above. By default, its ID is `basemap`.
            basemap: {
                // Here, we're disabling all of the 3D layers such as landmarks, trees, and 3D extrusions.
                show3dObjects: false
            }
        }
    });
</script>

</body>
</html>

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

追加の開発者リソース

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