Skip to content

Commit c18590f

Browse files
kartoffelfeekartoffelfee
authored
Merge pull request #312 from mapbender/fix/basesourceswitcher-update
update basesourceswitcher, grafic
2 parents e4ee28b + 7d8ee4a commit c18590f

4 files changed

Lines changed: 40 additions & 168 deletions

File tree

‎de/functions/basic/basesourceswitcher.rst‎

Lines changed: 21 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
BaseSourceSwitcher (Themenwechsel)
44
*********************************************************************
55

6-
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:
7-
8-
9-
.. image:: ../../../figures/basesourceswitcher_basesource.png
10-
:scale: 80
11-
6+
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.
127

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

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

15+
Der BaseSourceSwitcher kann auch in der Seitenleiste eingebunden werden. Dabei ist keine Definition von Gruppen möglich.
16+
17+
.. image:: ../../../figures/de/basesourceswitcher_sidepane.png
18+
:scale: 80
19+
20+
2021
Konfiguration
2122
=============
2223

23-
Vorbereitung: Um den BaseSourceSwitcher konfigurieren zu können,
24-
müssen WMS-Instanzen als BaseSource definiert sein (CheckBox BaseSource aktiv).
24+
**Vorbereitung**: Um den BaseSourceSwitcher konfigurieren zu können,
25+
müssen WMS-Instanzen als BaseSource definiert sein (Checkbox BaseSource: aktiv).
2526
Beachten Sie, dass in der Anwendung beim Start die Themen aktiviert werden,
26-
bei denen der root-Layer aktiv ist (neu ab Version 3.2).
27+
bei denen der root-Layer aktiv ist.
28+
29+
.. image:: ../../../figures/basesourceswitcher_basesource.png
30+
:scale: 80
2731

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

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

4852

49-
* **Title:** Text, der neben dem About Dialog Button angezeigt wird.
50-
* **Tooltip:** Text, der erscheint, wenn der Mauszeiger längere Zeit über dem Button gehalten wird.
51-
* **Target:** Zielelement (Titel(ID)) des Buttons, das bei Anklicken des Buttons ausgelöst wird.
52-
* **Instancesets:** Themengruppen, die untergeordnete Themenkarten enthalten und als übergeordneter Gruppenname in der Toolbar erscheinen.
53+
* **Title:** Titel des Elements.
54+
* **Tooltip:** Text, der erscheint, wenn der Mauszeiger längere Zeit über dem Hintergrundwechsler gehalten wird.
55+
* **Target:** Zielelement des Buttons, das bei Anklicken des Buttons ausgelöst wird.
56+
* **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.
5357

54-
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.
55-
56-
* **Title**: Name der Themenkarte
57-
* **Group**: Optionale Zuweisung zu einer vorher definierten Themengruppe
58-
* **Instances**: Quellen für die Themenkarte
59-
60-
Einbinden in Sidepane
61-
-----------------------
62-
Der BaseSourceSwitcher kann in der Sidepane mit einer Kartenvorschau eingebunden werden.
63-
64-
.. image:: ../../../figures/de/basesourceswitcher_kartenvorschau.png
65-
:scale: 80
58+
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.
6659

