Native Styling

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. The specification of the Deep Map™ Rules can be found here: Deep Map™ Rule specification [v2 public release]

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 (without the " "): " . - _" . 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
Required SDK Version
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
Required SDK Version
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. -1.0 Is a full "left" extrusion and 1.0 is a full "right" extrusion. 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
Required SDK Version
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
Required SDK 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.

property
type
notes
example
Required SDK Version
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:

property

type

notes

example

Required SDK Version
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:

property

type

notes

example

Required SDK Version
text-label-spacing numeric Sets distance between two consecutive line labels text-label-spacing: 30.0; V2.0

Example:

feature point { //note that the label definition is within point
        text-visibility: visible;
        text-rotation: text-rotation-upright;
        text-rotate: 30;
        text-color: #000000;
        text-outline-color: #ffffff;
}

 

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-fixedicon-rotation-upright or icon-rotation-rotate 

Rotation type: Either text-rotation-fixedtext-rotation-upright or text-rotation-rotate

Alignment type: Either text-lefttext-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{
        //this is a single line comment
        fill-color: #aabbcc; //also a single line comment
        /*
                This
                is
                a
                comment
                block
        */
        fill-outline-color: /* also a comment */ #ddeeff;
}