Fix issues with relative paths + clean-up #31

Co-authored-by: Marc Pfister <marc.pfister@gmail.com>
stac-utils · Apr 3, 2022 · c19ef9f · c19ef9f
1 parent 00d8324
commit c19ef9f
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 25 deletions.
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import parseGeoRaster from "georaster";
 import GeoRasterLayer from "georaster-layer-for-leaflet";
 import reprojectBoundingBox from "reproject-bbox";
 import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
+import URI from "urijs";
 
 import bboxToLatLngBounds from "./utils/bboxToLatLngBounds.js";
 import bboxLayer from "./utils/bboxLayer.js";
@@ -13,8 +14,6 @@ import imageOverlay from "./utils/image-overlay.js";
 import tileLayer from "./utils/tile-layer.js";
 import isBoundingBox from "./utils/is-bounding-box.js";
 import getBoundingBox from "./utils/get-bounding-box.js";
-import toAbsolute from "./utils/to-absolute.js";
-import isRelative from "./utils/is-relative.js";
 import { DATA_TYPES, EVENT_DATA_TYPES, MIME_TYPES } from "./data.js";
 import createGeoRasterLayer from "./utils/create-georaster-layer.js";
 
@@ -101,19 +100,24 @@ const stacLayer = async (data, options = {}) => {
   const selfHref = findSelfHref(data);
   if (debugLevel >= 2) console.log("[stac-layer] self href:", selfHref);
 
-  let baseUrl = options.baseUrl || selfHref?.substring(0, selfHref.lastIndexOf("/") + 1);
-  // add a / to the end of the base url to make sure toAbsolute works later on
-  if (baseUrl && !baseUrl.endsWith("/")) baseUrl += "/";
+  let baseUrl = options.baseUrl || selfHref;
   if (debugLevel >= 2) console.log("[stac-layer] base url:", baseUrl);
 
   // default to filling in the bounds layer unless we successfully visualize an image
   let fillOpacity = 0.2;
 
   const toAbsoluteHref = href => {
-    if (!href) throw new Error("[stac-layer] can't convert nothing to an absolute href");
-    if (!isRelative(href)) return href;
-    if (!baseUrl) throw new Error(`[stact-layer] can't determine an absolute url for "${href}" without a baseUrl`);
-    return toAbsolute(href, baseUrl);
+    if (!href) {
+      throw new Error("[stac-layer] can't convert nothing to an absolute href");
+    }
+    let uri = URI(href);
+    if (uri.is("relative")) {
+      if (!baseUrl) {
+        throw new Error(`[stact-layer] can't determine an absolute url for "${href}" without a baseUrl`);
+      }
+      uri = uri.absoluteTo(baseUrl);
+    }
+    return uri.toString();
   };
 
   const layerGroup = L.layerGroup();

diff --git a/src/test/stac-item-asset/relative-asset.html b/src/test/stac-item-asset/relative-asset.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+  <style>
+    #map {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map"></div>
+  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+  <script src="/index.js" type="module"></script>
+  <script type="module">
+    // initalize leaflet map
+    const map = L.map('map').setView([0, 0], 5);
+
+    // add OpenStreetMap basemap
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    const feature = {
+      "type": "image/tiff; application=geotiff; profile=cloud-optimized",
+      "title": "Visual (RGB) Image",
+      "href": "./103001000AC5B000-visual.tif",
+      "proj:bbox": [
+        619843.75,
+        8889843.75,
+        625156.25,
+        8895156.25
+      ],
+      "proj:shape": [
+        17408,
+        17408
+      ],
+      "proj:transform": [
+        0.30517578125,
+        0.0,
+        619843.75,
+        0.0,
+        -0.30517578125,
+        8895156.25,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "eo:bands": [
+        {
+          "name": "BAND_R",
+          "common_name": "red",
+          "description": "Red"
+        },
+        {
+          "name": "BAND_G",
+          "common_name": "green",
+          "description": "Green"
+        },
+        {
+          "name": "BAND_B",
+          "common_name": "blue",
+          "description": "Blue"
+        }
+      ]
+    };
+
+    const lyr = await L.stacLayer(feature, {
+      debugLevel: 4,
+      resolution: 128,
+      baseUrl: "https://ard.maxar.com/samples/v4/rio_deforestation/19/300022033202/2011-05-11/103001000AC5B000.json",
+    });
+    console.log("(initial) lyr.stac:", lyr.stac);
+    lyr.on("fallback", evt => {
+      console.log("fallback:", evt);
+      console.log("(after fallback) lyr.stac:", lyr.stac);
+    });
+    lyr.addTo(map);
+    map.fitBounds(lyr.getBounds());
+  </script>
+</body>
+
+</html>
diff --git a/src/utils/is-relative.js b/src/utils/is-relative.js
diff --git a/src/utils/to-absolute.js b/src/utils/to-absolute.js