Using the styleJson, you can customize the presentation of the Thinkgeo map, changing the style of such elements as roads,parks,building, and other points of interest.

The following example map is created with styleJson.

• styleJson object

A styleJson declaration format consists of the following elements:

{
"version": 0.1,
"owner": "ThinkGeo",
"time": "2018-4-27 11:00",
"background":"...",
"variables": {...},
"styles": [...],
"sources": [...],
"layers": [...]
}

• version

Required `float`

JSON Map CSS specification version number.

• owner

Optional `string`

This JSON Map CSS belongs to someone, company or organization.

• time

Optional `string`

This JSON Map CSS when to be created.

• background

Set the map's background color.

• variables

Optional

All variables must be defined in this property and their name must begin with @.

"variables": {
"@trees":"#b8d7b5",
"@trees_opacity07":"rgba(184, 215, 181, 0.7)",
"@trees_opacity05":"rgba(184, 215, 181, 0.5)",
"@trees_opacity02":"rgba(184, 215, 181, 0.2)",
}

• styles

Required `array`

Define all map rendered styles. They include point, line, polygon, text etc.

• sources

Required `array`

Define all map data sources.

• layers

Required `array`

Map styles and map data sources are linked by layers. Layers will be drawn in the order of array.

Hint: The second chapter of this book has more information about styles, sources and layers.

"styles": [
{
"id": "style1",
"filter": "layerName='layer1'",
"z-index": "columnName"
"style": [...]
}
]

• id

Required `string`

A map rendered style's unique identifier.

  * **filter**

Optional `string`

Select some data which is need to render map.

• z-index

Optional `string`

Map data would be sorted by this column's value.

• style

Require `array`

Some specific map rendered styles.

"style": [
{
"filter": "zoom>=0;zoom<=19;highway='motorway'",
"line-color": "#000",
"line-width": 6,
"style": [
{
"line-color": "#fff",
"line-width": 4,
"children": [
{
"line-color": "#000",
"line-width": 2
}
]
}
]
}
]

• children

Optional `array`

Children would use the same feature as the parent style, but it only uses styles by itself, it wouldn't use styles from it's parent.

• point-dx `number`

Description: The horizontal offset of drawn graphic. It's available when the point-type is not symbol. Default Value: `0`

"point-dx": 3

• point-dy `number`

Description: The vertical offset of drawn graphic. It's available when the point-type is not symbol. Default Value: `0`

"point-dy": 3

• point-file `string`

Description: A defined image path that renders how a point appears.

"point-file": "http://www.image.com/image.png"

• point-fill `string`

Description: A defined fill of symbol or glyph.

"point-fill": "#fff"

• point-glyph `string`

Description: A defined glyph type that renders how a point appears.

"point-glyph": "ThinkgeoFont"

• point-glyph-mask-color `string`

Description: Sets the color of mask fill.

"point-glyph-mask-color": "#000"

• point-glyph-mask-margin `string`

Description: Sets the 4 distances of mask margin, in pixels. Default Value: `0,0,0,0`

"point-glyph-mask-margin": "1,1,1,1"

• point-glyph-mask-outline-color `string`

Description: Sets the color of mask outline.

"point-glyph-mask-outline-color": "#000"

• point-glyph-mask-outline-width `number`

Description: Sets the width of mask outline, in pixels.

"point-glyph-mask-outline-width": 3

• point-glyph-mask-type `enum`

