diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js index 50d34be16bcbdced01eba37e863a7963b800bbc4..5f75a473fec6c8ae40b2f58525e30c0822a7332f 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js +++ b/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);