Highlight polygon when hovering over name

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

@@ -168,10 +168,11 @@ var regionChooser = (function(){
 		var intersectionArea = intersection.getGeometry().getArea();
 		var citygml_percentage = Math.round(intersectionArea / feature["area"] * 100);
 		var sketch_percentage = Math.round(intersectionArea / polygonArea * 100);
+		var id = feature.getId();
 		intersections.addFeature(intersection);
-		var link = '<li>'
-		// TODO: If possible, highlight the corresponding polygon when hovering above a name.
-		link += '<input type="checkbox" id="citygml_' + feature.getId() + '" class="select_citygml" onclick="regionChooser.isDownloadPossible();"><label for="citygml_' + feature.getId() + '">' +  feature['name'] + '</label>';
+		var link = '<li onmouseover="regionChooser.highlightPolygon(' + id + ')" onmouseout="regionChooser.resetHighlight(' + id +')">';
+		link += '<input type="checkbox" id="citygml_' + feature.getId() + '" class="select_citygml" onclick="regionChooser.isDownloadPossible();">'
+		 	+ '<label for="citygml_' + feature.getId() + '">' + feature['name'] + '</label>';
 
 		link += " (" + citygml_percentage + "%";
 		if (sketch_percentage == 100) {
@@ -180,6 +181,17 @@ var regionChooser = (function(){
 		dataPanel.append(link + ")\n");
 	}
 	
+	publicScope.highlightPolygon = function(i) {
+		var feature = kml_source.getFeatureById(i);
+		feature.oldStyle = feature.getStyle();
+		feature.setStyle(polygon_style("#ff44a2", 0.7));
+	}
+	
+	publicScope.resetHighlight = function(i) {
+		var feature = kml_source.getFeatureById(i);
+		feature.setStyle(feature.oldStyle);
+	}
+	
 	publicScope.isDownloadPossible = function(){
 		var checkedBoxes = Array.from(document.querySelectorAll("input.select_citygml")).filter(c => c.checked);
 		document.getElementById("download_region_button").disabled = (checkedBoxes.length == 0);