PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
Consider using ShapeSource and SymbolLayer instead, if you have many points and static images, they’ll offer much better performance.
If you need interactive views please use MarkerView because PointAnnotation will render children onto a bitmap. Also disable any kind of animations like fadeDuration of Image. Otherwise, the bitmap might be rendered at an unknown state of the animation.
Props
A string that uniquely identifies the annotation
The center point (specified as a map coordinate) of the annotation.Position is a tuple of [longitude, latitude].
The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS.
The string containing the annotation’s snippet (subtitle). Not displayed in the default callout.
Manually selects/deselects annotation
Enable or disable dragging. Defaults to false.
anchor
object
default:"{ x: 0.5, y: 0.5 }"
Specifies the anchor being set on a particular point of the annotation.
The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
Note this is only for custom annotations not the default pin view.
Defaults to the center of the view.X coordinate of the anchor point
Y coordinate of the anchor point
onSelected
(payload: Feature) => void
This callback is fired once this annotation is selected. Returns a Feature as the first param.
onDeselected
(payload: Feature) => void
This callback is fired once this annotation is deselected.
onDragStart
(payload: Feature) => void
This callback is fired once this annotation has started being dragged.
onDrag
(payload: Feature) => void
This callback is fired while this annotation is being dragged.
onDragEnd
(payload: Feature) => void
This callback is fired once this annotation has stopped being dragged.
children
React.ReactElement | [React.ReactElement, React.ReactElement]
required
Expects one child, and an optional callout can be added as well
Style to be applied to the annotation container
Methods
refresh()
On v10 and pre v10 android point annotation is rendered offscreen with a canvas into an image. To rerender the image from the current state of the view call refresh. Call this for example from Image#onLoad.
Example
import { MapView, Camera, PointAnnotation, Callout } from '@rnmapbox/maps';
import { View, Image, StyleSheet } from 'react-native';
import { useRef } from 'react';
const ANNOTATION_SIZE = 40;
const styles = StyleSheet.create({
annotationContainer: {
alignItems: 'center',
backgroundColor: 'white',
borderColor: 'rgba(0, 0, 0, 0.45)',
borderRadius: ANNOTATION_SIZE / 2,
borderWidth: StyleSheet.hairlineWidth,
height: ANNOTATION_SIZE,
justifyContent: 'center',
overflow: 'hidden',
width: ANNOTATION_SIZE,
},
});
const AnnotationWithRemoteImage = ({ id, coordinate, title }) => {
const pointAnnotation = useRef(null);
return (
<PointAnnotation
id={id}
coordinate={coordinate}
title={title}
draggable
onSelected={(feature) =>
console.log('onSelected:', feature.id, feature.geometry.coordinates)
}
onDrag={(feature) =>
console.log('onDrag:', feature.id, feature.geometry.coordinates)
}
onDragStart={(feature) =>
console.log('onDragStart:', feature.id, feature.geometry.coordinates)
}
onDragEnd={(feature) =>
console.log('onDragEnd:', feature.id, feature.geometry.coordinates)
}
ref={pointAnnotation}
>
<View style={styles.annotationContainer}>
<Image
source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
style={{ width: ANNOTATION_SIZE, height: ANNOTATION_SIZE }}
onLoad={() => pointAnnotation.current?.refresh()}
fadeDuration={0}
/>
</View>
<Callout title="This is a sample loading a remote image" />
</PointAnnotation>
);
};
const App = () => {
return (
<MapView style={{ flex: 1 }}>
<Camera
defaultSettings={{
centerCoordinate: [-73.99155, 40.73581],
zoomLevel: 16
}}
/>
<AnnotationWithRemoteImage
id="annotation1"
coordinate={[-73.99155, 40.73581]}
title="Sample Annotation"
/>
</MapView>
);
};