Definition of Vector Styles

In vector layers, we have the option to define representation styles for the data, a way to symbolize layer data through markers, polygons, lines, circles, and images.

In the first instance, we’ll need to define the type of element that will be represented:

The options are marker, line, polygon, circle, or image. Each geometry type has its representation options. The main ones are as follows:

• Icon color: HTML color code to define the color of the interior icon in the marker.
• Line color: HTML color code to define the color of the line or outer line.
• Line thickness: numeric value starting from 0 to define the thickness of the line or outer line.
• Line opacity: decimal numeric value between 0 and 1 to define the transparency of the line or outer line (0 is fully transparent, 1 is fully opaque).
• Dashed line: to define the line or outer line of the element in a dashed manner. You must indicate the units to paint and the space units according to SVG nomenclature, separated by a space, for example: “5 5” or “5 10 2” (Information).
• Fill color: HTML color code to define the fill color of the element.
• Fill opacity: decimal numeric value between 0 and 1 to define the transparency of the element’s fill (0 is fully transparent, 1 is fully opaque).
• Drawing radius: circle radius in the circle type. The radius will be proportional to the zoom level.

Check all the options in the reference documentation.

Information

We can incorporate the value of a field into a property using the notation {field name}

Marker

To draw point elements using a pin or an image.

Pins

Specify Icon type as fa and write the icon name in the Icon property.

The geoportal accepts icon names from the following icon libraries:

• Font awesome 5 (Only free icons are available)
• Line awesome
• Material icons

You only need to indicate the icon name, not the HTML code. For example, in the case of Line awesome, you only need to indicate: las la-iconName (e.g., las la-dog)

Image

Specify Icon type as img and write the image URL in the Icon property.

Later, there are more symbology options like icon color, outer line color, line thickness, etc. It’s about choosing colors and playing with the symbology properties. These properties do not apply in the case of an image.

Line

As for the line symbology, it is much simpler than the previous one. There are only options for line color, thickness, opacity, and whether the line should be dashed.

Polygon

Exactly the same as the line style, except that in this case, there is the field for fill color, given the nature of its geometry.

Circle

Same features as the previous one, but in this case, you can also assign a radius to the circle.

Image

In the last case, the options are much simpler since it is an image, and there is no possibility to edit its symbology. Just indicate the URL of the image in the Icon option.

Rules

If you want to add another rule to symbolize other elements, click on Add another rule. Example representation defined by rules:

Here, several options appear. The first one is the order, or how the rules are hierarchically arranged.

There is also the option to compare a field from the attribute table or values of the layer data using a logical comparator, so that depending on whether a field is equal, different, etc., the layer marker is symbolized in one way or another. The rest of the options are as simple to symbolize as mentioned above.