Description: Sets the type of text mask. Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle`

"point-glyph-mask-type": "circle"

• point-glyph-name `string`

Description: A defined glyph name that renders how a point appears.

"point-glyph-name": "\ue001"

• point-linear-gradient `string`

Description: A defined glyph and symbol are rendered by the linear gradient.

"point-linear-gradient": "[0:#000],[1,#fff]"

• point-outline-color `string`

Description: A defined outline color of symbol or glyph.

"point-outline-color": "#000"

• point-outline-width `number`

Description: A defined outline width of symbol or glyph. Default Value: `0`

"point-outline-width": 1

• point-opacity `number`

Description: Sets the overall opacity of the point. Default Value:`1`, the point if fully opaque. Available Values: `0` to `1`

"point-opacity": 1

• point-radial-gradient `string`

Description: A defined glyph and symbol are rendered by the radial gradient.

"point-radial-gradient": "[0:#000],[1:#fff]"

• point-rotate-angle `number`

Description: A defined rotate angle that how a point appears. Default Value: `0`

"point-rotate-angle": 90

• point-size `number`

Description: A defined size of symbol or glyph. Default Value: `1`

"point-size": 9

• point-symbol-type `enum`

Description: The symbol type is shown at the point position when the point-type is symbol. The type include circle, square, triangle, cross and star. Available Values: `circle` `square` `triangle` `cross` `star`

"point-symbol-type": "square"

• point-type `enum`

Description: The graphic type is shown at the point position. The type include symbol, image and glyph. symbol is a defined graphic; image is a picture and the glyph a user-defined special character set that works with “point-glyph-name” Available Values: `symbol` `image` `glyph`

"point-type": "symbol"

• point-transform `string`

Description: Defines SVG transformation functions to scale how points appear. Default Value: `none`, geometry is not transformed. Available Values: `translate` `scale` `rotate` `skew`

"point-transform": "translate(10,20)"

• line-cap `enum`

Description: The display of line endings. Default Value: `round` Available Values: `round` `butt` `square`

"line-cap": "butt"

• line-cap-inner `enum`

Description: The display of inner line endings. Default Value: `round` Available Values: `round` `butt` `square`

"line-cap-inner": "butt"

• line-cap-center `enum`

Description: The display of center line endings. Default Value: `round` Available Values: `round` `butt` `square`

"line-cap-center": "butt"

• line-color `string`

Description: The color of the drawn line. Default Value: `rgba(0,0,0,0)`, (transparent)

"line-color": "#000"

• line-color-inner `string`

Description: The color of the drawn inner line. Default Value: `rgba(0,0,0,0)`, (transparent)

"line-color-inner": "#000"

• line-color-center `string`

Description: The color of the drawn center line. Default Value: `rgba(0,0,0,0)`, (transparent)

"line-color-center": "#000"

• line-dasharray `string`

Description: Use a pair of length values [a,b] to set dash patterns, where (a) is the dash length and (b) is the gap length. You can set more values to achieve more complex patterns.

"line-dasharray": "3,4,1,2"

• line-dasharray-inner `string`

Description: Use a pair of length values [a,b] to set dash patterns, where (a) is the dash length and (b) is the gap length. You can set more values to achieve more complex patterns.

"line-dasharray-inner": "3,4,1,2"

• line-dasharray-center `string`

Description: Use a pair of length values [a,b] to set dash patterns, where (a) is the dash length and (b) is the gap length. You can set more values to achieve more complex patterns.

"line-dasharray-center": "3,4,1,2"

• line-gamma `boolean`

Description: The level of antialiasing of a stroke line. Default Value: `1`, (fully antialiased) Available Values: `1` `0`

"line-gamma": true

• line-geometry-transform `string`

Description: Applies transformation functions to a geometry Default Value: `none`, (geometry is not transformed) Available Values: `tranlate` `scale` `rotate` `skew`

"line-geometry-transform": "translate(20,30)"

• line-join `enum`

Description: The behavior of lines when joined on a map. Default Value: `miter` Available Values: `miter` `round` `bevel`

"line-join": "miter"

• line-join-inner `enum`

Description: The behavior of inner lines when joined on a map. Default Value: `miter` Available Values: `miter` `round` `bevel`

"line-join-inner": "miter"

• line-join-center `enum`

Description: The behavior of center lines when joined on a map. Default Value: `miter` Available Values: `miter` `round` `bevel`

"line-join-center": "miter"

• line-miterlimit `number`

Description: The limit on the ratio of the miter length to the stroke-width. This is used to automatically convert miter joins to bevel joins for sharp angles, to avoid the miter extending beyond the thickness of the stroking path. Typically, this property does not need to be set. However, if you have jaggy artifacts during rendering, defining a larger value for this property helps. Defult Value: `4`, (auto-convert miter joins to bevel joins when theta is less than 29 degrees)

"line-miterlimit": 4

• line-miterlimit-inner `number`

Description: The limit on the ratio of the miter length to the stroke-width. This is used to automatically convert miter joins to bevel joins for sharp angles, to avoid the miter extending beyond the thickness of the stroking path. Typically, this property does not need to be set. However, if you have jaggy artifacts during rendering, defining a larger value for this property helps. Defult Value: `4`, (auto-convert miter joins to bevel joins when theta is less than 29 degrees)

"line-miterlimit-inner": 4

• line-miterlimit-center `number`

Description: The limit on the ratio of the miter length to the stroke-width. This is used to automatically convert miter joins to bevel joins for sharp angles, to avoid the miter extending beyond the thickness of the stroking path. Typically, this property does not need to be set. However, if you have jaggy artifacts during rendering, defining a larger value for this property helps. Defult Value: `4`, (auto-convert miter joins to bevel joins when theta is less than 29 degrees)

"line-miterlimit-center": 4

• line-oneway-symbol `string`

Description: Which kind of symbol are used to display oneway tags.

"line-oneway-symbol": "_icon.png"

• line-opacity `number`

Description: The opacity of a line. Default Value: `0`, (the line is fully transparent) Available Values: `0` to `1`

"line-opacity": 1

• line-width `number`

Description: The width of a line, in pixels. Default Value: `1`

"line-width": 1

• line-width-inner `number`

Description: The width of a inner line, in pixels. Default Value: `1`

"line-width-inner": 1

• line-width-center `number`

Description: The width of a inner line, in pixels. Default Value: `1`

"line-width-center": 1

• polygon-brush-type `enum`

Description: Choose which kind of brush type to render polygon shape. Default Value: `solid` Available Value: `solid` `hatch` `radialgradient` `lineargradient` `texture`

"polygon-brush-type": "solid"

• polygon-dx `number`

Description: The horizontal offset of drawn graphic. Default Value: `0`

"polygon-dx": 3

• polygon-dy `number`

Description: The vertical offset of drawn graphic. Default Value: `0`

"polygon-dy": 3

• polygon-fill `string`

Description: Sets the fill color of the polygon. Default Value: `rgba(128,128,128,1)` (completely opaque gray)

"polygon-fill": "rgba(128,128,128,1)"

• polygon-foreground-fill `string`

Description: Sets the foreground fill of the polygon. Default Value: `#000`

