<Marker />
is a React Native component designed for placing custom markers on the <Map />
map component. It enables the visualization of points of interest, locations, or any specific points on the map using custom images. The Marker
component is used as a child of the Map
component to add marker information over the map.
- Description: Specifies the position of the marker on the map.
- Type:
GeoCoordinates
(Object withlatitude
,longitude
, and optionallyaltitude
properties) - Example:
geoCoordinates={{ latitude: 99.00990, longitude: 9.00990, altitude: 1.07 }}
- Description: Defines the image used as the marker.
- Type:
ImageURISource
(Object withuri
string or local assetrequire
) - Example:
image={require("../assets/marker_image.png")} // or image={{ uri: "https://example.com/marker_image.png" }}
- Description: Used to scale the image up (above 1) or down (below 1).
- Type:
number
- Example:
scale={1.5}
- Description: Manually overwrites the width and height of the image.
- Type:
Object
withwidth
andheight
properties - Example:
size={{ width: 40, height: 40 }}
anchor
(Object) | Official Docs
- Description: Defines the anchor point used to place the image relative to the coordinates.
- Type:
Object
with optionalhorizontal
andvertical
properties - Example:
anchor={{ horizontal: 0.5, vertical: 0.5 }}
Here's how you might use the Marker
to place a custom marker:
import React from 'react';
import { Map, Marker } from 'react-native-here-explore';
const App = () => {
return (
<Map
geoCoordinates={{ lat: 40.7128, lon: -74.006 }} // Coordinates for New York City
mapScheme="NORMAL_DAY"
zoomValue={10}
>
<Marker
geoCoordinates={{ latitude: 40.7128, longitude: -74.006 }}
image={require('../assets/marker_image.png')}
scale={1.0}
size={{ width: 50, height: 50 }}
anchor={{ horizontal: 0.5, vertical: 1.0 }}
/>
</Map>
);
};
export default App;
In this example, Marker
is used to place a custom image marker on New York City on the map. Adjust the geoCoordinates
, image
, scale
, size
, and anchor
props as needed to customize the marker's appearance and placement.
Remember to review the prop values and defaults to ensure the marker appears as expected on your map. Happy mapping!