Map Settings

Map Styles

Map styles provide the visual styling for the map. See the chart below for the enumeration names and examples of each style. The default style for maps is TrimbleMaps.Common.Style.TRANSPORTATION.

The map style can be set when the map is initialized and it can be changed using the setStyle function on a map object.

Enumeration	Example
TrimbleMaps.Common.Style.TRANSPORTATION Default, versatile style
TrimbleMaps.Common.Style.TRANSPORTATION_DARK Versatile dark style
TrimbleMaps.Common.Style.SATELLITE
TrimbleMaps.Common.Style.TERRAIN
TrimbleMaps.Common.Style.BASIC Slightly less emphasis on Transportation
TrimbleMaps.Common.Style.BASIC_DARK Slightly less emphasis on Transportation
TrimbleMaps.Common.Style.DATALIGHT Toned down to allow your data to stand out
TrimbleMaps.Common.Style.DATADARK Toned down to allow your data to stand out
TrimbleMaps.Common.Style.ACCESSIBLE_LIGHT Designed for color blind accessibility
TrimbleMaps.Common.Style.ACCESSIBLE_DARK Designed for color blind accessibility
TrimbleMaps.Common.Style.MOBILE_DAY
TrimbleMaps.Common.Style.MOBILE_NIGHT
TrimbleMaps.Common.Style.MOBILE_SATELLITE

Map Initialization

The style can be set when a map is created by using the style property.

const myMap = new TrimbleMaps.Map({
  container: "YOUR_DIV_HERE",
  center: new TrimbleMaps.LngLat(-74.1, 40.71),
  zoom: 14,
  style: TrimbleMaps.Common.Style.DATADARK,
});

setStyle Function

The style of a map can be changed using setStyle.

myMap.setStyle(TrimbleMaps.Common.Style.SATELLITE);

Regions

See the chart below for the enumeration names and descriptions of each region. The default region for maps is TrimbleMaps.Common.Region.NA.

Map Initialization

The region can be set when a map is created by using the region property.

const myMap = new TrimbleMaps.Map({
  container: "YOUR_DIV_HERE",
  center: new TrimbleMaps.LngLat(-0.12, 51.5),
  zoom: 15,
  region: TrimbleMaps.Common.Region.EU,
});

setRegion Function

The region can be changed using setRegion.

myMap.setRegion(TrimbleMaps.Common.Region.EU);

Size and Distance units

The units used for size (truck dimensions and road restrictions) and distance can be set to either METRIC or ENGLISH. Default is ENGLISH. There are two ways to set it.

Map Variable

TrimbleMaps.UNIT = TrimbleMaps.Common.Unit.ENGLISH;
TrimbleMaps.UNIT = TrimbleMaps.Common.Unit.METRIC;

Map Method

TrimbleMaps.setUnit(TrimbleMaps.Common.Unit.ENGLISH);
TrimbleMaps.setUnit(TrimbleMaps.Common.Unit.METRIC);

Units can be set globally along with the API key.

TrimbleMaps.APIKey = "Your API Key";
TrimbleMaps.UNIT = TrimbleMaps.Common.Unit.METRIC;

// or TrimbleMaps.setUnit(TrimbleMaps.Common.Unit.METRIC);

Language

The language can be changed using language.

const myMap = new TrimbleMaps.Map({
  container: "map",
  center: new TrimbleMaps.LngLat(4.342, 51.449),
  region: TrimbleMaps.Common.Region.WW,
  language: TrimbleMaps.Common.Language.EN,
  zoom: 8,
});

Available Languages