Sorry, you need to enable JavaScript to visit this website.

Map Styler Documentation

 

Service version: 1
Last edit: 2019.06.28

On this page

Purpose

The Customization Tool helps you modify a default TomTom style for vector maps. You are able to build your own map, edit its style, and export the result.

Top Menu

Open

Styles can be imported into the Customization Tool for editing from the Open section in the Top Menu. Here you can select a JSON file from local storage, provide a URL, or choose one of the predefined formats.

Export

A JSON file with styles can be downloaded locally using the Export menu item from the top menu.

Data sources

The Customization Tool supports Vector Tiles as a data source. It is also possible to provide your own source URL in the following formats: GeoJSON, XYZ, or TileJSON. Data sources can be configured from the Data Sources section in the Top Menu.

Style Settings

URLs for Glyphs and Sprites can be set at the Style Settings section in the Top Menu.

View

There are two view modes:

  • Map, which just displays the map with applied styles.
  • Inspect, which allows you to see all of the data layers on the map.

Undo

Reverts the recent change made in the editor.

Redo

Restores an action that has been previously undone using an Undo.

▲ Return to top

Layers

A new layer can be added using the Add Layer button. Layers are displayed in the same order as they are arranged in the layers tree in the left panel of the Customization Tool.

Layer attributes

Each layer in the Customization Tool has following attributes:

  • ID: The name of the layer.
  • Type: This can have one of the following values: Background, Fill, Line, Symbol, Raster, Circle, Fill Extrusion, Hillshade, Heatmap.
  • Source: The source of map data.
  • Source Layer: The map layer or entity to which the style should be applied.
  • Minzoom (optional): The minimum zoom level for the layer. At zoom levels less than the minzoom, the layer will be hidden.
  • Maxzoom (optional): The maximum zoom level for the layer. At zoom levels equal to or greater than the maxzoom, the layer will be hidden.

Source layer

There are multiple entities you can choose from depending on the Layer type. For further information see Tomtom's Vector Tiles documentation.

Layer types

  • Background: Represents the map's background.
  • Fill: An area-related feature.
  • Line: A line-related feature.
  • Symbol: Text or a special graphical symbol (like an arrow).
  • Raster: Raster map textures such as satellite imagery.
  • Circle: A filled circle.
  • Fill Extrusion: An extruded (3D) area.
  • Hillshade: Client-side hillshading visualization based on DEM data.
  • Heatmap: A heatmap visualization.

▲ Return to top

Filter

An expression specifying conditions on source features. Only features that match the filter are displayed. Zoom expressions in filters are only evaluated at integer zoom levels.

Existential Filters

["has", key] feature[key] exists
["!has", key] feature[key] does not exist

Comparison Filters

["==", key, value] equality: feature[key] = value
["!=", key, value] inequality: feature[key] ≠ value
[">", key, value] greater than: feature[key] > value
[">=", key, value] greater than or equal: feature[key] >= value
["<", key, value] less than: feature[key] < value
["<=", key, value] less than or equal: feature[key] <= value

Set Membership Filters

["in", key, v0, ..., vn] set inclusion: feature[key] ∈ {v0, ..., vn}
["!in", key, v0, ..., vn] set exclusion: feature[key] ∉ {v0, ..., vn}

Combining Filters

["all", f0, ..., fn] logical AND: f0 ∧ ... ∧ fn
["any", f0, ..., fn] logical OR: f0 ∨ ... ∨ fn
["none", f0, ..., fn] logical NOR: ¬f0 ∧ ... ∧ ¬fn

A key must be a string that identifies a feature property, or one of the following special keys:

  • "$type": the feature type. This key may be used with the "==", "!=", "in", and "!in" operators. Possible values are "Point", "LineString", and "Polygon".
  • "$id": the feature identifier. This key may be used with the "==", "!=", "has", "!has", "in", and "!in" operators.

A value (and v0, ..., vn for set operators) must be a string, number, or boolean to compare against the property value.

▲ Return to top

Background properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
background-color Background color.   Color #000000 Paint
background-pattern Image to be displayed as background.   Name of the image in sprite.   Paint
background-opacity The opacity of the background.   Number between 0 and 1 1 Paint