"polygon-foreground-fill": "#000"

• polygon-gamma `boolean`

Description: Sets the anti-aliasing level at the edge of the feature, affecting the rendering effect and speed. Default Value: `1`, (Completely anti-aliasing) Available Values: `1` `0`

"polygon-gamma": true

• polygon-geometry-transform `string`

Description: Defines the transform function for the geometry element. Available Values: `translate` `scale` `rotate` `skew`

"polygon-geometry-transform": "translate(20,30)"

• polygon-hatch-style `enum`

Description: Choose which kind of hatch style pattern to render polygon shape. Available Values: `cross` `horizontal` `vertical` `forwardDiagonal` `backwardDiagonal` `largegrid` `diagonalcross` `percent05` `percent10` `percent20` `percent25` `percent30` `percent40` `percent50` `percent60` `percent70` `percent75` `percent80` `percent90`

"polygon-hatch-style": "percent80"

• polygon-linear-gradient `string`

Description: A defined polygon is rendered by the linear gradient.

"polygon-linear-gradient": "[0:#000],[1:#fff]"

• polygon-opacity `number`

Description: Control opacity factor of polygon color. (0 as completely transparent, 1 as completely opaque) Defult Value: `1` (completely opaque) Available Values: `0` to `1`

"polygon-opacity": 1

• polygon-outline-color `string`

Description: The color of the drawn polygon's outline.

"polygon-outline-color": "#000"

• polygon-outline-dasharray `string`

Description: Use a pair of length values [a,b] to set dash patterns, where (a) is the dash length and (b) is the gap length. You can set more values to achieve more complex patterns.

"polygon-outline-dasharray": "[3,4,1,2]"

• polygon-outline-opacity `number`

Description: Control opacity factor of polygon outline color. (0 as completely transparent, 1 as completely opaque) Default Value: `1` (completely opaque) Available Values: `0` to `1`

"polygon-outline-opacity": 1

• polygon-outline-width `number`

Description: The width of a polygon outline, in pixels. Default Value:`0`

"polygon-outline-width": 1

• polygon-radial-gradient `string`

Description: A defined polygon is rendered by the radial gradient.

"polygon-radial-gradient": "[0:#000],[1:#fff]"

• polygon-shadow-color `string`

Description: The color of the drawn polygon's shadow.

"polygon-shadow-color": "#ccc"

• polygon-shadow-dx `number`

Description: The horizontal offset of drawn graphic. Default Value: `0`

"polygon-shadow-dx": 3

• polygon-shadow-dy `number`

Description: The vertical offset of drawn graphic. Default Value: `0`

"polygon-shadow-dy": 3

• polygon-texture-file `string`

Description: A defined image path that renders how a polygon appears.

"polygon-texture-file": "http://www.image.com/image.png"

• text-align `enum`

Description: Sets the alignment of text. Default Value: `center` Available Values: `left` `right` `center`

"text-align": "left"

• text-baseline `enum`

Description: Sets the current text baseline when the text is drawn. Default Value: `middle` Available Values: `bottom` `top` `middle` `alphabetic` `hanging` `ideographic`

"text-baseline": "top"

• text-date-format `string`

Description: Sets a format expression for date value when the type of value is numeric.

"text-date-format": "yyyy-mm-dd"

• text-dx `number`

