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 v2.0 ======


<div msgbox>
The ThinkGeo StyleJSON Schema illustrated "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 (CSS) for styling web-pages. It defines the visual appearance of a map - what data should be drawn, he order to draw it in, 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>

The intended audience of this specification includes:
  * [[v2#install_world_streets_styles|How to install the ThinkGeo "World Street Styles"]]
  * [[v2#stylejson_schema|"StyleJson" schema]]
===== 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/4.0.0/light.json"></script>

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

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

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

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

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

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

==== NPM ====

Install the package:

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



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



==== Root Properties====


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|{{worldstreets_v2.png|StyleJSON Map}}]]

  * **styleJson object**<div>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": [...],
"map-layers": [...]
}
</code>
</div>
  * **version**<div>//Required// `float`

JSON Map CSS specification version number.
</div>
  * **owner**<div>//Optional// `string`

This JSON Map CSS belongs to someone, company or organization.
</div>

  * **time**<div>//Optional// `string`

This JSON Map CSS when to be created.
</div>

  * **background**<div>Set the map's background color.
</div>

  * **variables**<div>//Optional// `object`

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>

</div>
  * **styles**<div>//Required// `array`

Define all map rendered styles. They include point, line, polygon, text etc.
</div>

  * **sources**<div>//Optional// `array`

Define all map data sources,
</div>

  * **map-layers**<div>//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.
</div>


==== Styles ====
<code json>
  "styles": [
    {
      "id": "style1",
      "filter": "layerName='layer1'",
      "z-index-atrribute-name": "columnName"
      "styles": [...]
    }
  ]
</code>

    * **id**<div>//Required// `string`

A map rendered style's unique identifier.
</div>
    * **filter**<div>//Optional// `string`

Select some data which is need to render map.</div>

    * **z-index-atrribute-name**<div>//Optional// `string`

Map data would be sorted by this column's value.</div>

    * **styles**<div>//Require// `array`

Some specific map rendered styles.

<code json>
      "styles": [
        {
          "filter": "zoom>=0;zoom<=19;highway='motorway'",
          "line-color": "#000",
          "styles": [
            {
              "filter": "type='monorail,subway'",
              "line-width": 2
            },
            {
              "filter": "type!='monorail,subway'",
              "line-width": 1
            }
          ]
        }
       ]
</code>
</div>
=== Point ===

  * **point-allow-overlapping** `boolean`<div>

//Allows overlap with other text or icons.//
Default Value: `flase`

<code json>
"point-allow-overlapping": false
</code>
</div>
  * **point-fill-color** `string`<div>

//A defined fill color of symbol or glyph.//

<code json>
"point-fill": "#fff"
</code>
</div>
  * **point-glyph-content** `string`<div>

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

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

</div>
  * **point-glyph-font-name** `string`<div>

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

<code json>
"point-glyph-font-name": "vectormap-icons"
</code>
</div>


  * **point-mask-color** `string`<div>

//Sets the color of mask fill.//

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

</div>
 
  * **point-mask-margin** `string`<div>

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

<code json>
"point-mask-margin": "1,1,1,1"
</code>
</div>
 
  * **point-mask-outline-color** `string`<div>

//Sets the color of mask outline.//

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

  * **point-mask-outline-width** `number`<div>

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

<code json>
"point-mask-outline-width": 3
</code>
</div>
  * **point-mask-type** `enum`<div>

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

<code json>
"point-mask-type": "circle"
</code>
</div>
  * **point-offset-x** `number`<div>

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

<code json>
"point-offset-x": 3
</code>
</div>
  * **point-offset-y** `number`<div>

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

<code json>
"point-offset-y": 3
</code>
</div>

  * **point-opacity** `number`<div>

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

  * **point-outline-color** `string`<div>

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

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

  * **point-outline-width** `number`<div>

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

<code json>
"point-outline-width": 1
</code>
</div>
  * **point-rotation-angle** `number`<div>

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

<code json>
"point-rotation-angle": 90
</code>
</div>
  * **point-size** `number`<div>

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

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


  * **point-symbol-type** `enum`<div>

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


  * **point-type** `enum`<div>

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

=== Line ===

  * **line-cap** `enum`<div>

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

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

</div>
  * **line-color** `string`<div>

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

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

</div>
  * **line-dasharray** `string`<div>

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


</div>
  * **line-direction-image-size** `string`<div>

//the size of line direction image.//

<code json>
"line-direction-image-size": "10,5"
</code>

</div>
  * **line-direction-image-uri** `string`<div>

//Which kind of iamge are used to display line direction.//

<code json>
"line-direction-image-uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAYAAAC9vt6cAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABiSURBVChTpZKBCsAgCETPfqkPnPvA/CW3RoW1BcoeHCZ0R0rwUkrRW0drB6lVL7yGJFWFR4YphL6etYFb7XDO+awBU3wQju7gxf8RlgVtERF78THXQyIieGQY5kr4H1gzAFwo70RBYPf8BQAAAABJRU5ErkJggg=="
</code>

</div>
  * **line-geometry-transform** `string`<div>

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

</div>
  * **line-join** `enum`<div>

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

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

</div>
  * **line-miterlimit** `number`<div>

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

</div>

  * **line-offset-x** `number`<div>

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

<code json>
"line-offset-x": 3
</code>

</div>
  * **line-offset-y** `number`<div>

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

<code json>
"line-offset-y": 3
</code>

</div>

  * **line-opacity** `number`<div>

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

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


</div>
  * **line-width** `number`<div>

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

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

</div>
=== Polygon ===

  * **polygon-fill-color** `string`<div>

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

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

</div>

  * **polygon-geometry-transform** `string`<div>

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

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

</div>
  * **polygon-offset-x** `number`<div>

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

<code json>
"polygon-offset-x": 3
</code>

</div>
  * **polygon-offset-y** `number`<div>

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

<code json>
"polygon-offset-y": 3
</code>


</div>
  * **polygon-opacity** `number`<div>

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

</div>
  * **polygon-shadow** `object`<div>

//The style of the drawn polygon's shadow.//

<code json>
"polygon-shadow": {
            "polygon-fill-color": "#90BBF5",
            "polygon-offset-x": -1.5,
            "polygon-offset-y": 1.5
          }
</code>

</div>
=== Text ===

  * **text-align** `enum`<div>

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

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

</div>
  * **text-allow-overlapping** `boolean`<div>

//Allows overlap with other text or icons.//
Default Value: `flase`

<code json>
"text-allow-overlapping": false
</code>

</div>
  * **text-baseline** `enum`<div>

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

</div>
  * **text-base-point-style** `object`<div>

//a point style to display the base point.//

<code json>
"text-baseline": {
        "point-type": "glyph",
        "point-glyph-font-name": "vectormap-icons",
        "point-outline-color": "@text_white_halo_color",
        "point-outline-width": 1.5,
        "point-glyph-content": "\ue0c0",
        "point-fill-color": "@poi_color",
        "point-size": 14,
        "point-offset-y": -6
      }
</code>
</div>
  * **text-content** `string`<div>

//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: {name_en}.//

<code json>
"text-content": "{name}"
</code>

</div>
  * **text-date-format** `string`<div>

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

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

</div>
  * **text-fill-color** `string`<div>

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

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

</div>
  * **text-font** `string`<div>

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

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

</div>
  * **text-force-horizontal-for-line** `boolean`<div>

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

</div>
  * **text-halo-color** `string`<div>

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

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

</div>
  * **text-halo-radius** `number`<div>

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

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

</div>
  * **text-interval-distance** `number`<div>

//Sets the interval distancebetween text lables which along line.//

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

</div>
  * **text-letter-case** `enum`<div>

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

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

</div>
  * **text-letter-spacing** `number`<div>

//Sets the width of letter spacing.//

<code json>
"text-letter-spacing": 2
</code>

</div>
  * **text-line-spacing** `number`<div>

//Sets the width of line spacing.//

<code json>
"text-line-spacing": 2
</code>

</div>
  * **text-mask-color** `string`<div>

//Sets the color of mask fill.//

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

</div>
  * **text-mask-margin** `string`<div>

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

</div>
  * **text-mask-outline-color** `string`<div>

//Sets the color of mask outline.//

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

</div>
  * **text-mask-outline-width** `number`<div>

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

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

</div>
  * **text-mask-type** `enum`<div>

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

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

</div>
  * **text-max-char-angle-delta** `number`<div>

//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-delta": 0.5
</code>

</div>
  * **text-numeric-format** `string`<div>

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

<code json>
"text-numeric-format": "en-US, style: currency, currency: USD"
</code>
</div>
  * **text-offset-x** `number`<div>

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

<code json>
"text-offset-x": 10
</code>
</div>
  * **text-offset-y** `number`<div>

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

<code json>
"text-offset-y": 10
</code>
</div>
  * **text-opacity** `number`<div>

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

<code json>
"text-opacity": 1
</code>
</div>
  * **text-placement** `string`<div>

// you can use this property to set the avoidance algorithm for text lables.//
Default Value: `center`, 
Available Values: `upper` `right` `lower` `left` `center`

<code json>
"text-placements": "upper"
</code>
</div>
  * **text-rotate-angle** `number`<div>

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

<code json>
"text-rotate-angle": 2
</code>
</div>
  * **text-spacing** `number`<div>

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

<code json>
"text-spacing": 0
</code>
</div>
  * **text-wrap-width** `number`<div>

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

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


</div>

==== Sources ====

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

A map rendered data source's unique identifier.
</div>

  * ** url  **<div>//Required// `string`

The address of the data requested from the server.
</div>

  * ** type  **<div>//Required// `string`

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

</div>
==== map-layers ====

<code json>
  "map-layers": [
    {
      "map-layer-id": "worldstreets",
      "source":"sourceId"
      "style-drawing-order": [
        "landcover_urban",
      ]
    }
  ]
</code>

  * **map-layer-id **<div>

//Required// `string`

A layer's unique identifier.
</div>

  * **source **<div>

//Optional// `string`

A source's unique identifier which has existed of sources. Or it is passed in by JavaScript code with class ol.thinkgeo.VectorTileSource.

</div>
  * **style-drawing-order **<div>

//Required// `array`

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

</div>
User Tools

Site Tools

Page Tools
