ol-stac and stac-js migration

README.md

@@ -181,8 +181,8 @@ If you need even more flexibility, you need to dig into the Vue files and their
 ### Basemaps
 
 The file `basemaps.config.js` contains the configuration for the basemaps.
-You can update either just the `BASEMAPS` object or you can write a custom function `configureBasemap` that returns the desired options for [vue2-leaflet](https://vue2-leaflet.netlify.app/).
-[XYZ](https://vue2-leaflet.netlify.app/components/LTileLayer.html#props) and [WMS](https://vue2-leaflet.netlify.app/components/LWMSTileLayer.html#props) basemaps are supported and have different options that you can set.
+You can update either just the `BASEMAPS` object or you can write a custom function `configureBasemap` that returns the desired options for OpenLayers.
+XYZ, WMTS, and WMS basemaps are supported and have different options that you can set.
 
 ### Actions
 

basemaps.config.js

@@ -1,74 +1,91 @@
-import { CRS } from 'leaflet';
-import STAC from './src/models/stac';
+import { Collection, Item } from './src/models/stac';
 import Utils from './src/utils';
 
 const USGS_ATTRIBUTION = 'USGS Astrogeology';
-const WMS = 'LWMSTileLayer';
-const XYZ = 'LTileLayer';
+const WMS = 'TileWMS';
+const XYZ = 'XYZ';
 
+// All options (except for 'is') follow the OpenLayers options for the respective source class.
+// Projections (except for EPSG:3857 and EPSG:4326) must be listed in the `crs` array in the config.js.
+//
+// There's a layerCreated callback that can be used to modify the layer and source after it has been created:
+// async layerCreated(Layer layer, Source source) => Layer
 const BASEMAPS = {
-  earth: {
-    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-    name: 'OpenStreetMap',
-    is: XYZ,
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.'
-  },
-  europa: {
-    baseUrl: 'https://planetarymaps.usgs.gov/cgi-bin/mapserv?map=/maps/jupiter/europa_simp_cyl.map',
-    is: WMS,
-    name: 'USGS Europa',
-    attribution: USGS_ATTRIBUTION,
-    crs: CRS.EPSG4326,
-    format: 'image/png',
-    layers: 'GALILEO_VOYAGER'
-  },
-  mars: {
-    baseUrl: 'https://planetarymaps.usgs.gov/cgi-bin/mapserv?map=/maps/mars/mars_simp_cyl.map',
-    is: WMS,
-    name: 'USGS Mars',
-    attribution: USGS_ATTRIBUTION,
-    crs: CRS.EPSG4326,
-    format: 'image/png',
-    layers: 'MDIM21'
-  },
-  moon: {
-    baseUrl: 'https://planetarymaps.usgs.gov/cgi-bin/mapserv?map=/maps/earth/moon_simp_cyl.map',
-    is: WMS,
-    name: 'USGS Moon',
-    attribution: USGS_ATTRIBUTION,
-    crs: CRS.EPSG4326,
-    format: 'image/png',
-    layers: 'LROC_WAC'
-  }
+  earth: [
+    {
+      url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      is: XYZ,
+      title: 'OpenStreetMap',
+      attributions: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.',
+      projection: "EPSG:3857"
+    }
+  ],
+  europa: [
+    {
+      url: 'https://planetarymaps.usgs.gov/cgi-bin/mapserv?map=/maps/jupiter/europa_simp_cyl.map',
+      is: WMS,
+      title: 'USGS Europa',
+      attributions: USGS_ATTRIBUTION,
+      projection: 'EPSG:4326',
+      params: {
+        FORMAT: 'image/png',
+        LAYERS: 'GALILEO_VOYAGER'
+      }
+    },
+  ],
+  mars: [
+    {
+      url: 'https://planetarymaps.usgs.gov/cgi-bin/mapserv?map=/maps/mars/mars_simp_cyl.map',
+      is: WMS,
+      title: 'USGS Mars',
+      attributions: USGS_ATTRIBUTION,
+      projection: 'EPSG:4326',
+      params: {
+        FORMAT: 'image/png',
+        LAYERS: 'MDIM21'
+      }
+    }
+  ],
+  moon: [
+    {
+      url: 'https://planetarymaps.usgs.gov/cgi-bin/mapserv?map=/maps/earth/moon_simp_cyl.map',
+      is: WMS,
+      title: 'USGS Moon',
+      attributions: USGS_ATTRIBUTION,
+      projection: 'EPSG:4326',
+      params: {
+        FORMAT: 'image/png',
+        LAYERS: 'LROC_WAC'
+      }
+    }
+  ],
 };
 
-/**
- * @typedef BasemapOptions
- * @type {Object}
- * @property {string} is Component: LWMSTileLayer or LTileLayer
- * @see https://vue2-leaflet.netlify.app/components/
- */
-
 /**
  * 
  * @param {Object} stac The STAC object
- * @param {Object} map The Leaflet map object
  * @param {Object} i18n Vue I18N object
  * @returns {Array.<BasemapOptions>}
  */
-export default function configureBasemap(stac, map, i18n) {
-  let targets = ['earth'];
-  if (stac instanceof STAC) {
-    if (stac.isCollection() && Utils.isObject(stac.summaries) && Array.isArray(stac.summaries['ssys:targets'])) {
-      targets = stac.summaries['ssys:targets'];
-    }
-    else if (stac.isCollection() && Array.isArray(stac['ssys:targets'])) {
-      targets = stac['ssys:targets'];
-    }
-    else if (stac.isItem() && Array.isArray(stac.properties['ssys:targets'])) {
-      targets = stac.properties['ssys:targets'];
-    }
+export default function configureBasemap(stac, i18n) {
+  let targets;
+  if (stac instanceof Collection) {
+    targets = stac.getSummary('ssys:targets');
+  }
+  if (!targets) {
+    targets = stac.getMetadata('ssys:targets');
+  }
+  if (!targets) {
+    targets = ['earth'];
   }
 
-  return targets.map(target => BASEMAPS[target.toLowerCase()]);
+  let layers = [];
+  for (const target of targets) {
+    const maps = BASEMAPS[target.toLowerCase()];
+    if (!Array.isArray(maps)) {
+      continue;
+    }
+    layers = layers.concat(maps);
+  }
+  return layers;
 };

config.js

@@ -27,9 +27,9 @@ module.exports = {
         "id"
     ],
     apiCatalogPriority: null,
-    useTileLayerAsFallback: true,
+    useTileLayerAsFallback: false,
     displayGeoTiffByDefault: false,
-    buildTileUrlTemplate: ({href, asset}) => "https://tiles.rdnt.io/tiles/{z}/{x}/{y}@2x?url=" + encodeURIComponent(href),
+    buildTileUrlTemplate: null,
     stacProxyUrl: null,
     pathPrefix: "/",
     historyMode: "history",
@@ -38,16 +38,15 @@ module.exports = {
     showKeywordsInItemCards: false,
     showKeywordsInCatalogCards: false,
     showThumbnailsAsAssets: false,
-    geoTiffResolution: 128,
     redirectLegacyUrls: false,
     itemsPerPage: 12,
     maxItemsPerPage: 1000,
     defaultThumbnailSize: null,
-    maxPreviewsOnMap: 50,
     crossOriginMedia: null,
     requestHeaders: {},
     requestQueryParameters: {},
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
-    authConfig: null
+    authConfig: null,
+    crs: {}
 };

config.schema.json

@@ -152,12 +152,6 @@
         "boolean"
       ]
     },
-    "geoTiffResolution": {
-      "type": [
-        "integer"
-      ],
-      "minimum": 1
-    },
     "redirectLegacyUrls": {
       "type": [
         "boolean"
@@ -188,12 +182,6 @@
         ]
       }
     },
-    "maxPreviewsOnMap": {
-      "type": [
-        "integer"
-      ],
-      "minimum": 1
-    },
     "crossOriginMedia": {
       "type": [
         "string",
@@ -243,6 +231,11 @@
           "$ref": "https://stac-extensions.github.io/authentication/v1.1.0/schema.json"
         }
       ]
+    },
+    "crs": {
+      "type": [
+        "object"
+      ]
     }
   }
 }