Repository: nansencenter/django-geo-spaas (language: python)

Issue:
Highlight polygon when mouse hovers over table

Highlight polygon when mouse hovers over table

Highlight polygon when mouse hovers over table

Highlight polygon when mouse hovers over table



Discussion / hints:
that should work:
```javascript
var footprints_layer_style = {
    "color": "#0000ff",
    "weight": 1,
    "opacity": 0.5,
    "fillOpacity": 0.1,
};

function add_geojson_geometries(map) {
    var geoms = document.getElementsByClassName("geometry_ref");
    for (var i = 0; i < geoms.length; i++) {
        all_geoms.push(new L.GeoJSON.AJAX(
        "https://web.nersc.no" + geoms.item(i).attributes.ajax_url.value,
        {style: footprints_layer_style}).addTo(map));
    };
};

function map_init_callback(e){
    map = e.detail.map;
};

$(window).on('map:init', map_init_callback);

var polygons = {};

$(document).ready(function(){
  $(".geometry_ref").each(function(){
    polygons[$(this).attr("ajax_url")] = new L.GeoJSON.AJAX(
        "https://web.nersc.no" + $(this).attr("ajax_url"),
        {style: footprints_layer_style}).addTo(map);
  });

  $(".geometry_ref").hover(
  function(){
    $(this).css("background-color", "#ffeeee");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#FF0000'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#FF0000';
   },
  function(){
    $(this).css("background-color", "#ffffff");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#0000FF'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#0000FF';
  },
  );
});
```
that should work:
```javascript
var footprints_layer_style = {
    "color": "#0000ff",
    "weight": 1,
    "opacity": 0.5,
    "fillOpacity": 0.1,
};

function add_geojson_geometries(map) {
    var geoms = document.getElementsByClassName("geometry_ref");
    for (var i = 0; i < geoms.length; i++) {
        all_geoms.push(new L.GeoJSON.AJAX(
        "https://web.nersc.no" + geoms.item(i).attributes.ajax_url.value,
        {style: footprints_layer_style}).addTo(map));
    };
};

function map_init_callback(e){
    map = e.detail.map;
};

$(window).on('map:init', map_init_callback);

var polygons = {};

$(document).ready(function(){
  $(".geometry_ref").each(function(){
    polygons[$(this).attr("ajax_url")] = new L.GeoJSON.AJAX(
        "https://web.nersc.no" + $(this).attr("ajax_url"),
        {style: footprints_layer_style}).addTo(map);
  });

  $(".geometry_ref").hover(
  function(){
    $(this).css("background-color", "#ffeeee");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#FF0000'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#FF0000';
   },
  function(){
    $(this).css("background-color", "#ffffff");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#0000FF'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#0000FF';
  },
  );
});
```
that should work:
```javascript
var footprints_layer_style = {
    "color": "#0000ff",
    "weight": 1,
    "opacity": 0.5,
    "fillOpacity": 0.1,
};

function add_geojson_geometries(map) {
    var geoms = document.getElementsByClassName("geometry_ref");
    for (var i = 0; i < geoms.length; i++) {
        all_geoms.push(new L.GeoJSON.AJAX(
        "https://web.nersc.no" + geoms.item(i).attributes.ajax_url.value,
        {style: footprints_layer_style}).addTo(map));
    };
};

function map_init_callback(e){
    map = e.detail.map;
};

$(window).on('map:init', map_init_callback);

var polygons = {};

$(document).ready(function(){
  $(".geometry_ref").each(function(){
    polygons[$(this).attr("ajax_url")] = new L.GeoJSON.AJAX(
        "https://web.nersc.no" + $(this).attr("ajax_url"),
        {style: footprints_layer_style}).addTo(map);
  });

  $(".geometry_ref").hover(
  function(){
    $(this).css("background-color", "#ffeeee");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#FF0000'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#FF0000';
   },
  function(){
    $(this).css("background-color", "#ffffff");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#0000FF'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#0000FF';
  },
  );
});
```
that should work:
```javascript
var footprints_layer_style = {
    "color": "#0000ff",
    "weight": 1,
    "opacity": 0.5,
    "fillOpacity": 0.1,
};

function add_geojson_geometries(map) {
    var geoms = document.getElementsByClassName("geometry_ref");
    for (var i = 0; i < geoms.length; i++) {
        all_geoms.push(new L.GeoJSON.AJAX(
        "https://web.nersc.no" + geoms.item(i).attributes.ajax_url.value,
        {style: footprints_layer_style}).addTo(map));
    };
};

function map_init_callback(e){
    map = e.detail.map;
};

$(window).on('map:init', map_init_callback);

var polygons = {};

$(document).ready(function(){
  $(".geometry_ref").each(function(){
    polygons[$(this).attr("ajax_url")] = new L.GeoJSON.AJAX(
        "https://web.nersc.no" + $(this).attr("ajax_url"),
        {style: footprints_layer_style}).addTo(map);
  });

  $(".geometry_ref").hover(
  function(){
    $(this).css("background-color", "#ffeeee");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#FF0000'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#FF0000';
   },
  function(){
    $(this).css("background-color", "#ffffff");
    polygons[$(this).attr("ajax_url")].setStyle({color: '#0000FF'});
    polygons[$(this).attr("ajax_url")].options.style.color = '#0000FF';
  },
  );
});
```

