Mobile Maps SDK

Getting started

Contents

(The Android React Native version of the Mobile Maps SDK is in beta testing.)

With the Mobile Maps SDK, you can embed interactive, highly customizable maps into your Android mobile applications. Our maps are built on commercial vehicle-specific data from Trimble Maps, which allows you to plan and visualize safe, legal, and efficient routes for all types of vehicles, around the world. With features ranging from traffic data to weather alerts and road conditions, our Maps SDK is ideal for any application that demands maps for work.

To gain access to the SDK, please contact our Sales team for more information.

This guide is intended to get you on your way to incorporating Trimble’s mapping library into your mobile project. It covers the key concepts needed to install, display, and customize maps. You can also view sample projects and code in our public GitHub repository.

mobile maps screenshot

Installation

In order to use the Maps SDK, you will need to add it as a dependency to your project. The library can be accessed from a Maven repository. To add the dependency, configure your build to download the Maps SDK:

  1. Open your project in Android Studio
  2. Open up your project-level settings.gradle file
  3. Declare the Trimble Maps repository in the repositories block:
repositories {
    google()
    mavenCentral()
    maven { url 'https://plugins.gradle.org/m2' }
    maven { url 'https://trimblemaps.jfrog.io/artifactory/android' }
}

dependencies {
    implementation 'com.trimblemaps.reactnative:maps-sdk-account:0.1.1'
    implementation 'com.trimblemaps.reactnative:maps-android-sdk:0.1.1'
    implementation 'com.trimblemaps.reactnative:maps-reactnative-plugin:0.1.2'
}
  1. In the Android MainApplication file in RN app add these to the getPackages function:
new MapsPackagesHolder(),
new TrimbleMapsMapPackages(),
new MapsPluginPackagesHolder(),
  1. Ensure your project’s minSdkVersion is at API 14 or later
  2. Run in terminal to install RN dependencies: npm install
  3. Complete a Gradle sync

Permissions

You can use the Manifest merge feature to reduce the need to include any SDK requirements in your application’s manifest file. You’ll need to add either the Fine or Coarse location permission to your manifest if you plan to display a user’s location on the map or get the user’s location information, and the Background location permission to continue it while the app is in the background.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

The user’s location permission should be checked during runtime.

import React, { useEffect, useState } from "react";
import { PermissionsAndroid } from "react-native";

const App = (props) => {
  const [locationPermission, setLocationPermission] = useState("");

  useEffect(() => {
    checkLocationPermission();
  }, []);

  const checkLocationPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: "Location Permission",
          message: "This app needs access to your location.",
          buttonPositive: "OK",
          buttonNegative: "Cancel",
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        setLocationPermission("granted");
      } else {
        setLocationPermission("denied");
      }
    } catch (error) {
    }
  };

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};

Android provides a guide to requesting permissions from users as well as details on location access.

Authentication

In order to use the APIs and SDK, you will need to authenticate your API key first. If you do not have an API key, you can request one.

  1. Import these native modules:
const TrimbleMapsAccountModule = NativeModules.TrimbleMapsAccountModule;
const TrimbleMapsInitializerModule = NativeModules.TrimbleMapsInitializerModule;
const AccountConstants = TrimbleMapsAccountModule?.getConstants();
  1. Create an account class to hold your account information.
class Account {
  constructor(apiKey, apiEnvironment, licensedFeatures) {
    this.apiKey = apiKey;
    this.apiEnvironment = apiEnvironment;
    this.licensedFeatures = licensedFeatures;
  }
}
  1. Initialize the account. Here is an example login function:
async login() {
    if (TrimbleMapsAccountModule != null) {
      var account = new Account(
        "Your-API-key-here",
        AccountConstants.PROD,
        [AccountConstants.MAPS_SDK]
      );
      await TrimbleMapsAccountModule.initializeAccount(JSON.stringify(account));
      await TrimbleMapsAccountModule.awaitInitialization(60);
      await TrimbleMapsAccountModule.isAccountLoaded();
      this.initializeTrimbleMaps();
    } else {
    }
  }

Once authentication is complete, you can start to use the SDK.

Last updated October 3, 2023.
Contents