ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== ThinkGeo StyleJSON Schema ======


<div msgbox>
The ThinkGeo StyleJSON Schemai llustrated "GettingStarted" Guide will guide you through the process of studying what is ThinkGeo StylJSON Schema, and how to use it in your desktop, web, or mobile mapping applications. </div>

<markdown>
StyleJSON is a describable [cartographic](https://en.wikipedia.org/wiki/Cartography) styling language in the [JSON](http://www.json.org/) format, which is similar to working with a Cascading Style Sheet for styling webpages. It defines the visual appearance of a map - what data should be drawn, the drawing sequence, and how to style the data when drawing it. Taking advantage of StyleJSON will allow you to add a great-looking map to your project in minutes, a browser, a phone, a tablet, or even a watch.
</markdown>

===== Install World Streets Styles =====

Below are professionally-designed map themes for your application or project, which can be downloaded and use it in your application for free.

==== CDN ====

Load from CDN in your project:

<code JavaScript>

<--Light Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/light.json"></script>

<--Dark Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/dark.json"></script>

<--Transparent Background Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/transparent-background.json"></script>

<--Cobalt Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/cobalt.json"></script>

<--Grayscale Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/grayscale.json"></script>

<--Muted Blue Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/mutedblue.json"></script>

<--Sepia Style-->
<script src="https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/oldancient.json"></script>
 
</code>

==== NPM ====

  * Install the package:

<code JavaScript>
npm i worldstreets-styles
</code>



===== StyleJSON Schema =====


==== Syntax ====


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.

=== Example === 

The following example map is created with styleJson.

[[https://maps.thinkgeo.com|{{stylejson-sample.png|StyleJSON Map}}]]

  * **styleJson object**

A styleJson declaration format consists of the following elements:

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

  * **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 @.

<code json>
"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)",
}
</code>

  * **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 ====
<code json>
"styles": [
{
"id": "style1",
"filter": "layerName='layer1'",
"z-index": "columnName"
"style": [...]
}
]
</code>

    * **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.

<code json>
"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
}
]
}
]
}
]
</code>

    * **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 ===

  * **point-dx** `number`

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

<code json>
"point-dx": 3
</code>

  * **point-dy** `number`

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

<code json>
"point-dy": 3
</code>

  * **point-file** `string`

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

<code json>
"point-file": "http://www.image.com/image.png"
</code>

  * **point-fill** `string`

Description: //A defined fill of symbol or glyph.//

<code json>
"point-fill": "#fff"
</code>

  * **point-glyph** `string`

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

<code json>
"point-glyph": "ThinkgeoFont"
</code>

  * **point-glyph-mask-color** `string`

Description: //Sets the color of mask fill.//

<code json>
"point-glyph-mask-color": "#000"
</code>

  * **point-glyph-mask-margin** `string`

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

<code json>
"point-glyph-mask-margin": "1,1,1,1"
</code>

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

Description: //Sets the color of mask outline.//

<code json>
"point-glyph-mask-outline-color": "#000"
</code>

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

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

<code json>
"point-glyph-mask-outline-width": 3
</code>

  * **point-glyph-mask-type** `enum`

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

<code json>
"point-glyph-mask-type": "circle"
</code>

  * **point-glyph-name** `string`

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

<code json>
"point-glyph-name": "\ue001"
</code>

  * **point-linear-gradient** `string`

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

<code json>
"point-linear-gradient": "[0:#000],[1,#fff]"
</code>

  * **point-outline-color** `string`

Description: //A defined outline color of symbol or glyph.//

<code json>
"point-outline-color": "#000"
</code>

  * **point-outline-width** `number`

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

<code json>
"point-outline-width": 1
</code>

  * **point-opacity** `number`

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

<code json>
"point-opacity": 1
</code>

  * **point-radial-gradient** `string`

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

<code json>
"point-radial-gradient": "[0:#000],[1:#fff]"
</code>

  * **point-rotate-angle** `number`

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

<code json>
"point-rotate-angle": 90
</code>

  * **point-size** `number`

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

<code json>
"point-size": 9
</code>

  * **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`

<code json>
"point-symbol-type": "square"
</code>

  * **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`

