3 function init_wrmap(i, jq_map) {
5 let EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
6 let EPSG3857 = ol.proj.get("EPSG:3857"); // google
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]);
18 function appendElement(parentElement, tagName, attributes) {
19 if (attributes === undefined) attributes = {};
20 let element = createElement(tagName, attributes);
21 parentElement.append(element);
26 // extract geojson from map element and clear map element's content
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});
41 let layer_map = new ol.layer.Tile({
42 source: new ol.source.OSM()
47 // Microsoft Bing Maps
48 // let layer_map = new OpenLayers.Layer.Bing({
50 // key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA",
51 // tileOptions: {crossOriginKeyword: null}});
53 // // Alternative: Base map
54 // // see: http://www.basemap.at
56 // // Alternative: OpenTopoMap
57 // // see: https://opentopomap.org/about
59 // // Alternative: Dummy base layer
60 // let layer_map = new OpenLayers.Layer.Vector("Base Layer", {
61 // isBaseLayer: true});
68 function get_feature_title(feature) {
69 let title = feature.get('type');
70 if (title == 'sledrun') return feature.get('name');
71 title = title.charAt(0).toUpperCase() + title.slice(1); // first letter uppercase
72 if (feature.get('name')) title += ': ' + feature.get('name');
76 // Returns 0 to 5 for features that represent sledruns as their condition
77 let get_sledrun_condition = function(feature) {
78 let condition = feature.get('condition');
79 if (condition === undefined) return 0;
83 function sledrun_icon_style(condition, highlight) {
84 let hl = highlight ? 'h' : 'n';
85 let src = img_path + '/marker_c_sledrun_' + condition + 'n' + hl + '.png';
86 return new ol.style.Style({
87 image: new ol.style.Icon({
96 function sledrun_icon_shadow_style() {
97 return new ol.style.Style({
98 image: new ol.style.Icon({
99 src: img_path + '/marker_c_shadow.png',
106 function marker_icon_style(feature) {
107 let src = img_path + '/marker_p_' + feature.get('type') + '.png';
108 return new ol.style.Style({
109 image: new ol.style.Icon({
117 function point_style(feature, highlight) {
118 let sledrun = feature.get('type') == 'sledrun';
121 let condition = get_sledrun_condition(feature);
122 icon_style = sledrun_icon_style(condition, highlight);
123 } else icon_style = marker_icon_style(feature);
125 icon_style.setText(new ol.style.Text({
126 text: get_feature_title(feature),
129 stroke: new ol.style.Stroke({
136 let shadow_style = sledrun_icon_shadow_style();
137 return [shadow_style, icon_style];
142 function style_point_function(feature, resolution) {
143 return point_style(feature, false);
146 function style_point_function_highlight(feature, resolution) {
147 return point_style(feature, true);
150 function style_path_function(feature, resolution) {
152 'rodelbahn': '#014e9a',
154 'alternative': '#7f7fff',
158 let color = feature.get('strokeColor') || line_color[feature.get('type')] || '#e7525b';
159 let width = (feature.get('type') in ['lift', 'anfahrt']) ? 3 : 6;
160 return new ol.style.Style({
161 stroke: new ol.style.Stroke({
168 function style_function(feature, resolution) {
169 if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function(feature, resolution);
170 return style_path_function(feature, resolution);
173 function style_function_highlight(feature, resolution) {
174 if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function_highlight(feature, resolution);
175 return style_path_function(feature, resolution);
181 let popup_container = document.getElementById('popup');
182 let popup_content = document.getElementById('popup-content');
183 let popup_closer = document.getElementById('popup-closer');
184 let popup_overlay = new ol.Overlay({element: popup_container, autoPan: {animation: {duration: 250}}});
185 popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
187 function create_popup_dom(feature) {
188 let popup_div = createElement('div');
191 if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
192 let h2 = appendElement(popup_div, 'h2');
193 if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
194 else appendElement(h2, 'a', {href: feature.get('wiki')}).text(feature.get('name'));
197 // sledrun information
198 if (feature.get('type') == 'sledrun') {
199 let p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
200 if (feature.get('condition') !== undefined) {
201 let condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
202 let year_month_day = feature.get('date_report').split('-');
203 p.append(createElement('a', {href: feature.get('wiki') + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
204 p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
205 p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Neu')));
207 p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Bitte eintragen')));
212 if (feature.get('wiki') !== undefined) {
213 let a = appendElement(appendElement(popup_div, 'p'), 'a', {href: feature.get('wiki')});
214 let detail_text = 'Details';
215 if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
216 if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
217 if (feature.get('thumb_url') === undefined) a.text(detail_text);
218 else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
227 let lon = json_js.properties.lon;
228 let lat = json_js.properties.lat;
229 let zoom = json_js.properties.zoom;
230 let width = json_js.properties.width;
231 let height = json_js.properties.height;
232 if (zoom === undefined) zoom = 10; // default zoom
233 if (width === undefined) width = '100%'; // default width
234 if (height === undefined) height = 450; // default: 450 pixel
236 jq_map.height(height);
238 let layer_sledrun_source = new ol.source.Vector({features: features_all});
239 let layer_sledrun = new ol.layer.Vector({
240 source: layer_sledrun_source,
241 style: style_function
244 let map = new ol.Map({
250 overlays: [popup_overlay],
252 center: ol.proj.fromLonLat([lon, lat]),
255 controls: ol.control.defaults({
256 attributionOptions: {
260 interactions: ol.interaction.defaults({
261 mouseWheelZoom: false
266 let select_hover = new ol.interaction.Select({
267 condition: ol.events.condition.pointerMove,
268 style: style_function_highlight,
270 map.addInteraction(select_hover);
272 let select_click = new ol.interaction.Select({
273 condition: ol.events.condition.click,
276 map.addInteraction(select_click);
277 select_click.on('select', function(event) {
278 if (event.selected.length > 0) {
279 let feature = event.selected[0];
280 let coordinates = feature.getGeometry().getCoordinates();
281 let popup_dom = create_popup_dom(feature);
282 if (popup_dom.children().length > 0) {
283 $(popup_content).empty().append(popup_dom);
284 popup_overlay.setPosition(coordinates);
290 function init_wrmaps() {
291 let jq_maps = $('.wrmap'); // all wrmap <div> elements
292 jq_maps.each(init_wrmap);
296 $(document).ready(init_wrmaps);