> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Configure the Basemap at Runtime > **Note (new): 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](https://docs.mapbox.com/mapbox-gl-js/guides/migrate/) The [Mapbox Standard Style](https://docs.mapbox.com/map-styles/guides/standard-styles/) exposes configuration properties that let you control the basemap's look and feel — including lighting presets and label visibility for POIs, transit, places, and roads — without reloading the style. This example shows a UI that calls [`setConfigProperty`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setconfigproperty) whenever the user makes a selection. > **Note: Explore all Standard Style configuration properties** > > Explore all configuration options and see how they affect the map's appearance in the [Standard Style Playground](https://docs.mapbox.com/playground/standard-style/). For the full list of options, see the [Mapbox Standard Style documentation](https://docs.mapbox.com/map-styles/guides/standard-styles/). If you want to set up these settings before the map first renders rather than updating them after load, see the [Configure the basemap during Map Initialization](https://docs.mapbox.com/mapbox-gl-js/example/initial-config-property/) example. > Example code: **JavaScript** ```html Configure the Basemap at Runtime
``` **React** ```jsx import React, { useState, useEffect, useRef } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); const [lightPreset, setLightPreset] = useState('day'); const [showPlaceLabels, setShowPlaceLabels] = useState(true); const [showPOILabels, setShowPOILabels] = useState(true); const [showRoadLabels, setShowRoadLabels] = useState(true); const [showTransitLabels, setShowTransitLabels] = useState(true); const [styleLoaded, setStyleLoaded] = useState(false); useEffect(() => { mapRef.current = 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: mapContainerRef.current, center: [2.2932, 48.86069], zoom: 15.1, pitch: 62, bearing: -20 }); mapRef.current.on('style.load', () => { setStyleLoaded(true); mapRef.current.addSource('line', { type: 'geojson', lineMetrics: true, data: { type: 'LineString', coordinates: [ [2.293389857555951, 48.85896319631851], [2.2890810326441624, 48.86174223718291] ] } }); mapRef.current.addLayer({ id: 'line', source: 'line', type: 'line', paint: { 'line-width': 12, 'line-emissive-strength': 0.8, 'line-gradient': [ 'interpolate', ['linear'], ['line-progress'], 0, 'red', 1, 'blue' ] } }); }); return () => mapRef.current.remove(); }, []); useEffect(() => { if (!styleLoaded) return; mapRef.current.setConfigProperty('basemap', 'lightPreset', lightPreset); mapRef.current.setConfigProperty( 'basemap', 'showPlaceLabels', showPlaceLabels ); mapRef.current.setConfigProperty( 'basemap', 'showPointOfInterestLabels', showPOILabels ); mapRef.current.setConfigProperty( 'basemap', 'showRoadLabels', showRoadLabels ); mapRef.current.setConfigProperty( 'basemap', 'showTransitLabels', showTransitLabels ); }, [ lightPreset, showPlaceLabels, showPOILabels, showRoadLabels, showTransitLabels ]); const mapOverlayStyle = { font: "12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif", position: 'absolute', width: '200px', top: '0', left: '0', padding: '10px' }; const mapOverlayInnerStyle = { backgroundColor: '#fff', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', borderRadius: '3px', padding: '10px', marginBottom: '10px' }; const fieldsetStyle = { display: 'flex', justifyContent: 'space-between', border: 'none' }; const labelStyle = { fontWeight: 'bold', marginRight: '10px' }; const selectFieldsetStyle = { display: 'block', border: 'none' }; const selectLabelStyle = { display: 'block', marginBottom: '5px', fontWeight: 'bold' }; const selectStyle = { width: '100%' }; return ( <>
;
); }; export default MapboxExample; ```