Skip to content

Commit

Permalink
Merge pull request #312 from mapbender/fix/basesourceswitcher-update
Browse files Browse the repository at this point in the history 
update basesourceswitcher, grafic
  • Loading branch information
@kartoffelfee
kartoffelfee authored Mar 3, 2022
2 parents e4ee28b + 7d8ee4a commit c18590f
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 168 deletions.
107 changes: 21 additions & 86 deletions de/functions/basic/basesourceswitcher.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@
BaseSourceSwitcher (Themenwechsel)
*********************************************************************

Mit diesem Element kann zwischen vordefinierten Themen (BaseSources), z. B. Hintergrundkarten, gewechselt werden. Die Definition der BaseSources erfolgt in der Anwendung im Reiter Layersets für den entsprechenden Layer. Die Bearbeitungsoberfläche des gewünschten Layers muss dazu geöffnet werden. Um diesen als BaseSource verwenden zu können, ist es notwendig, ein Häkchen bei Basesource zu setzen:


.. image:: ../../../figures/basesourceswitcher_basesource.png
:scale: 80

Mit diesem Element kann zwischen vordefinierten Themen (BaseSources), z. B. Hintergrundkarten, gewechselt werden. Die Definition der BaseSources erfolgt in der Anwendung im Reiter Layersets für den entsprechenden Layer. Die Bearbeitungsoberfläche des gewünschten Layers muss dazu geöffnet werden. Um diesen als BaseSource verwenden zu können, ist es notwendig, ein Häkchen bei Basesource zu setzen.

Über Buttons kann zwischen den verschiedenen Themen gewechselt werden. Es kann dabei immer nur ein Thema aktiv sein.

Expand All @@ -17,13 +12,22 @@ Zu jeder Datenquelle kann eine Gruppe definiert werden. Alle Definitionen einer
.. image:: ../../../figures/basesourceswitcher.png
:scale: 80

Der BaseSourceSwitcher kann auch in der Seitenleiste eingebunden werden. Dabei ist keine Definition von Gruppen möglich.

.. image:: ../../../figures/de/basesourceswitcher_sidepane.png
:scale: 80


Konfiguration
=============

Vorbereitung: Um den BaseSourceSwitcher konfigurieren zu können,
müssen WMS-Instanzen als BaseSource definiert sein (CheckBox BaseSource aktiv).
**Vorbereitung**: Um den BaseSourceSwitcher konfigurieren zu können,
müssen WMS-Instanzen als BaseSource definiert sein (Checkbox BaseSource: aktiv).
Beachten Sie, dass in der Anwendung beim Start die Themen aktiviert werden,
bei denen der root-Layer aktiv ist (neu ab Version 3.2).
bei denen der root-Layer aktiv ist.

.. image:: ../../../figures/basesourceswitcher_basesource.png
:scale: 80

Konfiguration aktiver ausgewählter root-Layer - Thema ist aktiv beim Start:

Expand All @@ -46,85 +50,16 @@ Die Konfiguration geschieht in zwei Schritten im Content-Bereich:
:scale: 80


* **Title:** Text, der neben dem About Dialog Button angezeigt wird.
* **Tooltip:** Text, der erscheint, wenn der Mauszeiger längere Zeit über dem Button gehalten wird.
* **Target:** Zielelement (Titel(ID)) des Buttons, das bei Anklicken des Buttons ausgelöst wird.
* **Instancesets:** Themengruppen, die untergeordnete Themenkarten enthalten und als übergeordneter Gruppenname in der Toolbar erscheinen.
* **Title:** Titel des Elements.
* **Tooltip:** Text, der erscheint, wenn der Mauszeiger längere Zeit über dem Hintergrundwechsler gehalten wird.
* **Target:** Zielelement des Buttons, das bei Anklicken des Buttons ausgelöst wird.
* **Instancesets:** Es können eine oder mehrere Themengruppen definiert werden. Diese verweisen auf eine Auswahl an Instanzen und sind mit einem Titel und einem Gruppennamen (optional) versehen.

In dem Konfigurationsbeispiel sieht man, dass entweder ein, kein oder mehrere Einträge pro Instanceset gewählt werden können. Durch eine Group-Angabe lassen sich Gruppen bilden, die dann über die Dropdown-Liste zusammengefasst werden.

* **Title**: Name der Themenkarte
* **Group**: Optionale Zuweisung zu einer vorher definierten Themengruppe
* **Instances**: Quellen für die Themenkarte

