HTML: add safe bbox function for dateline crossing

Author: tomkralidis

pygeoapi/static/js/default.js

@@ -0,0 +1,14 @@
+
+function gen_safe_bbox(bbox) {
+  // generate a dateline safe bbox
+  // 
+  // args: bbox: array of minx, miny, maxx, maxy
+  // 
+  // returns: array of dateline safe bbox
+
+  if (Math.abs(bbox[2] - bbox[0]) > 180) {
+    bbox[2] += 360;
+  }
+
+  return bbox
+}

pygeoapi/templates/collections/collection.html

@@ -11,6 +11,8 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
     <script src='https://unpkg.com/leaflet-imageoverlay-ogcapi@0.1.0/Leaflet.ImageOverlay.OGCAPI.js'></script>
+    <script src='https://unpkg.com/leaflet-imageoverlay-ogcapi@0.1.0/Leaflet.ImageOverlay.OGCAPI.js'></script>
+    <script src="{{ config['server']['url'] }}/static/js/default.js"></script>
 {% endblock %}
 
 {% block body %}
@@ -148,11 +150,13 @@ <h3>{% trans %}Storage CRS{% endtrans %}</h3>
       }
     ));
 
+    var bbox = gen_safe_bbox({{ data['extent']['spatial']['bbox'][0] }});
+
     var bbox_layer = L.polygon([
-      ['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],
-      ['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][0] }}'],
-      ['{{ data['extent']['spatial']['bbox'][0][3] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}'],
-      ['{{ data['extent']['spatial']['bbox'][0][1] }}', '{{ data['extent']['spatial']['bbox'][0][2] }}']
+      [bbox[1], bbox[0]],
+      [bbox[3], bbox[0]],
+      [bbox[3], bbox[2]],
+      [bbox[1], bbox[2]]
     ]);
 
     var lbounds = bbox_layer.getBounds();

pygeoapi/templates/stac/collection_base.html

@@ -10,6 +10,7 @@
 {% block extrahead %}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
+    <script src="{{ config['server']['url'] }}/static/js/default.js"></script>
 {% endblock %}
 
 {% block body %}
@@ -102,12 +103,16 @@ <h4>{% trans %}Assets{% endtrans %}</h4>
             attribution: '{{ config['server']['map']['attribution'] | safe }}'
         }
     ));
+
+    var bbox = gen_safe_bbox({{ data['extent']['spatial']['bbox'][0] }});
+
     var bbox_layer = L.polygon([
-        [{{ data['extent']['spatial']['bbox'][0][1] }}, {{ data['extent']['spatial']['bbox'][0][0] }}],
-        [{{ data['extent']['spatial']['bbox'][0][3] }}, {{ data['extent']['spatial']['bbox'][0][0] }}],
-        [{{ data['extent']['spatial']['bbox'][0][3] }}, {{ data['extent']['spatial']['bbox'][0][2] }}],
-        [{{ data['extent']['spatial']['bbox'][0][1] }}, {{ data['extent']['spatial']['bbox'][0][2] }}],
+      [bbox[1], bbox[0]],
+      [bbox[3], bbox[0]],
+      [bbox[3], bbox[2]],
+      [bbox[1], bbox[2]]
     ]);
+
     map.addLayer(bbox_layer);
     map.fitBounds(bbox_layer.getBounds(), {maxZoom: 10});
     </script>

pygeoapi/templates/stac/item.html

@@ -97,12 +97,16 @@ <h4>{% trans %}Assets{% endtrans %}</h4>
             attribution: '{{ config['server']['map']['attribution'] | safe }}'
         }
     ));
+
+    var bbox = gen_safe_bbox({{ data['extent']['spatial']['bbox'][0] }});
+
     var bbox_layer = L.polygon([
-        [{{ data['bbox'][1] }}, {{ data['bbox'][0] }}],
-        [{{ data['bbox'][3] }}, {{ data['bbox'][0] }}],
-        [{{ data['bbox'][3] }}, {{ data['bbox'][2] }}],
-        [{{ data['bbox'][1] }}, {{ data['bbox'][2] }}],
+      [bbox[1], bbox[0]],
+      [bbox[3], bbox[0]],
+      [bbox[3], bbox[2]],
+      [bbox[1], bbox[2]]
     ]);
+
     map.addLayer(bbox_layer);
     map.fitBounds(bbox_layer.getBounds(), {maxZoom: 10});
     </script>