Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update User Guide - Visual Style Editor #10028

Merged
merged 12 commits into from
Mar 18, 2024
Binary file added docs/user-guide/img/button/configute_lite_button.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/3dtiles_style.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/bring-to-front.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/classify_icon_style_panel.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/classify_mark_ex.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/classify_mark_panel.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/ex_3dtiles_style.mp4
Binary file not shown.
Binary file modified docs/user-guide/img/layer-settings/ex_fill_style.mp4
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/ex_text_style.mp4
Binary file not shown.
Binary file modified docs/user-guide/img/layer-settings/filter_3dtiles_style.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/height-reference.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/icon_panel.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/leader-line.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/line_panel.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/mark_panel.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user-guide/img/layer-settings/mark_style_ex.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file modified docs/user-guide/img/layer-settings/text_panel.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
32 changes: 30 additions & 2 deletions docs/user-guide/layer-settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ The line rule is used to style linear features of the layer: clicking on the <im

The editor can change the `Stroke color`, the `Stroke width`, the `Line style` (*continuous*, *dashed*, etc), the `Line cap` (*Butt*, *Round*, *Square*) and the `Line join` (*Bevel*, *Round*, *Miter*). An example can be the following one:

<video class="ms-docimage" controls><source src="../img/layer-settings/ex_line_style.mp4"></video>
<img src="../img/layer-settings/ex_line_style.jpg" class="ms-docimage" style="max-width:500px;">

#### Fill

Expand Down Expand Up @@ -321,6 +321,18 @@ It this case the editor is allowed to choose a `Color ramp` and the order (with

<img src="../img/layer-settings/classification_style_ex.jpg" class="ms-docimage">

!!!note
The *Classification style* method is also available for **WFS** and **Vector** layers.
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

!!!note

From the *Classification style* options, it is possible to activate the **Thematic Layer** option thought the <img src="../img/button/configute_lite_button.jpg" class="ms-docbutton"/> button.
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved
<img src="../img/layer-settings/configure_popup.jpg" class="ms-docimage" style="max-width:400px;">
tdipisa marked this conversation as resolved.
Show resolved Hide resolved

Here the user can add custom parameters that will be visible in the *Visual Style Editor*, above the *Color Palette* option. The *Thematic Layer* property provides an array of fields where each one represents a select input, once a user selects one of this input the associated view parameter is included in the classify.json request to the SLD service. An example can be the following one:
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

<video class="ms-docimage" controls><source src="../img/layer-settings/thematic-layer.mp4"></video>

#### Pattern mark style

With the *Pattern mark style* it is possible to represent *Line* or *Fill* style rules with a mark by clicking on the <img src="../img/button/options_button.jpg" class="ms-docbutton"/> button and choosing the **Pattern mark style** options from the dropdown menu.
Expand All @@ -341,6 +353,22 @@ The style editor can configure the *Icon* as explained [here](#icon) along with

<img src="../img/layer-settings/classify_icon_ex.jpg" class="ms-docimage">

#### Style with properties
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

[MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) allows to choose a property of a layer's feature as the value for a symbolizer option. The *Style with properties* function is available for *Marker*, *Icon*, *Line*, *Fill*, *Text* and *3D model* by clicking on the <img src="../img/button/options_button.jpg" class="ms-docbutton"/> button of each symbolizer option supported by this function and choosing **Property value** option from the dropdown menu.
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

<img src="../img/layer-settings/properties_style.jpg" class="ms-docimage" style="max-width:500px;">

By default, **Constant value** is selected. If the user chooses **Property value**, a drop-down menu appears so that the desired layer attribute can be selected to use the necessary values from the styling property.
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

<video class="ms-docimage" controls><source src="../img/layer-settings/property-value-example.mp4"></video>

!!!warning
As a *Property value* only attributes of type `string` or `number` are currently supported.

!!!note
The *Style with properties* method is also available for **WFS** and **Vector** layers.
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

### Styling on the 3D navigation

Thanks to the new improvements made to the *Visual Style Editor* editor, when [3D Navigation](navigation-toolbar.md#3d-navigation) is enabled, the editor has the ability to customize the style of **3D Tiles** and **vector layers**.
Expand Down Expand Up @@ -389,7 +417,7 @@ From the *Visual Style Editor*, by clicking on <img src="../img/button/3D-model-

Furthermore, for **WFS layers**, [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) adds some additional styling options in the *Visual Style Editor* such as:

* **Bring to front** (available for Icon, Mark and 3D model symbolizers) to bring in front and so to make visible (if set to *true*) all features covered by 3D Tile layers and the Terrain layer (for this last case when the *depth test against terrain* option is enabled in Global Settings).
* **Bring to front** (available for Icon, Mark and 3D model symbolizers) to bring in front and so to make visible (if enable) all features covered by 3D Tile layers and the Terrain layer (for this last case when the *depth test against terrain* option is enabled in Global Settings).
ElenaGallo marked this conversation as resolved.
Show resolved Hide resolved

<img src="../img/layer-settings/bring-to-front.jpg" class="ms-docimage">

Expand Down
Loading