Light
Light represents the light source for extruded geometries (3D buildings and terrain). It controls how these 3D features are lit and shaded.
Import
import { Light } from '@rnmapbox/maps';
Basic Usage
import { MapView, Light, Camera } from '@rnmapbox/maps';
function MyMap() {
return (
<MapView style={{ flex: 1 }}>
<Light
style={{
intensity: 0.8,
color: '#ffffff',
position: [1.5, 90, 60],
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
</MapView>
);
}
Props
style
style
LightLayerStyleProps
required
Customizable style attributes for the light source.
Style Properties
The style prop accepts a LightLayerStyleProps object with the following properties:
anchor
style.anchor
'map' | 'viewport'
default:"viewport"
Whether extruded geometries are lit relative to the map or viewport.
map - The light source rotates with the mapviewport - The light source is fixed to the viewport (user’s view)
<Light
style={{
anchor: 'map',
}}
/>
position
style.position
[number, number, number]
default:"[1.15, 210, 30]"
Position of the light source relative to lit geometries, in [r, a, p] format:
r (radial) - Distance from the center of the base of an object to its lighta (azimuthal) - Position of the light in degrees (0° = top/north, clockwise)p (polar) - Height of the light (0° = directly above, 180° = directly below)
<Light
style={{
position: [1.5, 90, 45], // [radial, azimuth, polar]
}}
/>
positionTransition
style.positionTransition
{ duration: number, delay: number }
default:"{ duration: 300, delay: 0 }"
The transition affecting any changes to the position property.<Light
style={{
position: [1.5, 90, 45],
positionTransition: {
duration: 1000,
delay: 0,
},
}}
/>
color
Color tint for lighting extruded geometries. Accepts any valid CSS color.<Light
style={{
color: '#ffcc00',
}}
/>
colorTransition
style.colorTransition
{ duration: number, delay: number }
default:"{ duration: 300, delay: 0 }"
The transition affecting any changes to the color property.<Light
style={{
color: '#ffcc00',
colorTransition: {
duration: 1000,
delay: 0,
},
}}
/>
intensity
Intensity of lighting on a scale from 0 to 1. Higher numbers create more extreme contrast.
0 - No lighting effect1 - Maximum lighting effect
<Light
style={{
intensity: 0.8,
}}
/>
intensityTransition
style.intensityTransition
{ duration: number, delay: number }
default:"{ duration: 300, delay: 0 }"
The transition affecting any changes to the intensity property.<Light
style={{
intensity: 0.8,
intensityTransition: {
duration: 500,
delay: 0,
},
}}
/>
Examples
Basic Lighting
Sunset Lighting
Noon Lighting
Animated Lighting
Time of Day
import { MapView, Light, Camera } from '@rnmapbox/maps';
function BasicLighting() {
return (
<MapView style={{ flex: 1 }}>
<Light
style={{
intensity: 0.7,
color: '#ffffff',
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
</MapView>
);
}
import { MapView, Light, Camera } from '@rnmapbox/maps';
function SunsetLighting() {
return (
<MapView style={{ flex: 1 }}>
<Light
style={{
intensity: 0.6,
color: '#ff8c42', // Warm orange
position: [1.5, 270, 75], // Low angle from west
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
</MapView>
);
}
import { MapView, Light, Camera } from '@rnmapbox/maps';
function NoonLighting() {
return (
<MapView style={{ flex: 1 }}>
<Light
style={{
intensity: 0.9,
color: '#ffffff',
position: [1.15, 180, 30], // High angle from south
anchor: 'map',
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
</MapView>
);
}
import { useState, useEffect } from 'react';
import { MapView, Light, Camera } from '@rnmapbox/maps';
function AnimatedLighting() {
const [azimuth, setAzimuth] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setAzimuth((prev) => (prev + 1) % 360);
}, 50);
return () => clearInterval(interval);
}, []);
return (
<MapView style={{ flex: 1 }}>
<Light
style={{
intensity: 0.8,
color: '#ffffff',
position: [1.5, azimuth, 45],
positionTransition: {
duration: 0,
delay: 0,
},
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
</MapView>
);
}
import { useState } from 'react';
import { MapView, Light, Camera } from '@rnmapbox/maps';
import { Button, View } from 'react-native';
function TimeOfDayLighting() {
const [timeOfDay, setTimeOfDay] = useState<'dawn' | 'noon' | 'dusk' | 'night'>('noon');
const lightConfigs = {
dawn: { color: '#ffa07a', position: [1.5, 90, 80], intensity: 0.5 },
noon: { color: '#ffffff', position: [1.5, 180, 30], intensity: 0.9 },
dusk: { color: '#ff6347', position: [1.5, 270, 80], intensity: 0.6 },
night: { color: '#4169e1', position: [1.5, 0, 45], intensity: 0.3 },
};
return (
<>
<MapView style={{ flex: 1 }}>
<Light
style={{
...lightConfigs[timeOfDay],
colorTransition: { duration: 1000, delay: 0 },
positionTransition: { duration: 1000, delay: 0 },
intensityTransition: { duration: 1000, delay: 0 },
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
</MapView>
<View style={{ position: 'absolute', bottom: 20, left: 20 }}>
<Button title="Dawn" onPress={() => setTimeOfDay('dawn')} />
<Button title="Noon" onPress={() => setTimeOfDay('noon')} />
<Button title="Dusk" onPress={() => setTimeOfDay('dusk')} />
<Button title="Night" onPress={() => setTimeOfDay('night')} />
</View>
</>
);
}
Usage with 3D Buildings
import { MapView, Light, Camera, FillExtrusionLayer, VectorSource } from '@rnmapbox/maps';
function BuildingsWithLighting() {
return (
<MapView style={{ flex: 1 }}>
<Light
style={{
intensity: 0.8,
color: '#ffffff',
position: [1.5, 135, 60],
}}
/>
<Camera
centerCoordinate={[-74.006, 40.7128]}
zoomLevel={16}
pitch={60}
/>
<VectorSource id="composite" url="mapbox://mapbox.mapbox-streets-v8">
<FillExtrusionLayer
id="3d-buildings"
sourceLayer="building"
filter={['==', 'extrude', 'true']}
style={{
fillExtrusionColor: '#aaa',
fillExtrusionHeight: ['get', 'height'],
fillExtrusionBase: ['get', 'min_height'],
fillExtrusionOpacity: 0.6,
}}
/>
</VectorSource>
</MapView>
);
}
Additional Resources