Merge pull request #133 from developmentseed/patch/hide-map-elelemt

hide map element in HTML pages when collections/items do not have spatial component

CHANGES.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
 Note: Minor version `0.X.0` update might break the API, It's recommended to pin `tipg` to minor version: `tipg>=0.1,<0.2`
 
+## [unreleased]
+
+- hide map element in HTML pages when collections/items do not have spatial component
+
 ## [0.4.4] - 2023-10-03
 
 ### fixed

tipg/templates/collection.html

@@ -47,24 +47,30 @@ <h2>Links</h2>
 
 <script>
   $(function() {
-    var map = L.map('map').setView([0, 0], 1);
-    map.addLayer(new L.TileLayer(
-      'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 18,
-        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
-      }
-    ));
+    var collection = {{ response|tojson }};
+    if (collection.extent && collection.extent.spatial){
+      var bbox = collection.extent.spatial.bbox[0]
+      var bbox_polygon = L.polygon([
+        [bbox[1], bbox[0]],
+        [bbox[1], bbox[2]],
+        [bbox[3], bbox[2]],
+        [bbox[3], bbox[0]]
+      ]);
 
-    var bbox = {{ ('extent' in response and response.extent.spatial.bbox.0) or [-180,-90,180,90] }};
-    var bbox_polygon = L.polygon([
-      [bbox[1], bbox[0]],
-      [bbox[1], bbox[2]],
-      [bbox[3], bbox[2]],
-      [bbox[3], bbox[0]]
-    ]);
+      var map = L.map('map').setView([0, 0], 1);
+      map.addLayer(new L.TileLayer(
+        'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          maxZoom: 18,
+          attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+        }
+      ));
+
+      map.addLayer(bbox_polygon);
+      map.fitBounds(bbox_polygon.getBounds());
+    } else {
+      document.getElementById("map").style.display = "none";
+    }
 
-    map.addLayer(bbox_polygon);
-    map.fitBounds(bbox_polygon.getBounds());
   });
 </script>
 

tipg/templates/item.html

@@ -32,60 +32,65 @@ <h2>Properties</h2>
 
 <script>
   var geojson = {{ response|tojson }};
-  var map = L.map('map').setView([0, 0], 1);
-  map.addLayer(new L.TileLayer(
-    'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      maxZoom: 18,
-      attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
-    }
-  ));
-
-  function displayValue(value) {
-    switch (typeof value) {
-      case 'string':
-        return value;
-      case 'number':
-        return value.toString();
-      case 'object':
-        if (value instanceof Array) {
-          return value.map(displayValue).join(', ');
-        } else {
-          return JSON.stringify(value);
-        }
-      default:
-        return '';
+  if (geojson.geometry) {
+    var map = L.map('map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+      'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+      }
+    ));
+
+    function displayValue(value) {
+      switch (typeof value) {
+        case 'string':
+          return value;
+        case 'number':
+          return value.toString();
+        case 'object':
+          if (value instanceof Array) {
+            return value.map(displayValue).join(', ');
+          } else {
+            return JSON.stringify(value);
+          }
+        default:
+          return '';
+      }
     }
-  }
 
-  function addPopup(feature, layer) {
-    if (feature.properties) {
-      var popupElm = document.createElement('div');
-      popupElm.style.overflowX = 'scroll';
+    function addPopup(feature, layer) {
+      if (feature.properties) {
+        var popupElm = document.createElement('div');
+        popupElm.style.overflowX = 'scroll';
 
-      Object.keys(geojson.properties).map(prop => {
-        var propElm = document.createElement('div');
+        Object.keys(geojson.properties).map(prop => {
+          var propElm = document.createElement('div');
 
-        var bElm = document.createElement('b');
-        bElm.innerText = prop;
-        propElm.appendChild(bElm);
-        var valueElm = document.createTextNode(` : ${displayValue(feature.properties[prop])}`);
-        propElm.appendChild(valueElm);
+          var bElm = document.createElement('b');
+          bElm.innerText = prop;
+          propElm.appendChild(bElm);
+          var valueElm = document.createTextNode(` : ${displayValue(feature.properties[prop])}`);
+          propElm.appendChild(valueElm);
 
-        var brElm = document.createElement('br');
-        propElm.appendChild(brElm);
+          var brElm = document.createElement('br');
+          propElm.appendChild(brElm);
 
-        popupElm.appendChild(propElm);
-      })
+          popupElm.appendChild(propElm);
+        })
 
-      layer.bindPopup(popupElm);
+        layer.bindPopup(popupElm);
+      }
     }
+
+    var features = L.geoJSON(geojson, {
+      onEachFeature: addPopup
+    }).addTo(map);
+
+    map.fitBounds(features.getBounds());
+  } else {
+    document.getElementById("map").style.display = "none";
   }
 
-  var features = L.geoJSON(geojson, {
-    onEachFeature: addPopup
-  }).addTo(map);
-
-  map.fitBounds(features.getBounds());
 </script>
 
 {% include "footer.html" %}

tipg/templates/items.html

@@ -84,32 +84,38 @@ <h1>Collection Items: {{ response.title or response.id }}</h1>
   window.location.href = url;
 }
 $(function() {
-
   //
   // mapping
   //
   var geojson = {{ response|tojson }};
-  var map = L.map('map').setView([0, 0], 1);
-  map.addLayer(new L.TileLayer(
-    'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      maxZoom: 18,
-      attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+
+  var features = (geojson.features) ? geojson.features : [];
+  var hasGeom = features.some(feat => feat.geometry);
+  if (hasGeom) {
+    var map = L.map('map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+      'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+      }
+    ));
+
+    function addPopup(feature, layer) {
+      var aElm = document.createElement('a');
+      aElm.setAttribute('href', `${currentURL}/${feature.id}`);
+      aElm.setAttribute('target', '_blank');
+      aElm.innerText = feature.id;
+      layer.bindPopup(aElm);
     }
-  ));
-
-  function addPopup(feature, layer) {
-    var aElm = document.createElement('a');
-    aElm.setAttribute('href', `${currentURL}/${feature.id}`);
-    aElm.setAttribute('target', '_blank');
-    aElm.innerText = feature.id;
-    layer.bindPopup(aElm);
-  }
 
-  var features = L.geoJSON(geojson, {
-    onEachFeature: addPopup
-  }).addTo(map);
+    var features = L.geoJSON(geojson, {
+      onEachFeature: addPopup
+    }).addTo(map);
 
-  map.fitBounds(features.getBounds());
+    map.fitBounds(features.getBounds());
+  } else {
+    document.getElementById("map").style.display = "none";
+  }
 
   //
   // paging