Annotation(props: AnnotationProps, children?: Component[]): Component;
Latitude of the annotation position.
Longitude of the annotation position.
Title for the annotation.
anchor
"center" | "top" | "bottom" | "leading" | "trailing" | "topLeading" | "topTrailing" | "bottomLeading" | "bottomTrailing"
Where the annotation view is anchored relative to its coordinate point.
Tag for identifying this annotation in the parent Map’s onSelect callback.
Custom view content for the annotation. Any BindJS components can be used.
Support
Usage
Basic annotation
Map({ latitude: 37.7749, longitude: -122.4194, distance: 5000 }, [
Annotation({ latitude: 37.7749, longitude: -122.4194 }, [
Image({ systemName: "mappin.circle.fill" })
.foregroundStyle(Color("red"))
.imageScale("large")
])
])
Annotation with custom content
Map({ latitude: 37.7749, longitude: -122.4194, distance: 5000 }, [
Annotation({ latitude: 37.7749, longitude: -122.4194, anchor: "bottom" }, [
VStack([
Text("$2.5M")
.font("caption")
.bold()
.foregroundStyle(Color("white"))
.padding({ horizontal: 8, vertical: 4 })
.background(Color("blue"))
.cornerRadius(4)
])
])
])
Tagged annotations
const body = () => {
const [selected, setSelected] = useState(null)
return Map({
latitude: 37.7749,
longitude: -122.4194,
distance: 10000,
onSelect: (tag) => setSelected(tag)
}, [
Annotation({ latitude: 37.7749, longitude: -122.4194, tag: "sf", anchor: "bottom" }, [
Text("SF")
.padding(4)
.background(selected === "sf" ? Color("blue") : Color("gray"))
.cornerRadius(4)
]),
Annotation({ latitude: 37.8044, longitude: -122.2712, tag: "oak", anchor: "bottom" }, [
Text("OAK")
.padding(4)
.background(selected === "oak" ? Color("blue") : Color("gray"))
.cornerRadius(4)
])
])
}
See Also
