User Tools

Site Tools


thinkgeo_stylejson

ThinkGeo StyleJSON Schema

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.

StyleJSON is a describable cartographic styling language in the JSON 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.

The intended audience of this specification includes:

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:

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

NPM

Install the package:

npm i worldstreets-styles

StyleJSON Schema

History Versions

Version 2.0.0

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.

StyleJSON Map

  • 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": [...],
    "map-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 `object`

    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

    Optional `array`

    Define all map data sources,

  • map-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

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

    Required `string`

    A map rendered style's unique identifier.

  • filter

    Optional `string`

    Select some data which is need to render map.

  • z-index-atrribute-name

    Optional `string`

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

  • styles

    Require `array`

    Some specific map rendered styles.

          "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
                }
              ]
            }
           ]

Point

  • point-allow-overlapping `boolean`

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

    "point-allow-overlapping": false
  • point-fill-color `string`

    A defined fill color of symbol or glyph.

    "point-fill": "#fff"
  • point-glyph-content `string`

    A defined glyph name that renders how a point appears.

    "point-glyph-content": "\ue001"
  • point-glyph-font-name `string`

    A defined glyph type that renders how a point appears.

    "point-glyph-font-name": "vectormap-icons"
  • point-mask-color `string`

    Sets the color of mask fill.

    "point-mask-color": "#000"
  • point-mask-margin `string`

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

    "point-mask-margin": "1,1,1,1"
  • point-mask-outline-color `string`

    Sets the color of mask outline.

    "point-mask-outline-color": "#000"
  • point-mask-outline-width `number`

    Sets the width of mask outline, in pixels.

    "point-mask-outline-width": 3
  • point-mask-type `enum`

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

    "point-mask-type": "circle"
  • point-offset-x `number`

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

    "point-offset-x": 3
  • point-offset-y `number`

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

    "point-offset-y": 3
  • point-opacity `number`

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

    "point-opacity": 1
  • point-outline-color `string`

    A defined outline color of symbol or glyph.

    "point-outline-color": "#000"
  • point-outline-width `number`

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

    "point-outline-width": 1
  • point-rotation-angle `number`

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

    "point-rotation-angle": 90
  • point-size `number`

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

    "point-size": 9
  • point-symbol-type `enum`

    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`

    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"

Line

  • line-cap `enum`

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

    "line-cap": "butt"
  • line-color `string`

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

    "line-color": "#000"
  • line-dasharray `string`

    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-direction-image-size `string`

    the size of line direction image.

    "line-direction-image-size": "10,5"
  • line-direction-image-uri `string`

    Which kind of iamge are used to display line direction.

    "line-direction-image-uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAYAAAC9vt6cAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABiSURBVChTpZKBCsAgCETPfqkPnPvA/CW3RoW1BcoeHCZ0R0rwUkrRW0drB6lVL7yGJFWFR4YphL6etYFb7XDO+awBU3wQju7gxf8RlgVtERF78THXQyIieGQY5kr4H1gzAFwo70RBYPf8BQAAAABJRU5ErkJggg=="
  • line-geometry-transform `string`

    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`

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

    "line-join": "miter"
  • line-miterlimit `number`

    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-offset-x `number`

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

    "line-offset-x": 3
  • line-offset-y `number`

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

    "line-offset-y": 3
  • line-opacity `number`

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

    "line-opacity": 1
  • line-width `number`

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

    "line-width": 1

Polygon

  • polygon-fill-color `string`

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

    "polygon-fill-color": "rgba(128,128,128,1)"
  • polygon-geometry-transform `string`

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

    "polygon-geometry-transform": "translate(20,30)"
  • polygon-offset-x `number`

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

    "polygon-offset-x": 3
  • polygon-offset-y `number`

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

    "polygon-offset-y": 3
  • polygon-opacity `number`

    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-shadow `object`

    The style of the drawn polygon's shadow.

    "polygon-shadow": {
                "polygon-fill-color": "#90BBF5",
                "polygon-offset-x": -1.5,
                "polygon-offset-y": 1.5
              }

Text

  • text-align `enum`

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

    "text-align": "left"
  • text-allow-overlapping `boolean`

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

    "text-allow-overlapping": false
  • text-baseline `enum`

    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-base-point-style `object`

    a point style to display the base point.

    "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
          }
  • text-content `string`

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

    "text-content": "{name}"
  • text-date-format `string`

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

    "text-date-format": "yyyy-mm-dd"
  • text-fill-color `string`

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

    "text-fill-color": "argb(255,255,0,1)"
  • text-font `string`

    Sets the current font property of the text content.

    "text-font": "600 12px Arial"
  • text-force-horizontal-for-line `boolean`

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

    "text-force-horizontal-for-line": 1
  • text-halo-color `string`

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

    "text-halo-color": "#000"
  • text-halo-radius `number`

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

    "text-halo-radius": 2
  • text-interval-distance `number`

    Sets the interval distancebetween text lables which along line.

    "text-interval-distance": 1
  • text-letter-case `enum`

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

    "text-letter-case": "uppercase"
  • text-letter-spacing `number`

    Sets the width of letter spacing.

    "text-letter-spacing": 2
  • text-line-spacing `number`

    Sets the width of line spacing.

    "text-line-spacing": 2
  • text-mask-color `string`

    Sets the color of mask fill.

    "text-mask-color": "#000"
  • text-mask-margin `string`

    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`

    Sets the color of mask outline.

    "text-mask-outline-color": "#000"
  • text-mask-outline-width `number`

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

    "text-mask-outline-width": 1
  • text-mask-type `enum`

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

    "text-mask-type": "roundedEnds"
  • text-max-char-angle-delta `number`

    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-delta": 0.5
  • text-numeric-format `string`

    Sets a numeric format expression for number value.

    "text-numeric-format": "en-US, style: currency, currency: USD"
  • text-offset-x `number`

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

    "text-offset-x": 10
  • text-offset-y `number`

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

    "text-offset-y": 10
  • text-opacity `number`

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

    "text-opacity": 1
  • text-placement `string`

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

    "text-placements": "upper"
  • text-rotate-angle `number`

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

    "text-rotate-angle": 2
  • text-spacing `number`

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

    "text-spacing": 0
  • text-wrap-width `number`

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

    "text-wrap-width": 0

Sources

  "sources": [
    {
      "id": "worldstreets_source",
      "url": "http://{ip address}/{vector tile file path}/{z}/{x}/{y}.mvt",
      "type": "MVT"
    }
  ]
  • 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.

map-layers

  "map-layers": [
    {
      "map-layer-id": "worldstreets",
      "source":"sourceId"
      "style-drawing-order": [
        "landcover_urban",
      ]
    }
  ]
  • map-layer-id

    Required `string`

    A layer's unique identifier.

  • source

    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.

  • style-drawing-order

    Required `array`

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

thinkgeo_stylejson.txt · Last modified: 2020/01/21 03:41 by johnnyz