Trimble layers
The TrimbleMaps SDK adds map layers on top of the base map: traffic, weather radar, weather alerts, 3D buildings, points of interest (POI), and truck restrictions.
Each feature is exposed two ways:
- Declaratively — as a
Mapprop. The value is re-applied on every style reload, so it survives day/night style toggles. - Imperatively — as a method on the
Mapref.
Layer toggles
| Feature | Prop | Imperative methods |
|---|---|---|
| Traffic | showsTraffic
| setTrafficVisibility / toggleTrafficVisibility
|
| Weather radar | showsWeatherRadar
| setWeatherRadarVisibility / toggleWeatherRadarVisibility
|
| Weather alerts | showsWeatherAlerts
| setWeatherAlertVisibility / toggleWeatherAlertVisibility
|
| 3D buildings | shows3dBuildings
| set3dBuildingVisibility / toggle3dBuildingVisibility
|
| POI | showsPoi
| setPoiVisibility / togglePoiVisibility
|
| Truck restrictions | showsTruckRestrictions
| setTruckRestrictionsVisibility / toggleTruckRestrictionsVisibility
|
Declarative example
import { Camera, Map, TrimbleMaps } from "@trimblemaps/maps-react-native";
<Map
mapStyle={TrimbleMaps.StyleURL.MobileDay}
style={{ flex: 1 }}
showsTraffic
showsWeatherRadar
shows3dBuildings
showsPoi
showsTruckRestrictions
>
<Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 14, pitch: 45 }} />
</Map>
Add camera pitch to see 3D buildings extruded on the map.
Imperative example
import { useRef } from "react";
import { Map, type MapRef } from "@trimblemaps/maps-react-native";
const mapRef = useRef<MapRef>(null);
await mapRef.current?.setTrafficVisibility(true);
await mapRef.current?.toggle3dBuildingVisibility();
Truck restrictions filter
Beyond visibility, the truck restrictions layer can be filtered to a specific vehicle profile:
import { Map, TrimbleMaps, type TruckRestrictionsFilter } from "@trimblemaps/maps-react-native";
const filter: TruckRestrictionsFilter = {
vehicleType: "truck",
categories: ["general", "dimensions", "hazmat"],
heightInches: 162,
weightPounds: 80000,
};
<Map
mapStyle={TrimbleMaps.StyleURL.MobileDay}
showsTruckRestrictions
truckRestrictionsFilter={filter}
/>
Pass null to clear the filter. POI is a single on/off toggle for the SDK’s general points-of-interest layer; truck-specific data lives in the separate truck-restrictions layer.