<code json>
"point-type": "symbol"
</code>

  * **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`

<code json>
"point-transform": "translate(10,20)"
</code>


=== Line ===

  * **line-cap** `enum`

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

<code json>
"line-cap": "butt"
</code>

  * **line-cap-inner** `enum`

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

<code json>
"line-cap-inner": "butt"
</code>

  * **line-cap-center** `enum`

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

<code json>
"line-cap-center": "butt"
</code>

  * **line-color** `string`

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

<code json>
"line-color": "#000"
</code>

  * **line-color-inner** `string`

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

<code json>
"line-color-inner": "#000"
</code>

  * **line-color-center** `string`

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

<code json>
"line-color-center": "#000"
</code>

  * **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.//

<code json>
"line-dasharray": "3,4,1,2"
</code>

  * **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.//

<code json>
"line-dasharray-inner": "3,4,1,2"
</code>

  * **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.//

<code json>
"line-dasharray-center": "3,4,1,2"
</code>

  * **line-gamma** `boolean`

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

<code json>
"line-gamma": true
</code>

  * **line-geometry-transform** `string`

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

<code json>
"line-geometry-transform": "translate(20,30)"
</code>

  * **line-join** `enum`

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

<code json>
"line-join": "miter"
</code>

  * **line-join-inner** `enum`

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

<code json>
"line-join-inner": "miter"
</code>

  * **line-join-center** `enum`

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

<code json>
"line-join-center": "miter"
</code>

  * **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)//

<code json>
"line-miterlimit": 4
</code>

  * **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)//

<code json>
"line-miterlimit-inner": 4
</code>

  * **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)//

<code json>
"line-miterlimit-center": 4
</code>

  * **line-oneway-symbol** `string`

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

<code json>
"line-oneway-symbol": "_icon.png"
</code>

  * **line-opacity** `number`

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

<code json>
"line-opacity": 1
</code>

  * **line-width** `number`

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

<code json>
"line-width": 1
</code>

  * **line-width-inner** `number`

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

<code json>
"line-width-inner": 1
</code>

  * **line-width-center** `number`

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

<code json>
"line-width-center": 1
</code>

=== Polygon ===

  * **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`

<code json>
"polygon-brush-type": "solid"
</code>

  * **polygon-dx** `number`

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

<code json>
"polygon-dx": 3
</code>

  * **polygon-dy** `number`

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

<code json>
"polygon-dy": 3
</code>

  * **polygon-fill** `string`

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

<code json>
"polygon-fill": "rgba(128,128,128,1)"
</code>

  * **polygon-foreground-fill** `string`

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

<code json>
"polygon-foreground-fill": "#000"
</code>

  * **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`

<code json>
"polygon-gamma": true
</code>

  * **polygon-geometry-transform** `string`

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

<code json>
"polygon-geometry-transform": "translate(20,30)"
</code>

  * **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`

<code json>
"polygon-hatch-style": "percent80"
</code>

  * **polygon-linear-gradient** `string`

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

<code json>
"polygon-linear-gradient": "[0:#000],[1:#fff]"
</code>

  * **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`

<code json>
"polygon-opacity": 1
</code>

  * **polygon-outline-color** `string`

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

<code json>
"polygon-outline-color": "#000"
</code>

  * **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.//

<code json>
"polygon-outline-dasharray": "[3,4,1,2]"
</code>

  * **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`

<code json>
"polygon-outline-opacity": 1
</code>

  * **polygon-outline-width** `number`

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

<code json>
"polygon-outline-width": 1
</code>

  * **polygon-radial-gradient** `string`

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

<code json>
"polygon-radial-gradient": "[0:#000],[1:#fff]"
</code>

  * **polygon-shadow-color** `string`

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

<code json>
"polygon-shadow-color": "#ccc"
</code>

  * **polygon-shadow-dx** `number`

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

<code json>
"polygon-shadow-dx": 3
</code>

  * **polygon-shadow-dy** `number`

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

<code json>
"polygon-shadow-dy": 3
</code>

  * **polygon-texture-file** `string`

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

<code json>
"polygon-texture-file": "http://www.image.com/image.png"
</code>

=== Text ===
  * **text-align** `enum`

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

<code json>
"text-align": "left"
</code>

  * **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`

<code json>
"text-baseline": "top"
</code>

  * **text-date-format** `string`

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

<code json>
"text-date-format": "yyyy-mm-dd"
</code>

  * **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`

<code json>
"text-dx": 10
</code>

  * **text-dy** `number`

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

<code json>
"text-dy": 10
</code>

  * **text-font** `string`

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

<code json>
"text-font": "600 12px Arial"
</code>

  * **text-fill** `string`

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

<code json>
"text-fill": "argb(255,255,0,1)"
</code>

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

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

<code json>
"text-force-horizontal-for-line": 1
</code>

  * **text-halo-fill** `string`

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

<code json>
"text-halo-fill": "#000"
</code>

  * **text-halo-radius** `number`

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

<code json>
"text-halo-radius": 2
</code>

  * **text-letter-case** `enum`

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

<code json>
"text-letter-case": "uppercase"
</code>

  * **text-mask-color** `string`

Description: //Sets the color of mask fill.//

<code json>
"text-mask-color": "#000"
</code>

  * **text-mask-margin** `string`

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

<code json>
"text-mask-margin": "3,3,3,3"
</code>

  * **text-mask-outline-color** `string`

Description: //Sets the color of mask outline.//