▲ Return to top

Line properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
line-cap The display of line endings.   "butt", "round", "square" "butt" Layout
line-join The display of lines when joining.   "bevel", "round", "miter" "miter" Layout
line-miter-limit Used to automatically convert miter joins to bevel joins for sharp angles. line-join='miter' Number 2 Layout
line-round-limit Used to automatically convert round joins to miter joins for shallow angles. line-join='round' Number 1.05 Layout
line-opacity The opacity of a line.   Number between 0 and 1. 1 Paint
line-color The color of a line.   Color #000000 Paint
line-translate Geometry's offset.   Array of numbers in format [X, Y]. [0, 0] Paint
line-translate-anchor The anchor object for line-translate.   "map", "viewport" "map" Paint
line-width Width of a line in pixels.   Non-negative number. 1 Paint
line-gap-width Width of the inner line's gap in pixels.   Non-negative number. 0 Paint
line-offset
  • For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left.
  • For polygon features, a positive value results in an inset, and a negative value results in an outset.
  Non-negative number. 0 Paint
line-blur Line's blur in pixels.   Non-negative number. 0 Paint
line-dasharray Lengths of the alternating dashes and gaps that form the dash pattern. Units in line widths.   Non-negative number. 0 Paint
line-pattern Name of an image in a sprite to use for drawing lines.   Name of image in sprite.   Paint
line-gradient Gradient color for drawing a line. source="geojson" and "lineMetrics"=true Color   Paint

▲ Return to top