Description: Sets the horizontal offset of the text, in pixels. A positive value shifts the text to the right. Default Value: `0`

"text-dx": 10

• text-dy `number`

Description: Sets the vertical offset of the text, in pixel. A positive value shifts the text down. Default Value: `0`

"text-dy": 10

• text-font `string`

Description: Sets the current font property of the text content.

"text-font": "600 12px Arial"

• text-fill `string`

Description: Set the color of the text lable. Default Value: `#000000` (black)

"text-fill": "argb(255,255,0,1)"

• text-force-horizontal-for-line `boolean`

Description: Sets the force horizontal of the text for line. Default Value: `0` Available Values: `1` `0`

"text-force-horizontal-for-line": 1

• text-halo-fill `string`

Description: Sets the halo color on the text edge. Default Value: `#FFFFFF`, (white)

"text-halo-fill": "#000"

• text-halo-radius `number`

Description: Sets the radius of the halo, in pixels. Default Value: `0`, (no halo is applied)

"text-halo-radius": 2

• text-letter-case `enum`

Description: Sets the type of letter case. Default Value: `default` Availabel Values: `default` `uppercase` `lowercase`

"text-letter-case": "uppercase"

• text-mask-color `string`

Description: Sets the color of mask fill.

"text-mask-color": "#000"

• text-mask-margin `string`

Description: Sets the 4 distance of mask margin, in pixels. Default Value: `0,0,0,0`

"text-mask-margin": "3,3,3,3"

• text-mask-outline-color `string`

Description: Sets the color of mask outline.

"text-mask-outline-color": "#000"

• text-mask-outline-width `number`

Description: Sets the width of mask outline, in pixels. Default Value:`0`

"text-mask-outline-width": 1

• text-mask-type `enum`

Description: Sets the type of text mask. Available Values: `default` `rectangle` `roundedCorners` `roundedEnds` `circle`

"text-mask-type": "roundedEnds"

• text-max-char-angle `number`

Description: For line feature, allow a maximum angle between adjacent characters, the expected value is in radians. Default Value: `2p` Available Values: `0` to `2p`

"text-max-char-angle": 0.5

• text-min-distance `number`

Description: Sets the minimum distance between text lables.

"text-min-distance": 1

• text-min-padding `number`

Description: Sets the minimum margin for text lable in meta tiles.

"text-min-padding": 3

• text-name `string`

Description: Sets the text displayed on the text lable. You can specify the data field you want to use by using the field name enclosed in brackets, for example: column_name.

"text-name": "column_name"

• text-numeric-format `string`

Description: Sets a numeric format expression for number value.

"text-numeric-format": "en-US, style: currency, currency: USD"

• text-opacity `number`

Description: Set the opacity of text lable. Default Value: `1`, (fully opaque) Available Values: `0` to `1`

"text-opacity": 1

• text-placement-type `enum`

Description: Sets the algorithm for text lables to avoid each other. 'detect' means to use the basic algorithm specified by the text-placements property, 'default' means not to use this property. Default Value: `default` Available Values: `default` `detect`

"text-placement-type": "detect"

• text-placements `string`

Description: If text-placement-type is set to 'detect', you can use this property to set the avoidance algorithm for text lables. Available Values: `U` `B` `L` `R`

"text-placements": "U"

• text-rotate-angle `number`

Description: Rotation in radians (positive rotation clockwise). Default Value: `0` Available Values: `0` to `2*PI`

"text-rotate-angle": 2

• text-spacing `number`

Description: Sets the space between two text lables drawn on a line, in pixels. Default Value: `0`

"text-spacing": 0

• text-text-format `string`

Description: Sets a format expression for text value.

"text-text-format": "{0} test"

• text-wrap-before `boolean`

Description: Controls the wraping action of text-name. Default Value: `false`, (wrapped text appears longer than wrap-width ) Available Values: `true` `false`

"text-wrap-before": true

• text-wrap-width `number`

Description: The length of characters that appears before the text-name lable wraps. Default Value: `0`

"text-wrap-width": 0

• shield-align `enum`

Description: Sets the alignment of shield lable. Default Value: `center` Available Values: `left` `right` `center` `end` `start`

"shield-align": "left"

• shield-date-format `string`

Description: Sets a format expression for date value.

"shield-date-format": "yyyy-mm-dd"

• shield-dx `number`

Description: Sets the horizontal offset of shield, in pixels. A positive value shifts the shield to the right. Default Value: `0`

"shield-dx": 0

• shield-dy `number`

Description: Sets the vertical offset of shield, in pixels. A positive value shifts the shield down. Default Value: `0`

"shield-dy": 0

• shield-face-name `string`

Description: Set the font and style of the marked text on the shield.

