React Native
Custom marker
Learn custom marker design.
Custom marker
The default marker is a red pin. To use your own look you give the Marker a child component. This child can be a View, Image or any component. The child changes the marker's appearance.
Example: <Marker coordinate={{{ latitude: 41.0, longitude: 28.9 }}}><View style={{{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }}} /></Marker>. This drops a red circle marker. With child component styles you can create any look you want; icon, circle, photo, animated shape. You can also use a custom icon with Image: source={{ uri: 'https://example.com/icon.png' }}.
Icon with Image
You can use a custom icon with an Image child. The source prop of Image takes an object: { uri: '...' } or { require('...') }. This shows images like brand logo, category icon or avatar as a marker.
Example: <Marker coordinate={{{ latitude: 41.0, longitude: 28.9 }}}><Image source={{{ uri: 'https://example.com/icon.png' }}}} style={{{ width: 32, height: 32 }}} /></Marker>. This shows the given image as a marker. You set the image size with style. Custom markers are a powerful way to personalize the map with your brand; they let you distinguish categories like cafe, store, event.
Exercise Create a custom circle marker
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 }}}><View style={{{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }}} /></Marker>. Close MapView.
Show example 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 }}>
<View style={{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }} />
</Marker>
</MapView>
);
Test yourself
-
Write the Marker child
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}>____</Marker>
Show answer
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}><View style={{ width: 30, height: 30, backgroundColor: 'tomato' }} /></Marker>
-
What is done to give the Marker a custom look?
<Marker coordinate={...}>???</Marker>
- A child component is given
- Only a title prop is given
- Only a description prop is given
- The map is reloaded
Show answer
A child component is given — A child component is given to the Marker to create a custom look.
-
Match each child to its purpose
- View
- Colored circle marker
- Image
- Custom icon
- Text
- Text marker
- coordinate
- Marker position
Next lesson: Summary - Maps
