Custom marker
- React Native course
- Advanced
- Lesson 29/83
- 5 min
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.
Practice 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.
Starter code
import { MapView, Marker } from 'react-native-maps';
import { View } from 'react-native';
export default function App() {
// create a custom circle marker
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 }}>
<View style={{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }} />
</Marker>
</MapView>
);Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the Marker child
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}>____</Marker><Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}><View style={{ width: 30, height: 30, backgroundColor: 'tomato' }} /></Marker>Explanation: The View child draws the custom marker.
2 What is done to give the Marker a custom look?
<Marker coordinate={...}>???</Marker>- A child component is given Correct answer
- Only a title prop is given
- Only a description prop is given
- The map is reloaded
Explanation: A child component is given to the Marker to create a custom look.
3 Match each child to its purpose
| Term | Meaning |
|---|---|
View |
Colored circle marker |
Image |
Custom icon |
Text |
Text marker |
coordinate |
Marker position |