6.8. Vector layer styles

Style is a type of NextGIS resource that describes a way to render the geodata. Styles are necessary to display geodata on a Web Map.

Style is related to a single layer so there is no item “Style” in the main resources list. To create a style you need to open layer properties of the layer you want create style for.

6.8.1. Formats

By now NextGIS Web supports two rendering libraries: “QGIS” and “Mapserver” .

QGIS style can be uploaded from a QML file or created in Web GIS, it has much more settings.
You can write Mapserver style yourself as a text.

6.8.2. QGIS Style

Open the properties page of the layer you want create style for. To create a default QGIS style, just press the blue button on the resource page of the layer.

../../_images/default_style_select_en1.png

Pic. 6.132. Creating default QGIS style

If you want to add a customized style, press Create resource button and select “QGIS vector style” (see Pic. 6.133.).

../../_images/ngweb_create_QGIS_style_en.png

Pic. 6.133. Selecting QGIS style resourse

After the selection of “QGIS vector style” create resource dialog will open.

You can upload a file or create a simple vector style in the dialog.

6.8.2.1. QGIS style from file

To upload a pre-made style click “Select a style” or drag a file to this field (see in Pic. 6.134.).

If you need to use specially-made markers, you can select the SVG marker library resource, which contains the icon to be displayed on the Web Map.

../../_images/upload_svg_qgis_style_en_2.png

Pic. 6.134. Upload QML file

Warning

QML file to upload should be created in NextGIS QGIS and saved on the PC (Pic. 6.135.). To create a style using SVG markers, you need to specify the SVG marker type in the layer properties and write the full path to the file on the local machine (Pic. 6.136.). The file name must match the one loaded in the SVG Marker Library resource that the user selects when loading the QML file.

../../_images/save_svg_qgis_style_en1.png

Pic. 6.135. Save QML file in NextGIS QGIS

Pic. 6.136. Layer properties settings in NextGIS QGIS

You can type a custom display name for the new style in the Resource tab. You can also add resource description and metadata on the corresponding tabs. Tile cache settings are described in details in this section.

After QML file is uploaded click Create. Then the window of QGIS style will open and will look like Pic. 6.137.. You can see here a TMS link to connect data to external applications.

Pic. 6.137. QGIS style window

6.8.2.2. Custom QGIS style

If you want to create a simple custom style, select “User-defined style” in the drop-down menu. You can set up:

Marker shape
Marker size and stroke width
Fill color and stroke color and their opacity (by using sliders and eyedropper or entering values in HEX, HSB or RGB format)

Pic. 6.138. Custom QGIS style for points

../../_images/QGIS_style_custom_line_en.png

Pic. 6.139. Custom QGIS style for lines

../../_images/QGIS_style_custom_polygon_en.png

Pic. 6.140. Custom QGIS style for polygons

You can type a custom display name for the new style in the Resource tab. You can also add resource description and metadata on the corresponding tabs.

When all the parameters are set, click Create. Then the window of QGIS style will open.

Styles created this way can be edited directly in NextGIS Web.

6.8.3. Editing QGIS style

To edit a style click on the pencil icon by the style’s name in the layer tree.

../../_images/QGIS_style_select_edit_en.png

Pic. 6.141. Opening the Update resource dialog

In the opened window you can replace the style by uploading a new file from your device. To do so, in the “QGIS style” tab select “Style from file” in the dropdown menu, then add a new QML file and click Save.

A simple QGIS vector style, the default style, for example, can be edited directly in NextGIS Web.

To do so, in the “QGIS style” tab select “User-defined style” in the dropdown menu. You can modify:

Marker shape
Marker size and stroke width (type it or use arrows in the field)
Fill color and stroke color and their opacity (by using sliders and eyedropper or entering values in HEX, HSB or RGB format)

../../_images/QGIS_style_custom_edit_en.png

Pic. 6.142. Editing vector style marker

6.8.4. Mapserver style

To create MapServer style open layer properties of the layer you want create style for. Press Create resource button and select “MapServer style” (see in Pic. 6.143.).

../../_images/ngweb_create_mapserver_style_en.png

Pic. 6.143. Selecting MapServer style

You can type a custom display name for the new style in the Resource tab. You can also add resource description and metadata on the corresponding tabs.

../../_images/mapserver_style_custom_name_en.png

Pic. 6.144. Custom name for MapServer style

Tile cache settings are described in details in this section.

In the “MapServer style” tab you can write a style manually (see in Pic. 6.145.). Otherwise default values are used.

../../_images/ngweb_create_resource_mapsrev_eng.png

Pic. 6.145. “MapServer style” tab

Click Create to finish the process. The window of the created MapServer style will open (see in Pic. 6.146.).

Pic. 6.146. Mapserver style window

6.8.4.1. Map styles examples

6.8.5. Tile cache

Caching provides faster rendering of Web Map layers. The tile cache settings tab while creating styles consists of the following settings (см. Pic. 6.149.):

Enabled checkbox;
Allow using tiles in non-tile requests checkbox - the requested image (not a tile) will be prepared from previously cached tiles (if available);
Input field Maximum zoom level - a threshold value, above which the cache is not accessed and the image is formed “on the fly”;
Input field TTL, sec (Time to live) - a time of storage of tiles on the server in seconds, after which the image will be formed again on the next request. TTL = 0 means that the storage time is unlimited;
Flush checkbox - write only - clears the tile cache when saving the style.

../../_images/tile_cache_settings_eng.png

Pic. 6.149. Tile cache settings

6.8.6. Adding a style on the map

To edit a Web Map click pencil icon near it or click the Web Map and in actions pane “Action” select “Update”. In “Update resource” layer select Layers tab (see in Pic. 6.150.).