Fix patch:
diff --git a/geospaas/base_viewer/static/base_viewer/js/base_viewer.js b/geospaas/base_viewer/static/base_viewer/js/base_viewer.js
index 7a8fe5ce..6923a5bb 100644
--- a/geospaas/base_viewer/static/base_viewer/js/base_viewer.js
+++ b/geospaas/base_viewer/static/base_viewer/js/base_viewer.js
@@ -5,18 +5,23 @@ var footprints_layer_style = {
     "fillOpacity": 0.1,
 };
 
-function add_geojson_geometries(map) {
-    var geoms = document.getElementsByClassName("geometry_ref");
-    for (var i = 0; i < geoms.length; i++) {
-        var jsonTest = new L.GeoJSON.AJAX(
-        geoms.item(i).attributes.ajax_url.value,
-        {style: footprints_layer_style}).addTo(map);
-    };
-};
+var polygons = {};
 
-function map_init_callback(e){
-    var detail = e.detail;
-    add_geojson_geometries(detail.map)
-};
+$(document).ready(function(){
+  $(".dataset_row").each(function(){
+    polygons[$(this).attr("ajax_url")] = new L.GeoJSON.AJAX(
+        $(this).attr("ajax_url"),
+        {style: footprints_layer_style}).addTo(window.maps[0]);
+  });
 
-window.addEventListener("map:init", map_init_callback, false);
+  $(".dataset_row").hover(
+  function(){
+    $(this).css("background-color", "#ffeeee");
+    polygons[$(this).attr("ajax_url")].setStyle({color: '#FF0000'});
+   },
+  function(){
+    $(this).css("background-color", "#ffffff");
+    polygons[$(this).attr("ajax_url")].setStyle({color: '#0000FF'});
+  },
+  );
+});
diff --git a/geospaas/base_viewer/templates/base_viewer/elements.html b/geospaas/base_viewer/templates/base_viewer/elements.html
index db9cdf90..a0629ad6 100644
--- a/geospaas/base_viewer/templates/base_viewer/elements.html
+++ b/geospaas/base_viewer/templates/base_viewer/elements.html
@@ -11,9 +11,8 @@
     {% if page_obj %}
 
     {% for ds in page_obj %}
-    <tr >
-        <td class="place_ds">
-            <div class="geometry_ref" ajax_url="{% url 'base_viewer:geometry_geojson' ds.geographic_location.pk %}">
+    <tr class="dataset_row" ajax_url="{% url 'base_viewer:geometry_geojson' ds.geographic_location.pk %}" >
+        <td >
             {% for url in ds.dataseturi_set.all %}
             {% if show_local_address or url.service != local_file_service %}
                 {{ url.uri}} <br>
@@ -21,7 +20,6 @@
               hidden local address of dataset <br>
             {% endif %}
             {% endfor %}
-            </div>
         </td>
 
     </tr>
diff --git a/geospaas/base_viewer/templates/base_viewer/page_structure.html b/geospaas/base_viewer/templates/base_viewer/page_structure.html
index 4e083d99..45f61d7f 100644
--- a/geospaas/base_viewer/templates/base_viewer/page_structure.html
+++ b/geospaas/base_viewer/templates/base_viewer/page_structure.html
@@ -7,6 +7,7 @@
     {% leaflet_js plugins="ALL" %}
     {% leaflet_css plugins="ALL" %}
     <link rel="stylesheet" href="{% static 'base_viewer/styles.css' %}" >
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>    
     <script src='{% static "base_viewer/js/leaflet.ajax.min.js" %}'></script>
     <script src='{% static "base_viewer/js/base_viewer.js" %}'></script>
 </head>


