> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Modify the camera's field of view This example uses [`setVerticalFieldOfView()`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#setverticalfieldofview) to adjust the map camera's vertical field of view, producing telephoto or wide-angle effects. Horizontal field of view is not independently controllable — it's derived from the vertical field of view and the Map's aspect ratio, and is available as a read-only value via [`getHorizontalFieldOfView()`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#gethorizontalfieldofview). > Example code: **JavaScript** ```html Modify the camera's field of view
``` **React** ```jsx import React, { useEffect, useRef, useState } 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 [fov, setFov] = useState({ vertical: 36.87, horizontal: 64.01 }); const labelStyles = { display: 'block', marginBottom: 5, fontSize: 14, color: '#555' }; const spanStyles = { minWidth: 44, display: 'inline-block', fontWeight: 'bold', color: '#0066cc', marginLeft: 5 }; const handleFov = (e) => { mapRef.current.setVerticalFieldOfView(e.target.value); setFov({ vertical: mapRef.current.getVerticalFieldOfView().toFixed(2), horizontal: mapRef.current.getHorizontalFieldOfView().toFixed(2) }); }; 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, config: { basemap: { showPlaceLabels: false, showPointOfInterestLabels: false, showRoadLabels: false } }, center: [-71.06288, 42.36834], zoom: 16.85, bearing: 141.6, pitch: 75.67 }); }, []); return ( <>
Vertical Field of View: {fov.vertical}
Horizontal Field of View (derived): {fov.horizontal}
); }; export default MapboxExample; ```