Skip to content

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.

Example

The following example map is created with styleJson.

DFW Area drawn using StyleJson

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

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": [...]
}

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.

  • 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: (Required string)

    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.

Styles

Example:

"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 (Required 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: false

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

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

    Default 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: false

    "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 distance between text labels along a line.

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

    Sets the type of letter case.

    Default Value: default

    Available 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

    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.