Test patch:
diff --git a/geospaas/base_viewer/tests.py b/geospaas/base_viewer/tests.py
index 3c85f587..c0d88bf7 100644
--- a/geospaas/base_viewer/tests.py
+++ b/geospaas/base_viewer/tests.py
@@ -29,7 +29,7 @@ def test_post_with_proper_polygon(self, mock_django_settings):
             'time_coverage_end': timezone.datetime(2020, 1, 1)})
         self.assertEqual(res.status_code, 200)
         soup = BeautifulSoup(str(res.content), features="lxml")
-        all_tds = soup.find_all("td", class_="place_ds")
+        all_tds = soup.find_all("tr", class_="dataset_row")
         self.assertEqual(len(all_tds), 1)
         # the first dataset of fixtures must be in the html
         self.assertIn('file://localhost/some/test/file1.ext', all_tds[0].text)
@@ -46,7 +46,7 @@ def test_post_with_proper_polygon_public_version(self):
             'time_coverage_end': timezone.datetime(2020, 1, 1)})
         self.assertEqual(res.status_code, 200)
         soup = BeautifulSoup(str(res.content), features="lxml")
-        all_tds = soup.find_all("td", class_="place_ds")
+        all_tds = soup.find_all("tr", class_="dataset_row")
         self.assertEqual(len(all_tds), 1)
         # the first dataset of fixtures must be in the html
         self.assertNotIn('file://localhost/some/test/file1.ext', all_tds[0].text)
@@ -80,7 +80,7 @@ def test_post_without_polygon(self, mock_django_settings):
             'source': 1})
         self.assertEqual(res.status_code, 200)
         soup = BeautifulSoup(str(res.content), features="lxml")
-        all_tds = soup.find_all("td", class_="place_ds")
+        all_tds = soup.find_all("tr", class_="dataset_row")
         self.assertEqual(len(all_tds), 2)
         self.assertIn('file://localhost/some/test/file1.ext', all_tds[0].text)
         self.assertIn('file://localhost/some/test/file2.ext', all_tds[1].text)
@@ -95,7 +95,7 @@ def test_post_without_polygon_public_version(self):
             'source': 1})
         self.assertEqual(res.status_code, 200)
         soup = BeautifulSoup(str(res.content), features="lxml")
-        all_tds = soup.find_all("td", class_="place_ds")
+        all_tds = soup.find_all("tr", class_="dataset_row")
         self.assertEqual(len(all_tds), 2)
         self.assertNotIn('file://localhost/some/test/file1.ext', all_tds[0].text)
         self.assertNotIn('file://localhost/some/test/file2.ext', all_tds[1].text)
@@ -139,11 +139,11 @@ def test_get(self, mock_django_settings):
         res = self.client.get('/tests/')
         self.assertEqual(res.status_code, 200)
         soup = BeautifulSoup(str(res.content), features="lxml")
-        all_tds = soup.find_all("td", class_="place_ds")
+        all_tds = soup.find_all("tr", class_="dataset_row")
         self.assertEqual(len(all_tds), 2)
         self.assertIn('file://localhost/some/test/file1.ext', all_tds[0].text)
         self.assertIn('file://localhost/some/test/file2.ext', all_tds[1].text)
-        grefs=soup.find_all("div", class_="geometry_ref")
+        grefs=soup.find_all("tr", class_="dataset_row")
         self.assertEqual(grefs[0].attrs['ajax_url'], '/tests/geometry/1')
 
     def test_get_public_version(self):
@@ -152,11 +152,11 @@ def test_get_public_version(self):
         res = self.client.get('/tests/')
         self.assertEqual(res.status_code, 200)
         soup = BeautifulSoup(str(res.content), features="lxml")
-        all_tds = soup.find_all("td", class_="place_ds")
+        all_tds = soup.find_all("tr", class_="dataset_row")
         self.assertEqual(len(all_tds), 2)
         self.assertNotIn('file://localhost/some/test/file1.ext', all_tds[0].text)
         self.assertNotIn('file://localhost/some/test/file2.ext', all_tds[1].text)
-        grefs=soup.find_all("div", class_="geometry_ref")
+        grefs=soup.find_all("tr", class_="dataset_row")
         self.assertEqual(grefs[0].attrs['ajax_url'], '/tests/geometry/1')
 
 
diff --git a/tests/settings.py b/tests/settings.py
index 0dc283c2..bcf8f14c 100644
--- a/tests/settings.py
+++ b/tests/settings.py
@@ -134,3 +134,8 @@
 
 
 SHOW_LOCAL_ADDRESS = False
+
+LEAFLET_CONFIG = {
+    'NO_GLOBALS': False,
+}
+