Table of Contents

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 1.0.0

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

Styles

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

Point

Line

Polygon

Text

Sources

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

map-layers

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