wrmap.js

   1 "use strict";
   2
   3 function init_wrmap(i, jq_map) {
   4         // define constants
   5         let EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
   6         let EPSG3857 = ol.proj.get("EPSG:3857"); // google
   7
   8         // tool functions
   9         function createElement(tagName, attributes) {
  10                 let element = $(document.createElement(tagName));
  11                 if (attributes === undefined) return element;
  12                 for (let attribute in attributes) {
  13                         element.attr(attribute, attributes[attribute]);
  14                 }
  15                 return element;
  16         }
  17
  18         function appendElement(parentElement, tagName, attributes) {
  19                 if (attributes === undefined) attributes = {};
  20                 let element = createElement(tagName, attributes);
  21                 parentElement.append(element);
  22                 return element;
  23         }
  24
  25
  26         // extract geojson from map element and clear map element's content
  27         jq_map = $(jq_map);
  28         let ext_path = jq_map.attr('data-ext-path'); // e.g. '/mediawiki/extensions/wrmap'
  29         let img_path = ext_path + '/img';
  30         let json_string = jq_map.children().last().text();
  31         jq_map.empty(); // once parsed, remove geojson string from the map element.
  32         let json_js = JSON.parse(json_string);
  33         let format_geojson = new ol.format.GeoJSON();
  34         let features_all = format_geojson.readFeatures(json_js, {dataProjection: EPSG4326, featureProjection: EPSG3857});
  35
  36
  37         // path layer
  38         // ----------
  39
  40         function get_feature_title(feature) {
  41                 let title = feature.get('type');
  42                 if (title == 'sledrun') return feature.get('name');
  43                 title = title.charAt(0).toUpperCase() + title.slice(1); // first letter uppercase
  44                 if (feature.get('name')) title += ': ' + feature.get('name');
  45                 return title;
  46         }
  47
  48         // Returns 0 to 5 for features that represent sledruns as their condition
  49         let get_sledrun_condition = function(feature) {
  50                 let condition = feature.get('condition');
  51                 if (condition === undefined) return 0;
  52                 return condition;
  53         }
  54
  55         function sledrun_icon_style(condition, highlight) {
  56                 let hl = highlight ? 'h' : 'n';
  57                 let src = img_path + '/marker_c_sledrun_' + condition + 'n' + hl + '.png';
  58                 return new ol.style.Style({
  59                         image: new ol.style.Icon({
  60                                 src: src,
  61                                 imgSize: [17, 17],
  62                                 anchor: [0.5, 0.5]
  63                         }),
  64                 });
  65
  66         }
  67
  68         function sledrun_icon_shadow_style() {
  69                 return new ol.style.Style({
  70                         image: new ol.style.Icon({
  71                                 src: img_path + '/marker_c_shadow.png',
  72                                 imgSize: [23, 23],
  73                                 anchor: [0.4, 0.4]
  74                         }),
  75                 });
  76         }
  77
  78         function marker_icon_style(feature) {
  79                 let src = img_path + '/marker_p_' + feature.get('type') + '.png';
  80                 return new ol.style.Style({
  81                         image: new ol.style.Icon({
  82                                 src: src,
  83                                 imgSize: [20, 34],
  84                                 anchor: [0.5, 1.0]
  85                         }),
  86                 });
  87         }
  88
  89         function point_style(feature, highlight) {
  90                 let sledrun = feature.get('type') == 'sledrun';
  91                 let icon_style;
  92                 if (sledrun) {
  93                         let condition = get_sledrun_condition(feature);
  94                         icon_style = sledrun_icon_style(condition, highlight);
  95                 } else icon_style = marker_icon_style(feature);
  96                 if (highlight) {
  97                         icon_style.setText(new ol.style.Text({
  98                                 text: get_feature_title(feature),
  99                                 font: 'icon',
 100                                 offsetY: 14,
 101                                 stroke: new ol.style.Stroke({
 102                                         color: '#ddd',
 103                                         width: 2,
 104                                 }),
 105                         }));
 106                 }
 107                 if (sledrun) {
 108                         let shadow_style = sledrun_icon_shadow_style();
 109                         return [shadow_style, icon_style];
 110                 }
 111                 return [icon_style];
 112         }
 113
 114         function style_point_function(feature, resolution) {
 115                 return point_style(feature, false);
 116         }
 117
 118         function style_point_function_highlight(feature, resolution) {
 119                 return point_style(feature, true);
 120         }
 121
 122         function style_path_function(feature, resolution) {
 123                 let line_color = {
 124                         'rodelbahn': '#014e9a',
 125                         'gehweg': '#e98401',
 126                         'alternative': '#7f7fff',
 127                         'lift': '#000000',
 128                         'anfahrt': '#e1e100'
 129                 };
 130                 let color = feature.get('strokeColor') || line_color[feature.get('type')] || '#e7525b';
 131                 let width = (['lift', 'anfahrt'].indexOf(feature.get('type')) >= 0) ? 3 : 6;
 132                 return new ol.style.Style({
 133                         stroke: new ol.style.Stroke({
 134                                 color: color,
 135                                 width: width
 136                         })
 137                 });
 138         }
 139
 140         function style_function(feature, resolution) {
 141                 if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function(feature, resolution);
 142                 return style_path_function(feature, resolution);
 143         };
 144
 145         function style_function_highlight(feature, resolution) {
 146                 if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function_highlight(feature, resolution);
 147                 return style_path_function(feature, resolution);
 148         };
 149
 150
 151         // popup overlay
 152         // -------------
 153         let popup_container = document.getElementById('popup');
 154         let popup_content = document.getElementById('popup-content');
 155         let popup_closer = document.getElementById('popup-closer');
 156         let popup_overlay = new ol.Overlay({element: popup_container, autoPan: {animation: {duration: 250}}});
 157         popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 158
 159         function create_popup_dom(feature) {
 160                 let popup_div = createElement('div');
 161
 162                 // name
 163                 if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
 164                         let h2 = appendElement(popup_div, 'h2');
 165                         if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
 166                         else appendElement(h2, 'a', {href: new mw.Title(feature.get('wiki')).getUrl()}).text(feature.get('name'));
 167                 }
 168
 169                 // sledrun information
 170                 if (feature.get('type') == 'sledrun') {
 171                         let p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
 172                         let wiki_title = new mw.Title(feature.get('wiki'));
 173                         if (feature.get('condition') !== undefined) {
 174                                 let condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
 175                                 let year_month_day = feature.get('date_report').split('-');
 176                                 p.append(createElement('a', {href: wiki_title.getUrl() + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
 177                                 p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
 178                                 p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl() + '#Eintragen'}).text('Neu')));
 179                         } else {
 180                                 p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl() + '#Eintragen'}).text('Bitte eintragen')));
 181                         }
 182                 }
 183
 184                 // wiki link
 185                 if (feature.get('wiki') !== undefined) {
 186                         let a = appendElement(appendElement(popup_div, 'p'), 'a', {href: new mw.Title(feature.get('wiki')).getUrl()});
 187                         let detail_text = 'Details';
 188                         if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
 189                         if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
 190                         if (feature.get('thumb_url') === undefined) a.text(detail_text);
 191                         else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
 192                 }
 193
 194                 return popup_div;
 195         }
 196
 197
 198         // map itself
 199         // ----------
 200         let lon = json_js.properties.lon;
 201         let lat = json_js.properties.lat;
 202         let zoom = json_js.properties.zoom;
 203         let width = json_js.properties.width;
 204         let height = json_js.properties.height;
 205         if (zoom === undefined) zoom = 10; // default zoom
 206         if (width === undefined) width = '100%'; // default width
 207         if (height === undefined) height = 450;  // default: 450 pixel
 208         jq_map.width(width);
 209         jq_map.height(height);
 210
 211         let layer_sledrun_source = new ol.source.Vector({features: features_all});
 212         let layer_sledrun = new ol.layer.Vector({
 213                 source: layer_sledrun_source,
 214                 style: style_function
 215         });
 216
 217         let map = new ol.Map({
 218                 target: jq_map[0],
 219                 layers: [
 220                         layer_sledrun
 221                 ],
 222                 overlays: [popup_overlay],
 223                 view: new ol.View({
 224                         center: ol.proj.fromLonLat([lon, lat]),
 225                         zoom: zoom
 226                 }),
 227                 controls: ol.control.defaults({
 228                         attributionOptions: {
 229                                 collapsible: false
 230                         }
 231                 }),
 232                 interactions: ol.interaction.defaults({
 233                         mouseWheelZoom: false,
 234                         dragPan: false,
 235                 }).extend([
 236                         new ol.interaction.DragPan({
 237                                 condition: function (event) {
 238                                         return this.getPointerCount() === 2 || ol.events.condition.platformModifierKeyOnly(event);
 239                                 },
 240                         }),
 241                         new ol.interaction.MouseWheelZoom({
 242                                 condition: ol.events.condition.platformModifierKeyOnly,
 243                         }),
 244                         new ol.interaction.Select({
 245                                 condition: ol.events.condition.pointerMove,
 246                                 style: style_function_highlight,
 247                         })
 248                 ])
 249         });
 250
 251         let select_click = new ol.interaction.Select({
 252                 condition: ol.events.condition.click,
 253                 style: false,
 254         });
 255         map.addInteraction(select_click);
 256         select_click.on('select', function(event) {
 257                 if (event.selected.length > 0) {
 258                         let feature = event.selected[0];
 259                         let coordinates = feature.getGeometry().getCoordinates();
 260                         let popup_dom = create_popup_dom(feature);
 261                         if (popup_dom.children().length > 0) {
 262                                 $(popup_content).empty().append(popup_dom);
 263                                 popup_overlay.setPosition(coordinates);
 264                         }
 265                 }
 266         });
 267
 268
 269         // background layer
 270         // ----------------
 271         function get_austria_feature() {
 272                 // simplified "inner" polygon of Austria, created with tools/austria_simplified.py
 273                 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, ' +
 274                         '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, ' +
 275                         '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, ' +
 276                         '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, ' +
 277                         '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, ' +
 278                         '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, ' +
 279                         '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, ' +
 280                         '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, ' +
 281                         '9.674 47.095, 9.599 47.269))';
 282                 let format = new ol.format.WKT();
 283                 let feature = format.readFeature(austria_wkt, {
 284                         dataProjection: EPSG4326,
 285                         featureProjection: EPSG3857,
 286                 });
 287                 return feature;
 288         }
 289
 290         // basemap.at layer
 291         let austria_feature = get_austria_feature();
 292         function is_in_austria(feature) {
 293                 return austria_feature.getGeometry().intersectsCoordinate(feature.getGeometry().getFirstCoordinate());
 294         }
 295         let austria_only = features_all.every(is_in_austria);
 296         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';
 297         fetch(capabilitiesUrl).then(function(response) {
 298                 return response.text();
 299         }).then(function(text) {
 300                 let result = new ol.format.WMTSCapabilities().read(text);
 301                 let options = ol.source.WMTS.optionsFromCapabilities(result, {
 302                         layer: austria_only ? 'bmapgrau' : 'vaoausland',
 303                         matrixSet: 'google3857',
 304                         style: 'normal',
 305                 });
 306                 options['attributions'] = austria_only ? 'Grundkarte: <a href="https://www.basemap.at/">basemap.at</a>' : 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
 307                 let layer_map = new ol.layer.Tile({
 308                         source: new ol.source.WMTS(options),
 309                 });
 310                 map.getLayers().insertAt(0, layer_map);
 311         });
 312
 313         // // Alternatives:
 314         // // * OpenTopoMap (see https://opentopomap.org/about)
 315         // // * OSM
 316         // let layer_map = new ol.layer.Tile({
 317         //     source: new ol.source.OSM()
 318         // });
 319         // map.getLayers().insertAt(0, layer_map);
 320 }
 321
 322
 323 function init_wrmaps() {
 324         let jq_maps = $('.wrmap'); // all wrmap <div> elements
 325         jq_maps.each(init_wrmap);
 326 }
 327
 328
 329 $(document).ready(init_wrmaps);