Einbinden in Sidepane
-----------------------
Der BaseSourceSwitcher kann in der Sidepane mit einer Kartenvorschau eingebunden werden.

.. image:: ../../../figures/de/basesourceswitcher_kartenvorschau.png
:scale: 80
Das Konfigurationsbeispiel zeigt, dass entweder ein, kein oder mehrere Einträge pro Instanceset gewählt werden können. Durch eine Group-Angabe lassen sich Gruppen bilden, die dann über eine Dropdown-Liste zusammengefasst werden.

Das Styling wird über CSS angepasst. Als Vorbereitung werden Screenshots der Hintergrundkarten mit der Größe 110x110px erstellt und im web-Verzeichnis abgelegt (Screenshots müssen von außen erreichbar sein).
Danach wird der BaseSourceSwitcher, wie in „Konfiguration“ beschrieben, in die Sidepane eingebunden. **Die Einbindung mit Kartenvorschau funktioniert nur in der Sidepane und nicht in der Toolbar! Zusätzlich müssen alle Gruppierungen entfernt werden, falls diese vorher genutzt wurden.**

Anschließend wird die CSS-Vorlage (siehe unten) in der Anwendung unter dem Tab „CSS“ eingebunden. Um die Vorlage an die eigene Anwendung anzupassen, müssen die Nummern der data-sourcesets und die Bildpfade je Dienst verändert werden.
Die passenden Nummern für das Layerset finden Sie in dem Tab „Layersets“ unter ID (gebraucht wird lediglich die InstanceID).

CSS-Vorlage:
------------