Here you can do the following actions:

Add layer
Add group
Remove layer or group
Modify the order of the layers on the map

Click “Add layer” and in opened window select the QGIS style of the layer, then click “OK”. After that click “Save”

../../_images/admin_webmap_add_layers_en_2.png

Pic. 6.150. Adding style on the map

In the “Web Map” actions pane of the Web Map properties window select “Display”. The map will open, layers tree will be on the left. To hide/display a layer place a tick near the layer .

Pic. 6.151. Layer with special SVG markers in the QGIS style on a Web Map

6.8.7. Map style tags

To change a style or to create a new one it is recommended you take a code of some existing style and then modify it, so there is no need to start creating a style from scratch.

6.8.7.1. Common tags

<color red=”255” green=”170” blue=”127”/> - the color of a fill or a line
<outlinecolor red=”106” green=”106” blue=”106”/> - outline color
<width>0.5</width> - a width of a line or an outline of the polygon.
<outlinewidth>3</outlinewidth> - outline width
<minscaledenom>1</minscaledenom> - do not display a feature if the map scale is larger than value
<maxscaledenom>100000</maxscaledenom> - do not display a feature is the map scale is less than value

6.8.7.2. Markers

Pic. 6.152. A demo for different hatches.

<symbol>std:circle</symbol> - marker type
std:rectangle - rectangle
std:circle - circle
std:diamond - diamong
std:triangle - triangle with peak at the top
std:triangle-equilateral - triangle with peak at the bottom
std:star - five-pointed star
std:pentagon - pentagon
std:arrow - arrow (by default is top oriented. Rotation could be set using a tag <angle>45</angle>)
std:cross - +
std:xcross - x
std:line - short line
std:hatch - long line texture

These markers could be used to draw a line, to fill a polygon or to display points. Also they may be combined to a complex symbol:

       <class>
           <expression>"industrial"</expression>
           <!-- Industrial areas -->
           <style> <!-- hatch with a right slope -->
               <color red="255" green="50" blue="50"/>
               <width>1.4</width>
               <symbol>std:hatch</symbol>
               <gap>10</gap>
               <size>5</size>
               <angle>45</angle>
           </style>
           <style> <!-- hatch with a left slope-->
               <color red="255" green="50" blue="50"/>
               <width>1.4</width>
               <symbol>std:hatch</symbol>
               <gap>10</gap>
               <size>5</size>
               <angle>-45</angle>
           </style>
           <style> <!-- Outline -->
               <outlinecolor red="255" green="50" blue="50"/>
               <width>0.5</width>
           </style>
</class>

<size>2</size> - marker size in pixels

6.8.7.3. Line features

<gap>10</gap> - a step size for dashed line (used with <symbol>std:circle</symbol>)
<width>8</width> - width of line in pixels
<classitem>PLACE</classitem> - filter by attribute PLACE. Also see example in #Filtering. The following operators are supported:
- attribute name
- !=
- >=
- <=
- <
- >
- =* - case insensitive string comparison.
- =
- lt - less than
- gt - greater than
- ge - greater or equal
- le - less or equal
- eq - equal
- ne - not equal
- and - AND
- && - AND
- or - OR
- || - OR
<linejoin>round</linejoin> - line draw at corners
<linecap>round</linecap> - line draw at the beginning and at the end

../../_images/admin_mapstyles_linecap.png

Pic. 6.153. <linecap>butt</linecap> / <linecap>round</linecap> / <linecap>square</linecap>

<pattern>2.5 4.5</pattern> - dash template

<angle> - marker rotation angle. Hatch could also be rotated.

6.8.7.4. Labels

<labelitem>a_hsnmbr</labelitem> - attribute name for labelling.
<minscaledenom>100</minscaledenom> - do not show a label if a scale is larger than 1:1000
<maxscaledenom>100000</maxscaledenom> - do not show a label if a scale is smaller than1:100000
LABELCACHE [on|off] - specifies whether labels should be drawn as the features for this layer are drawn, or whether they should be cached and drawn after all layers have been drawn. Default is on. Label overlap removal, auto placement etc… are only available when the label cache is active.
<position>ur</position> - label offset direction.
- ur - ↗ up and right (recommended).
- ul - ↖
- uc - ↑
- cl - ←
- cc - centered
- cr - →
- ll - ↙
- lc - ↓
- lr - ↘
- auto

6.8.7.5. Some other useful tags

MAXGEOWIDTH - Maximum width, in the map’s geographic units, at which this LAYER is drawn. If MAXSCALEDENOM is also specified then MAXSCALEDENOM will be used instead.
MINGEOWIDTH - Minimum width, in the map’s geographic units, at which this LAYER is drawn. If MINSCALEDENOM is also specified then MINSCALEDENOM will be used instead.
OFFSITE - Sets the color index to treat as transparent for raster layers.
OPACITY [integer|alpha] - opacity of the layer
SIZEUNITS [feet|inches|kilometers|meters|miles|nauticalmiles|pixels] - Sets the unit of CLASS object SIZE values (default is pixels). Useful for simulating buffering.
SYMBOLSCALEDENOM [double] - The scale at which symbols and/or text appear full size. This allows for dynamic scaling of objects based on the scale of the map. If not set then this layer will always appear at the same size. Scaling only takes place within the limits of MINSIZE and MAXSIZE as described above. Scale is given as the denominator of the actual scale fraction, for example for a map at a scale of 1:24,000 use 24000.
TYPE [chart|circle|line|point|polygon|raster|query] - Specifies how the data should be drawn. Need not be the same as the feature geometry type. For example polygons or polylines may be drawn as a point layer.

See MapServer templates here.