7.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.
You can get some inspiration, as well as ready-to-go style files and projects in our Style Gallery.
Watch on youtube.
7.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.
7.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.
Pic. 7.125. Creating default QGIS style
If you want to add a customized style, press Create resource button and select “QGIS vector style” (see Pic. 7.126.).
Pic. 7.126. 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.
7.8.2.1. QGIS style from file
To upload a pre-made style click Select a style on the “QGIS style” tab or drag a file to this field (see in Pic. 7.127.).
Pic. 7.127. Uploading QML file
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 the QML file is uploaded click Create. After the style is created, its resource page opens (see Pic. 7.128.).
Pic. 7.128. QGIS style resource page
You can replace the QML file of a style.
7.8.2.2. SVG markers
There are several ways to add custom markers to a style for NextGIS Web:
Embed marker file into QGIS style.
Watch on youtube.
Publish the image file online and use its URL as the path to SVG marker.
Watch on youtube.
Add SVG marker library to your Web GIS.
To create a style using SVG markers from a library resource, you need to specify the SVG marker type in the layer properties in QGIS and enter the full path to the file on the local machine (Pic. 7.130.). The file name must match the one loaded in the SVG Marker Library resource that the user selects when loading the QML file.
Pic. 7.129. Save QML file in NextGIS QGIS
Pic. 7.130. Layer properties settings in NextGIS QGIS
7.8.2.3. SVG Marker Library
In Web GIS you can create SVG marker libraries to be displayed using QGIS styles of vector layers. Press Create resource button and select SVG marker library (see Pic. 7.131.).
Pic. 7.131. Selecting SVG marker library resource type
In the opened window, enter the name of the resource (see Pic. 7.132.).
Pic. 7.132. SVG marker library name
Add description and metadata on the corresponding tabs if you need them. Metadata is used in external apps working with API.
In the SVG marker library tab you need to upload SVG markers from your device. You can upload markers as individual files or as a zip-archive. The archive must contain only markers.
Pic. 7.133. Uploading SVG markers
After all icons have been uploaded to the library, you will see the list of the file names. Click Create to complete the process.
Pic. 7.134. List of SVG markers uploaded to the library
Then create a style with the QML file and select the SVG library resource.
Pic. 7.135. QGIS style using SVG marker library
SVG markers can also be embedded in a QGIS style. That way you wouldn’t need to create a separate library resource.
7.8.2.4. 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: square, circle, triangle, star, cross;
Marker size and stroke width. Enter a number or use the 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);
The style of the line / polygon outline: solid, dotted, dashed, dash-dotted.
Pic. 7.136. Custom QGIS style for points
Pic. 7.137. Custom QGIS style for lines
Pic. 7.138. 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.
See how it works in our video:
Watch on youtube.
7.8.3. Editing QGIS style
To edit a style click on the pencil icon by the style’s name in the layer tree.
Pic. 7.139. 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)
Pic. 7.140. Editing vector style marker
7.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. 7.141.).
Pic. 7.141. 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.
Pic. 7.142. 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. 7.143.). Otherwise default values are used.
Pic. 7.143. “MapServer style” tab
Click Create to finish the process. The window of the created MapServer style will open (see in Pic. 7.144.).
Pic. 7.144. MapServer style window
7.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. 7.147.):
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.
Pic. 7.147. Tile cache settings
7.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. 7.148.).
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”
Pic. 7.148. 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. 7.149. Layer with special SVG markers in the QGIS style on a Web Map
7.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.
7.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
7.8.7.2. Markers
Pic. 7.150. 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
7.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
Pic. 7.151. <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.
7.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
7.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.