With style options you can customize the presentation of layer styles, changing the visual display of features. As well as changing the style of these features, you can hide features entirely. This means that you can emphasize particular components of the map or make the map complement the style of the surrounding page.

The JSON Object

The layer style option is an array of objects. Each object can represent a style of expression classification. The object with no expression key will present the default layer style.

For example, the following JSON style declaration has 2 classifications. The first style is applied to the features that have attribute “altitude” greater than 105, the second one to all features with “altitude” less than 100.

 [{
   "expression": "altitude>105",
   "label": "Bigger than 105",
   "showlabel": false,
   "visible": false,
   "fontcolor": "0,0,0",
   "outline": "255,255,255",
   "fontsize": "12",
   "iconsoverlap": 2,
   "url": "/icons/defaulticon",
 },
 {
   "expression": "altitude<100",
   "label": "Less than 100",
   "showlabel": true,
   "visible": true,
   "iconsoverlap": 2,
   "outline": "255,255,255",
   "symbol": {
     "type": "box",
     "color": "192,0,0",
     "border": "255,255,0",
     "bw": 2,
     "size": 9
   }
}]

Point layer

  • visible <boolean> – is the layer visible or not
  • expression <string> – rule to classify features on the map. E.g. ‘expression: “latitude”>100’
  • label <string> – class name that’s visible in the layer list 
  • showlabel <boolean> – show label in the layer list

Icon 

  • url <string> – url of the icon we want to display
  • symbol <object> – we define a custom icon with the symbol option. It can have the following options:
    • type <string> [“circle”, “box”] – type of the icon
    • color <string> – a string which represents a rgb value. For example “220,0,0”
    • bordercolor <string> – a string which represents a rgb value. For example “220,0,0”
    • bw <string> – the width of the border
    • size <string> – icon size in pixels
  • clustering <boolean> – group densely points into the one point, depending of the zoom level
  • iconsoverlap <number> [1, 2, 3], defaults to 2. Option meaning: 

1 – Avoid symbol overlapping is the fastest method

2 – Optimized

3 – Show all symbols but it may affect performance.

There are a few icon types. If we want to create a custom icon then we create the symbol object. For example, if we want an icon that looks like this, then we define it like this:

 "symbol": {
   "type": "circle",
   "color": "146,208,80",
   "border": "192,0,0",
   "bw": 1,
   "size": 9
 }

 

If we want an icon from the predefined icons available at GIS Cloud, such as this one , you need to set the url of the icon along with optional parameters color and size.

"url": "https://editor.giscloud.com/rest/1/icons/transport/fuel.png?color=%235f497a&size=16"

If we want an icon that we uploaded to our GIS Cloud account or an icon from the web, we just write the url.

"url": "/{storage_hash}/tree.png" // icon uploaded to GIS Cloud
"url": "https://img.icons8.com/search" //web icon

Label

  • labelfield <string> – feature’s attribute to display
  • labelplacement <string> [“B”, “T”, “R”, “L”, “BR”, “BL”, “TL”, “TR”, “”] defines the position of the label in relation to the feature’s geometry. 
  • fontname <string>  [ “Arial”, “Arial Black”, “Comic Sans MS”, “Courier New”, “Georgia”, “Impact”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “Arial”, “Arial Black”, “Comic Sans MS”, “Courier New”, “Georgia”, “Impact”, “Lucida Console”, “Lucida Sans Unicode”, “Microsoft Sans Serif”, “MS Mincho”, “Palatino Linotype”, “Symbol”, “Tahoma”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “American Typewriter”, “Andale Mono”, “Arial”, “Arial Black”, “Arial Narrow”, “Brush Script MT”, “Capitals”, “Apple Chancery”, “Baskerville”, “Big Caslon”, “Charcoal”, “Chicago”, “Comic Sans MS”, “Copperplate”, “Courier”, “Courier New”, “Didot”, “Gadget”, “Georgia”, “Geneva”, “Gill Sans”, “Futura”, “Helvetica”, “Helvetica Neue”, “Herculanum”, “Hoefler Text”, “Impact”, “Lucida Grande”, “Marker Felt”, “Monaco”, “New York”, “Optima”, “Papyrus”, “Sand”, “Skia”, “Techno”, “Textile”, “Times”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “Zapfino”] – font of the label. Defaults to “Arial”.
  • fontsize <number> – font size of the label
  • color <string>defines the fill color of the label, rgb color value, e.g. “147,137,83”
  • outline <string>defines the outline color of the label, rgb color value, e.g. “147,137,83”
  • margin <number>defines offset between labels in pixels
  • ldx <number>left and right offset in pixels 
  • ldy <number>up and down offset in pixels 

Levels

  • fromlevel <number> – zoom level from which the geometry will be visible
  • tolevel <number> – zoom level until which the geometry will be visible

Line layer

  • visible <boolean> – is the layer visible or not
  • expression <string> – rule to classify features on the map. E.g. ‘expression: “latitude”>100’
  • label <string> – class name that’s visible in the layer list 
    • showlabel <boolean> – show label in the layer list

Feature 

  • color <string>color of the feature, rgb color value, e.g. “147,137,83”
  • bordercolor <string> border color of the feature, rgb color value, e.g. “147,137,83”
  • width <number> – line width in pixels
    • borderwidth <number> – border width in pixels
    • dashed <string> – two numbers representing pixels (dash px size, space px size). Sequence of dash/space/dash/space etc. When finished the sequence repeats itself to the end of the line. E.g. “2, 5”

