ol-stac and stac-js migration

README.md

@@ -179,8 +179,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,62 +1,69 @@
-import { CRS } from 'leaflet';
 import STAC 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.
 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) {
+export default function configureBasemap(stac, i18n) {
   let targets = ['earth'];
   if (stac instanceof STAC) {
     if (stac.isCollection() && Utils.isObject(stac.summaries) && Array.isArray(stac.summaries['ssys:targets'])) {
@@ -70,5 +77,13 @@ export default function configureBasemap(stac, map, i18n) {
     }
   }
 
-  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

@@ -25,9 +25,9 @@ module.exports = {
 //      "pt-BR"
     ],
     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",
@@ -36,12 +36,10 @@ module.exports = {
     showKeywordsInItemCards: false,
     showKeywordsInCatalogCards: false,
     showThumbnailsAsAssets: false,
-    geoTiffResolution: 128,
     redirectLegacyUrls: false,
     itemsPerPage: 12,
     maxItemsPerPage: 1000,
     defaultThumbnailSize: null,
-    maxPreviewsOnMap: 50,
     crossOriginMedia: null,
     requestHeaders: {},
     requestQueryParameters: {},

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",