Symbol properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
symbol-placement Label placement relative to its geometry.   "point", "line", "line-center" "point" Layout
symbol-spacing Distance in pixels between two symbols. symbol-placement='line' positive number 250 Layout
symbol-avoid-edges If true, the symbols will not cross tile edges to avoid mutual collisions.   true, false false Paint
symbol-z-order Controls the order in which overlapping symbols are rendered.   "viewport-y", "source" "viewport-y" Layout
icon-allow-overlap If true, the icon will be visible even if it collides with other symbols. requires icon-image true, false false Layout
icon-ignore-placement If true, other symbols can be visible even if they collide with the icon. requires icon-image true, false false Layout
icon-optional If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not. Requires icon-image
Requires text-field
true, false false Layout
icon-rotation-alignment Determines the rotation behavior of icons.   "map", "viewport", "auto" "auto" Layout
icon-size Units in the factor of the original icon size.   Non-negative number 1 Layout
icon-text-fit Scales the icon to fit the associated text. Requires icon-image
Requires text-field
"none", "width", "height", "both" "none" Layout
icon-text-fit-padding Padding for icon-text-fit. Requires icon-image
Requires text-field
icon-text-fit!= 'none'
Array of numbers in the format [t,r,b,l]. [0,0,0,0] Layout
icon-image Name of an image in a sprite to use for drawing an image background.   Name of image in sprite.   Paint
icon-rotate Rotates the icon clockwise. Requires icon-image. Units in degrees. 0 Layout
icon-padding Padding for icon-image in pixels. Requires icon-image. Non-negative number. 2 Layout
icon-keep-upright If true, the icon may be flipped to prevent it from being rendered upside-down. Requires icon-image. true, false false Layout
icon-offset Offset of an icon from its anchor in pixels. Requires icon-image. Array of numbers in the format [X, Y] [0, 0] Layout
icon-anchor Part of the icon placed closest to the anchor. Requires icon-image. "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right" "center" Layout
icon-pitch-alignment Orientation of an icon when a map is pitched. Requires icon-image. "map", "viewport", "auto" "auto" Layout
text-pitch-alignment Orientation of text when a map is pitched. Requires text-field. "map", "viewport", "auto" "auto" Layout
text-rotation-alignment In combination with symbol-placement, determines the rotation behavior of the individual glyphs forming the text. Requires text-field. "map", "viewport", "auto" "auto" Layout
text-field Value for a text label.       Layout
text-font Font for displayed text.   Array of strings. ["Open Sans Regular","Arial Unicode MS Regular"] Layout
text-size Size of displayed text in pixels. Requires text-field. Non-negative number. 16 Layout
text-max-width Max line width in ems. Requires text-field. Non-negative number. 10 Layout
text-line-height Text leading value in ems for multi-line text. Requires text-field. Non-negative number. 1.2 Layout
text-letter-spacing Text tracking amount in ems. Requires text-field. Non-negative number. 0 Layout
text-justify Text justification. Requires text-field. "left", "center", "right" "center" Layout
text-anchor The anchor position for text. Requires text-field. "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right" "center" Layout
text-max-angle Maximum angle change in degrees between adjacent characters. Requires text-field.
Requires symbol-placement = "line" or "line-center".
Non-negative number. 45 Layout
text-rotate Rotates text in degrees clockwise. Requires text-field. Non-negative number. 0 Layout
text-padding Padding for text in pixels. Requires text-field. Non-negative number. 2 Layout
text-keep-upright If true, the text may be flipped vertically to prevent it from being rendered upside-down. Requires text-field.
Requires text-rotation-alignment ="map".
Requires symbol-placement = "line" or "line-center".
true, false true Layout
text-transform Specifies how to capitalize text. Requires text-field. "none", "uppercase", "lowercase" "none" Layout
text-offset Offset of text from its anchor in ems. Requires text-field. Array of numbers in format [X, Y]. [0, 0] Layout
text-allow-overlap</td> If true, the text will be visible even if it collides with other symbols. Requires text-field. true, false false Layout
text-ignore-placement If true, other symbols will be visible even if they collide with text. Requires text-field. true, false false Layout
text-optional If true, icons will display without their corresponding text when the text collides with other symbols. Requires text-field.
Requires icon-image.
true, false false Layout
icon-opacity The opacity of an icon. Requires icon-image. Number between 0 and 1 inclusive. 1 Paint
icon-color The color of an icon. Requires icon-image. Color #000000 Paint
icon-halo-color The color of an icon's halo. Requires icon-image. Color rgba(0, 0, 0, 0) Paint
icon-halo-width The width of an icon's halo in pixels. Requires icon-image. Non-negative number. 0 Paint
icon-halo-blur The blur of an icon's halo in pixels. Requires icon-image. Non-negative number. 0 Paint
icon-translate The offset of an icon's anchor from its original placement. Requires icon-image. Array of numbers in the format [X, Y]. [0, 0] Paint
icon-translate-anchor The frame of an anchor for 'icon-translate'. Requires icon-image.
Requires icon-translate.
"map", "viewport" "map" Paint
text-opacity The opacity of text. Requires text-field. Number between 0 and 1 inclusive. 1 Paint
text-color The color of text. Requires text-field. Color #000000 Paint
text-halo-color The color of a text's halo. Requires text-field. Color rgba(0, 0, 0, 0) Paint
text-halo-width The width of a text's halo in pixels. Requires text-field. Non-negative number. 0 Paint
text-halo-blur The blur of a text's halo in pixels. Requires text-field. Non-negative number. 0 Paint
text-translate The offset of a text's anchor from its original placement. Requires text-field. Array of numbers in the format [X, Y]. [0, 0] Paint
text-translate-anchor The frame of an anchor for 'text-translate'. Requires text-field. "map", "viewport" "map" Paint

▲ Return to top

Fill properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
fill-antialias Whether the fill should be anti-aliased.   true, false true Paint
fill-opacity The opacity of a fill layer.   Number between 0 and 1 inclusive. 1 Paint
fill-color The color of a fill layer.   Color #000000 Paint
fill-outline-color The outline color of the fill. fill-antialias = true Color Value of fill-color Paint
fill-translate The offset of a fill layer's anchor from its original placement.   Array of numbers in the format [X, Y]. [0, 0] Paint
fill-translate-anchor The frame of an anchor for 'fill-translate'. Requires fill-translate. "map", "viewport" "map" Paint
fill-pattern Name of the image in a sprite to use for drawing image fills.   Name of image in sprite.   Paint

▲ Return to top

