Location and tracking
Contents
Most applications that use the Mobile Maps SDK will need to pinpoint the user’s location and track their movement.
For iOS, to start tracking, set the map so that it shows the user location and the heading indicator.
const startTracking = async () => {
if (Platform.OS === "ios") {
TrimbleMapsMapView.setShowsUserLocation(true);
TrimbleMapsMapView.setShowsUserHeadingIndicator(true);
TrimbleMapsMapView.setDesiredAccuracy(10);
TrimbleMapsMapView.setUserTrackingMode(
TrimbleMapsMapViewConstants.USER_TRACKING_FOLLOW
);
TrimbleMapsMapView.setZoom(14, true);
}
For Android, initialize the location engine using the LocationEngine Module.
useEffect(() => {
...
if (mapLoaded) {
setupLocationComponent();
}
}, [mapLoaded]);
const setupLocationComponent = async () => {
TrimbleMapsMapView.getMapAsync(() => {
TrimbleMapsMapView.initializeLocationComponent(() => {
TrimbleMapsMapView.setZoom(15.0);
TrimbleMapsMapView.buildCameraPosition();
TrimbleMapsMapView.setCameraPosition();
TrimbleMapsMapView.activateLocationComponent();
TrimbleMapsMapView.setLocationComponentEnabled(true);
TrimbleMapsMapView.setCameraMode(
TrimbleMapsMapViewConstants.TRACKING_COMPASS
);
TrimbleMapsMapView.setRenderMode(TrimbleMapsMapViewConstants.COMPASS);
TrimbleMapsLocationEngine.getBestLocationEngine();
startTracking();
});
});
};
const startTracking = async () => {
if (Platform.OS === "ios") {...}
else if (Platform.OS === "android") {
TrimbleMapsLocationEngine.createLocationEngineRequestBuilder(900);
TrimbleMapsLocationEngine.setPriority(
TrimbleMapsLocationEngineConstants.PRIORITY_HIGH_ACCURACY
);
TrimbleMapsLocationEngine.setMaxWaitTime(4500);
TrimbleMapsLocationEngine.buildLocationEngineRequest();
await TrimbleMapsLocationEngine.requestLocationUpdates(() => {});
}
};
Location callbacks
To set up location update callback for iOS, set the map properties onUpdateUserLocation and onFailUpdateUserLocation.
<TrimbleMapsMap
style={styles.mapStyle}
theme={TrimbleMapsMapViewConstants.MOBILE_DAY}
onMapLoaded={onMapLoaded}
// add these props
onUpdateUserLocation={(e) => console.log(e.nativeEvent)}
onFailUpdateUserLocation={(e) => console.log(e.nativeEvent)}
/>
To set up location update callbacks for Android, set up an event listener.
useEffect(() => {
if (Platform.OS === "android") {
const eventEmitter = new NativeEventEmitter();
let requestLocationUpdatesOnSuccessListener = eventEmitter.addListener(
"requestLocationUpdatesOnSuccess",
(event) => {}
);
let requestLocationUpdatesOnFailureListener = eventEmitter.addListener(
"requestLocationUpdatesOnFailure",
(event) => {
console.log(event.error);
}
);
setupLocationComponent();
return () => {
// clean up
requestLocationUpdatesOnSuccessListener.remove();
requestLocationUpdatesOnFailureListener.remove();
};
}
}, []);
Map click events
Click/Tap events can be listened for within the Map SDK. When set, the callback provided is fired when the user clicks or taps on the map.
useEffect(() => {
...
const eventEmitter = new NativeEventEmitter(TrimbleMapsMapView);
let onMapClickListener = eventEmitter.addListener(
"onMapClick",
(event) => {
// handle on map click
}
);
return () => {
// remove listener
onMapClickListener.remove();
}
}, [mapLoaded]);