example hips files only use the dynamic loading

public/Herschel_Color.wtml

@@ -0,0 +1,47 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<Folder Browseable="True"
+  Group="Explorer"
+  Name="Herschel PACS (color composition)"
+  Searchable="True">
+  <Place Angle="0"
+    AngularSize="0"
+    Constellation="PSC"
+    DataSetType="Sky"
+    Dec="0"
+    Magnitude="0"
+    Name="Herschel PACS (color composition)"
+    Opacity="100"
+    RA="0"
+    Rotation="0"
+    Thumbnail="http://skies.esac.esa.int/Herschel/PACS-color/preview.jpg"
+    ZoomLevel="0">
+    <ForegroundImageSet>
+      <ImageSet BandPass="IR"
+        BaseDegreesPerTile="180"
+        BaseTileLevel="0"
+        BottomsUp="False"
+        CenterX="0"
+        CenterY="0"
+        DataSetType="Sky"
+        ElevationModel="False"
+        FileType="jpeg"
+        Generic="False"
+        MeanRadius="1"
+        Name="Herschel PACS (color composition)"
+        Projection="Healpix"
+        QuadTreeMap="0123"
+        ReferenceFrame="Sky"
+        Rotation="0"
+        Sparse="True"
+        StockSet="False"
+        TileLevels="9"
+        Url="http://skies.esac.esa.int/Herschel/PACS-color/Norder{0}/Dir{1}/Npix{2}"
+        WidthFactor="1">
+        <Credits>ESA/HSA</Credits>
+        <CreditsUrl>http://www.cosmos.esa.int/web/herschel/publishing-rules-guidelines</CreditsUrl>
+        <Description>HiPS List ID: ESAVO/P/HERSCHEL/PACS-color</Description>
+        <ThumbnailUrl>http://skies.esac.esa.int/Herschel/PACS-color/preview.jpg</ThumbnailUrl>
+      </ImageSet>
+    </ForegroundImageSet>
+  </Place>
+</Folder>

public/allwise.wtml

@@ -0,0 +1,47 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<Folder Browseable="True"
+  Group="Explorer"
+  Name="AllWISE color  Red (W4) , Green (W2) , Blue (W1) from raw Atlas Images"
+  Searchable="True">
+  <Place Angle="0"
+    AngularSize="0"
+    Constellation="PSC"
+    DataSetType="Sky"
+    Dec="0"
+    Magnitude="0"
+    Name="AllWISE color  Red (W4) , Green (W2) , Blue (W1) from raw Atlas Images"
+    Opacity="100"
+    RA="0"
+    Rotation="0"
+    Thumbnail="http://alasky.u-strasbg.fr/AllWISE/RGB-W4-W2-W1/preview.jpg"
+    ZoomLevel="0">
+    <ForegroundImageSet>
+      <ImageSet BandPass="IR"
+        BaseDegreesPerTile="180"
+        BaseTileLevel="0"
+        BottomsUp="False"
+        CenterX="0"
+        CenterY="0"
+        DataSetType="Sky"
+        ElevationModel="False"
+        FileType="jpeg"
+        Generic="False"
+        MeanRadius="1"
+        Name="AllWISE color  Red (W4) , Green (W2) , Blue (W1) from raw Atlas Images"
+        Projection="Healpix"
+        QuadTreeMap="0123"
+        ReferenceFrame="Sky"
+        Rotation="0"
+        Sparse="True"
+        StockSet="False"
+        TileLevels="8"
+        Url="http://alasky.u-strasbg.fr/AllWISE/RGB-W4-W2-W1/Norder{0}/Dir{1}/Npix{2}"
+        WidthFactor="1">
+        <Credits>IPAC/NASA</Credits>
+        <CreditsUrl>http://wise2.ipac.caltech.edu/docs/release/allsky/</CreditsUrl>
+        <Description>HiPS List ID: CDS/P/allWISE/color</Description>
+        <ThumbnailUrl>http://alasky.u-strasbg.fr/AllWISE/RGB-W4-W2-W1/preview.jpg</ThumbnailUrl>
+      </ImageSet>
+    </ForegroundImageSet>
+  </Place>
+</Folder>

public/get_wtml_for_wwt_catalog_entry.py

@@ -21,7 +21,7 @@ def imageset_from_place(imageset, initial_coords=None):
     place.thumbnail = imageset.thumbnail_url
     return place
 
-def get_wtml_for_wwt_catalog_name(name, initial_coords=None):
+def get_wtml_for_wwt_catalog_name(name: str, initial_coords=None):
     """
     Search the WTML files for imagesets with the given name, and construct a WTML file for the entry
     """
@@ -37,11 +37,44 @@ def get_wtml_for_wwt_catalog_name(name, initial_coords=None):
             out_folder.name = name
             out_folder.children = [place]
             return out_folder
