React Native
MapView
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.
Exercise 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 }}} />.
Show example solution
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
/>
);
Test yourself
-
Write the initialRegion prop
<MapView style={{ flex: 1 }} ____={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />
Show answer
<MapView style={{ flex: 1 }} initialRegion={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />
-
What happens as latitudeDelta gets smaller?
latitudeDelta: 0.05 // compare: 0.5
- Zoom out increases
- Zoom in increases
- The map rotates
- The map disappears
Show answer
Zoom in increases — As the delta gets smaller, the zoom in increases.
-
Match each field to its meaning
- latitude
- Center latitude
- longitude
- Center longitude
- latitudeDelta
- Zoom
- initialRegion
- Opening position
Next lesson: Marker
