Dots on a Map
Visualize data on top of the map. Data could vary from simple dots-on-a-map to more complex pieces like 3D buildings, route paths, geofences, and more.
Sample code
import { Camera, GeoJSONSource, Layer, Map, TrimbleMaps } from "@trimblemaps/maps-react-native";
<Map mapStyle={TrimbleMaps.StyleURL.MobileDay} style={{ flex: 1 }}>
<Camera ref={cameraRef} initialViewState={{ center: initialCenter, zoom: 12 }} />
<GeoJSONSource id="dots" data={geojson}>
<Layer
id="dots-circle"
type="circle"
paint={{
"circle-radius": 8,
"circle-color": "#0063A3",
"circle-stroke-width": 2,
"circle-stroke-color": "#ffffff",
}}
/>
</GeoJSONSource>
</Map>
Use cameraRef.current?.fitBounds(bounds, { padding: { top: 64, right: 64, bottom: 64, left: 64 } }) after the map loads to frame your data.
Sample GeoJSON
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-74.006, 40.7128] },
"properties": {}
},
{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-73.9857, 40.7484] },
"properties": {}
},
{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-74.0445, 40.6892] },
"properties": {}
}
]
}