Creating a map view
Contents
A Trimble Maps map view can be created and used directly in react components by retrieving the TrimbleMapsMap
. Keep in mind that an account must be initialized before using the map view.
//TrimbleMapsMapViewManager.js
import {requireNativeComponent} from 'react-native';
export const TrimbleMapsMap = requireNativeComponent('TrimbleMapsMapViewManager');
After retrieving the map view, create a new view component using the map view.
import React from "react"
import { StyleSheet, View } from "react-native";
import { TrimbleMapsMap } from "./TrimbleMapsMapViewManager";
export const ExampleView = () => {
useEffect(() => {
}, []);
// The style prop must be defined for both platforms
const styles = StyleSheet.create({
container: { flex: 1 },
mapStyle: { flex: 1 },
})
return (
<View style={styles.container}>
<TrimbleMapsMap
style={styles.mapStyle}
onMapLoaded={onMapLoaded}
onMapStyleLoaded={onMapStyleLoaded}
/>
</View>
);
}
Changing the map camera
The camera is how the user views the map. It can be centered on a location, zoomed, rotated and moved. The camera can be set programmatically but also controlled through user interaction with gestures.
In Android you can create a new camera object to set a new camera position for the map. You do this by setting the camera properties then calling buildCameraPosition()
to build the camera, and then calling moveCamera()
to apply the camera to the current map. In iOS, you call setCenterCoordinateAndZoom()
.
import React from "react"
// Add NativeModules from react-native
import { NativeModules, StyleSheet, View } from "react-native";
import { TrimbleMapsMap } from "./TrimbleMapsMapViewManager";
// get TrimbleMapsMapViewModule and its constants
const TrimbleMapsMapView = NativeModules.TrimbleMapsMapViewModule;
const TrimbleMapsMapViewConstants = TrimbleMapsMapView.getConstants();
export const ExampleView = () => {
...
const buildAndMoveCamera = async () => {
if (Platform.OS === "android") {
TrimbleMapsMapView.setZoom(13.0);
TrimbleMapsMapView.setTarget(41.362901, -74.694676);
TrimbleMapsMapView.buildCameraPosition();
TrimbleMapsMapView.moveCamera();
} else if (Platform.OS === "ios") {
await TrimbleMapsMapView.setCenterCoordinateAndZoom(
41.362901, // latitude
-74.694676, // longitude
13, // zoom
true // animate
);
}
}
...
}
You can also call setVisibleCoordinates
to frame a set of points.
const framePoints = async (coordinates) => {
// set padding of 20 to top left bottom and right sides respectively.
// last parameter tells module to animate the camera change
await TrimbleMapsMapView.setVisibleCoordinates(coordinates, 20, 20, 20, 20, true);
}
Setting the map style
Modifying the map requires that the map is loaded first. You can check that the map has loaded using the onMapLoaded
property in the TrimbleMapsMap
component.
import React, { useEffect, useState } from "react";
import {
// add NativeEventEmitter
NativeEventEmitter,
NativeModules,
Platform,
StyleSheet} from "react-native"
import { TrimbleMapsMap } from "./TrimbleMapsMapViewManager";
// get TrimbleMapsMapViewModule and it's constants
const TrimbleMapsMapView = NativeModules.TrimbleMapsMapViewModule;
const TrimbleMapsMapViewConstants = TrimbleMapsMapView.getConstants();
export const ExampleView = () => {
const [mapLoaded, setMapLoaded] = useState(false);
useEffect(() => {
if (mapLoaded) {
changeMap();
}
}, [mapLoaded]);
const changeMapStyle = async () => {
// changes the map style
await TrimbleMapsMapView.setStyle(TrimbleMapsMapViewConstants.MOBILE_NIGHT);
}
const onMapLoaded = () => {
if (!mapLoaded) {
setMapLoaded(true);
}
}
const styles = StyleSheet.create({
container: { flex: 1 },
mapStyle: { flex: 1 },
})
return <View style={styles.container}>
<TrimbleMapsMap
style={styles.mapStyle}
onMapLoaded={onMapLoaded} // set mapLoaded callback for iOS
/>
</View>
}