-    print(f"Could not find imageset with name {name}")
+    print(f"Could not find imageset in default imagesets (ImageSets6) with name {name}. Trying Hips")
+    url_hips = "https://www.worldwidetelescope.org/wwtweb/catalog.aspx?W=hips"
+    folder_hips = Folder.from_url(url_hips)
+    for folder in folder_hips.children:
+        if folder.name == "Images":
+            print(folder.name)
+            for subfolder in folder.children:
+                for imageset in subfolder.children:
+                    # if name in imageset.name.lower(): # use this if trying to search
+                    #     print(f"Found imageset with name {imageset.name} in Hips catalog subfolder {subfolder.name}")
+                    if name == imageset.name:
+                        print(f"Found imageset with name {imageset.name} in Hips catalog subfolder {subfolder.name}")
+                        place = imageset_from_place(imageset, initial_coords)
+                        out_folder = Folder()
+                        out_folder.name = name
+                        out_folder.children = [place]
+                        return out_folder
 
+# Get glimpse 360 WTML and write to file
 folder = get_wtml_for_wwt_catalog_name("GLIMPSE 360")
+if folder is not None:
+    with open("GLIMPSE_360.wtml", "w") as f:
+        folder.write_xml(f)
 
 
+# these three are good examples of HIPS files
+folder = get_wtml_for_wwt_catalog_name("Herschel PACS (color composition)")
 if folder is not None:
-    with open("GLIMPSE_360.wtml", "w") as f:
+    with open("Herschel_Color.wtml", "w") as f:
+        folder.write_xml(f)
+
+
+folder = get_wtml_for_wwt_catalog_name("unWISE color, from W2 and W1 bands")
+if folder is not None:
+    with open("unwise.wtml", "w") as f:
+        folder.write_xml(f)
+
+folder = get_wtml_for_wwt_catalog_name("AllWISE color  Red (W4) , Green (W2) , Blue (W1) from raw Atlas Images")
+if folder is not None:
+    with open("allwise.wtml", "w") as f:
         folder.write_xml(f)

public/unwise.wtml

@@ -0,0 +1,46 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<Folder Browseable="True"
+  Group="Explorer"
+  Name="unWISE color, from W2 and W1 bands"
+  Searchable="True">
+  <Place Angle="0"
+    AngularSize="0"
+    Constellation="PSC"
+    DataSetType="Sky"
+    Dec="0"
+    Magnitude="0"
+    Name="unWISE color, from W2 and W1 bands"
+    Opacity="100"
+    RA="0"
+    Rotation="0"
+    Thumbnail="http://alasky.u-strasbg.fr/unWISE/color-W2-W1W2-W1/preview.jpg"
+    ZoomLevel="0">
+    <ForegroundImageSet>
+      <ImageSet BandPass="IR"
+        BaseDegreesPerTile="180"
+        BaseTileLevel="0"
+        BottomsUp="False"
+        CenterX="0"
+        CenterY="0"
+        DataSetType="Sky"
+        ElevationModel="False"
+        FileType="jpeg"
+        Generic="False"
+        MeanRadius="1"
+        Name="unWISE color, from W2 and W1 bands"
+        Projection="Healpix"
+        QuadTreeMap="0123"
+        ReferenceFrame="Sky"
+        Rotation="0"
+        Sparse="True"
+        StockSet="False"
+        TileLevels="8"
+        Url="http://alasky.u-strasbg.fr/unWISE/color-W2-W1W2-W1/Norder{0}/Dir{1}/Npix{2}"
+        WidthFactor="1">
+        <Credits>IPAC/NASA - D. Lang for the reprocessing</Credits>
+        <Description>HiPS List ID: CDS/P/unWISE/color-W2-W1W2-W1</Description>
+        <ThumbnailUrl>http://alasky.u-strasbg.fr/unWISE/color-W2-W1W2-W1/preview.jpg</ThumbnailUrl>
+      </ImageSet>
+    </ForegroundImageSet>
+  </Place>
+</Folder>

src/ALMAGAL.vue

@@ -38,7 +38,7 @@
               v-model="selectedAlmagalSource"
               class="almagal-v-select"
               :items="almagalSourceList"
-              item-title="iid"
+              item-title="aid"
               item-value="iid"
               return-object
               hide-details
@@ -57,7 +57,8 @@
                 instant
               />
             </div>
-            <div
+            <!-- this is an example for if you preloaded individual files -->
+            <!-- <div
               v-if="ready && almagalSources && almagalSources.imagesetLayers?.length > 0"
               id="layer-list"
             > 
@@ -74,7 +75,7 @@
                   instant
                 />
               </div>
-            </div>
+            </div> -->
           </div>
           <div id="right-buttons">
             <v-btn
