Theming

The map style can be customized in a number of ways to fit into your branding & use case, or to set vehicle-specific parameters such as safety contour values.

There are two types of theming in the Vector Charts APIs:

Query Parameters: Change user-specific options such as safety contours and day/night mode.
Custom Style: Complete customization of all layers and color schemes to match your branding and choose which data is relevant to your use case.

Query Parameters

The style returned using the Get Vector Style endpoint has a limited set of options designed to change the style of the map at runtime.

The Get Vector Style API page has a complete list of parameters.

Depth Units

To change units for depth soundings, use the depthUnits parameter. The available options are meters, feet, and fathoms, and the default is meters. Depth soundings will update accordingly:

units=meters depth1

units=feet depth2

Depth Limit

The depthLimit parameter controls the ENC safety contour and should be set to the depth considered safe for navigation by your vehicle.

For example, changing depthLimit to 1, 3, and 10:

https://api.vectorcharts.com/api/v1/styles/base.json?token=<token>&depthLimit=1 theming1

https://api.vectorcharts.com/api/v1/styles/base.json?token=<token>&depthLimit=3 theming1

https://api.vectorcharts.com/api/v1/styles/base.json?token=<token>&depthLimit=10 theming1

Day & Night Theme

The theme parameter determines which color palette to use. Each stylesheet has a day, dusk and night color palette.

https://api.vectorcharts.com/api/v1/styles/base.json?token=<token>&theme=day theming1

https://api.vectorcharts.com/api/v1/styles/base.json?token=<token>&theme=dusk theming1

https://api.vectorcharts.com/api/v1/styles/base.json?token=<token>&theme=night theming1

Custom Fonts

Because the mapbox style is used to set the fonts for all elements on the map, you may want to change the fontstack that is embedded into the file.

Changing the Loaded Fonts

To change the fonts loaded by the style, add the parameter glyphs=... to the URL.

For example, to load fonts from the Mapbox servers, use glyphs=mapbox%3A%2F%2Ffonts%2Fmapbox%2F%7Bfontstack%7D%2F%7Brange%7D.pbf (URL-encoded, decoded this is mapbox://fonts/mapbox/{fontstack}/{range}.pbf).

To learn more about Glyphs, see Mapbox Style Spec > Glyphs.

Changing the Font used by Vector Charts

To set the font used by Vector Charts elements such as depth soundings, use the parameter font=....

For example, font=Source%20Code%20Pro%20Medium will use Source Code Pro Medium.

Usage

Using glyphs and font in conjunction allows loading fonts from a custom server, and then using the font from that server for Vector Charts elements.

For example, the following URL will use Mapbox-sourced fonts, and change the font to Source Code Pro Medium:

https://api.vectorcharts.com/api/v1/styles/base.json?token=<YOUR TOKEN HERE>&font=Source%20Code%20Pro%20Medium&glyphs=mapbox%3A%2F%2Ffonts%2Fmapbox%2F%7Bfontstack%7D%2F%7Brange%7D.pbf"

fonts

Custom Styles

Enterprise customers gain access to the Style Editor, which gives complete control over map layers & color palettes.