basemaps.config.js

-import { CRS } from 'leaflet';
 import STAC from './src/models/stac';
 import Utils from './src/utils';
 
-const USGS_ATTRIBUTION = 'USGS Astrogeology';
-const OSUNA_ATTRIBUTION = 'NASA/JPL-Caltech/Space Science Institute/Osuna';
-const WMS = 'LWMSTileLayer';
-const XYZ = 'LTileLayer';
-
 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'
-  },
   titan: {
-    baseUrl: 'https://vims.univ-nantes.fr/data/tiles/iss/{z}/{x}/{y}.png',
-    is: WMS,
+    url: 'https://vims.univ-nantes.fr/data/tiles/iss/{z}/{x}/{y}.png',  // CRS = EPSG4326 (enforced in Map.vue)
+    is: 'LTileLayer',
     name: 'Titan Cassini/ISS',
-    attribution: 'NASA/JPL-Caltech/Space Science Institute/Osuna',
-    center: [0.0, -180.0],
-    crs: CRS.EPSG4326,
+    attribution: 'NASA/JPL-Caltech/Space Science Institute/Osuna-LPG',
     format: 'image/png',
-    layers: 'TITAN_ISS'
+    layers: 'ISS'
   }
 };
 

src/components/Map.vue

 <template>
   <div class="map-container">
-    <l-map class="map" v-if="show" :class="stac.type" @ready="init" :options="mapOptions">
+    <l-map class="map" v-if="show" :class="stac.type" @ready="init" :crs="crs" :options="mapOptions">
       <l-control-fullscreen />
       <l-control-zoom :key="`z${ix}`" v-bind="zoomControlTexts" position="topleft" />
       <l-control-layers v-if="showLayerControl" position="bottomleft" ref="layerControl" />
@@ -10,7 +10,7 @@
       />
       <l-tile-layer
         v-for="xyz of xyzLinks" ref="overlays" :key="xyz.url" layerType="overlay"
-        :name="xyz.name" :url="xyz.url" :subdomains="xyz.subdomains" :options="xyz.options" 
+        :name="xyz.name" :url="xyz.url" :subdomains="xyz.subdomains" :options="xyz.options"
       />
       <l-geo-json v-if="geojson" ref="geojson" :geojson="geojson" :options="{onEachFeature: showPopup}" :optionsStyle="{color: secondaryColor, weight: secondaryWeight}" />
     </l-map>
@@ -41,6 +41,7 @@ import STAC from '../models/stac';
 import { object as formatObject, string as formatString } from '@radiantearth/stac-fields/datatypes';
 import { BPopover } from 'bootstrap-vue';
 import getBasemaps from '../../basemaps.config';
+import { CRS } from "leaflet";
 
 // Fix missing icons: https://vue2-leaflet.netlify.app/quickstart/#marker-icons-are-missing
 import { Icon } from 'leaflet';
@@ -94,6 +95,7 @@ export default {
   },
   data() {
     return {
+      crs: CRS.EPSG4326,
       secondaryColor: '#FF8833',
       secondaryWeight: 2,
       show: false,
@@ -103,7 +105,9 @@ export default {
       geojson: null,
       itemPreviewsLayer: null,
       mapOptions: {
-        zoomControl: false
+        zoomControl: false,
+        minZoom: 0,
+        zoom: 1,
       },
       dblClickState: null,
       selectedItem: null,
@@ -259,7 +263,7 @@ export default {
         else if (this.stac.isCollection()) {
           options.bbox = this.stac?.extent?.spatial?.bbox[0];
         }
-        
+
         if (this.stacLayerData.type === geojsonMediaType) {
           this.geojson = await this.$store.dispatch('loadGeoJson', this.stacLayerData);
           this.$emit('dataChanged', this.stacLayerData);
@@ -413,7 +417,7 @@ export default {
       layer.bindPopup(html);
     },
     addBoundsSelector() {
-      this.areaSelect = L.areaSelect({ // eslint-disable-line 
+      this.areaSelect = L.areaSelect({ // eslint-disable-line
         width: 300,
         height: 200,
         minWidth: 20,

src/theme/page.scss

@@ -51,9 +51,16 @@ body {
     }
 
     .map {
-        height: 350px;
+        height: 50vw;
         background-color: transparent;
         @include border-radius($border-radius);
+
+        @include media-breakpoint-up(lg) {
+          height: 25vw;
+        }
+        @include media-breakpoint-up(lg) {
+          max-height: 20vw;
+        }
     }
 
     h1 {
@@ -73,7 +80,7 @@ body {
         .nav-pills {
             margin: 0;
             padding: 0;
-            
+
             > li {
                 margin: 0 0.5rem;
                 &:only-child {
@@ -196,7 +203,7 @@ body {
         gap: 0.25rem;
         padding: 0.5rem;
         background-color: rgba(0,0,0,0.03);
-        
+
         > .title {
             text-align: left;
             flex-grow: 9;
@@ -212,12 +219,12 @@ body {
         }
     }
 
-    
+
     .items, .catalogs {
         > .list {
             position: relative;
         }
-    
+
         > header {
             margin-bottom: 0.5rem;
 
@@ -235,4 +242,4 @@ body {
             }
         }
     }
-}
\ No newline at end of file
+}