Skip to main content

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.

EnumerationExample
TrimbleMaps.Common.Style.TRANSPORTATION
Default, versatile style
Transportation Map Style
TrimbleMaps.Common.Style.TRANSPORTATION_DARK
Versatile dark style
Transportation Dark Map Style
TrimbleMaps.Common.Style.SATELLITESatellite Map Style
TrimbleMaps.Common.Style.TERRAINTerrain Map Style
TrimbleMaps.Common.Style.BASIC
Slightly less emphasis on Transportation
Basic Map Style
TrimbleMaps.Common.Style.BASIC_DARK
Slightly less emphasis on Transportation
Basic Dark Map Style
TrimbleMaps.Common.Style.DATALIGHT
Toned down to allow your data to stand out
Data Light Map Style
TrimbleMaps.Common.Style.DATADARK
Toned down to allow your data to stand out
Data Dark Map Style
TrimbleMaps.Common.Style.ACCESSIBLE_LIGHT
Designed for color blind accessibility
Accessible Map Style
TrimbleMaps.Common.Style.ACCESSIBLE_DARK
Designed for color blind accessibility
Accessible Map Style
TrimbleMaps.Common.Style.MOBILE_DAYSatellite Map Style
TrimbleMaps.Common.Style.MOBILE_NIGHTSatellite Map Style
TrimbleMaps.Common.Style.MOBILE_SATELLITESatellite Map Style

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.

EnumerationDescription
TrimbleMaps.Common.Region.NANorth America
TrimbleMaps.Common.Region.EUEurope
TrimbleMaps.Common.Region.OCOceania
TrimbleMaps.Common.Region.SASouth America
TrimbleMaps.Common.Region.ASAsia
TrimbleMaps.Common.Region.AFAfrica
TrimbleMaps.Common.Region.MEMiddle East
TrimbleMaps.Common.Region.WWWorldwide

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);
Last updated January 26, 2022.