Update User Guide - Options Bar (conflict-free) (#8618) (#8619)

* 8174_update

* image-text-for-options-bar

* review_8174

Author: ElenaGallo

docs/user-guide/background.md

@@ -1,4 +1,5 @@
 # Background Selector
+
 *********************
 
 The background selector, located in the bottom left corner of the *Viewer*, allows the user to add, manage and remove map backgrounds.
@@ -22,7 +23,7 @@ A new background can be added through the <img src="../img/button/+++.jpg" class
 <img src="../img/background/bck-catalog.jpg" class="ms-docimage" style="max-width:500px;"/>
 
 !!! warning
-    *Default Backgrounds* service is available only accessing the [Catalog](catalog.md#catalog-services) from the background selector, but if you add a new Remote Service from there, it will be available also accessing [Catalog](catalog.md#catalog-services) from [Buger Menu](menu-bar.md#burger-menu) or from [TOC](toc.md#table-of-contents). *Default Backgrounds* represent a list of backgrounds that can be configured from MapStore's configuration files (more information about that can be found in Developer Guide's [Map Configuration](../developer-guide/maps-configuration.md#map-configuration) section).
+    *Default Backgrounds* service is available only accessing the [Catalog](catalog.md) from the background selector, but if you add a new Remote Service from there, it will be available also accessing [Catalog](catalog.md) from the [Side Toolbar](mapstore-toolbars.md#side-toolbar) or from [TOC](toc.md). *Default Backgrounds* represent a list of backgrounds that can be configured from MapStore's configuration files (more information about that can be found in Developer Guide's [Map Configuration](../developer-guide/maps-configuration.md) section).
 
 From the [Catalog](catalog.md#catalog-services) the user can choose the layers to add to the list of backgrounds:
 
@@ -51,7 +52,7 @@ Once the options are chosen, with the <img src="../img/button/add_group_confirm_
 
 ### Add WMTS background
 
-In case of a WMTS layer added as a background layer, the **Add New Background window** is a bit different: 
+In case of a WMTS layer added as a background layer, the **Add New Background window** is a bit different:
 
 <img src="../img/background/add_wmts_background.jpg" class="ms-docimage" style="max-width:500px;"/>
 
@@ -65,7 +66,6 @@ The user can perform the following operations:
 
 <img src="../img/background/wmts-attribution.gif" class="ms-docimage" />
 
-
 ## Edit background
 
 It is possible to edit backgrounds by clicking on settings icon on top of each background card:

docs/user-guide/catalog.md

@@ -3,7 +3,7 @@
 The Catalog Service for the Web (CSW) is an [OGC Standard](https://www.ogc.org/standards) used to publish and search geospatial data and related metadata on the internet. It describes geospatial services such as Web Map Service (WMS) and Web Map Tile Service (WMTS).
 
 In [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) the Catalog offers the possibility to access WMS, WFS, CSW, WMTS and TMS Remote Services and to add the related layers to the map. By default, as soon as a user opens the Catalog, a CSW a WMS and a WMTS Demo Services are available, allowing to import layers from the GeoSolutions GeoServer.
-The user can access the Catalog with a click on the <img src="../img/button/catalog-option.jpg" class="ms-docbutton" style="max-height:25px;" /> option present in [Burger Menu](menu-bar.md#burger-menu) <img src="../img/button/burger.jpg" class="ms-docbutton" />. As soon as you open it, the first display is like the following:
+The user can access the Catalog with a click on the <img src="../img/button/catalog2.jpg" class="ms-docbutton" style="max-height:25px;" /> button from the [Side Toolbar](mapstore-toolbars.md#side-toolbar). As soon as you open it, the first display is like the following:
 
 <img src="../img/catalog/catalog_panel.jpg" class="ms-docimage"  style="max-width:500px;" />
 
@@ -43,7 +43,7 @@ From here the user is allowed to set the Service options, that can be divided in
 
 * **Advanced Settings**
 
-Once the options are properly set, it is possible to <img src="../img/button/save_service.jpg" class="ms-docbutton"/> the Service. If the user wants to discard the edits, instead, there's the <img src="../img/button/cancel_service.jpg" class="ms-docbutton"/> button. 
+Once the options are properly set, it is possible to <img src="../img/button/save_service.jpg" class="ms-docbutton"/> the Service. If the user wants to discard the edits, instead, there's the <img src="../img/button/cancel_service.jpg" class="ms-docbutton"/> button.
 An existing Service can finally be removed from the Services list through the <img src="../img/button/delete_service.jpg" class="ms-docbutton"/> button (this option is not available creating a new Remote Service).
 
 ### General settings
@@ -68,7 +68,7 @@ The Advances settings section opens by clicking on the <img src="../img/button/e
 
 The content of Advanced settings depends on the catalog type, but some options are common to all the services types:
 
-* *Search on service selection* that allow to enable/disable the automatic loading of the catalog records when the user opens that Service 
+* *Search on service selection* that allow to enable/disable the automatic loading of the catalog records when the user opens that Service
 
 * *Show preview* that can show/hide layers thumbnails in Catalog
 
@@ -104,7 +104,7 @@ In order to better understand this function, let's make an example supposing to
 
 * Change the *Format* of the image that will be rendered on the map (`png`, `png8`, `jpeg`, `vnd.jpeg-png`,`vnd.jpeg-png8` or `gif`) for layers belonging to the selected source
 
-* *Show metadata template* can be enabled when the user wants to insert in the layer description a text with metadata information 
+* *Show metadata template* can be enabled when the user wants to insert in the layer description a text with metadata information
 
 Enabling the *Show metadata template* option appears a text editor through witch it is possible to insert the custom metadata information for that service. In order to dynamically parse each layer's metadata value the user can insert the desired properties name with the format `${property_name}`:
 
@@ -199,22 +199,22 @@ In addition to the standard options, only for WMS catalog sources, through the *
 
 * *Localized styles* (only for the WMS service) if enabled allows to include the MapStore's locale in each **GetMap**, **GetLegendGraphic** and **GetFeatureInfo** requests to the server so that the WMS server, if properly configured, can use that locale to:
 
-    - Use localized lables for Tiles in case of vector layers (the layer's style must be properly configured for this using the [ENV variable support](https://docs.geoserver.org/stable/en/user/styling/sld/extensions/substitution.html))
+  * Use localized lables for Tiles in case of vector layers (the layer's style must be properly configured for this using the [ENV variable support](https://docs.geoserver.org/stable/en/user/styling/sld/extensions/substitution.html))
 
-    - Produce a localized layer legend in case of vector layers (the layer's style must be properly configured to use the [Localized tag for rule titles](https://docs.geoserver.org/stable/en/user/styling/sld/language.html))
+  * Produce a localized layer legend in case of vector layers (the layer's style must be properly configured to use the [Localized tag for rule titles](https://docs.geoserver.org/stable/en/user/styling/sld/language.html))
 
-    - Produce a localized output for GetFeatureInfo requests (the freemarker template need to be properly configured to retrieve [the locale from the request](https://docs.geoserver.org/stable/en/user/tutorials/freemarker.html))
+  * Produce a localized output for GetFeatureInfo requests (the freemarker template need to be properly configured to retrieve [the locale from the request](https://docs.geoserver.org/stable/en/user/tutorials/freemarker.html))
 
 * *Set Visibility Limit*: available only for WMS layers coming from CSW or WMS catalog sources type. If checked and scale limits present in the WMS Capabilities (eg. MinScaleDenominator and/or MaxScaleDenominator), these will be automatically applied to the layer settings when a layer is added to the map from this source
 
-* *Allow not secure layers*: if enabled allows the unsecure catalog URLs to be used (http only). Adding layers from WMS sources with this option active will also force the layer to use the proxy for all the requests, skipping the mixed content limitation of the browser. 
+* *Allow not secure layers*: if enabled allows the unsecure catalog URLs to be used (http only). Adding layers from WMS sources with this option active will also force the layer to use the proxy for all the requests, skipping the mixed content limitation of the browser.
 
 Enabling that option, all layers added to the map from this catalog source will be localized as described above (it is possible to tune again that setting for each single layer by opening the [Layer Settings](layer-settings.md#display) in TOC).
 
 * *Format*: the default image format for layers added to the map (`png`, `png8`, `jpeg`, `vnd.jpeg-png`, `vnd.jpeg-png8` or `gif`). The format configured through this option will be automatically used for all layers loaded from the involved catalog source (if not configured a default `image/png` is used). For layers already loaded on the map, it is possible to change the format through the [Layer Settings](layer-settings.md#display) tool as usual.
 
 !!! note
-    In case of WMS services, the list of available formats is retrieved from the WMS server 
+    In case of WMS services, the list of available formats is retrieved from the WMS server
 
 * *Layer tile size*: it represents tile size (width and height) to be used for tiles of all layers added to the map from the catalog source (`256x256` or `512x512`). For layers already loaded on the map, it is possible to change the tile size through the [Layer Settings](https://mapstore.readthedocs.io/en/latest/user-guide/layer-settings/#display) tool as usual.
 
@@ -242,7 +242,6 @@ Selecting the **custom** provider the user can insert the tile URL template manu
 <img src="../img/catalog/custom_tms.jpg" class="ms-docimage"  style="max-width:500px;"/>
 <p class="ms-doc-caption">Edit a custom TMS</p>
 
-
 Allowed placeholder are:
 
 * `{x}`,`{y}`,`{z}`: coordinates of the tiles
@@ -264,14 +263,17 @@ When the user saves this custom catalog service and clicks on search, he will se
 <p class="ms-doc-caption">Browse custom TMS service. It contains only one result</p>
 
 *Sample custom*
+
 ```
 url: https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png
 ```
 
 *Sample custom with advanced options*
+
 ```
 url: https://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg    
 ```
+
 ```
 {
   "options": {
@@ -284,6 +286,7 @@ url: https://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg
   }
 }
 ```
+
 #### TMS 1.0.0
 
 Selecting the "TMS 1.0.0" provider the user can insert the URL of the Tile Map Service (see [TMS Specification](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification)). For instance, in GeoServer, it is the URL of the "TMS" link in the home page.
@@ -320,7 +323,7 @@ The other known services are listed as providers below "custom" and "TMS 1.0.0".
 ### 3D Tiles Catalog
 
 3D Tiles is an [OGC specification](https://www.ogc.org/standards/3DTiles) designed for streaming and rendering massive 3D geospatial content such as Photogrammetry, 3D Buildings, BIM/CAD, and Point Clouds across desktop, web and mobile applications.
-MapStore allows to publish 3D Tiles contents in its 3D mode on top of the [CesiumJS capabilities](https://github.com/CesiumGS/3d-tiles). Through the Catalog tool, a specific source type to load 3D Tiles in the Cesium Map can be configured as follows by specifying the URL of a reachable _tileset.json_. 
+MapStore allows to publish 3D Tiles contents in its 3D mode on top of the [CesiumJS capabilities](https://github.com/CesiumGS/3d-tiles). Through the Catalog tool, a specific source type to load 3D Tiles in the Cesium Map can be configured as follows by specifying the URL of a reachable *tileset.json*.
 
 In **general settings of** 3D Tiles service, the user can specify the title to assign to this service and the URL of the service.
 

docs/user-guide/exploring-maps.md

@@ -1,4 +1,5 @@
 # Exploring Maps
+
 ****************
 
 In cartography, a map is any two-dimensional graphic representation of the spatial relationships of the whole or a part of the earth. In digital cartography as in [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/), a map consists in overlaying various layers of geographic data and their styles in data frames, and it contains various map elements such as a legend and a scale bar.
@@ -19,7 +20,7 @@ In particular:
 
 * The [Table of Contents (TOC)](toc.md#table-of-contents) shows the layers and the layers groups on the map and allows to remove or edit them, and add some new ones
 
-* The [Menu Bar](menu-bar.md#menu-bar) includes the [Search bar](menu-bar.md#search-bar), the connection to the [Homepage](https://mapstore.geosolutionsgroup.com/mapstore/#/), the login window and the [Burger Menu](menu-bar.md#burger-menu), an important list of options that contains several functions and information
+* The [MapStore Toolbars](mapstore-toolbars.md) includes the [Search Bar](mapstore-toolbars.md#search-bar) and the [Side Toolbar](mapstore-toolbars.md#side-toolbar), an important list of options that contains several functions and information
 
 * The [Sidebar](side-bar.md#sidebar) that is mainly a navigation panel
 

docs/user-guide/filtering-layers.md

@@ -1,4 +1,5 @@
 # Filtering Layers
+
 ******************
 
 When using vector layers it might be useful to work with a subset of features. About that, [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) let the user set up a **Layer Filter** that acts directly on a layer with WFS available and filter its content upfront.
@@ -29,7 +30,7 @@ This filter is applicable from the **Filter layer** button <img src="../img/butt
 
 <img src="../img/filtering-layers/filtered_advanced_filtering.gif" class="ms-docimage"/>
 
-* Opening the map next time (you need to Save the map from [Burger Menu](menu-bar.md#burger-menu) after applying a filter)
+* Opening the map next time (you need to Save the map from the [Side Toolbar](mapstore-toolbars.md#side-toolbar) after applying a filter)
 
 Once a *Layer filter* is set, it is possible to enable/disable it simply by clicking on the button that will appear near the layer name in [TOC](toc.md#table-of-contents):
 
@@ -103,7 +104,7 @@ It is possible to filter records in the [Attribute Table](attributes-table.md#at
 
 * Click on the map over the features he wants to select
 
-* Add multiple features to the selection by pressing Ctrl and clicking again over other features in map 
+* Add multiple features to the selection by pressing Ctrl and clicking again over other features in map
 
 <img src="../img/filtering-layers/filter_geometry.gif" class="ms-docimage"/>
 
@@ -193,4 +194,3 @@ In order to better understand this type of filter, let's make an example. We sup
 In particular, if our goal is to take a look at the Italian Regions that contain the Unesco sites with *serial code=1*, the operations to perform can be the following:
 
 <img src="../img/filtering-layers/layer_filter.gif" class="ms-docimage"/>
-