Symbols on a map
Display custom symbols to mark locations on the map using symbol layers and the Images component.
Sample code
import { GeoJSONSource, Images, Layer, Map, TrimbleMaps } from "@trimblemaps/maps-react-native";
const MARKER_ICON = "marker-icon";
<Images images={{ [MARKER_ICON]: require("./assets/marker.png") }} />
<GeoJSONSource id="symbols" data={pointGeoJSON}>
<Layer
id="symbols-layer"
type="symbol"
layout={{
"icon-image": MARKER_ICON,
"icon-size": 1,
"icon-allow-overlap": true,
}}
/>
</GeoJSONSource>
Sample GeoJSON (points.json)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": { "type": "Point", "coordinates": [-74.006, 40.7128] }
},
{
"type": "Feature",
"properties": {},
"geometry": { "type": "Point", "coordinates": [-118.2437, 34.0522] }
}
]
}