@@ -266,10 +267,28 @@ function moveToImageset(layer: ImageSetLayer, instant = true) {
 // newer GLIMPSE 360 - lower resolution
 const glimpse = useWtmlLoader('./GLIMPSE_360.wtml');
 
+// a few other layers, but keep hidden
+const herschelPacs = useWtmlLoader('./Herschel_Color.wtml');
+herschelPacs.ready.then(() => {
+  herschelPacs.hide();
+});
+const unwise = useWtmlLoader('./allwise.wtml');
+unwise.ready.then(() => {
+  unwise.hide();
+});
+const allwise = useWtmlLoader('./allwise.wtml');
+allwise.ready.then(() => {
+  allwise.hide();
+});
+
+
+
 // load either the individual image "./index.wtml" or the tiled version './gal_plane_toast/index_rel.wtml'
-const useTiledVersion = false; // don't use a ref, because we will not change this during runtime. useWTML does not react to changes in the url.
+const useTiledVersion = true; // don't use a ref, because we will not change this during runtime. useWTML does not react to changes in the url.
 const url = useTiledVersion ? './gal_plane_toast/index_rel.wtml' : './index.wtml';
 
+// since we are dynamically loading the sources right now, we don't need any that are preloaded
+/* 
 const almagalSources = reactive(useWtmlLoader(url, { 
   autoload: true, 
   onLoad: (out, index) => {
@@ -301,6 +320,7 @@ const almagalSources = reactive(useWtmlLoader(url, {
   useFits: !useTiledVersion ,
 })
 );
+*/
 /* we could destructure this and have access to the individual properties */
 // const { ready, places, imagesetLayer, show, hide} = almagalSources;
 
@@ -321,14 +341,14 @@ onMounted(() => {
   store.waitForReady().then(async () => {
     store.applySetting(["galacticMode", true]); /* moves might be wierd, but convenient coord sys */
     skyBackgroundImagesets.forEach(iset => backgroundImagesets.push(iset));
-    console.log("Available background imagesets:", backgroundImagesets);
-    store.setBackgroundImageByName(backgroundImagesets[3].imagesetName);
-
-    almagalSources!.ready.then(() => {
-      layersLoaded.value = true;
-      positionSet.value = true;
-    });
+    store.setBackgroundImageByName('GAIA DR2'); // look at the Imagery list on the WWT page to see a list of background names
 
+    // almagalSources!.ready.then(() => {
+    //   layersLoaded.value = true;
+    //   positionSet.value = true;
+    // });
+    layersLoaded.value = true;
+    positionSet.value = true;
   });
 });
 
@@ -744,6 +764,7 @@ and remember, position:absolute is still a positioned parent, so children can be
 .almagal-v-select {
   pointer-events: auto;
   width: 100%;
+  min-width: 250px;
   background-color: rgba(0, 0, 0, 0.364);
   backdrop-filter: blur(10px);
   outline: 1px solid white;

src/components/AlmaGalSourceInfoDisplay.vue

@@ -51,6 +51,7 @@ const { source } = defineProps<{
   color: black;
   padding: 0.5em;
   border-radius: 4px;
+  pointer-events: auto;
 }
 
 </style>

src/composables/useWtmlLoader.ts

@@ -25,8 +25,8 @@ interface WtmlLoaderReturn {
   imagesets: Ref<Imageset[]>;
   imagesetLayers: Ref<ImageSetLayer[]>;
   fitsImages: Ref<(FitsImage | null)[]>;
-  show: (name: string) => void;
-  hide: (name: string) => void;
+  show: (name?: string) => void;
+  hide: (name?: string) => void;
   load: () => void;
   loaded: Ref<boolean>;
   opacities: Ref<Map<string, number>>;
@@ -323,7 +323,12 @@ export function useWtmlLoader(wtmlUrl: string, _options?: WtmlLoaderOptions): Pr
   }
 
 
-  const show = (name: string) => {
+  const show = (name?: string) => {
+    if (!name) {
+      // if no name is provided, show all layers
+      imagesetLayers.value.forEach(layer => layer.set_enabled(true));
+      return;
+    }
     const index = places.value.findIndex(p => p.get_name() === name);
     if (index === -1) {
       console.warn(`No place found with name ${name}`);
@@ -338,7 +343,12 @@ export function useWtmlLoader(wtmlUrl: string, _options?: WtmlLoaderOptions): Pr
     layer.set_opacity(getOpacity(name) ?? 1);
   };
 
-  const hide = (name: string) => {
+  const hide = (name?: string) => {
+    if (!name) {
+      // if no name is provided, hide all layers
+      imagesetLayers.value.forEach(layer => layer.set_enabled(false));
+      return;
+    }
     const index = places.value.findIndex(p => p.get_name() === name);
     if (index === -1) {
       console.warn(`No place found with name ${name}`);