Mobile Maps SDK

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>
}
Last updated February 15, 2024.
Contents