From 6ca6f01d4383ffbf12525883527f9b27c2a9dd91 Mon Sep 17 00:00:00 2001
From: Eric Duminil <eric.duminil@gmail.com>
Date: Thu, 13 Oct 2022 14:40:13 +0200
Subject: [PATCH] Highlight polygon when hovering over name
---
.../website/script/simstadt_openlayers.js | 18 +++++++++++++++---
1 file changed, 15 insertions(+), 3 deletions(-)
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 50d34be..5f75a47 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);
--
GitLab