<code json>
"text-mask-outline-color": "#000"
</code>

  * **text-mask-outline-width** `number`

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

<code json>
"text-mask-outline-width": 1
</code>

  * **text-mask-type** `enum`

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

<code json>
"text-mask-type": "roundedEnds"
</code>

  * **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`

<code json>
"text-max-char-angle": 0.5
</code>

  * **text-min-distance** `number`

Description: //Sets the minimum distance between text lables.//

<code json>
"text-min-distance": 1
</code>

  * **text-min-padding** `number`

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

<code json>
"text-min-padding": 3
</code>

  * **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.//

<code json>
"text-name": "column_name"
</code>

  * **text-numeric-format** `string`

Description: //Sets a numeric format expression for number value.//

<code json>
"text-numeric-format": "en-US, style: currency, currency: USD"
</code>

  * **text-opacity** `number`

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

<code json>
"text-opacity": 1
</code>

  * **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`

<code json>
"text-placement-type": "detect"
</code>

  * **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`

<code json>
"text-placements": "U"
</code>

  * **text-rotate-angle** `number`

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

<code json>
"text-rotate-angle": 2
</code>

  * **text-spacing** `number`

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

<code json>
"text-spacing": 0
</code>

  * **text-text-format** `string`

Description: //Sets a format expression for text value.//

<code json>
"text-text-format": "{0} test"
</code>

  * **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`

<code json>
"text-wrap-before": true
</code>

  * **text-wrap-width** `number`

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

<code json>
"text-wrap-width": 0
</code>

=== Shield ===

  * **shield-align** `enum`

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

<code json>
"shield-align": "left"
</code>

  * **shield-date-format** `string`

Description: //Sets a format expression for date value.//

<code json>
"shield-date-format": "yyyy-mm-dd"
</code>

  * **shield-dx** `number`

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

<code json>
"shield-dx": 0
</code>

  * **shield-dy** `number`

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

<code json>
"shield-dy": 0
</code>

  * **shield-face-name** `string`

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

<code json>
"shield-face-name": "600 24px Verdana"
</code>

  * **shield-fill** `string`

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

<code json>
"shield-fill": "#000"
</code>

  * **shield-font** `string`

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

<code json>
"shield-font": "600 12px Arial"
</code>

  * **shield-halo-fill** `string`

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

<code json>
"shield-halo-fill": "#000"
</code>

  * **shield-halo-radius** `number`

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

<code json>
"shield-halo-radius": 0
</code>

  * **shield-icon-color** `string`

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

<code json>
"shield-icon-color": "#fff"
</code>

  * **shield-icon-outline-color** `string`

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

<code json>
"shield-icon-outline-color": "#fff"
</code>

  * **shield-icon-outline-width** `number`

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

<code json>
"shield-icon-outline-width": 3
</code>

  * **shield-icon-size** `number`

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

<code json>
"shield-icon-size": 24
</code>

  * **shield-icon-src** `string`

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

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

  * **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`

<code json>
"shield-icon-symbol-type": "circle"
</code>

  * **shield-icon-type** `enum`

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

<code json>
"shield-icon-type": "symbol"
</code>

  * **shield-name** `string`

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

<code json>
"shield-name": "name"
</code>

  * **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`

<code json>
"shield-min-distance": 3
</code>

  * **shield-min-padding** `number`

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

<code json>
"shield-min-padding": 3
</code>

  * **shield-numeric-format** `string`

Description: //Sets a numeric format expression for number value.//

<code json>
"shield-numeric-format": "en-US, style: currency, currency: USD"
</code>

  * **shield-opacity** `number`

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

<code json>
"shield-opacity": 1
</code>

  * **shield-orientation** `number`

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

<code json>
"shield-orientation": 1
</code>

  * **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`

<code json>
"shield-placement-type": "detect"
</code>

  * **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`

<code json>
"shield-placements": "U"
</code>

  * **shield-rotate-angle** `number`

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

<code json>
"shield-rotate-angle": 2
</code>

  * **shield-spacing** `number`

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

<code json>
"shield-spacing": 3
</code>

  * **shield-text-format** `string`

Description: //Sets a format expression for text value.//

<code json>
"shield-text-format": "{0} test"
</code>

  * **shield-wrap-width** `number`

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

<code json>
"shield-wrap-width": 0
</code>

  * **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`

<code json>
"shield-wrap-before": 0
</code>

==== Sources ====

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

//Required// `string`

A map rendered data source's unique identifier.

=== url ===

//Required// `string`

The address of the data requested from the server.

=== type ===

//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 ====

<code json>
"layers": [
{
"id": "layer1",
"source": "source1",
"styles": [
"style1"
]
}
]
</code>

=== id ===

//Required// `string`

A layer's unique identifier.

=== source ===

//Required// `string`

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

=== styles ===

//Required// `array`

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

Site Tools

Page Tools
