MapView
- React Native course
- Advanced
- Lesson 26/83
- 5 min
Learn the MapView component and initialRegion.
MapView and initialRegion
MapView shows the map on the screen. The initialRegion prop of the component sets the opening position of the map. This prop takes an object; it carries latitude, longitude, latitudeDelta and longitudeDelta fields. The first two set the center, the last two set the zoom level.
Example: <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} />. This opens an Istanbul-centered map. The smaller latitudeDelta and longitudeDelta, the higher the zoom. The style prop sets the map's screen size; flex: 1 fills the whole screen.
Delta and zoom
latitudeDelta and longitudeDelta set the zoom level of the map. As the delta gets smaller, the zoom increases; a narrower area is shown. For example 0.05 may show a city center, 0.5 a whole city, 5 a country.
When the user pans on the map the region changes; but initialRegion is used only at the initial opening. To track the user's panning you use the onRegionChange prop. This prop takes a function; it is called on each region change. The region info comes as the parameter. In this lesson we cover the delta concept; in the next lesson we cover onRegionChange.
Practice Open the map at Istanbul
Complete the empty App component. Return <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} />.
Starter code
import { MapView } from 'react-native-maps';
export default function App() {
// return the Istanbul-centered map
return null;
}Sample solution
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
/>
);Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the initialRegion prop
<MapView style={{ flex: 1 }} ____={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} /><MapView style={{ flex: 1 }} initialRegion={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />Explanation: initialRegion sets the opening position.
2 What happens as latitudeDelta gets smaller?
latitudeDelta: 0.05 // compare: 0.5- Zoom out increases
- Zoom in increases Correct answer
- The map rotates
- The map disappears
Explanation: As the delta gets smaller, the zoom in increases.
3 Match each field to its meaning
| Term | Meaning |
|---|---|
latitude |
Center latitude |
longitude |
Center longitude |
latitudeDelta |
Zoom |
initialRegion |
Opening position |