Deep Map™ Style Specification

Deep Map™ Style is the style language for our native 3D engine. The styling is done in two separate parts: a styling definition which specifies the static appearance of the map, and a rule definition which defines a set of conditions to change the styling dynamically at run-time. The Deep Map™ Style is similar to Geo CSS, but many properties are different, since they do not directly apply to the 3D world.

The style of the map is defined in a .mapStyle file, and contains basic map properties as well as the static styling of the map features. Rules are defined in a different .mapRule file. For the specification, see here: Deep Map™ Rule specification

Feature styles

Feature styles define the appearance of the objects, called map features, within the map. Each feature falls into one of four basic types:

  • point

  • line

  • polygon

  • icon

A feature style is defined in the following way:

feature <featureName> : <parentFeatureName> {
        <property> : <propertyValue> ;
        /* more properties */
}

feature is the keyword to start a new feature type definition. <featureName> is the name of the featureType definition. Valid characters for the featureName are letters, numbers or one of the following characters: ., - or _ . The only limitation is that numbers are not allowed for the first character. So these feature names are valid:

  • _na-m.e

  • .na1me5

  • -name1233

However these would be invalid:

  • 1name (numerical value at the beginning)

  • &na#me (invalid characters: & and #)

  • n:me (invalid, because : is a reserved symbol)

<parentFeatureName> is the name of a previously defined feature, and all of its properties are inherited by the new feature. Basic features never inherit from another feature, while all other features require a parent feature:

feature polygon { } //basic feature type: does not inherit

feature building:polygon { } //not basic feature type: needs to inherit

feature buildingSpecial:building { } //inheritance from other feature is valid, if it has been defined prior

/* !!! the following features are invalid !!! */

feature point:building { } //invalid: basic features can not inherit, and the types do not match

feature roomSpecial:room { } //invalid: room was not defined prior

feature room { } //invalid: does not have a parent feature

<property> specifies a property to be set by a <propertyValue>. Each basic feature has its own set of properties:

Point feature properties

property

type

notes

example

ver

visibility

Visibility

Controls the polygon’s visibility. Default: visible. Optional.

 
visibility: visible;

V2.0

floor-selectable

boolean

enable / disable if feature can be made visible by floor selection. If set to false, the feature is is always visible, regardless of the selected floor.

 
floor-selectable: true;

V2.0

Points are always used in combination with different object types. Typically as anchor for an unconstrained label or a 3D object.

Example:

feature point {
        visibility: visible;
        floor-selectable: true;
}

Line feature properties

property

type

notes

example

ver

line-color

hex color

The fill color for this line. Optional.

 
line-color: #ffffff;

V2.0

line-translate

coordinate

The line’s offset. Optional.

 
line-translate: [0,0,0];

V2.0

line-width

length value

The width of the line in meters. Optional.

 
line-width: 1.0;

V2.0

line-gap-width

length value

Draws a line casing outside of a line’s actual path. Value indicates the width of the inner gap in meters. Optional. No effect on routing lines.

 
line-gap-width: 1;

V2.0

line-blur

numeric

The blur factor for the line between 0.0 and 1.0. No effect on routing lines.

 
line-blur: 0.0;

V2.0

line-pattern

String

An image file name for a pattern to draw the line with. Optional.

 
line-pattern: "line-pattern123.png";

V2.0

line-join

line join type

Line joins: round or miter. No effect on routing lines.

 
line-join: join-miter;

V2.0

line-extrude

length value

Height extrusion of the line. If a line is extruded, the following properties have no effect: line-gap-width, line-blur, line-pattern, line-join

 
line-extrude: 10;

V2.1.2

line-centerline-offset

numeric

Accepts values between -1.0 and 1.0. Only affects lines with line-extrude. Offset value to affect the width extrusion. A value of 0.0 means, that the original line-string will be at the center of created line. A full “left” extrusion is -1.0 and a full “right” extrusion is 1.0. Values in between interpolate smoothly between the two extremes.

 
line-centerline-offset: -1.0;

V2.1.2

line-scaling

line scaling type

Either line-scaling-fixed or line-scaling-scale. Defines if an icon should have a fixed size in the scene, or scales with camera height. Default is line-scaling-fixed.

 
line-scaling: line-scaling-scale;

V2.1

line-maxscale

numeric

If line-scaling is enabled the size increases with increasing camera height but line-maxscale limits the maximal scale to a specific value

 
line-maxscale:2.0;

V2.1

line-minscale

numeric

If line-scaling is enabled the size decreases with decreasing camera height but line-minscale limits the minimal scale to a specific value

 
line-minscale: 1.0;

V2.1

visibility

Visibility