"shield-face-name": "600 24px Verdana"

• shield-fill `string`

Description: Sets the color of the text of the shield.

"shield-fill": "#000"

• shield-font `string`

Description: Sets the current font property of the shield content.

"shield-font": "600 12px Arial"

• shield-halo-fill `string`

Description: Sets the color of the shield text. Default Value: `#FFF`, (white)

"shield-halo-fill": "#000"

• shield-halo-radius `number`

Description: Sets the radius of shield text, in pixels. Default Value: `0`, (shield text without halo)

"shield-halo-radius": 0

• shield-icon-color `string`

Description: Sets the color of icon when the `shield-icon-type` is `symbol`. Default Value: `#000`

"shield-icon-color": "#fff"

• shield-icon-outline-color `string`

Description: Sets the outline color of icon when the `shield-icon-type` is `symbol`. Default Value: `#000`

"shield-icon-outline-color": "#fff"

• shield-icon-outline-width `number`

Description: Sets the outline width of icon when the `shield-icon-type` is `symbol`. Default Value: `0`

"shield-icon-outline-width": 3

• shield-icon-size `number`

Description: Sets the size of icon, in pixels. Default Value: `0`

"shield-icon-size": 24

• shield-icon-src `string`

Description: Sets the source path of icon when the `shield-icon-type` is `image`.

"shield-icon-src": "https://www.iconfinder.com/icons/1608409/download/svg/24"

• shield-icon-symbol-type `enum`

Description: _Sets symbol type of icon when the `shield-icon-type` is `symbol`. Available Values: `circle` `square` `triangle` `cross` `star`

"shield-icon-symbol-type": "circle"

• shield-icon-type `enum`

Description: Sets type of icon. Available Values: `image` `symbol`

"shield-icon-type": "symbol"

• shield-name `string`

Description: Sets a name of column to display it's fields.

"shield-name": "name"

• shield-min-distance `number`

Description: Sets the minimum distance between adjacent two shield symbols (which can be the same shield or can be different). Default Value: `0`

"shield-min-distance": 3

• shield-min-padding `number`

Description: Sets the minimum margin when the shield is marked on the tile. Default Value: `0`

"shield-min-padding": 3

• shield-numeric-format `string`

Description: Sets a numeric format expression for number value.

"shield-numeric-format": "en-US, style: currency, currency: USD"

• shield-opacity `number`

Description: Sets the opacity of the 'shiled-file' image. Defult Value: `1` Available Values: `0` to `1`

"shield-opacity": 1

• shield-orientation `number`

Description: Rotation in radians (positive rotation clockwise). Default Value: `0` Available Values: `0` to `2p`

"shield-orientation": 1

• shield-placement-type `enum`

Description: Sets the algorithm for shields to avoid each other. `detect` means to use the basic algorithm specified by the shield-placements property, `default` means not to use this property. Default Value: `default` Available Values: `default` `detect`

"shield-placement-type": "detect"

• shield-placements `string`

Description: If shield-placement-type is set to `detect`, you can use this property to set the avoidance algorithm for shield. Available Values: `U` `B` `L` `R`

"shield-placements": "U"

• shield-rotate-angle `number`

Description: Rotation in radians (positive rotation clockwise). Default Value: `0` Available Values: `0` to `2p`

"shield-rotate-angle": 2

• shield-spacing `number`

Description: Sets the interval distance between the shields. Default Value: `0`

"shield-spacing": 3

• shield-text-format `string`

Description: Sets a format expression for text value.

"shield-text-format": "{0} test"

• shield-wrap-width `number`

Description: Set how long the shield text needs to be folded. Default Value: `0`

"shield-wrap-width": 0

• shield-wrap-before `boolean`

Description: Control the shield of the text of the folding action. If the value is false, then each line of text will be slightly longer than the value set by the wrap-width property. Default Value: `0` Available Values: `0` `1`

"shield-wrap-before": 0

"sources": [
{
"id": "worldstreets_source",
"url": "http://{ip address}/{vector tile file path}/{z}/{x}/{y}.mvt",
"type": "MVT"
}
]

Required `string`

A map rendered data source's unique identifier.

Required `string`

The address of the data requested from the server.

Required `string`

The commonly used geospatial file formats of feature source,for example : JSONFeature, MVT, TextFeature and XMLFeature. But it only support “MVT” now.

"layers": [
{
"id": "layer1",
"source": "source1",
"styles": [
"style1"
]
}
]

Required `string`

A layer's unique identifier.

Required `string`

A source's unique identifier which has existed of sources.

Required `array`

Some of map rendered styles' unique identifier. Styles will be drawn in the order of array.