]> ToastFreeware Gitweb - philipp/winterrodeln/mediawiki_extensions/wrmap.git/blobdiff - src/wrmap.ts
Work on adding South Tyrol/Bozen.
[philipp/winterrodeln/mediawiki_extensions/wrmap.git] / src / wrmap.ts
index a9e683fc52a01ae30b29a50ab0e04fdb39ed77e0..f80ac19db3de1430cde830012bc0c33b27262895 100644 (file)
@@ -1,22 +1,57 @@
-"use strict";
-
-function init_wrmap(i, jq_map) {
+import './wrmap.css'
+import OlMap from 'ol/Map';
+import OlView from 'ol/View';
+import OlStyle from 'ol/style/Style';
+import OlStroke from 'ol/style/Stroke';
+import OlText from 'ol/style/Text';
+import OlIcon from 'ol/style/Icon';
+import Feature, { FeatureLike as OlFeatureLike } from 'ol/Feature';
+import OlGeoJson from 'ol/format/GeoJSON';
+import OlOverlay from 'ol/Overlay';
+import OlSourceVector from 'ol/source/Vector';
+import OlSourceWmts from 'ol/source/WMTS';
+import OlFormatWmtsCapabilities from 'ol/format/WMTSCapabilities';
+import { optionsFromCapabilities } from 'ol/source/WMTS';
+import OlSourceOsm from 'ol/source/OSM';
+import OlLayerVector from 'ol/layer/Vector';
+import OlLayerTile from 'ol/layer/Tile';
+import { Geometry, SimpleGeometry as OlSimpleGeometry, SimpleGeometry } from 'ol/geom';
+import OlPoint from 'ol/geom/Point';
+import OlInteractionDragPan from 'ol/interaction/DragPan';
+import OlInteractionMouseWheelZoom from 'ol/interaction/MouseWheelZoom';
+import OlInteractionSelect from 'ol/interaction/Select';
+import OlFormatWkt from 'ol/format/WKT';
+import * as olEventsCondition from 'ol/events/condition';
+import { defaults as olControlDefaults } from 'ol/control/defaults';
+import { defaults as olInteractionDefaults } from 'ol/interaction/defaults';
+import { get as olProjGet, fromLonLat } from 'ol/proj';
+
+
+type SledrunCondition = number;
+
+
+
+function init_wrmap(_: number, jq_map_element: HTMLElement) {
        // define constants
-       let EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
-       let EPSG3857 = ol.proj.get("EPSG:3857"); // google
+       let EPSG4326 = olProjGet("EPSG:4326")!; // lon/lat
+       let EPSG3857 = olProjGet("EPSG:3857")!; // google
+
+
+       interface StringStringHash {
+               [key: string]: string
+       }
 
        // tool functions
-       function createElement(tagName, attributes) {
+       function createElement(tagName: string, attributes: StringStringHash = {}) {
                let element = $(document.createElement(tagName));
-               if (attributes === undefined) return element;
                for (let attribute in attributes) {
                        element.attr(attribute, attributes[attribute]);
                }
                return element;
        }
 
-       function appendElement(parentElement, tagName, attributes) {
-               if (attributes === undefined) attributes = {};
+
+       function appendElement(parentElement: JQuery<HTMLElement>, tagName: string, attributes: StringStringHash = {}) {
                let element = createElement(tagName, attributes);
                parentElement.append(element);
                return element;
@@ -24,20 +59,20 @@ function init_wrmap(i, jq_map) {
 
 
        // extract geojson from map element and clear map element's content
-       jq_map = $(jq_map);
+       let jq_map = $(jq_map_element);
        let ext_path = jq_map.attr('data-ext-path'); // e.g. '/mediawiki/extensions/wrmap'
        let img_path = ext_path + '/img';
        let json_string = jq_map.children().last().text();
        jq_map.empty(); // once parsed, remove geojson string from the map element.
        let json_js = JSON.parse(json_string);
-       let format_geojson = new ol.format.GeoJSON();
+       let format_geojson = new OlGeoJson();
        let features_all = format_geojson.readFeatures(json_js, {dataProjection: EPSG4326, featureProjection: EPSG3857});
 
 
        // path layer
        // ----------
 
-       function get_feature_title(feature) {
+       function get_feature_title(feature: OlFeatureLike) {
                let title = feature.get('type');
                if (title == 'sledrun') return feature.get('name');
                title = title.charAt(0).toUpperCase() + title.slice(1); // first letter uppercase
@@ -45,20 +80,22 @@ function init_wrmap(i, jq_map) {
                return title;
        }
 
+
        // Returns 0 to 5 for features that represent sledruns as their condition
-       let get_sledrun_condition = function(feature) {
+       let get_sledrun_condition = function(feature: OlFeatureLike): SledrunCondition {
                let condition = feature.get('condition');
                if (condition === undefined) return 0;
                return condition;
        }
 
-       function sledrun_icon_style(condition, highlight) {
+
+       function sledrun_icon_style(condition: SledrunCondition, highlight: boolean) {
                let hl = highlight ? 'h' : 'n';
                let src = img_path + '/marker_c_sledrun_' + condition + 'n' + hl + '.png';
-               return new ol.style.Style({
-                       image: new ol.style.Icon({
+               return new OlStyle({
+                       image: new OlIcon({
                                src: src,
-                               imgSize: [17, 17],
+                               size: [17, 17],
                                anchor: [0.5, 0.5]
                        }),
                });
@@ -66,27 +103,28 @@ function init_wrmap(i, jq_map) {
        }
 
        function sledrun_icon_shadow_style() {
-               return new ol.style.Style({
-                       image: new ol.style.Icon({
+               return new OlStyle({
+                       image: new OlIcon({
                                src: img_path + '/marker_c_shadow.png',
-                               imgSize: [23, 23],
+                               size: [23, 23],
                                anchor: [0.4, 0.4]
                        }),
                });
        }
 
-       function marker_icon_style(feature) {
+       function marker_icon_style(feature: OlFeatureLike) {
                let src = img_path + '/marker_p_' + feature.get('type') + '.png';
-               return new ol.style.Style({
-                       image: new ol.style.Icon({
+               return new OlStyle({
+                       image: new OlIcon({
                                src: src,
-                               imgSize: [20, 34],
+                               size: [20, 34],
                                anchor: [0.5, 1.0]
                        }),
                });
        }
 
-       function point_style(feature, highlight) {
+
+       function point_style(feature: OlFeatureLike, highlight: boolean) {
                let sledrun = feature.get('type') == 'sledrun';
                let icon_style;
                if (sledrun) {
@@ -94,11 +132,11 @@ function init_wrmap(i, jq_map) {
                        icon_style = sledrun_icon_style(condition, highlight);
                } else icon_style = marker_icon_style(feature);
                if (highlight) {
-                       icon_style.setText(new ol.style.Text({
+                       icon_style.setText(new OlText({
                                text: get_feature_title(feature),
                                font: 'icon',
                                offsetY: 14,
-                               stroke: new ol.style.Stroke({
+                               stroke: new OlStroke({
                                        color: '#ddd',
                                        width: 2,
                                }),
@@ -111,15 +149,18 @@ function init_wrmap(i, jq_map) {
                return [icon_style];
        }
 
-       function style_point_function(feature, resolution) {
+
+       function style_point_function(feature: OlFeatureLike, _resolution: number) {
                return point_style(feature, false);
        }
 
-       function style_point_function_highlight(feature, resolution) {
+
+       function style_point_function_highlight(feature: OlFeatureLike, _resolution: number) {
                return point_style(feature, true);
        }
 
-       function style_path_function(feature, resolution) {
+
+       function style_path_function(feature: OlFeatureLike, _resolution: number) {
                let line_color = {
                        'rodelbahn': '#014e9a',
                        'gehweg': '#e98401',
@@ -127,43 +168,54 @@ function init_wrmap(i, jq_map) {
                        'lift': '#000000',
                        'anfahrt': '#e1e100'
                };
-               let color = feature.get('strokeColor') || line_color[feature.get('type')] || '#e7525b';
+               let featureType: keyof(typeof line_color) = feature.get('type');
+               let color = feature.get('strokeColor') || line_color[featureType] || '#e7525b';
                let width = (['lift', 'anfahrt'].indexOf(feature.get('type')) >= 0) ? 3 : 6;
-               return new ol.style.Style({
-                       stroke: new ol.style.Stroke({
+               return new OlStyle({
+                       stroke: new OlStroke({
                                color: color,
                                width: width
                        })
                });
        }
 
-       function style_function(feature, resolution) {
-               if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function(feature, resolution);
+
+       function style_function(feature: OlFeatureLike, resolution: number) {
+               if (feature.getGeometry() instanceof OlPoint) return style_point_function(feature, resolution);
                return style_path_function(feature, resolution);
        };
 
-       function style_function_highlight(feature, resolution) {
-               if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function_highlight(feature, resolution);
+
+       function style_function_highlight(feature: OlFeatureLike, resolution: number) {
+               if (feature.getGeometry() instanceof OlPoint) return style_point_function_highlight(feature, resolution);
                return style_path_function(feature, resolution);
        };
 
 
        // popup overlay
        // -------------
-       let popup_container = document.getElementById('popup');
-       let popup_content = document.getElementById('popup-content');
-       let popup_closer = document.getElementById('popup-closer');
-       let popup_overlay = new ol.Overlay({element: popup_container, autoPan: {animation: {duration: 250}}});
+
+       let popup_container = document.createElement('div');
+       popup_container.setAttribute('class', 'ol-popup');
+       popup_container = jq_map_element.insertAdjacentElement('afterend', popup_container) as HTMLDivElement;
+       let popup_closer = document.createElement('a');
+       popup_closer.setAttribute('href', '#');
+       popup_closer.setAttribute('class', 'ol-popup-closer');
+       popup_closer = popup_container.insertAdjacentElement('beforeend', popup_closer) as HTMLAnchorElement;
+       let popup_content = document.createElement('div');
+       popup_content = popup_container.insertAdjacentElement('beforeend', popup_content) as HTMLDivElement;
+       let popup_overlay = new OlOverlay({element: popup_container, autoPan: {animation: {duration: 250}}});
        popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 
-       function create_popup_dom(feature) {
+
+       function create_popup_dom(feature: OlFeatureLike) {
                let popup_div = createElement('div');
 
                // name
                if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
                        let h2 = appendElement(popup_div, 'h2');
                        if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
-                       else appendElement(h2, 'a', {href: new mw.Title(feature.get('wiki')).getUrl()}).text(feature.get('name'));
+                       else appendElement(h2, 'a', {href: new mw.Title(feature.get('wiki')).getUrl({})}).text(feature.get('name'));
                }
 
                // sledrun information
@@ -172,23 +224,48 @@ function init_wrmap(i, jq_map) {
                        let wiki_title = new mw.Title(feature.get('wiki'));
                        if (feature.get('condition') !== undefined) {
                                let condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
+                               let condition: keyof(typeof condition_text) = feature.get('condition');
                                let year_month_day = feature.get('date_report').split('-');
-                               p.append(createElement('a', {href: wiki_title.getUrl() + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
+                               p.append(createElement('a', {href: wiki_title.getUrl({}) + '#Eintr.C3.A4ge'}).text(condition_text[condition]), ' ');
                                p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
-                               p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl() + '#Eintragen'}).text('Neu')));
+                               p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl({}) + '#Eintragen'}).text('Neu')));
                        } else {
-                               p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl() + '#Eintragen'}).text('Bitte eintragen')));
+                               p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl({}) + '#Eintragen'}).text('Bitte eintragen')));
                        }
                }
 
                // wiki link
                if (feature.get('wiki') !== undefined) {
-                       let a = appendElement(appendElement(popup_div, 'p'), 'a', {href: new mw.Title(feature.get('wiki')).getUrl()});
+                       let a = appendElement(appendElement(popup_div, 'p'), 'a', {href: new mw.Title(feature.get('wiki')).getUrl({})});
                        let detail_text = 'Details';
                        if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
                        if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
-                       if (feature.get('thumb_url') === undefined) a.text(detail_text);
-                       else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+                       if (feature.get('thumb_url') !== undefined) {
+                               a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+                       } else {
+                               a.text(detail_text);
+                               // query thumbnail info like: /mediawiki/api.php?action=query&prop=pageimages&pithumbsize=200&titles=Rumer%20Alm%20(Gasthaus)
+                               let api = new mw.Api();
+                               api.get( {
+                                       action: 'query',
+                                       prop: 'pageimages',
+                                       pithumbsize: '200',
+                                       titles: feature.get('wiki')
+                               }).done( function ( data ) {
+                                       let pages = data?.query?.pages;
+                                       if (pages instanceof Object) {
+                                               for (let pageNumber in pages) {
+                                                       let page = pages[pageNumber];
+                                                       let thumbnail = page.thumbnail;
+                                                       if (thumbnail instanceof Object) {
+                                                               a.empty();
+                                                               a.append(createElement('img', {src: thumbnail.source, alt: detail_text, title: detail_text, width: thumbnail.width, height: thumbnail.height}));
+                                                               popup_overlay.panIntoView();
+                                                       }
+                                               }
+                                       }
+                               });
+                       }
                }
 
                return popup_div;
@@ -197,66 +274,66 @@ function init_wrmap(i, jq_map) {
 
        // map itself
        // ----------
-       let lon = json_js.properties.lon;
-       let lat = json_js.properties.lat;
-       let zoom = json_js.properties.zoom;
-       let width = json_js.properties.width;
-       let height = json_js.properties.height;
-       if (zoom === undefined) zoom = 10; // default zoom
-       if (width === undefined) width = '100%'; // default width
-       if (height === undefined) height = 450;  // default: 450 pixel
+       let lon = json_js.wr_properties?.lon ?? 11.;
+       let lat = json_js.wr_properties?.lat ?? 47.;
+       let zoom = json_js.wr_properties?.zoom ?? 10;
+       let width = json_js.wr_properties?.width ?? '100%';
+       let height = json_js.properties?.height ?? 450;
        jq_map.width(width);
        jq_map.height(height);
 
-       let layer_sledrun_source = new ol.source.Vector({features: features_all});
-       let layer_sledrun = new ol.layer.Vector({
+       let layer_sledrun_source = new OlSourceVector({features: features_all});
+       let layer_sledrun = new OlLayerVector({
                source: layer_sledrun_source,
                style: style_function
        });
 
-       let map = new ol.Map({
+       let center = fromLonLat([lon, lat]);
+       let map = new OlMap({
                target: jq_map[0],
                layers: [
                        layer_sledrun
                ],
                overlays: [popup_overlay],
-               view: new ol.View({
-                       center: ol.proj.fromLonLat([lon, lat]),
+               view: new OlView({
+                       center: center,
                        zoom: zoom
                }),
-               controls: ol.control.defaults({
+               controls: olControlDefaults({
                        attributionOptions: {
                                collapsible: false
                        }
                }),
-               interactions: ol.interaction.defaults({
+               interactions: olInteractionDefaults({
                        mouseWheelZoom: false,
                        dragPan: false,
                }).extend([
-                       new ol.interaction.DragPan({
+                       new OlInteractionDragPan({
                                condition: function (event) {
-                                       return this.getPointerCount() === 2 || ol.events.condition.platformModifierKeyOnly(event);
+                                       let dragPan = this as OlInteractionDragPan;
+                                       return dragPan.getPointerCount() === 2 || olEventsCondition.platformModifierKeyOnly(event);
                                },
                        }),
-                       new ol.interaction.MouseWheelZoom({
-                               condition: ol.events.condition.platformModifierKeyOnly,
+                       new OlInteractionMouseWheelZoom({
+                               condition: olEventsCondition.platformModifierKeyOnly,
                        }),
-                       new ol.interaction.Select({
-                               condition: ol.events.condition.pointerMove,
+                       new OlInteractionSelect({
+                               condition: olEventsCondition.pointerMove,
                                style: style_function_highlight,
                        })
                ])
        });
 
-       let select_click = new ol.interaction.Select({
-               condition: ol.events.condition.click,
-               style: false,
+       let select_click = new OlInteractionSelect({
+               condition: olEventsCondition.click,
+               style: null,
        });
        map.addInteraction(select_click);
        select_click.on('select', function(event) {
                if (event.selected.length > 0) {
-                       let feature = event.selected[0];
-                       let coordinates = feature.getGeometry().getCoordinates();
+                       let feature: OlFeatureLike = event.selected[0];
+                       let geometry = feature.getGeometry() as OlSimpleGeometry;
+                       let coordinates = geometry.getFirstCoordinate();
                        let popup_dom = create_popup_dom(feature);
                        if (popup_dom.children().length > 0) {
                                $(popup_content).empty().append(popup_dom);
@@ -268,55 +345,126 @@ function init_wrmap(i, jq_map) {
 
        // background layer
        // ----------------
-       function get_austria_feature() {
-               // simplified "inner" polygon of Austria, created with tools/austria_simplified.py
-               let austria_wkt = 'POLYGON ((9.599 47.269, 9.767 47.523, 9.986 47.442, 10.192 47.234, 10.366 47.287, 10.488 47.497, ' +
-                       '10.814 47.477, 11.052 47.349, 11.732 47.539, 12.211 47.578, 12.269 47.656, 12.474 47.593, 12.676 47.622, ' +
-                       '12.839 47.471, 13.039 47.436, 13.120 47.661, 12.989 47.754, 13.019 47.900, 12.864 48.130, 13.419 48.328, ' +
-                       '13.516 48.523, 13.769 48.509, 13.867 48.699, 14.173 48.535, 14.726 48.561, 14.851 48.728, 14.983 48.751, ' +
-                       '15.036 48.954, 15.803 48.820, 16.041 48.711, 16.374 48.694, 16.496 48.754, 16.831 48.668, 16.800 48.376, ' +
-                       '17.050 48.001, 16.985 47.742, 16.583 47.795, 16.363 47.696, 16.605 47.538, 16.379 47.412, 16.402 47.043, ' +
-                       '15.994 46.879, 15.914 46.732, 14.874 46.649, 14.538 46.455, 12.501 46.715, 12.213 46.957, 12.267 47.065, ' +
-                       '12.181 47.126, 11.762 47.031, 11.220 47.018, 10.925 46.815, 10.520 46.900, 10.359 47.029, 10.134 46.899, ' +
-                       '9.674 47.095, 9.599 47.269))';
-               let format = new ol.format.WKT();
-               let feature = format.readFeature(austria_wkt, {
+
+       // simplified "inner" polygon of Austria, created with tools/simplify_country.py --country Austria
+       const austriaWkt = 'POLYGON ((9.599 47.269, 9.767 47.523, 9.986 47.442, 10.192 47.234, 10.366 47.287, 10.488 47.497, ' +
+               '10.814 47.477, 11.052 47.349, 11.732 47.539, 12.211 47.578, 12.269 47.656, 12.474 47.593, 12.676 47.622, ' +
+               '12.839 47.471, 13.039 47.436, 13.120 47.661, 12.989 47.754, 13.019 47.900, 12.864 48.130, 13.419 48.328, ' +
+               '13.516 48.523, 13.769 48.509, 13.867 48.699, 14.173 48.535, 14.726 48.561, 14.851 48.728, 14.983 48.751, ' +
+               '15.036 48.954, 15.803 48.820, 16.041 48.711, 16.374 48.694, 16.496 48.754, 16.831 48.668, 16.800 48.376, ' +
+               '17.050 48.001, 16.985 47.742, 16.583 47.795, 16.363 47.696, 16.605 47.538, 16.379 47.412, 16.402 47.043, ' +
+               '15.994 46.879, 15.914 46.732, 14.874 46.649, 14.538 46.455, 12.501 46.715, 12.213 46.957, 12.267 47.065, ' +
+               '12.181 47.126, 11.762 47.031, 11.220 47.018, 10.925 46.815, 10.520 46.900, 10.359 47.029, 10.134 46.899, ' +
+               '9.674 47.095, 9.599 47.269))';
+
+       // simplified "inner" polygon of Swiss, created with tools/simplify_country.py --country Switzerland
+       const swissWkt = 'MULTIPOLYGON (((6.041 46.190, 6.146 46.251, 6.168 46.295, 6.195 46.258, 6.041 46.190)), ' +
+               '((6.186 46.362, 6.130 46.442, 6.213 46.583, 6.465 46.731, 6.504 46.914, 7.007 47.242, 7.013 47.419, 7.364 47.390, ' +
+               '7.620 47.543, 8.470 47.553, 8.632 47.620, 8.487 47.700, 8.569 47.729, 8.867 47.612, 9.163 47.626, 9.555 47.450, ' +
+               '9.420 47.182, 9.449 47.026, 9.795 46.973, 10.117 46.808, 10.389 46.891, 10.376 46.593, 10.204 46.666, ' +
+               '10.027 46.618, 9.973 46.481, 10.057 46.312, 9.888 46.413, 9.567 46.345, 9.465 46.519, 9.214 46.507, 9.187 46.298, ' +
+               '8.941 46.027, 8.970 45.881, 8.867 46.107, 8.515 46.269, 8.440 46.489, 8.045 46.299, 8.062 46.176, 7.818 45.986, ' +
+               '7.530 46.023, 7.136 45.928, 6.843 46.173, 6.792 46.454, 6.412 46.474, 6.186 46.362)))';
+
+       const bolzanoWkt = 'POLYGON ((10.452 46.680, 10.501 46.800, 11.012 46.725, 11.202 46.923, 11.743 46.926, ' +
+               '12.047 47.001, 12.072 46.884, 12.335 46.673, 12.058 46.706, 11.973 46.577, 11.654 46.548, 11.534 46.402, ' +
+               '11.232 46.285, 11.242 46.540, 10.650 46.499, 10.452 46.680))'
+
+
+       function getCountryGeometry(countryWkt: string) {
+               let format = new OlFormatWkt();
+               let geometry = format.readGeometry(countryWkt, {
                        dataProjection: EPSG4326,
                        featureProjection: EPSG3857,
                });
-               return feature;
+               return geometry;
        }
 
-       // basemap.at layer
-       let austria_feature = get_austria_feature();
-       function is_in_austria(feature) {
-               return austria_feature.getGeometry().intersectsCoordinate(feature.getGeometry().getFirstCoordinate());
-       }
-       let austria_only = features_all.every(is_in_austria);
-       let capabilitiesUrl = austria_only ? 'https://mapsneu.wien.gv.at/basemapneu/1.0.0/WMTSCapabilities.xml' : 'https://mapsneu.wien.gv.at/vaoneu/1.0.0/WMTSCapabilities.xml';
-       fetch(capabilitiesUrl).then(function(response) {
-               return response.text();
-       }).then(function(text) {
-               let result = new ol.format.WMTSCapabilities().read(text);
-               let options = ol.source.WMTS.optionsFromCapabilities(result, {
-                       layer: austria_only ? 'bmapgrau' : 'vaoausland',
-                       matrixSet: 'google3857',
-                       style: 'normal',
+
+       const austria = getCountryGeometry(austriaWkt);
+       const swiss = getCountryGeometry(swissWkt);
+       const bolzano = getCountryGeometry(bolzanoWkt);
+
+
+       function insertWmtsLayer(capabilitiesUrl: string, layer: string, attributions: string) {
+               fetch(capabilitiesUrl).then(function(response) {
+                       return response.text();
+               }).then(function(text) {
+                       let result = new OlFormatWmtsCapabilities().read(text);
+                       let options = optionsFromCapabilities(result, {
+                               layer: layer,
+                               matrixSet: 'google3857',
+                               style: 'normal',
+                       })!;
+                       options['attributions'] = attributions;
+                       let layer_map = new OlLayerTile({
+                               source: new OlSourceWmts(options),
+                       });
+                       map.getLayers().insertAt(0, layer_map);
                });
-               options['attributions'] = austria_only ? 'Grundkarte: <a href="https://www.basemap.at/">basemap.at</a>' : 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
-               let layer_map = new ol.layer.Tile({
-                       source: new ol.source.WMTS(options),
+       }
+
+
+       function insertSwissLayer() {
+               // Swiss OpenStreetMap Association https://sosm.ch/projects/tile-service/
+               let layer_map = new OlLayerTile({
+                       source: new OlSourceOsm({
+                               attributions: '© OpenStreetMap contributors, Elevation: ASTER GDEM, EarthEnv-DEM90, CDEM contains information under OGL Canada',
+                               url: 'https://tile.osm.ch/switzerland/{z}/{x}/{y}.png'
+                       }),
                });
                map.getLayers().insertAt(0, layer_map);
-       });
+       }
+
+
+       function allFeaturesInCountry(features: Feature<Geometry>[], country: Geometry): boolean {
+               return features.every(function (feature: Feature<Geometry>) {return country.intersectsCoordinate((feature.getGeometry() as SimpleGeometry).getFirstCoordinate())});
+       }
+
+       enum BackgroundLayer {
+               BasemapAt,
+               VaoAusland,
+               Sosm,
+               Bolzano,
+       }
+
+       let backgroundLayer = BackgroundLayer.BasemapAt;
+
+       if (allFeaturesInCountry(features_all, austria)) {
+               backgroundLayer = BackgroundLayer.BasemapAt;
+       } else if (allFeaturesInCountry(features_all, swiss)) {
+               backgroundLayer = BackgroundLayer.Sosm;
+       } else if (allFeaturesInCountry(features_all, bolzano)) {
+               backgroundLayer = BackgroundLayer.Bolzano;
+       } else if (swiss.intersectsCoordinate(center)) {
+               backgroundLayer = BackgroundLayer.Sosm;
+       } else {
+               backgroundLayer = BackgroundLayer.VaoAusland;
+       }
+
+       switch (backgroundLayer) {
+               case BackgroundLayer.BasemapAt:
+                       insertWmtsLayer('https://mapsneu.wien.gv.at/basemapneu/1.0.0/WMTSCapabilities.xml', 'bmapgrau', 'Grundkarte: <a href="https://www.basemap.at/">basemap.at</a>');
+                       break;
+               case BackgroundLayer.VaoAusland:
+                       insertWmtsLayer('https://mapsneu.wien.gv.at/vaoneu/1.0.0/WMTSCapabilities.xml', 'vaoausland', 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>');
+                       break;
+               case BackgroundLayer.Sosm:
+                       insertSwissLayer();
+                       break;
+               case BackgroundLayer.Bolzano:
+                       insertWmtsLayer('https://geoservices.buergernetz.bz.it/mapproxy/service?REQUEST=GetCapabilities&SERVICE=WMTS', 'oown-OpenStreetMap:Terrain', 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>');
+                       break;
+       }
+
 
        // // Alternatives:
        // // * OpenTopoMap (see https://opentopomap.org/about)
        // // * OSM
-       // let layer_map = new ol.layer.Tile({
-       //     source: new ol.source.OSM()
+       // let layer_map = new OlLayerTile({
+       //     source: new OlSourceOsm()
        // });
-       // map.getLayers().insertAt(0, layer_map);
+
 }
 
 
@@ -326,6 +474,4 @@ function init_wrmaps() {
 }
 
 
-$(document).ready(
-       function() {setTimeout(init_wrmaps, 1000);} // we need to delay that since otherwise the map is not shown in sections collapsed by MobileFrontent
-);
+$(init_wrmaps);