From 2b7053d22a74b415d9a09cea17e3b72b14320d31 Mon Sep 17 00:00:00 2001
From: Javier Jimenez Shaw <j1@jimenezshaw.com>
Date: Sat, 6 Jan 2024 14:21:00 +0100
Subject: [PATCH 1/2] paint a red polygon for area of gridfile on 'mouse over'

---
 index.html.in | 40 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/index.html.in b/index.html.in
index fa7c030..227d820 100644
--- a/index.html.in
+++ b/index.html.in
@@ -176,6 +176,37 @@ var featureLayer = new ol.layer.Vector({
   style: style
 });
 
+var singleFeatureSource = new ol.source.Vector({});
+
+var styleSingleFeature = new ol.style.Style({
+    stroke : new ol.style.Stroke(
+    {
+        color : 'rgba(255, 0, 0, 1)',
+        width : 3
+    }),
+    fill : new ol.style.Fill(
+    {
+        color :  'rgba(255, 0, 0, 0.1)'
+    })
+});
+
+var singleFeatureLayer = new ol.layer.Vector({
+  source: singleFeatureSource,
+  style: styleSingleFeature
+});
+
+function updateSingleFeatureLayer(geometry) {
+    singleFeatureSource.clear();
+
+    if (geometry) {
+        var json = new ol.format.GeoJSON();
+        var feature = new ol.Feature({
+            geometry: json.readGeometry(geometry)
+        });
+        singleFeatureSource.addFeature(feature);
+    }
+}
+
 function agencies_selector(checked) {
     list_agencies.forEach(function(id){
         document.getElementById('id_checkbox_' + id).checked = checked;
@@ -301,7 +332,8 @@ closer.onclick = function() {
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({source: new ol.source.OSM()}),
-    featureLayer],
+    featureLayer,
+    singleFeatureLayer],
   renderer: 'canvas',
   target: 'map',
   overlays: [overlay],
@@ -333,7 +365,11 @@ map.on('singleclick', function(evt) {
         var props = feature.getProperties();
 
         details_innerHTML += '<hr>';
-        details_innerHTML += '<p><a href="' + props.name + '">' + props.name + '</a>: '
+        var writer = new ol.format.GeoJSON();
+        var geoJson = props.geometry ? writer.writeGeometry(props.geometry) : '';
+        details_innerHTML += '<p onmouseout="updateSingleFeatureLayer()" ';
+        details_innerHTML += " onmouseover='updateSingleFeatureLayer(" + geoJson + ")'>"; // geoJson contains double quotes
+        details_innerHTML += '<a href="' + props.name + '">' + props.name + '</a>: '
         if( props.area_of_use ) {
             details_innerHTML += props.area_of_use + ', ';
         }

From 56736de2161b2debb464511437518e8fd8b32d44 Mon Sep 17 00:00:00 2001
From: Javier Jimenez Shaw <j1@jimenezshaw.com>
Date: Sat, 6 Jan 2024 14:21:14 +0100
Subject: [PATCH 2/2] update to index.html

---
 index.html | 40 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 581244f..b6f9e59 100644
--- a/index.html
+++ b/index.html
@@ -178,6 +178,37 @@ <h2>Content</h2>
   style: style
 });
 
+var singleFeatureSource = new ol.source.Vector({});
+
+var styleSingleFeature = new ol.style.Style({
+    stroke : new ol.style.Stroke(
+    {
+        color : 'rgba(255, 0, 0, 1)',
+        width : 3
+    }),
+    fill : new ol.style.Fill(
+    {
+        color :  'rgba(255, 0, 0, 0.1)'
+    })
+});
+
+var singleFeatureLayer = new ol.layer.Vector({
+  source: singleFeatureSource,
+  style: styleSingleFeature
+});
+
+function updateSingleFeatureLayer(geometry) {
+    singleFeatureSource.clear();
+
+    if (geometry) {
+        var json = new ol.format.GeoJSON();
+        var feature = new ol.Feature({
+            geometry: json.readGeometry(geometry)
+        });
+        singleFeatureSource.addFeature(feature);
+    }
+}
+
 function agencies_selector(checked) {
     list_agencies.forEach(function(id){
         document.getElementById('id_checkbox_' + id).checked = checked;
@@ -303,7 +334,8 @@ <h2>Content</h2>
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({source: new ol.source.OSM()}),
-    featureLayer],
+    featureLayer,
+    singleFeatureLayer],
   renderer: 'canvas',
   target: 'map',
   overlays: [overlay],
@@ -335,7 +367,11 @@ <h2>Content</h2>
         var props = feature.getProperties();
 
         details_innerHTML += '<hr>';
-        details_innerHTML += '<p><a href="' + props.name + '">' + props.name + '</a>: '
+        var writer = new ol.format.GeoJSON();
+        var geoJson = props.geometry ? writer.writeGeometry(props.geometry) : '';
+        details_innerHTML += '<p onmouseout="updateSingleFeatureLayer()" ';
+        details_innerHTML += " onmouseover='updateSingleFeatureLayer(" + geoJson + ")'>"; // geoJson contains double quotes
+        details_innerHTML += '<a href="' + props.name + '">' + props.name + '</a>: '
         if( props.area_of_use ) {
             details_innerHTML += props.area_of_use + ', ';
         }