Summary - Maps
- React Native course
- Advanced
- Lesson 30/83
- 5 min
Combine MapView, Marker and onRegionChange to write a map app.
Summary - Maps
In this group you learned to install the react-native-maps package, show a map with MapView, drop markers with Marker, track region changes with onRegionChange and create custom markers. The core of a map app is these five pieces.
In the summary we will merge the map, marker and region tracking in a single app. These three pieces together form a real map screen. Let us merge them now.
Practice Summary - Drop a marker at Istanbul
Complete the empty App component. Open <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}}>. Inside add <Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} title="Istanbul" />. Close MapView.
Starter code
import { MapView, Marker } from 'react-native-maps';
export default function App() {
// drop a marker at Istanbul
return null;
}Sample solution
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
>
<Marker
coordinate={{ latitude: 41.0082, longitude: 28.9784 }}
title="Istanbul"
/>
</MapView>
);Practice Summary - Track region change
Complete the empty App component. Return <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} onRegionChange={(region) => console.log(region.latitude)} />.
Starter code
import { MapView } from 'react-native-maps';
export default function App() {
// track region change and log the latitude
return null;
}Sample solution
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
onRegionChange={(region) => console.log(region.latitude)}
/>
);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 Match each flow part to its role
| Term | Meaning |
|---|---|
MapView |
Map view |
Marker |
Drops marker |
onRegionChange |
Tracks region |
initialRegion |
Opening position |