> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Control symbol scaling with setScaleFactor This example demonstrates how to use [`setScaleFactor`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#setscalefactor) to dynamically scale symbol layers on the map. The example displays rally race waypoints with icons and text labels. The control panel allows you to: - **Scale Factor**: Adjusts the global scale factor for all symbol layers using `map.setScaleFactor()`. - **Icon Size Scale Range**: Sets the minimum and maximum scaling limits for icons using the `icon-size-scale-range` layout property. - **Text Size Scale Range**: Sets the minimum and maximum scaling limits for text using the `text-size-scale-range` layout property. In the example, you can experiment with different scale factor values and scale ranges to see how they affect the appearance of the symbols on the map. "Icon Size Scale Range" and "Text Size Scale Range" allow you to control the minimum and maximum scaling limits for icons and text of the custom layer, respectively, providing flexibility in how symbols are displayed at different scale levels. For example, if you set `icon-size-scale-range` to `[1, 1]`, the icons will not scale regardless of the scale factor value. > Example code: **JavaScript** ```html Control symbol scaling with setScaleFactor
``` **React** ```jsx import React, { useState, useEffect, useRef } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; // Rally Finland waypoints - a fictional stage route around Jyväskylä const rallyWaypoints = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: { name: 'Start', order: 1 }, geometry: { type: 'Point', coordinates: [25.7473, 62.2426] } }, { type: 'Feature', properties: { name: '01', order: 2 }, geometry: { type: 'Point', coordinates: [25.7821, 62.2589] } }, { type: 'Feature', properties: { name: '02', order: 3 }, geometry: { type: 'Point', coordinates: [25.8234, 62.2712] } }, { type: 'Feature', properties: { name: '03', order: 4 }, geometry: { type: 'Point', coordinates: [25.8612, 62.2534] } }, { type: 'Feature', properties: { name: '04', order: 5 }, geometry: { type: 'Point', coordinates: [25.8923, 62.2321] } }, { type: 'Feature', properties: { name: 'Finish', order: 6 }, geometry: { type: 'Point', coordinates: [25.9245, 62.2198] } } ] }; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); const [scaleFactor, setScaleFactor] = useState(1); const [iconSizeMin, setIconSizeMin] = useState(0.8); const [iconSizeMax, setIconSizeMax] = useState(2); const [textSizeMin, setTextSizeMin] = useState(0.8); const [textSizeMax, setTextSizeMax] = useState(2); 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, style: 'mapbox://styles/gl-js-team/cmleyrmcy002f01qthcccbolv', center: [25.83, 62.245], zoom: 11.5 }); mapRef.current.on('style.load', () => { setStyleLoaded(true); mapRef.current.addSource('rally-waypoints', { type: 'geojson', data: rallyWaypoints }); mapRef.current.addLayer({ id: 'rally-waypoints', type: 'symbol', source: 'rally-waypoints', layout: { 'icon-image': 'bicycle', 'icon-size': 1.5, 'icon-size-scale-range': [0.8, 2], 'text-field': ['get', 'name'], 'text-font': ['DIN Pro Medium', 'Arial Unicode MS Regular'], 'text-size': 14, 'text-size-scale-range': [0.8, 2], 'text-offset': [0, 1.2], 'text-anchor': 'top', 'icon-allow-overlap': true, 'text-allow-overlap': true }, paint: { 'icon-color': '#e74c3c', 'text-color': '#2c3e50', 'text-halo-color': '#ffffff', 'text-halo-width': 1 } }); }); return () => mapRef.current.remove(); }, []); useEffect(() => { if (!styleLoaded) return; mapRef.current.setScaleFactor(scaleFactor); }, [scaleFactor, styleLoaded]); useEffect(() => { if (!styleLoaded) return; mapRef.current.setLayoutProperty( 'rally-waypoints', 'icon-size-scale-range', [iconSizeMin, iconSizeMax] ); }, [iconSizeMin, iconSizeMax, styleLoaded]); useEffect(() => { if (!styleLoaded) return; mapRef.current.setLayoutProperty( 'rally-waypoints', 'text-size-scale-range', [textSizeMin, textSizeMax] ); }, [textSizeMin, textSizeMax, styleLoaded]); const mapOverlayStyle = { font: "12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif", position: 'absolute', width: '220px', 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 = { border: 'none', padding: '0', margin: '0 0 10px 0' }; const labelStyle = { display: 'block', fontWeight: 'bold', marginBottom: '5px' }; const inputStyle = { width: '100%', cursor: 'ew-resize' }; const dualRangeStyle = { display: 'flex', gap: '10px' }; const dualRangeItemStyle = { flex: 1 }; const smallLabelStyle = { fontWeight: 'normal', fontSize: '11px', display: 'block', marginBottom: '3px' }; return ( <>
setScaleFactor(parseFloat(e.target.value))} style={inputStyle} />
Icon Size Scale Range
setIconSizeMin(parseFloat(e.target.value))} style={inputStyle} />
setIconSizeMax(parseFloat(e.target.value))} style={inputStyle} />
Text Size Scale Range
setTextSizeMin(parseFloat(e.target.value))} style={inputStyle} />
setTextSizeMax(parseFloat(e.target.value))} style={inputStyle} />
); }; export default MapboxExample; ```