Controls the lines’s visibility. Default: visible. Optional.

 
visibility: visible;

V2.0

floor-selectable

boolean

enable / disable if feature can be made visible by floor selection. If set to false, the feature is is always visible regardless of the selected floor.

 
floor-selectable: true;

V2.0

Example:

feature line {
        line-color: #aabbcc;
        line-translate: [0,1,0];
        line-width: 2.0;
        line-gap-width: 1.0;
        line-blur: 0.5;
        line-join: join-round;
        visibility: none;
        floor-selectable: false;
}

Polygon feature properties

property

type

notes

example

ver

fill-color

hex color

The fill color for this polygon. Optional.

 
fill-color: #00ffff;

V2.0

fill-color-selected

hex color

The fill color for this polygon when it is selected. Optional

 
fill-color-selected: #ff0000;

V2.1

fill-color-highlighted

hex color

The fill color for this polygon when it is highlighted. Optional

 
fill-color-highlighted: #ff00ff;

V2.1

fill-outline-color

hex color

The outline color for this polygon. Optional.

 
fill-outline-color: #ffffff;

V2.0

fill-outline-color-selected

hex color

The outline color for this polygon when it is selected. Optional.

 
fill-outline-color-selected: #ffff00;

V2.1

fill-outline-color-highlighted

hex color

The outline color for this polygon when it is highlighted. Optional.

 
fill-outline-color-highlighted: #00ff00;

V2.1

fill-outline-width

length value

The width of the polygon’s outline. Optional.

 
fill-outline-width: 0.1;

V2.0

fill-outline-offset

length value

The offset between polygon and outline. Optional.

 
fill-outline-offset: 0.1;

V2.0

visibility

Visibility

Controls the polygon’s visibility. Default: visible. Optional.

 
visibility: visible;

V2.0

floor-selectable

boolean

enable / disable if feature can be made visible by floor selection. If set to false, the feature is is always visible, regardless of the selected floor.

 
floor-selectable: true;

V2.0

texture-rotation

polygon texture rotation type

Defines if the texture of a polygon should rotate. Either texture-rotation-fixed (texture is fix in the scene) or texture-rotation-upright (texture rotates 180 degrees).

 
texture-rotation: texture-rotation-upright;

V2.2

Example:

feature polygon {
        fill-color: #ff00ff;
        fill-outline-color: #00ff00;
        fill-outline-width: 0.5;
        fill-outline-offset: 0.0;
        visibility: visible;
        floor-selectable: true;
}

Icon feature properties

property

type

notes

example

version

icon-size

numeric

The height of the icon in metres.

 
icon-size: 2.0;

V2.0

icon-scaling

icon scaling type

Either icon-scaling-fixed or icon-scaling-scale. Defines if an icon should have a fixed size in the scene, or scales with camera height.

 
icon-scaling: icon-scaling-fixed;

V2.0

icon-rotate

numeric

Angle in degrees in which the icon should be rotated. Is only in effect if icon-rotation is icon-rotation-fixed or icon-rotation-upright.

 
icon-rotate: 30.0;

V2.0

icon-rotation

icon rotation type

Either icon-rotation-fixed, icon-rotation-upright or icon-rotation-rotate. Defines if an icon should rotate within the scene along with the camera.

 
icon-rotation: icon-rotation-upright;

V2.0

visibility

Visibility

Controls the icon’s visibility. Default: visible. Optional

 
visibility: visible;

V2.0

floor-selectable

boolean

enable / disable if feature can be made visible by floor selection. If set to false, the feature is is always visible, regardless of the selected floor.

 
floor-selectable: true;

V2.0”

icon-primary-color icon-secondary-color

hex color

If the icon_multicolor tag is set to true in the database the two colors of the icon can be changed. The correct colors are only shown for black and white icons.

 
icon-primary-color: #4286f4;
icon-secondary-color: #29f2e8;

V2.2

Example:

feature icon {
        icon-size: 2.0;
        icon-scaling: icon-scaling-fixed;
        icon-rotation: icon-rotation-upright;
        icon-rotate: 45.0;
        visibility: visible;
        floor-selectable: false;
}

Text feature properties

Text features do not exist on their own, but are always attached to another feature type, which determines the text appearance on the map. Point labels always appear in a fixed size. Polygon labels are constrained by the polygon boundaries and are always scaled to fill the space optimally. Line labels are constraint by the line width and are repeated along the path.

Table

property

type

notes

example

ver

text-align

alignment type

Horizontal alignment of the text

 
text-align: text-left;

V2.0

text-vertical-align

vertical alignment type

Vertical alignment of the text

 
text-vertical-align: text-top;

V2.0