67-
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).
68-
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.**
69-
70-
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.
71-
Die passenden Nummern für das Layerset finden Sie in dem Tab „Layersets“ unter ID (gebraucht wird lediglich die InstanceID).
72-
73-
CSS-Vorlage:
74-
------------
75-
76-
.. code-block:: css
77-
78-
.mb-element-basesourceswitcher li[data-state='active'] {
79-
position: static;
80-
background-color: #578e2a;
81-
color: #578e2a;
82-
font-size: 12px;
83-
font-weight: 800;
84-
padding: 4px;
85-
border-right-width: 1px;
86-
margin-bottom: 5px;
87-
margin-right: 5px; }
88-
89-
.mb-element-basesourceswitcher li[data-state=''] {
90-
background-color: #ffffff;
91-
color: #6fb536;
92-
font-weight: 800;
93-
font-size: 12px;
94-
padding: 4px;
95-
margin-bottom: 5px;
96-
margin-right: 5px;
97-
opacity: 0.4; }
98-
99-
.mb-element-basesourceswitcher li:hover {
100-
border-color: #6fb536;
101-
background-color: #6fb536;
102-
color: #6fb536;
103-
padding: 4px;
104-
margin-bottom: 5px;
105-
margin-right: 5px;
106-
opacity: 1; }
107-
108-
.mb-element-basesourceswitcher li {
109-
position: relative;
110-
border-radius: 3px;
111-
border: 1px solid;
112-
border-color: #848484; }
113-
114-
.mb-element-basesourceswitcher li[data-sourceset='8'] {
115-
background: url("osm.png");
116-
width: 110px;
117-
height: 110px; }
118-
119-
.mb-element-basesourceswitcher li[data-sourceset='11'] {
120-
background: url("webatlas_grau.png");
121-
width: 110px;
122-
height: 110px; }
123-
124-
.mb-element-basesourceswitcher li[data-sourceset='10'] {
125-
background: url("webatlas_farbe.png");
126-
width: 110px;
127-
height: 110px; }
60+
* **Title**: Name der Themenkarte.
61+
* **Group**: Optionale Zuweisung zu einer Themengruppe.
62+
* **Instances**: Auswahl der Instanzen für die Themenkarte.
12863

12964

13065
YAML-Definition:

‎en/functions/basic/basesourceswitcher.rst‎

Lines changed: 19 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,120 +3,57 @@
33
BaseSourceSwitcher
44
******************
55

6-
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":
6+
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".
77

8-
.. image:: ../../../figures/basesourceswitcher_basesource.png
9-
:scale: 80
10-
11-
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.
8+
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.
129

1310
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.
1411

1512
.. image:: ../../../figures/basesourceswitcher.png
1613
:scale: 80
1714

15+
The BaseSourceSwitcher can also be used in the sidepane. The definition of groups is not possible in the sidepane.
16+
17+
.. image:: ../../../figures/basesourceswitcher_sidepane.png
18+
:scale: 80
19+
20+
1821
Configuration
1922
=============
2023

21-
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.
24+
**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.
2225

23-
Configuration with selected root-layer - sourceset is active on start:
26+
.. image:: ../../../figures/basesourceswitcher_basesource.png
27+
:scale: 80
28+
29+
Configuration with selected root layer - sourceset is active on start:
2430

2531
.. image:: ../../../figures/basesourceswitcher_instance_active.png
2632
:scale: 80
2733

28-
Configuration with selected root-Layer - sourceset is not active on start:
34+
Configuration with selected root layer - sourceset is not active on start:
2935

3036
.. image:: ../../../figures/basesourceswitcher_instance_not_active.png
3137
:scale: 80
3238

3339
The configuration occurs in 2 steps:
3440

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

3844
.. image:: ../../../figures/basesourceswitcher_configuration.png
3945
:scale: 80
4046

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

4652
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.
4753

48-
* **Title**: Title of the BaseSource
49-
* **Group**: Optional group name possibility to group sourcesets by "group name"
50-
* **Instances**: Sources for the BaseSource
51-
52-
Integration into the sidepane
53-
------------------------------
54-
The BaseSourceSwitcher can be integrated in the sidepane with a preview of the background map.
55-
56-
.. image:: ../../../figures/basesourceswitcher_map_preview.png
57-
:scale: 80
58-
59-
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).
60-
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.**
61-
62-
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.
63-
The numbers for the data-sourcesets can be found in the "Layerset" tab under ID (you only have to define the InstanceID).
64-
65-
CSS-Definition:
66-
---------------
67-
68-
.. code-block:: css
69-
70-
.mb-element-basesourceswitcher li[data-state='active'] {
71-
position: static;
72-
background-color: #578e2a;
73-
color: #578e2a;
74-
font-size: 12px;
75-
font-weight: 800;
76-
padding: 4px;
77-
border-right-width: 1px;
78-
margin-bottom: 5px;
79-
margin-right: 5px; }
80-
81-
.mb-element-basesourceswitcher li[data-state=''] {
82-
background-color: #ffffff;
83-
color: #6fb536;
84-
font-weight: 800;
85-
font-size: 12px;
86-
padding: 4px;
87-
margin-bottom: 5px;
88-
margin-right: 5px;
89-
opacity: 0.4; }
90-
91-
.mb-element-basesourceswitcher li:hover {
92-
border-color: #6fb536;
93-
background-color: #6fb536;
94-
color: #6fb536;
95-
padding: 4px;
96-
margin-bottom: 5px;
97-
margin-right: 5px;
98-
opacity: 1; }
99-
100-
.mb-element-basesourceswitcher li {
101-
position: relative;
102-
border-radius: 3px;
103-
border: 1px solid;
104-
border-color: #848484; }
105-
106-
.mb-element-basesourceswitcher li[data-sourceset='8'] {
107-
background: url("osm.png");
108-
width: 110px;
109-
height: 110px; }
110-
111-
.mb-element-basesourceswitcher li[data-sourceset='11'] {
112-
background: url("webatlas_grey.png");
113-
width: 110px;
114-
height: 110px; }
115-
116-
.mb-element-basesourceswitcher li[data-sourceset='10'] {
117-
background: url("webatlas_color.png");
118-
width: 110px;
119-
height: 110px; }
54+
* **Title**: Title of the BaseSource.
55+
* **Group**: Optional group name.
56+
* **Instances**: Sources for the BaseSource.
12057

12158

12259
YAML-Definition:

‎figures/basesourceswitcher_sidepane.png‎

16.9 KB
Loading

‎figures/de/basesourceswitcher_sidepane.png‎

24.5 KB
Loading

0 commit comments

Comments
 (0)