Mobile Maps SDK

Creating a map view

Contents

A Trimble Maps map view is created with the <Map> component from @trimblemaps/maps-react-native. An account must be initialized before the map loads its style.

Basic map 

import { Map, Camera, TrimbleMaps } from "@trimblemaps/maps-react-native";

function BasicMap() {
  return (
    <Map mapStyle={TrimbleMaps.StyleURL.MobileDay} style={{ flex: 1 }}>
      <Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 12 }} />
    </Map>
  );
}

The mapStyle prop accepts a Trimble Maps style URL. Use onDidFinishLoadingMap to run code after the map and style are ready: 

<Map
  mapStyle={TrimbleMaps.StyleURL.MobileDay}
  style={{ flex: 1 }}
  onDidFinishLoadingMap={() => console.log("Map loaded")}
>
  <Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 12 }} />
</Map>

Changing the map camera

Use the <Camera> child component for the initial view and imperative camera moves via a ref.

Initial view 

<Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 12, pitch: 0, bearing: 0 }} />

center is [longitude, latitude].

Fly to a location 

import { useRef } from "react";
import { Camera } from "@trimblemaps/maps-react-native";

const cameraRef = useRef<React.ComponentRef<typeof Camera>>(null);

cameraRef.current?.flyTo({
  center: [-74.6672, 40.3573],
  zoom: 12,
  duration: 600,
});

<Camera ref={cameraRef} initialViewState={{ center: [-74.006, 40.7128], zoom: 10 }} />

Frame a bounding box

Pass bounds as [west, south, east, north]: 

cameraRef.current?.fitBounds(
  [-77.436, 37.5407, -74.6672, 40.3573],
  {
    padding: { top: 64, right: 64, bottom: 64, left: 64 },
    duration: 800,
  },
);

Setting the map style

TrimbleMaps.StyleURL provides predefined mobile styles:

Constant Style
TrimbleMaps.StyleURL.MobileDay Mobile Day
TrimbleMaps.StyleURL.MobileNight Mobile Night
TrimbleMaps.StyleURL.MobileSatellite Mobile Satellite

Switch styles by updating the mapStyle prop. The map must be loaded before changing styles; use onDidFinishLoadingMap if you need to defer the first style change: 

import { useState } from "react";
import { Map, Camera, TrimbleMaps } from "@trimblemaps/maps-react-native";

function MapStyles() {
  const [styleUrl, setStyleUrl] = useState(TrimbleMaps.StyleURL.MobileDay);

  const changeMapStyle = () => {
    setStyleUrl(TrimbleMaps.StyleURL.MobileNight);
  };

  return (
    <Map mapStyle={styleUrl} style={{ flex: 1 }}>
      <Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 12 }} />
    </Map>
  );
}

Trimble layer visibility props (traffic, weather, and so on) are re-applied automatically when the style reloads.

Last updated September 3, 2026.
Contents