text-font

String

Filename of a font-file. All Freetype2 fonts should be supported (TTF, TTC, CFF, WOFF, OTF, OTC, PFA, PFB, CID-keyed Type 1 fonts, SFNT, X11 PCF, Windows FNT, BDF, PFR, Type 42 (limited) ). The font-file needs to be in the DeepMap.zip package in order to be used.

 
text-font: "Deja-Vu.ttf"

V2.0

text-color

hex color

The fill color for the text label

 
text-color: #000000;

V2.0

text-outline-color

hex color

The outline color of the text label

 
text-outline-color: #ffffff;

V2.0

text-letter-spacing

numeric

Multiplication factor for the letter spacing. 1.0 means default spacing, higher values increases distance

 
letter-spacing: 1.5;

V2.0

text-line-height

numeric

Multiplication factor for the text-line height. 1.0 means default line size. Higher values means increased distance between two text lines.

 
line-height: 2.0;

V2.0

text-rotation

text rotation type

Controls whether a label is fixed in the scene, if it stays upright or rotates with the camera

 
text-rotation: text-rotation-fixed;

V2.0

text-rotate

numeric

Rotation angle of the label. Only applies if text rotation is fixed or upright

 
text-rotate: 45.0;

V2.0

text-visibility

Visibility

Controls the labels visibility. Default: visible. Optional

 
text-visibility: visible;

V2.0

text-minscale

numeric

Text usually adapts to the polygon size. text-minscale limits the scaling to a minimal value.

 
text-minscale: 1.0;

V2.1

text-maxscale

numeric

Text usually adapts to the polygon size. text-maxscale limits the scaling to a maximal value.

 
text-maxscale: 2.0;

V2.1

The following properties only affect point- and icon-features:

Table

property

type

notes

example

ver

text-offset

coordinate

Label offset coordinate in metres

 
text-offset: [1.0 , 1.0,1.0];

V2.0

text-size

numeric

Size of the created text.

 
text-size: 24;

V2.0

text-anchor

anchor type

Chooses where the label is placed in relation to the point feature.

 
text-anchor: text-anchor-center;

V2.0

The following properties only affect line-features:

Table

property

type

notes

example

ver

text-label-spacing

numeric

Sets distance between two consecutive line labels

 
text-label-spacing: 30.0;

V2.0

Example:

feature point {
        text-visibility: visible;
        text-rotation: text-rotation-upright;
        text-rotate: 30;
        text-color: #000000;
        text-outline-color: #ffffff;
}

Note

The label definition is within point

Database properties (Version 2.1)

The properties of a feature can also be provided by a database. A database access by writing the database field enclosed in curly brackets. For example, setting the fill-color of a polygon via database would be done in the following way:

feature building:polygon {
    fill-color: {dbFillColor};
}

In this case, the database-field “dbFillColor” is read from the database, and the value of the database-entry will be set to fill-color. The value of the database property has to be a string in the formatting of the corresponding data-type. The value is ignored if it cannot be matched to the property.

Property types

Numeric

numeric value (int64 or float value with double precision)

Coordinate

a vector of three numeric values, e.g: [0.5 , 1.0, 0.0]

String

a text string delimited by " "

Boolean

true / false

Length value

A distance expressed as meters (m), kilometres (km) or feet (ft)

Hex color

A rgb hexadecimal color: #rrggbb

Visibility

Either visible or none

Line join type

Either join-round or join-miter

Icon scaling type

Either icon-scaling-fixed or icon-scaling-scale

Icon rotation type

Either icon-rotation-fixed, icon-rotation-upright or icon-rotation-rotate

Rotation type

Either text-rotation-fixed, text-rotation-upright or text-rotation-rotate

Alignment type

Either text-left, text-center or text-right

Vertical alignment type

Either text-top, text-middle or text-bottom

Text rotation type

Either text-rotatation-fixed, text-rotatation-rotate or text-rotatation-upright

Anchor type

One of the following: text-anchor-center, text-anchor-left, text-anchor-right, text-anchor-top, text-anchor-bottom, text-anchor-top-left, text-anchor-top-right, text-anchor-bottom-left, text-anchor-bottom-right

Polygon texture rotation type

Either texture-rotation-fixed or texture-rotation-upright

Line scaling type

Either line-scaling-fixed or line-scaling-scale

Comments

You can add comments in the style files. You can either make single-line comments by using // , or a multi-line comment block, which starts with a /* and ends with */

feature building:polygon{
        fill-color: #aabbcc; //also a single line comment
        //this is a single line comment
        /*
                This
                is
                a
                comment
                block
        */
        fill-outline-color: /* also a comment */ #ddeeff;
}