X-Git-Url: https://git.toastfreeware.priv.at/philipp/winterrodeln/mediawiki_extensions/wrmap.git/blobdiff_plain/e8fc9a05995c876ed9e8d21f7abdfddbeb07ceeb..1234fddc62ff7e34d1b5b7d2f5f613fc18e45ef1:/wrmap.js

diff --git a/wrmap.js b/wrmap.js
index 69196e3..24d4b69 100644
--- a/wrmap.js
+++ b/wrmap.js
@@ -11,12 +11,13 @@ OpenLayers.Popup.WrInfo = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
 
 	CLASS_NAME: "OpenLayers.Popup.WrInfo"
 });
+*/
 
 
 function init_wrmap(i, jq_map) {
 	// define constants
-	var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat
-	var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
+	var EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
+	var EPSG3857 = ol.proj.get("EPSG:3857"); // google
 
 	// tool functions
 	function createElement(tagName, attributes) {
@@ -40,36 +41,23 @@ function init_wrmap(i, jq_map) {
 	jq_map = $(jq_map);
 	var ext_path = jq_map.attr('data-ext-path'); // e.g. '/mediawiki/extensions/wrmap'
 	var img_path = ext_path + '/img';
-	OpenLayers.ImgPath = ext_path + '/openlayers/img/'; // e.g. '/mediawiki/extensions/wrmap/openlayers/img/'
 	var json_string = jq_map.children().last().text();
 	jq_map.empty(); // once parsed, remove geojson string from the map element.
-	var format_json = new OpenLayers.Format.JSON();
-	var json_js = format_json.read(json_string);
-	var format_geojson = new OpenLayers.Format.GeoJSON();
-	var features_all = format_geojson.read(json_js);
-
-	// extract, tranform and split features to layers
-	var features_path = new Array();
-	var features_point = new Array();
-	for (var i = 0; i != features_all.length; ++i) {
-		var feature = features_all[i];
-		feature.geometry.transform(EPSG4326, EPSG3857);
-		if (feature.geometry instanceof OpenLayers.Geometry.Point) features_point.push(feature);
-		else features_path.push(feature);
-	}
+	var json_js = JSON.parse(json_string);
+	var format_geojson = new ol.format.GeoJSON();
+	var features_all = format_geojson.readFeatures(json_js, {dataProjection: EPSG4326, featureProjection: EPSG3857});
 
 
 	// background layer
 	// ----------------
-	// // Google (since about 19th of November 2015 this doesn't work anymore - white background)
-	// // see https://github.com/openlayers/openlayers/issues/1450
-	var layer_map = new OpenLayers.Layer.Google("Google Physical", {
-		type: google.maps.MapTypeId.TERRAIN
+
+	// OSM map
+	var layer_map = new ol.layer.Tile({
+		source: new ol.source.OSM()
 	});
 
-	// // Alternative: OSM map
-	// var layer_map = new OpenLayers.Layer.OSM();
-	
+
+	/*
 	// Microsoft Bing Maps
 	// var layer_map = new OpenLayers.Layer.Bing({
 	// 	type: "Road",
@@ -85,35 +73,150 @@ function init_wrmap(i, jq_map) {
 	// // Alternative: Dummy base layer
 	// var layer_map = new OpenLayers.Layer.Vector("Base Layer", {
 	//     isBaseLayer: true});
+	*/
+
 
-	
 	// path layer
 	// ----------
-	var layer_path = new OpenLayers.Layer.Vector("Path", {
-		styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
-				strokeColor: '${getStrokeColor}',
-				strokeWidth: '${getStrokeWidth}'
-			}, {
-				context: {
-					getStrokeColor: function(feature) {
-						if (feature.attributes.strokeColor !== undefined) return feature.attributes.strokeColor;
-						if (feature.attributes.type == 'rodelbahn') return '#014e9a';
-						if (feature.attributes.type == 'gehweg') return '#e98401';
-						if (feature.attributes.type == 'alternative') return '#7f7fff';
-						if (feature.attributes.type == 'lift') return '#000000';
-						if (feature.attributes.type == 'anfahrt') return '#e1e100';
-						return '#e7525b';
-					},
-					getStrokeWidth: function(feature) {
-						if (feature.attributes.strokeWidth !== undefined) return feature.attributes.strokeWidth;
-						if (feature.attributes.type == 'lift' || feature.attributes.type == 'anfahrt') return 3;
-						return 6;
-					}
-				}
-			}))
-	});
 
-	
+	function get_feature_title(feature) {
+		var title = feature.get('type');
+		if (title == 'sledrun') return feature.get('name');
+		title = title.charAt(0).toUpperCase() + title.slice(1); // first letter uppercase
+		if (feature.get('name')) title += ': ' + feature.get('name');
+		return title;
+	}
+
+	// Returns 0 to 5 for features that represent sledruns as their condition
+	var get_sledrun_condition = function(feature) {
+		var condition = feature.get('condition');
+		if (condition === undefined) return 0;
+		return condition;
+	}
+
+	function style_point_function(feature, resolution) {
+		if (feature.get('type') == 'sledrun') {
+			let condition = get_sledrun_condition(feature);
+			let src = img_path + '/marker_c_sledrun_' + condition + 'nn.png';
+			let marker_style = new ol.style.Style({
+				image: new ol.style.Icon({
+					src: src,
+					imgSize: [17, 17],
+					anchor: [0.5, 0.5]
+				}),
+			});
+			let shadow_style = new ol.style.Style({
+				image: new ol.style.Icon({
+					src: img_path + '/marker_c_shadow.png',
+					imgSize: [23, 23],
+					anchor: [0.4, 0.4]
+				}),
+			});
+			return [shadow_style, marker_style];
+
+		} else {
+			let src = img_path + '/marker_p_' + feature.get('type') + '.png';
+			let marker_style = new ol.style.Style({
+				image: new ol.style.Icon({
+					src: src,
+					imgSize: [20, 34],
+					anchor: [0.5, 1.0]
+				}),
+			});
+			return [marker_style];
+		}
+	}
+
+	function style_point_function_selected(feature, resolution) {
+		let style_array = style_point_function(feature, resolution);
+		style_array[0].setText(new ol.style.Text({
+			text: get_feature_title(feature),
+			font: 'icon',
+			offsetY: 14,
+			stroke: new ol.style.Stroke({
+				color: '#ddd',
+				width: 2,
+			}),
+		}));
+		return style_array;
+	}
+
+	function style_path_function(feature, resolution) {
+		var line_color = {
+			'rodelbahn': '#014e9a',
+			'gehweg': '#e98401',
+			'alternative': '#7f7fff',
+			'lift': '#000000',
+			'anfahrt': '#e1e100'
+		};
+		var color = feature.get('strokeColor') || line_color[feature.get('type')] || '#e7525b';
+		var width = (feature.get('type') in ['lift', 'anfahrt']) ? 3 : 6;
+		return new ol.style.Style({
+			stroke: new ol.style.Stroke({
+				color: color,
+				width: width
+			})
+		});
+	}
+
+	function style_function(feature, resolution) {
+		if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function(feature, resolution);
+		return style_path_function(feature, resolution);
+	};
+
+	function style_function_selected(feature, resolution) {
+		if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function_selected(feature, resolution);
+		return style_path_function(feature, resolution);
+	};
+
+
+	// popup overlay
+	// -------------
+	var popup_container = document.getElementById('popup');
+	var popup_content = document.getElementById('popup-content');
+	var popup_closer = document.getElementById('popup-closer');
+	var popup_overlay = new ol.Overlay({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) {
+		var popup_div = createElement('div');
+
+		// name
+		if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
+			var h2 = appendElement(popup_div, 'h2');
+			if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
+			else appendElement(h2, 'a', {href: feature.get('wiki')}).text(feature.get('name'));
+		}
+
+		// sledrun information
+		if (feature.get('type') == 'sledrun') {
+			var p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
+			if (feature.get('condition') !== undefined) {
+				var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
+				var year_month_day = feature.get('date_report').split('-');
+				p.append(createElement('a', {href: feature.get('wiki') + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
+				p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
+				p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Neu')));
+			} else {
+				p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Bitte eintragen')));
+			}
+		}
+
+		// wiki link
+		if (feature.get('wiki') !== undefined) {
+			var a = appendElement(appendElement(popup_div, 'p'), 'a', {href: feature.get('wiki')});
+			var 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}));
+		}
+
+		return popup_div;
+	}
+
+
+	/*
 	// point layer
 	// -----------
 	var filter_point_sledrun = new OpenLayers.Filter.Comparison({
@@ -122,12 +225,6 @@ function init_wrmap(i, jq_map) {
 		value: 'sledrun'
 	});
 
-	// Returns 0 to 5 for features that represent sledruns as their condition
-	var get_sledrun_condition = function(feature) {
-		if (feature.attributes.condition === undefined) return 0;
-		return feature.attributes.condition;
-	}
-
 
 	var layer_point = new OpenLayers.Layer.Vector("Point", {
 		styleMap: new OpenLayers.StyleMap({
@@ -232,7 +329,7 @@ function init_wrmap(i, jq_map) {
 		rendererOptions: {yOrdering: true}
 	});
 
-
+*/
 	// map itself
 	// ----------
 	var lon = json_js.properties.lon;
@@ -245,109 +342,61 @@ function init_wrmap(i, jq_map) {
 	if (height === undefined) height = 450;  // default: 450 pixel
 	jq_map.width(width);
 	jq_map.height(height);
-	var map = new OpenLayers.Map(jq_map.context, {
-		projection: EPSG3857,
-		displayProjection: EPSG4326,
-		units: "m",
-		theme: null,
-		layers: [layer_map, layer_path, layer_point],
-		center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
-		zoom: zoom
-	});
 
+	var layer_sledrun_source = new ol.source.Vector({features: features_all});
+	var layer_sledrun = new ol.layer.Vector({
+		source: layer_sledrun_source,
+		style: style_function
+	});
 
-	// add features
-	// if this would be done before the layer is added to the map, the features are not added
-	layer_path.addFeatures(features_path); 
-	layer_point.addFeatures(features_point); 
-
-	// disable mouse wheel zoom
-	var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
-	navigation_control.disableZoomWheel();
-
-	// layer switcher
-	// map.addControl(new OpenLayers.Control.LayerSwitcher());
-
-	// print sledrun name when mouse moves over it
-	map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
-		hover: true,
-		highlightOnly: true,
-		autoActivate: true,
-		renderIntent: "highlight"
-	}));
-
-	// show popup when user clicks on a sledrun icon
-	map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
-		autoActivate: true,
-		toggle: true,
-		onSelect: function(feature) {
-			var attr = feature.attributes;
-			var popup_div = createElement('div');
-
-			// name
-			if (attr.name !== undefined && (attr.wiki !== undefined || attr.thumb_url !== undefined)) {
-				var h2 = appendElement(popup_div, 'h2');
-				if (attr.wiki === undefined) h2.text(attr.name);
-				else appendElement(h2, 'a', {href: attr.wiki}).text(attr.name);
+	var map = new ol.Map({
+		target: jq_map[0],
+		layers: [
+			layer_map,
+			layer_sledrun
+		],
+		overlays: [popup_overlay],
+		view: new ol.View({
+			center: ol.proj.fromLonLat([lon, lat]),
+			zoom: zoom
+		}),
+		controls: ol.control.defaults({
+			attributionOptions: {
+				collapsible: false
 			}
+		}),
+		interactions: ol.interaction.defaults({
+			mouseWheelZoom: false
+		})
+	});
 
-			// sledrun information
-			if (attr.type == 'sledrun') {
-				var p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
-				if (attr.condition !== undefined) {
-					var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
-					var year_month_day = attr.date_report.split('-');
-					p.append(createElement('a', {href: attr.wiki + '#Eintr.C3.A4ge'}).text(condition_text[attr.condition]), ' ');
-					p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
-					p.append(createElement('em').append(createElement('a', {href: attr.wiki + '#Eintragen'}).text('Neu')));
-				} else {
-					p.append(createElement('em').append(createElement('a', {href: attr.wiki + '#Eintragen'}).text('Bitte eintragen')));
-				}
-			}
 
-			// wiki link
-			if (attr.wiki !== undefined) {
-				var a = appendElement(appendElement(popup_div, 'p'), 'a', {href: attr.wiki});
-				var detail_text = 'Details';
-				if (attr.type == 'sledrun') detail_text += ' zur Rodelbahn';
-				if (attr.type == 'gasthaus') detail_text += ' zum Gasthaus';
-				if (attr.thumb_url === undefined) a.text(detail_text);
-				else a.append(createElement('img', {src: attr.thumb_url, alt: detail_text, title: detail_text}));
-			}
+	var select_hover = new ol.interaction.Select({
+		condition: ol.events.condition.pointerMove,
+		style: style_function_selected,
+	});
+	map.addInteraction(select_hover);
 
-			// no popup if we don't have anything to say
-			if (popup_div.children().length == 0) return;
-
-			// Open popup
-			var selectFeatureControl = this;
-			var popup = new OpenLayers.Popup.WrInfo('sledruninfopopup_' + attr.wiki,
-			feature.geometry.getBounds().getCenterLonLat(),
-			null,
-			popup_div.html(),
-			null, true, function(event) {
-				// onPopupClose
-				selectFeatureControl.unselectAll();
-			});
-			feature.popup = popup;
-			map.addPopup(popup);
-		},
-		onUnselect: function(feature) {
-			if (feature.popup === null) return;
-
-			// Close popup
-			map.removePopup(feature.popup);
-			feature.popup.destroy();
-			feature.popup = null;
+	var select_click = new ol.interaction.Select({
+		condition: ol.events.condition.click,
+	});
+	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 popup_dom = create_popup_dom(feature);
+			if (popup_dom.children().length > 0) {
+				$(popup_content).empty().append(popup_dom);
+				popup_overlay.setPosition(coordinates);
+			}
 		}
-	}));
+	});
 }
-*/
 
 function init_wrmaps() {
-	/*
 	var jq_maps = $('.wrmap'); // all wrmap <div> elements
 	jq_maps.each(init_wrmap);
-	*/
 }