Merge pull request #116 from jjimenezshaw/enhance-geometry-mouse

UI: show red polygon on 'mouse over' the list
OSGeo · Jan 6, 2024 · a810a6d · a810a6d
2 parents 7b90b78 + 56736de
commit a810a6d
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 4 deletions.
diff --git 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 + ', ';
         }

diff --git 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 + ', ';
         }