Adding LayerSwitcher

src/main/resources/eu/simstadt/regionchooser/website/index.html

@@ -16,7 +16,9 @@
 		<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
 		 <!-- OpenLayers v3.4.0. API doc : https://geoadmin.github.io/ol3/apidoc/ -->
 		<script src="script/ol.js" type="text/javascript"></script>
+		<script src="script/ol-layerswitcher.js"></script>
 		<link rel="stylesheet" href="style/ol.css" type="text/css" />
+		<link rel="stylesheet" href="style/ol-layerswitcher.css" type="text/css" />
 		<script src="script/turf.js" type="text/javascript"></script>
 		<script src="script/every_epsg.js" type="text/javascript"></script>
 	</head>

src/main/resources/eu/simstadt/regionchooser/website/script/ol-layerswitcher.js

+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('ol/control/Control'), require('ol/Observable'), require('ol/layer/Group')) :
+	typeof define === 'function' && define.amd ? define(['ol/control/Control', 'ol/Observable', 'ol/layer/Group'], factory) :
+	(global.LayerSwitcher = factory(global.ol.control.Control,global.ol.Observable,global.ol.layer.Group));
+}(this, (function (Control,ol_Observable,LayerGroup) { 'use strict';
+
+Control = 'default' in Control ? Control['default'] : Control;
+LayerGroup = 'default' in LayerGroup ? LayerGroup['default'] : LayerGroup;
+
+/**
+ * @protected
+ */
+const CSS_PREFIX = 'layer-switcher-';
+/**
+ * OpenLayers LayerSwitcher Control, displays a list of layers and groups
+ * associated with a map which have a `title` property.
+ *
+ * To be shown in the LayerSwitcher panel layers must have a `title` property;
+ * base map layers should have a `type` property set to `base`. Group layers
+ * (`LayerGroup`) can be used to visually group layers together; a group
+ * with a `fold` property set to either `'open'` or `'close'` will be displayed
+ * with a toggle.
+ *
+ * See [BaseLayerOptions](#baselayeroptions) for a full list of LayerSwitcher
+ * properties for layers (`TileLayer`, `ImageLayer`, `VectorTile` etc.) and
+ * [GroupLayerOptions](#grouplayeroptions) for group layer (`LayerGroup`)
+ * LayerSwitcher properties.
+ *
+ * Layer and group properties can either be set by adding extra properties
+ * to their options when they are created or via their set method.
+ *
+ * Specify a `title` for a Layer by adding a `title` property to it's options object:
+ * ```javascript
+ * var lyr = new ol.layer.Tile({
+ *   // Specify a title property which will be displayed by the layer switcher
+ *   title: 'OpenStreetMap',
+ *   visible: true,
+ *   source: new ol.source.OSM()
+ * })
+ * ```
+ *
+ * Alternatively the properties can be set via the `set` method after a layer has been created:
+ * ```javascript
+ * var lyr = new ol.layer.Tile({
+ *   visible: true,
+ *   source: new ol.source.OSM()
+ * })
+ * // Specify a title property which will be displayed by the layer switcher
+ * lyr.set('title', 'OpenStreetMap');
+ * ```
+ *
+ * To create a LayerSwitcher and add it to a map, create a new instance then pass it to the map's [`addControl` method](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl).
+ * ```javascript
+ * var layerSwitcher = new LayerSwitcher({
+ *   reverse: true,
+ *   groupSelectStyle: 'group'
+ * });
+ * map.addControl(layerSwitcher);
+ * ```
+ *
+ * @constructor
+ * @extends {ol/control/Control~Control}
+ * @param opt_options LayerSwitcher options, see  [LayerSwitcher Options](#options) and [RenderOptions](#renderoptions) which LayerSwitcher `Options` extends for more details.
+ */
+class LayerSwitcher extends Control {
+    constructor(opt_options) {
+        const options = Object.assign({}, opt_options);
+        const element = document.createElement('div');
+        super({ element: element, target: options.target });
+        this.activationMode = options.activationMode || 'mouseover';
+        this.startActive = options.startActive === true;
+        // TODO Next: Rename to showButtonContent
+        this.label = options.label !== undefined ? options.label : '';
+        // TODO Next: Rename to hideButtonContent
+        this.collapseLabel =
+            options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
+        // TODO Next: Rename to showButtonTitle
+        this.tipLabel = options.tipLabel ? options.tipLabel : 'Legend';
+        // TODO Next: Rename to hideButtonTitle
+        this.collapseTipLabel = options.collapseTipLabel
+            ? options.collapseTipLabel
+            : 'Collapse legend';
+        this.groupSelectStyle = LayerSwitcher.getGroupSelectStyle(options.groupSelectStyle);
+        this.reverse = options.reverse !== false;
+        this.mapListeners = [];
+        this.hiddenClassName = 'ol-unselectable ol-control layer-switcher';
+        if (LayerSwitcher.isTouchDevice_()) {
+            this.hiddenClassName += ' touch';
+        }
+        this.shownClassName = 'shown';
+        element.className = this.hiddenClassName;
+        this.button = document.createElement('button');
+        element.appendChild(this.button);
+        this.panel = document.createElement('div');
+        this.panel.className = 'panel';
+        element.appendChild(this.panel);
+        LayerSwitcher.enableTouchScroll_(this.panel);
+        element.classList.add(CSS_PREFIX + 'group-select-style-' + this.groupSelectStyle);
+        element.classList.add(CSS_PREFIX + 'activation-mode-' + this.activationMode);
+        if (this.activationMode === 'click') {
+            // TODO Next: Remove in favour of layer-switcher-activation-mode-click
+            element.classList.add('activationModeClick');
+            this.button.onclick = (e) => {
+                const evt = e || window.event;
+                if (this.element.classList.contains(this.shownClassName)) {
+                    this.hidePanel();
+                }
+                else {
+                    this.showPanel();
+                }
+                evt.preventDefault();
+            };
+        }
+        else {
+            this.button.onmouseover = () => {
+                this.showPanel();
+            };
+            this.button.onclick = (e) => {
+                const evt = e || window.event;
+                this.showPanel();
+                evt.preventDefault();
+            };
+            this.panel.onmouseout = (evt) => {
+                if (!this.panel.contains(evt.relatedTarget)) {
+                    this.hidePanel();
+                }
+            };
+        }
+        this.updateButton();
+    }
+    /**
+     * Set the map instance the control is associated with.
+     * @param map The map instance.
+     */
+    setMap(map) {
+        // Clean up listeners associated with the previous map
+        for (let i = 0; i < this.mapListeners.length; i++) {
+            ol_Observable.unByKey(this.mapListeners[i]);
+        }
+        this.mapListeners.length = 0;
+        // Wire up listeners etc. and store reference to new map
+        super.setMap(map);
+        if (map) {
+            if (this.startActive) {
+                this.showPanel();
+            }
+            else {
+                this.renderPanel();
+            }
+            if (this.activationMode !== 'click') {
+                this.mapListeners.push(map.on('pointerdown', () => {
+                    this.hidePanel();
+                }));
+            }
+        }
+    }
+    /**
+     * Show the layer panel. Fires `'show'` event.
+     * @fires LayerSwitcher#show
+     */
+    showPanel() {
+        if (!this.element.classList.contains(this.shownClassName)) {
+            this.element.classList.add(this.shownClassName);
+            this.updateButton();
+            this.renderPanel();
+        }
+        /**
+         * Event triggered after the panel has been shown.
+         * Listen to the event via the `on` or `once` methods; for example:
+         * ```js
+         * var layerSwitcher = new LayerSwitcher();
+         * map.addControl(layerSwitcher);
+         *
+         * layerSwitcher.on('show', evt => {
+         *   console.log('show', evt);
+         * });
+         * @event LayerSwitcher#show
+         */
+        this.dispatchEvent('show');
+    }
+    /**
+     * Hide the layer panel. Fires `'hide'` event.
+     * @fires LayerSwitcher#hide
+     */
+    hidePanel() {
+        if (this.element.classList.contains(this.shownClassName)) {
+            this.element.classList.remove(this.shownClassName);
+            this.updateButton();
+        }
+        /**
+         * Event triggered after the panel has been hidden.
+         * @event LayerSwitcher#hide
+         */
+        this.dispatchEvent('hide');
+    }
+    /**
+     * Update button text content and attributes based on current
+     * state
+     */
+    updateButton() {
+        if (this.element.classList.contains(this.shownClassName)) {
+            this.button.textContent = this.collapseLabel;
+            this.button.setAttribute('title', this.collapseTipLabel);
+            this.button.setAttribute('aria-label', this.collapseTipLabel);
+        }
+        else {
+            this.button.textContent = this.label;
+            this.button.setAttribute('title', this.tipLabel);
+            this.button.setAttribute('aria-label', this.tipLabel);
+        }
+    }
+    /**
+     * Re-draw the layer panel to represent the current state of the layers.
+     */
+    renderPanel() {
+        this.dispatchEvent('render');
+        LayerSwitcher.renderPanel(this.getMap(), this.panel, {
+            groupSelectStyle: this.groupSelectStyle,
+            reverse: this.reverse
+        });
+        this.dispatchEvent('rendercomplete');
+    }
+    /**
+     * **_[static]_** - Re-draw the layer panel to represent the current state of the layers.
+     * @param map The OpenLayers Map instance to render layers for
+     * @param panel The DOM Element into which the layer tree will be rendered
+     * @param options Options for panel, group, and layers
+     */
+    static renderPanel(map, panel, options) {
+        // Create the event.
+        const render_event = new Event('render');
+        // Dispatch the event.
+        panel.dispatchEvent(render_event);
+        options = options || {};
+        options.groupSelectStyle = LayerSwitcher.getGroupSelectStyle(options.groupSelectStyle);
+        LayerSwitcher.ensureTopVisibleBaseLayerShown(map, options.groupSelectStyle);
+        while (panel.firstChild) {
+            panel.removeChild(panel.firstChild);
+        }
+        // Reset indeterminate state for all layers and groups before
+        // applying based on groupSelectStyle
+        LayerSwitcher.forEachRecursive(map, function (l, _idx, _a) {
+            l.set('indeterminate', false);
+        });
+        if (options.groupSelectStyle === 'children' ||
+            options.groupSelectStyle === 'none') {
+            // Set visibile and indeterminate state of groups based on
+            // their children's visibility
+            LayerSwitcher.setGroupVisibility(map);
+        }
+        else if (options.groupSelectStyle === 'group') {
+            // Set child indetermiate state based on their parent's visibility
+            LayerSwitcher.setChildVisibility(map);
+        }
+        const ul = document.createElement('ul');
+        panel.appendChild(ul);
+        // passing two map arguments instead of lyr as we're passing the map as the root of the layers tree
+        LayerSwitcher.renderLayers_(map, map, ul, options, function render(_changedLyr) {
+            LayerSwitcher.renderPanel(map, panel, options);
+        });
+        // Create the event.
+        const rendercomplete_event = new Event('rendercomplete');
+        // Dispatch the event.
+        panel.dispatchEvent(rendercomplete_event);
+    }
+    /**
+     * **_[static]_** - Determine if a given layer group contains base layers
+     * @param grp Group to test
+     */
+    static isBaseGroup(grp) {
+        if (grp instanceof LayerGroup) {
+            const lyrs = grp.getLayers().getArray();
+            return lyrs.length && lyrs[0].get('type') === 'base';
+        }
+        else {
+            return false;
+        }
+    }
+    static setGroupVisibility(map) {
+        // Get a list of groups, with the deepest first
+        const groups = LayerSwitcher.getGroupsAndLayers(map, function (l) {
+            return (l instanceof LayerGroup &&
+                !l.get('combine') &&
+                !LayerSwitcher.isBaseGroup(l));
+        }).reverse();
+        // console.log(groups.map(g => g.get('title')));
+        groups.forEach(function (grp) {
+            // TODO Can we use getLayersArray, is it public in the esm build?
+            const descendantVisibility = grp.getLayersArray().map(function (l) {
+                const state = l.getVisible();
+                // console.log('>', l.get('title'), state);
+                return state;
+            });
+            // console.log(descendantVisibility);
+            if (descendantVisibility.every(function (v) {
+                return v === true;
+            })) {
+                grp.setVisible(true);
+                grp.set('indeterminate', false);
+            }
+            else if (descendantVisibility.every(function (v) {
+                return v === false;
+            })) {
+                grp.setVisible(false);
+                grp.set('indeterminate', false);
+            }
+            else {
+                grp.setVisible(true);
+                grp.set('indeterminate', true);
+            }
+        });
+    }
+    static setChildVisibility(map) {
+        // console.log('setChildVisibility');
+        const groups = LayerSwitcher.getGroupsAndLayers(map, function (l) {
+            return (l instanceof LayerGroup &&
+                !l.get('combine') &&
+                !LayerSwitcher.isBaseGroup(l));
+        });
+        groups.forEach(function (grp) {
+            const group = grp;
+            // console.log(group.get('title'));
+            const groupVisible = group.getVisible();
+            const groupIndeterminate = group.get('indeterminate');
+            group
+                .getLayers()
+                .getArray()
+                .forEach(function (l) {
+                l.set('indeterminate', false);
+                if ((!groupVisible || groupIndeterminate) && l.getVisible()) {
+                    l.set('indeterminate', true);
+                }
+            });
+        });
+    }
+    /**
+     * Ensure only the top-most base layer is visible if more than one is visible.
+     * @param map The map instance.
+     * @param groupSelectStyle
+     * @protected
+     */
+    static ensureTopVisibleBaseLayerShown(map, groupSelectStyle) {
+        let lastVisibleBaseLyr;
+        LayerSwitcher.forEachRecursive(map, function (lyr, _idx, _arr) {
+            if (lyr.get('type') === 'base' && lyr.getVisible()) {
+                lastVisibleBaseLyr = lyr;
+            }
+        });
+        if (lastVisibleBaseLyr)
+            LayerSwitcher.setVisible_(map, lastVisibleBaseLyr, true, groupSelectStyle);
+    }
+    /**
+     * **_[static]_** - Get an Array of all layers and groups displayed by the LayerSwitcher (has a `'title'` property)
+     * contained by the specified map or layer group; optionally filtering via `filterFn`
+     * @param grp The map or layer group for which layers are found.
+     * @param filterFn Optional function used to filter the returned layers
+     */
+    static getGroupsAndLayers(grp, filterFn) {
+        const layers = [];
+        filterFn =
+            filterFn ||
+                function (_lyr, _idx, _arr) {
+                    return true;
+                };
+        LayerSwitcher.forEachRecursive(grp, function (lyr, idx, arr) {
+            if (lyr.get('title')) {
+                if (filterFn(lyr, idx, arr)) {
+                    layers.push(lyr);
+                }
+            }
+        });
+        return layers;
+    }
+    /**
+     * Toggle the visible state of a layer.
+     * Takes care of hiding other layers in the same exclusive group if the layer
+     * is toggle to visible.
+     * @protected
+     * @param map The map instance.
+     * @param lyr layer whose visibility will be toggled.
+     * @param visible Set whether the layer is shown
+     * @param groupSelectStyle
+     * @protected
+     */
+    static setVisible_(map, lyr, visible, groupSelectStyle) {
+        // console.log(lyr.get('title'), visible, groupSelectStyle);
+        lyr.setVisible(visible);
+        if (visible && lyr.get('type') === 'base') {
+            // Hide all other base layers regardless of grouping
+            LayerSwitcher.forEachRecursive(map, function (l, _idx, _arr) {
+                if (l != lyr && l.get('type') === 'base') {
+                    l.setVisible(false);
+                }
+            });
+        }
+        if (lyr instanceof LayerGroup &&
+            !lyr.get('combine') &&
+            groupSelectStyle === 'children') {
+            lyr.getLayers().forEach((l) => {
+                LayerSwitcher.setVisible_(map, l, lyr.getVisible(), groupSelectStyle);
+            });
+        }
+    }
+    /**
+     * Render all layers that are children of a group.
+     * @param map The map instance.
+     * @param lyr Layer to be rendered (should have a title property).
+     * @param idx Position in parent group list.
+     * @param options Options for groups and layers
+     * @protected
+     */
+    static renderLayer_(map, lyr, idx, options, render) {
+        const li = document.createElement('li');
+        const lyrTitle = lyr.get('title');
+        const checkboxId = LayerSwitcher.uuid();
+        const label = document.createElement('label');
+        if (lyr instanceof LayerGroup && !lyr.get('combine')) {
+            const isBaseGroup = LayerSwitcher.isBaseGroup(lyr);
+            li.classList.add('group');
+            if (isBaseGroup) {
+                li.classList.add(CSS_PREFIX + 'base-group');
+            }
+            // Group folding
+            if (lyr.get('fold')) {
+                li.classList.add(CSS_PREFIX + 'fold');
+                li.classList.add(CSS_PREFIX + lyr.get('fold'));
+                const btn = document.createElement('button');
+                btn.onclick = function (e) {
+                    const evt = e || window.event;
+                    LayerSwitcher.toggleFold_(lyr, li);
+                    evt.preventDefault();
+                };
+                li.appendChild(btn);
+            }
+            if (!isBaseGroup && options.groupSelectStyle != 'none') {
+                const input = document.createElement('input');
+                input.type = 'checkbox';
+                input.id = checkboxId;
+                input.checked = lyr.getVisible();
+                input.indeterminate = lyr.get('indeterminate');
+                input.onchange = function (e) {
+                    const target = e.target;
+                    LayerSwitcher.setVisible_(map, lyr, target.checked, options.groupSelectStyle);
+                    render(lyr);
+                };
+                li.appendChild(input);
+                label.htmlFor = checkboxId;
+            }
+            label.innerHTML = lyrTitle;
+            li.appendChild(label);
+            const ul = document.createElement('ul');
+            li.appendChild(ul);
+            LayerSwitcher.renderLayers_(map, lyr, ul, options, render);
+        }
+        else {
+            li.className = 'layer';
+            const input = document.createElement('input');
+            if (lyr.get('type') === 'base') {
+                input.type = 'radio';
+            }
+            else {
+                input.type = 'checkbox';
+            }
+            input.id = checkboxId;
+            input.checked = lyr.get('visible');
+            input.indeterminate = lyr.get('indeterminate');
+            input.onchange = function (e) {
+                const target = e.target;
+                LayerSwitcher.setVisible_(map, lyr, target.checked, options.groupSelectStyle);
+                render(lyr);
+            };
+            li.appendChild(input);
+            label.htmlFor = checkboxId;
+            label.innerHTML = lyrTitle;
+            const rsl = map.getView().getResolution();
+            if (rsl >= lyr.getMaxResolution() || rsl < lyr.getMinResolution()) {
+                label.className += ' disabled';
+            }
+            else if (lyr.getMinZoom && lyr.getMaxZoom) {
+                const zoom = map.getView().getZoom();
+                if (zoom <= lyr.getMinZoom() || zoom > lyr.getMaxZoom()) {
+                    label.className += ' disabled';
+                }
+            }
+            li.appendChild(label);
+        }
+        return li;
+    }
+    /**
+     * Render all layers that are children of a group.
+     * @param map The map instance.
+     * @param lyr Group layer whose children will be rendered.
+     * @param elm DOM element that children will be appended to.
+     * @param options Options for groups and layers
+     * @protected
+     */
+    static renderLayers_(map, lyr, elm, options, render) {
+        let lyrs = lyr.getLayers().getArray().slice();
+        if (options.reverse)
+            lyrs = lyrs.reverse();
+        for (let i = 0, l; i < lyrs.length; i++) {
+            l = lyrs[i];
+            if (l.get('title')) {
+                elm.appendChild(LayerSwitcher.renderLayer_(map, l, i, options, render));
+            }
+        }
+    }
+    /**
+     * **_[static]_** - Call the supplied function for each layer in the passed layer group
+     * recursing nested groups.
+     * @param lyr The layer group to start iterating from.
+     * @param fn Callback which will be called for each layer
+     * found under `lyr`.
+     */
+    static forEachRecursive(lyr, fn) {
+        lyr.getLayers().forEach(function (lyr, idx, a) {
+            fn(lyr, idx, a);
+            if (lyr instanceof LayerGroup) {
+                LayerSwitcher.forEachRecursive(lyr, fn);
+            }
+        });
+    }
+    /**
+     * **_[static]_** - Generate a UUID
+     * Adapted from http://stackoverflow.com/a/2117523/526860
+     * @returns {String} UUID
+     */
+    static uuid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            const r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+    /**
+     * Apply workaround to enable scrolling of overflowing content within an
+     * element. Adapted from https://gist.github.com/chrismbarr/4107472
+     * @param elm Element on which to enable touch scrolling
+     * @protected
+     */
+    static enableTouchScroll_(elm) {
+        if (LayerSwitcher.isTouchDevice_()) {
+            let scrollStartPos = 0;
+            elm.addEventListener('touchstart', function (event) {
+                scrollStartPos = this.scrollTop + event.touches[0].pageY;
+            }, false);
+            elm.addEventListener('touchmove', function (event) {
+                this.scrollTop = scrollStartPos - event.touches[0].pageY;
+            }, false);
+        }
+    }
+    /**
+     * Determine if the current browser supports touch events. Adapted from
+     * https://gist.github.com/chrismbarr/4107472
+     * @returns {Boolean} True if client can have 'TouchEvent' event
+     * @protected
+     */
+    static isTouchDevice_() {
+        try {
+            document.createEvent('TouchEvent');
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    /**
+     * Fold/unfold layer group
+     * @param lyr Layer group to fold/unfold
+     * @param li List item containing layer group
+     * @protected
+     */
+    static toggleFold_(lyr, li) {
+        li.classList.remove(CSS_PREFIX + lyr.get('fold'));
+        lyr.set('fold', lyr.get('fold') === 'open' ? 'close' : 'open');
+        li.classList.add(CSS_PREFIX + lyr.get('fold'));
+    }
+    /**
+     * If a valid groupSelectStyle value is not provided then return the default
+     * @param groupSelectStyle The string to check for validity
+     * @returns The value groupSelectStyle, if valid, the default otherwise
+     * @protected
+     */
+    static getGroupSelectStyle(groupSelectStyle) {
+        return ['none', 'children', 'group'].indexOf(groupSelectStyle) >= 0
+            ? groupSelectStyle
+            : 'children';
+    }
+}
+// Expose LayerSwitcher as ol.control.LayerSwitcher if using a full build of
+// OpenLayers
+if (window['ol'] && window['ol']['control']) {
+    window['ol']['control']['LayerSwitcher'] = LayerSwitcher;
+}
+
+return LayerSwitcher;
+
+})));

src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js

@@ -25,7 +25,30 @@ const regionChooser = (function () {
 
 	var osm_layer = new ol.layer.Tile({
 		// NOTE: when set to "anonymous" (the default), it could lead to the Browser not displaying any map
-		source: new ol.source.OSM({crossOrigin: null})
+		source: new ol.source.OSM({crossOrigin: null}),
+		title: "OpenStreetMap",
+		type: 'base'
+	});
+	
+	var arcgis_terrain = new ol.layer.Tile({
+	    source: new ol.source.XYZ({
+			attributions: "",
+			url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+	    }),
+		title: "Terrain",
+		type: 'base',
+		visible: false,
+	});
+	
+	var arcgis_satellite = new ol.layer.Tile({
+		// TODO: Change polygon color when selected
+	    source: new ol.source.XYZ({
+			attributions: "",
+			url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+	    }),
+		title: "Satellite",
+		type: 'base',
+		visible: false,
 	});
 
 	var kml_source = utils.read_kml(fromJavaFX ? undefined : 'data/citygml_hulls.kml');
@@ -59,12 +82,15 @@ const regionChooser = (function () {
 
 	var map = new ol.Map({
 		target: 'map',
-		layers: [osm_layer, kml_layer, intersections_layer],
+		layers: [osm_layer, arcgis_satellite, arcgis_terrain, kml_layer, intersections_layer],
 		interactions: ol.interaction.defaults({
 			keyboard: true
 		})
 	});
 	
+	const layerSwitcher = new LayerSwitcher();
+	map.addControl(layerSwitcher);
+
 	const geoJsonFormat = new ol.format.GeoJSON();
 	const kmlFormat = new ol.format.KML({ extractStyles: false });
 

src/main/resources/eu/simstadt/regionchooser/website/style/ol-layerswitcher.css

+.layer-switcher {
+  position: absolute;
+  top: 3.5em;
+  right: 0.5em;
+  text-align: left;
+}
+
+.layer-switcher .panel {
+  margin: 0;
+  border: 4px solid #eee;
+  border-radius: 4px;
+  background-color: white;
+  display: none;
+  max-height: inherit;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.layer-switcher button {
+  float: right;
+  z-index: 1;
+  width: 38px;
+  height: 38px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==')
+    /*logo.png*/;
+  background-repeat: no-repeat;
+  background-position: 2px;
+  background-color: white;
+  color: black;
+  border: none;
+}
+
+.layer-switcher button:focus,
+.layer-switcher button:hover {
+  background-color: white;
+}
+
+.layer-switcher.shown {
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100% - 5.5em);
+}
+
+.layer-switcher.shown.ol-control {
+  background-color: transparent;
+}
+
+.layer-switcher.shown.ol-control:hover {
+  background-color: transparent;
+}
+.layer-switcher.shown .panel {
+  display: block;
+}
+
+.layer-switcher.shown button {
+  display: none;
+}
+
+.layer-switcher.shown.layer-switcher-activation-mode-click > button {
+  display: block;
+  background-image: unset;
+  right: 2px;
+  position: absolute;
+  background-color: #eee;
+  margin: 1px;
+}
+
+.layer-switcher.shown button:focus,
+.layer-switcher.shown button:hover {
+  background-color: #fafafa;
+}
+
+.layer-switcher ul {
+  list-style: none;
+  margin: 1.6em 0.4em;
+  padding-left: 0;
+}
+.layer-switcher ul ul {
+  padding-left: 1.2em;
+  margin: 0.1em 0 0 0;
+}
+.layer-switcher li.group + li.group {
+  margin-top: 0.4em;
+}
+.layer-switcher li.group + li.layer-switcher-base-group {
+}
+
+.layer-switcher li.group > label {
+  font-weight: bold;
+}
+
+.layer-switcher.layer-switcher-group-select-style-none li.group > label {
+  padding-left: 1.2em;
+}
+
+.layer-switcher li {
+  position: relative;
+  margin-top: 0.3em;
+}
+
+.layer-switcher li input {
+  position: absolute;
+  left: 1.2em;
+  height: 1em;
+  width: 1em;
+  font-size: 1em;
+}
+.layer-switcher li label {
+  padding-left: 2.7em;
+  padding-right: 1.2em;
+  display: inline-block;
+  margin-top: 1px;
+}
+
+.layer-switcher label.disabled {
+  opacity: 0.4;
+}
+
+.layer-switcher input {
+  margin: 0px;
+}
+
+.layer-switcher.touch ::-webkit-scrollbar {
+  width: 4px;
+}
+
+.layer-switcher.touch ::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+.layer-switcher.touch ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+li.layer-switcher-base-group > label {
+  padding-left: 1.2em;
+}
+
+.layer-switcher .group button {
+  position: absolute;
+  left: 0;
+  display: inline-block;
+  vertical-align: top;
+  float: none;
+  font-size: 1em;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  background-position: center 2px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==');
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  -ms-transition: -ms-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+}
+
+.layer-switcher .group.layer-switcher-close button {
+  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+}
+
+.layer-switcher .group.layer-switcher-fold.layer-switcher-close > ul {
+  overflow: hidden;
+  height: 0;
+}
+
+/*layerswitcher on the right*/
+.layer-switcher.shown.layer-switcher-activation-mode-click {
+  padding-left: 34px;
+}
+.layer-switcher.shown.layer-switcher-activation-mode-click > button {
+  left: 0;
+  border-right: 0;
+}
+
+/*layerswitcher on the left*/
+/*
+.layer-switcher.shown.layer-switcher-activation-mode-click {
+  padding-right: 34px;
+}
+.layer-switcher.shown.layer-switcher-activation-mode-click > button {
+  right: 0;
+  border-left: 0;
+}
+*/