Raster properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
raster-opacity The opacity at which the image will be drawn.   Number between 0 and 1. 1 Paint
raster-hue-rotate Rotates hues around the color wheel.   Number between 0 and 1 inclusive. 0 Paint
raster-brightness-min The minimum brightness of the image.   Number between 0 and 1 inclusive. 0 Paint
raster-brightness-max The maximum brightness of the image.   Number between 0 and 1 inclusive. 1 Paint
raster-saturation Saturation of the image.   Number between -1 and 1 inclusive. 0 Paint
raster-contrast Contrast of the image.   Number between -1 and 1 inclusive. 0 Paint
raster-resampling Used for overscaling / texture magnification filtering.   "linear", "nearest" "linear" Paint
raster-fade-duration Fade the duration of the new tile.   Non-negative number. 300 Paint

▲ Return to top

Circle properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
circle-radius Circle radius.   Non-negative number. 5 Paint
circle-color Fill color of the circle.   Color #000000 Paint
circle-blur Amount to blur the circle.   Number 0 Paint
circle-opacity The opacity of the circle.   Number between 0 and 1 inclusive. 1 Paint
circle-translate The geometry's offset.   Array of numbers in the format [X, Y]. [0,0] Paint
circle-translate-anchor The frame of reference for circle-translate. Requires circle-translate. "map", "viewport" "map" Paint
circle-pitch-scale Scaling behavior of the circle when the map is pitched.   "map", "viewport" "map" Paint
circle-pitch-alignment Alignment of the circle when the map is pitched.   "map", "viewport" "viewport" Paint
circle-stroke-width The width of the circle's stroke.   Non-negative number. 0 Paint
circle-stoke-color The color of the circle's stroke.   Color #000000 Paint
circle-stroke-opacity The opacity of the circle's stroke.   Number between 0 and 1 inclusive. 1 Paint

▲ Return to top

Hillshade properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
hillshade-illumination-direction The direction of the light source.   Number between 0 and 359. 335 Paint
hillshade-illumination-anchor Direction of the light source.   "map", "viewport" "viewport" Paint
hillshade-exaggeration Intensity of the hillshade.   Number between 0 and 1. 0.5 Paint
hillshade-shadow-color The shading color of areas that face away from the light source.   Color #000000 Paint
hillshade-highlight-color The shading color of areas that faces towards the light source.   Color #FFFFFF Paint
hillshade-accent-color The shading color to highlight rugged terrain like cliffs and gorges.   Color #000000 Paint

▲ Return to top

Heatmap properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed   "visible", "none" "visible" Layout
heatmap-radius Radius of one heatmap point in pixels.   Number greater than or equal to 1. 30 Paint
heatmap-weight The degree of how much a point contributes to the heatmap.   Non-negative number. 1 Paint
heatmap-intensity The intensity of the heatmap globally. It is used to adjust the heatmap on different zoom levels.   Non-negative number. 1 Paint
heatmap-color Color of each pixel based on its density in a heatmap.   Color ["interpolate",["linear"],
["heatmap-density"],0,"rgba(0, 0, 255, 0)",
0.1,"royalblue",0.3,"cyan",0.5,"lime",0.7,
"yellow",1,"red"]
Paint
heatmap-opacity Opacity of the heatmap.   Number between 0 and 1. 1 Paint

▲ Return to top

Fill Extrusion properties

Property name Description Condition Values Default value Category
visibility Whether this layer is displayed.   "visible", "none" "visible" Layout
fill-extrusion-opacity The opacity of the fill extrusion layer.   Number between 0 and 1. 1 Paint
fill-extrusion-color The color of the extruded fill.   Color #000000 Paint
fill-extrusion-translate The geometry's offset.   Array of numbers in the format [X, Y]. [0,0] Paint
fill-extrusion-translate-anchor Controls the frame of reference for fill-extrusion-translate. Requires fill-extrusion-translate. "map", "viewport" "map" Paint
fill-extrusion-pattern Name of the image to use for drawing images on extruded fills.   Text   Paint
fill-extrusion-height The height with which to extrude this layer.   Non-negative number. 0 Paint
fill-extrusion-base The height with which to extrude the base of this layer. It has to be less than or equal to fill-extrusion-height. Requires fill-extrusion-height. Non-negative number. 0 Paint
fill-extrusion-vertical-gradient Whether to apply a vertical gradient to the sides of a fill-extrusion layer.   true, false true Paint

▲ Return to top

You are here