.. code-block:: css
.mb-element-basesourceswitcher li[data-state='active'] {
position: static;
background-color: #578e2a;
color: #578e2a;
font-size: 12px;
font-weight: 800;
padding: 4px;
border-right-width: 1px;
margin-bottom: 5px;
margin-right: 5px; }
.mb-element-basesourceswitcher li[data-state=''] {
background-color: #ffffff;
color: #6fb536;
font-weight: 800;
font-size: 12px;
padding: 4px;
margin-bottom: 5px;
margin-right: 5px;
opacity: 0.4; }
.mb-element-basesourceswitcher li:hover {
border-color: #6fb536;
background-color: #6fb536;
color: #6fb536;
padding: 4px;
margin-bottom: 5px;
margin-right: 5px;
opacity: 1; }
.mb-element-basesourceswitcher li {
position: relative;
border-radius: 3px;
border: 1px solid;
border-color: #848484; }
.mb-element-basesourceswitcher li[data-sourceset='8'] {
background: url("osm.png");
width: 110px;
height: 110px; }
.mb-element-basesourceswitcher li[data-sourceset='11'] {
background: url("webatlas_grau.png");
width: 110px;
height: 110px; }
.mb-element-basesourceswitcher li[data-sourceset='10'] {
background: url("webatlas_farbe.png");
width: 110px;
height: 110px; }
* **Title**: Name der Themenkarte.
* **Group**: Optionale Zuweisung zu einer Themengruppe.
* **Instances**: Auswahl der Instanzen für die Themenkarte.


YAML-Definition:
Expand Down
101 changes: 19 additions & 82 deletions en/functions/basic/basesourceswitcher.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,120 +3,57 @@
BaseSourceSwitcher
******************

With this element you can switch between different predefined layers (BaseSources), e. g. background maps. You can define the layer as a BaseSource in the tab "Layersets" in the application. You have to edit the layer and set a checkmark at "BaseSource":
With this element you can switch between different predefined layers (BaseSources), e. g. background maps. You can define the layer as a BaseSource in the tab "Layersets" in the application. You have to edit the layer and set a checkmark at "BaseSource".

.. image:: ../../../figures/basesourceswitcher_basesource.png
:scale: 80

BaseSourceSwitcher is a button group to change the map's background sources. The BaseSourceSwitcher allows you to switch between the predefined source sets. For every sourceset a button will be displayed in the client. Only one source set can be active at the same time.
The BaseSourceSwitcher is a button group to change the map's background sources. It allows you to switch between predefined sourcesets. For every sourceset a button will be displayed in the client. Only one source set can be active at the same time.

You have the possibility to define groups. All sourcesets of the same group will be listed in a dropdown list with the group name as title.

.. image:: ../../../figures/basesourceswitcher.png
:scale: 80

The BaseSourceSwitcher can also be used in the sidepane. The definition of groups is not possible in the sidepane.

.. image:: ../../../figures/basesourceswitcher_sidepane.png
:scale: 80


Configuration
=============

Preparation: In order to be able to configura the BaseSourceSwitcher you have to define Service instances as Basesource (checkbox Basesource checked). Please note that on start of an application all sourcesets with an activated root layer are active.
**Preparation**: In order to be able to configure the BaseSourceSwitcher you have to define Service instances as Basesource (checkbox "Basesource" on). Please note that on start of an application all sourcesets with an activated root layer are active.

Configuration with selected root-layer - sourceset is active on start:
.. image:: ../../../figures/basesourceswitcher_basesource.png
:scale: 80

Configuration with selected root layer - sourceset is active on start:

.. image:: ../../../figures/basesourceswitcher_instance_active.png
:scale: 80

Configuration with selected root-Layer - sourceset is not active on start:
Configuration with selected root layer - sourceset is not active on start:

.. image:: ../../../figures/basesourceswitcher_instance_not_active.png
:scale: 80

The configuration occurs in 2 steps:

#. Create a BaseSourceSwitcher Element with Title, Tooltip and Target
#. Add Sourceset(s) with one or more sources and definition of a group (optional)
#. Add sourceset(s) with one or more sources and definition of a group (optional)

.. image:: ../../../figures/basesourceswitcher_configuration.png
:scale: 80

* **Title:** Title of the element.
* **Tooltip:** The text entered as a tooltip will be indicated by hovering over the element with the mouse cursor a longer time.
* **Target:** Id of Map element, activated after the click.
* **Instancesets:** List of Sourcesets, defined by a title and group: (optional) group name to group of sourcesets by "group name"
* **Instancesets:** One or many Instancesets can be defined. Select one or more instances and assign a title and group (optional).

In the configuration example you can see that either one, none or several entries per instanceset can be selected. You can create groups, which are then grouped together in the drop-down list.

* **Title**: Title of the BaseSource
* **Group**: Optional group name possibility to group sourcesets by "group name"
* **Instances**: Sources for the BaseSource

Integration into the sidepane
------------------------------
The BaseSourceSwitcher can be integrated in the sidepane with a preview of the background map.

.. image:: ../../../figures/basesourceswitcher_map_preview.png
:scale: 80

The styling of the application is adapted via CSS. As a preparation you have to create screenshots of the background maps with the size 110x110px and place them in the web-folder (the screenshots have to be accessible from the outside).
After that, you have to include the BaseSourceSwitcher in the sidepane, as explained in "Configuration". **The inclusion with the preview of the background map only works in the sidepane, not in the toolbar! Additionally you have to remove all groups, if you have previously used them.**

Then you have to insert the CSS-defintion in your application under the "CSS" tab. To adapt the CSS-definition to your application you need to change the numbers of the data-sourcesets and the image paths for each service.
The numbers for the data-sourcesets can be found in the "Layerset" tab under ID (you only have to define the InstanceID).

CSS-Definition:
---------------

.. code-block:: css
.mb-element-basesourceswitcher li[data-state='active'] {
position: static;
background-color: #578e2a;
color: #578e2a;
font-size: 12px;
font-weight: 800;
padding: 4px;
border-right-width: 1px;
margin-bottom: 5px;
margin-right: 5px; }
.mb-element-basesourceswitcher li[data-state=''] {
background-color: #ffffff;
color: #6fb536;
font-weight: 800;
font-size: 12px;
padding: 4px;
margin-bottom: 5px;
margin-right: 5px;
opacity: 0.4; }
.mb-element-basesourceswitcher li:hover {
border-color: #6fb536;
background-color: #6fb536;
color: #6fb536;
padding: 4px;
margin-bottom: 5px;
margin-right: 5px;
opacity: 1; }
.mb-element-basesourceswitcher li {
position: relative;
border-radius: 3px;
border: 1px solid;
border-color: #848484; }
.mb-element-basesourceswitcher li[data-sourceset='8'] {
background: url("osm.png");
width: 110px;
height: 110px; }
.mb-element-basesourceswitcher li[data-sourceset='11'] {
background: url("webatlas_grey.png");
width: 110px;
height: 110px; }
.mb-element-basesourceswitcher li[data-sourceset='10'] {
background: url("webatlas_color.png");
width: 110px;
height: 110px; }
* **Title**: Title of the BaseSource.
* **Group**: Optional group name.
* **Instances**: Sources for the BaseSource.


YAML-Definition:
Expand Down
Binary file added figures/basesourceswitcher_sidepane.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added figures/de/basesourceswitcher_sidepane.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c18590f

Please sign in to comment.