Label

  • textfield <string> – feature’s attribute to display
  • fontname <string>  [ “Arial”, “Arial Black”, “Comic Sans MS”, “Courier New”, “Georgia”, “Impact”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “Arial”, “Arial Black”, “Comic Sans MS”, “Courier New”, “Georgia”, “Impact”, “Lucida Console”, “Lucida Sans Unicode”, “Microsoft Sans Serif”, “MS Mincho”, “Palatino Linotype”, “Symbol”, “Tahoma”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “American Typewriter”, “Andale Mono”, “Arial”, “Arial Black”, “Arial Narrow”, “Brush Script MT”, “Capitals”, “Apple Chancery”, “Baskerville”, “Big Caslon”, “Charcoal”, “Chicago”, “Comic Sans MS”, “Copperplate”, “Courier”, “Courier New”, “Didot”, “Gadget”, “Georgia”, “Geneva”, “Gill Sans”, “Futura”, “Helvetica”, “Helvetica Neue”, “Herculanum”, “Hoefler Text”, “Impact”, “Lucida Grande”, “Marker Felt”, “Monaco”, “New York”, “Optima”, “Papyrus”, “Sand”, “Skia”, “Techno”, “Textile”, “Times”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “Zapfino”] – font of the label. Defaults to “Arial”.
  • fontsize <number> – font size of the label
  • color <string>defines the fill color of the label, rgb color value, e.g. “147,137,83”
  • outline <string>defines the outline color of the label, rgb color value, e.g. “147,137,83”

Levels

  • fromlevel <number> – zoom level from which the geometry will be visible
  • tolevel <number> – zoom level until which the geometry will be visible

Polygon layer

Feature

  • color <string> – fill color of the feature, rgb color value, e.g. “147,137,83”
  • bordercolor <string> border color of the feature, rgb color value, e.g. “147,137,83”
  • borderwidth <number> – border width in pixels
    • dashed <string> – two numbers representing pixels (dash px size, space px size). Sequence of dash/space/dash/space etc. When finished the sequence repeats itself to the end of the line. E.g. “2, 5”
  • hatchGalleryUrl <string> – url of the hatch icon we want to display if we are taking the icon from the GIS Cloud predefined icons. Here we can define size and color e.g. 
"hatchGalleryUrl": "https://editor.giscloud.com/rest/1/icons/transport/fuel.png?color=%235f497a&size=16"
  • hatchUrl <string> – url of the hatch icon we want to display if the icon is uploaded to our GIS Cloud account or an icon from the web. E.g.
"hatchUrl": "/{storage_hash}/tree.png" // icon uploaded to GIS Cloud
"hatchUrl": "https://img.icons8.com/search" //web icon

Label

  • labelfield <string> – feature’s attribute to display
  • labelplacement <string> [“B”, “T”, “R”, “L”, “BR”, “BL”, “TL”, “TR”, “”] defines the position of the label in relation to the feature’s geometry. 
  • fontname <string>  [ “Arial”, “Arial Black”, “Comic Sans MS”, “Courier New”, “Georgia”, “Impact”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “Arial”, “Arial Black”, “Comic Sans MS”, “Courier New”, “Georgia”, “Impact”, “Lucida Console”, “Lucida Sans Unicode”, “Microsoft Sans Serif”, “MS Mincho”, “Palatino Linotype”, “Symbol”, “Tahoma”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “American Typewriter”, “Andale Mono”, “Arial”, “Arial Black”, “Arial Narrow”, “Brush Script MT”, “Capitals”, “Apple Chancery”, “Baskerville”, “Big Caslon”, “Charcoal”, “Chicago”, “Comic Sans MS”, “Copperplate”, “Courier”, “Courier New”, “Didot”, “Gadget”, “Georgia”, “Geneva”, “Gill Sans”, “Futura”, “Helvetica”, “Helvetica Neue”, “Herculanum”, “Hoefler Text”, “Impact”, “Lucida Grande”, “Marker Felt”, “Monaco”, “New York”, “Optima”, “Papyrus”, “Sand”, “Skia”, “Techno”, “Textile”, “Times”, “Times New Roman”, “Trebuchet MS”, “Verdana”, “Zapfino”] – font of the label. Defaults to “Arial”.
  • fontsize <number> – font size of the label
  • color <string>defines the fill color of the label, rgb color value, e.g. “147,137,83”
  • outline <string>defines the outline color of the label, rgb color value, e.g. “147,137,83”
  • margin <number>defines offset between labels in pixels
  • ldx <number>left and right offset in pixels 
  • ldy <number>up and down offset in pixels 

Levels

  • fromlevel <number> – zoom level from which the geometry will be visible
  • tolevel <number> – zoom level until which the geometry will be visible

Raster layer

Feature

  • format <string>  [“png”, “jpeg”] output format for the raster on the map. Defaults to jpeg.

It is possible to rescale the input pixels from the source range to the destination range. Each raster has an input range of colors. The range has values between 0 and 255 where each value represents one color. It is possible to change the range of colors in the raster by changing the values in the destination range.

  • source_range <string>source pixel range. For example “1 100”
  • destination_range <string>destination pixel range. For example “150 250”
  • nodata <number>rgb value. We don’t display pixels with this rgb value.

Levels

  • fromlevel <number> – zoom level from which the geometry will be visible
  • tolevel <number> – zoom level until which the geometry will be visible