cds-astro · bmatthieu3 · Jan 31, 2026 · Jan 8, 2026 · Jan 10, 2026 · Jan 13, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,14 @@
 * [fix] layer opacity restored when switching from not visible to visible <https://github.com/cds-astro/aladin-lite/issues/332>
 * [feat] dark/light mode for the interface
 * [fix] polylines shapes size not consistent w.r.t to div size <https://github.com/cds-astro/aladin-lite/issues/331>
+* [feat] 'stackChanged' new event informing when a layer has been added, removed or swapped.
+* [ui] a new HiPS browser window to search and find HiPS among the HiPS worldwide network.
+* [ui] new settings panel for Catalog overlays to change the size, color or shapes of sources
+* [ui] possibility to swap 2 layers. Functional but not definitive, it would be better to allow drag and drop amond the layers.
+* [fix] fix local HiPS loading.
+* [ui] WIP. A toolbar object
+* [fix] fix selection of footprints. In the future allow a skew selection mode and a additive selection shortkey.
+* [fix] inertia bug when zooming in/out
 
 ### 3.7.0-beta
 

diff --git a/assets/icons/enlarge.svg b/assets/icons/enlarge.svg
diff --git a/assets/icons/tree.svg b/assets/icons/tree.svg
diff --git a/examples/al-cfht.html b/examples/al-cfht.html
@@ -4,13 +4,16 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
+<div id="aladin-lite-div" style="width: 512px; height: 512px">
+  <div id="toolbar"></div>
+</div>
 
 <script type="module">
+  import showUrl from './../assets/icons/show.svg';
   import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
-      aladin = A.aladin('#aladin-lite-div', {samp: true, survey: "data/hips/PanSTARRS_DR1_color-z-zg-g", fov:2.0, target: "22 35 58.39 +33 57 57.8", showSettingsControl: true, log: false});
+      aladin = A.aladin('#aladin-lite-div', {toolbar: {divSelector: '#toolbar'}, samp: true, survey: "data/hips/PanSTARRS_DR1_color-z-zg-g", fov:2.0, target: "22 35 58.39 +33 57 57.8", showSettingsControl: true, log: false});
       aladin.setProjection('AIT');
       let cfht = aladin.createImageSurvey("CFHT", "CFHT MegaCam u+g+r", "./data/hips/CFHT", "equatorial", 10, {imgFormat: 'png'});
       let jwst1 = aladin.createImageSurvey("CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI", "JWST NIRCam+MIRI", "data/hips/JWST_NIRCam_MIRI", null, null, {imgFormat: 'png'});
@@ -20,6 +23,16 @@
       aladin.setOverlayImageLayer('JWST2', 'overlay_JWST2');
       aladin.getOverlayImageLayer('overlay_JWST1').setAlpha(0.0);
       aladin.getOverlayImageLayer('overlay_JWST2').setAlpha(0.0);
+
+      aladin.toolbar.add('action_custom', {
+        icon: {
+          url: showUrl,
+          size: "medium"
+        },
+        action(_) {
+          console.log("do a thing")
+        }
+      });
   });
 </script>
 

diff --git a/examples/al-coronelli.html b/examples/al-coronelli.html
@@ -19,7 +19,6 @@
         <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     </head>
 <body>
-
 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script type="text/javascript">
     let aladin;
@@ -38,8 +37,8 @@
     <!-- fin temporaire gestion cercle -->
 
 	<b>Orientation</b><br>
-              <button id="hips-coronelli" class="pure-button" name="ref-hips" onclick="longitudeReversed = false; aladin.reverseLongitude(longitudeReversed)">Normal</button><br>
-              <button id="hips-illenoroc" class="pure-button" name="ref-hips" onclick="longitudeReversed = true; aladin.reverseLongitude(longitudeReversed)">Inversé</button>
+              <button id="hips-coronelli" class="pure-button" name="ref-hips" onclick="aladin.reverseLongitude(false)">Normal</button><br>
+              <button id="hips-illenoroc" class="pure-button" name="ref-hips" onclick="aladin.reverseLongitude(true);">Inversé</button>
 	<br><br>
 
 	<b>Constellations</b>
@@ -75,6 +74,13 @@
 	       <a href="#"><img id="coronelli-stars-red" class="catcoro coro-star" src="star_red.png"></a>
 	       <a href="#"><img id="coronelli-stars-blue" class="catcoro coro-star" src="star_blue.png"></a>
 	    </div>
+<div>Coronelli2<br>
+	    <!--a id="coronelli-stars" class="pure-button catcoro" href="#">Coronelli</a-->
+	       <a href="#"><img id="coronelli-stars-white" class="catcoro coro-star" src="star_white.png"></a>
+	       <a href="#"><img id="coronelli-stars-yellow" class="catcoro coro-star" src="star_yellow.png"></a><br>
+	       <a href="#"><img id="coronelli-stars-red" class="catcoro coro-star" src="star_red.png"></a>
+	       <a href="#"><img id="coronelli-stars-blue" class="catcoro coro-star" src="star_blue.png"></a>
+	    </div>
 	<br><br>
 
         <b>Navigation</b>&nbsp;&nbsp;<br><button id="stop">Stop</button>
@@ -99,6 +105,14 @@
             <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
 	</div>
+    <div id="coo_halley">
+            <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+    <div id="coo_halley">
+            <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
 </div>
 
 <style type="text/css"> .aladin-reticleColor { color: rgb(178, 50, 178); font-weight:bold;} </style>
@@ -231,11 +245,10 @@
     import {Utils} from '../src/js/Utils';
 
     A.init.then(() => {
-        var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
-        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, expandLayersControl: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
-        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg'});
-        aladin.setImageSurvey('Coronelli');
-
+        var hipsDir="http://alasky.cds.unistra.fr/CDS_P_Coronelli";
+        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, lockNorthUp: true, reverseLongitude: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
+        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', minOrder: 3});
+        aladin.setImageSurvey('Coronelli')
         $('#layersControlLeft').show();
         $('#layersCL2').show();
         $('#layersControlRight').show();
@@ -344,14 +357,14 @@
 
         // listen click on navigation buttons
         $('.nav-button').click(function() {
-        var cooTarget = $(this).parent().attr('id');
+            var cooTarget = $(this).parent().attr('id');
 
-        if ($(this).hasClass("nav-goto")) {
-            aladin.gotoRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec);
-        }
-        else if ($(this).hasClass("nav-flyto")) {
-            aladin.animateToRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec, cooNav[cooTarget].time);
-        }
+            if ($(this).hasClass("nav-goto")) {
+                aladin.gotoRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec);
+            }
+            else if ($(this).hasClass("nav-flyto")) {
+                aladin.animateToRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec, cooNav[cooTarget].time);
+            }
         });
 
         // stop animations

diff --git a/examples/al-event-listeners.html b/examples/al-event-listeners.html
@@ -68,8 +68,8 @@
             console.log(pos)
         });
 
-        aladin.on('layerChanged', function(imageLayer, layer, state){
-            console.log(imageLayer, layer, state)
+        aladin.on('stackChanged', function(state) {
+            console.log(state)
         });
 
         cat.sources[0].actionClicked();

diff --git a/examples/al-init-custom-options.html b/examples/al-init-custom-options.html
@@ -13,6 +13,9 @@
         aladin = A.aladin(
             '#aladin-lite-div',
             {
+                toolbar: {
+                    vertical: false,
+                },
                 showSimbadPointerControl: true,
                 survey: 'https://skies.esac.esa.int/AKARI/color/', // set initial image survey
                 projection: 'AIT', // set a projection
@@ -23,6 +26,8 @@
                 reticleSize: 64, // change reticle size
                 showContextMenu: true,
                 showShareControl: true,
+                showCooGridControl: true,
+                showColorPickerControl: true,
                 showFrame: true,
                 showZoomControl:true,
                 showSettingsControl:true,

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "homepage": "https://aladin.cds.unistra.fr/",
   "name": "aladin-lite",
   "type": "module",
-  "version": "3.7.3-beta",
+  "version": "3.8.0-beta",
   "description": "An astronomical HiPS visualizer in the browser",
   "author": "Thomas Boch and Matthieu Baumann",
   "license": "GPL-3",

diff --git a/src/core/Cargo.toml b/src/core/Cargo.toml
@@ -3,7 +3,7 @@ name = "aladin-lite"
 description = "Aladin Lite v3 introduces a new graphical engine written in Rust with the use of WebGL"
 license = "BSD-3-Clause"
 repository = "https://github.com/cds-astro/aladin-lite"
-version = "3.7.3-beta"
+version = "3.8.0-beta"
 authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
 edition = "2018"
 

diff --git a/src/core/al-api/Cargo.toml b/src/core/al-api/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "al-api"
-version = "3.7.0"
+version = "3.8.0"
 authors = ["baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr"]
 edition = "2018"
 

diff --git a/src/core/al-api/src/hips.rs b/src/core/al-api/src/hips.rs
@@ -180,11 +180,11 @@ impl HiPSProperties {
 #[serde(rename_all = "camelCase")]
 pub enum ImageExt {
     Fits,
-    #[serde(alias = "fits.fz")]
-    FitsFz,
     Jpeg,
     Png,
     Webp,
+    #[serde(alias = "fits.fz")]
+    FitsFz,
 }
 
 #[derive(Deserialize, Debug, Clone, Copy, PartialEq, Eq, Hash)]

diff --git a/src/core/al-core/Cargo.toml b/src/core/al-core/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "al-core"
-version = "3.7.0"
+version = "3.8.0"
 authors = ["baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr"]
 edition = "2018"
 

diff --git a/src/core/src/app.rs b/src/core/src/app.rs
@@ -1605,6 +1605,10 @@ impl App {
             return;
         }
 
+        if self.vel_history.len() < 5 {
+            return;
+        }
+
         let now = Time::now();
         let avg_vel = self.vel_history.iter().copied().sum::<f32>() / self.vel_history.len() as f32;
 
@@ -1650,6 +1654,11 @@ impl App {
         // For the moment, no animation is triggered.
         // The fov is directly set
         self.camera.set_aperture(fov, &self.projection);
+
+        // reset the parameters that determine if an inertia is needed
+        self.vel_history.clear();
+        self.dist_dragging = 0.0;
+
         self.request_for_new_tiles = true;
         self.request_redraw = true;
     }
@@ -1807,6 +1816,10 @@ impl App {
     pub(crate) fn set_zoom_factor(&mut self, zoom_factor: f64) {
         self.camera.set_zoom_factor(zoom_factor, &self.projection);
 
+        // reset the parameters that determine if an inertia is needed
+        self.vel_history.clear();
+        self.dist_dragging = 0.0;
+
         self._update_hips_location();
 
         self.request_for_new_tiles = true;

diff --git a/src/core/src/camera/viewport.rs b/src/core/src/camera/viewport.rs
@@ -224,6 +224,8 @@ impl CameraViewPort {
         self.view_hpx_cells.get_cells(depth, frame)
     }
 
+    // This method has the role to determine the render mode based on the fov
+    // For large FoV, raytracing drawing mode, rasterizer otherwise
     pub fn is_raytracing(&self, proj: &ProjectionType) -> bool {
         // Check whether the tile depth is 0 for square projection
         // definition domains i.e. Mercator
@@ -240,6 +242,7 @@ impl CameraViewPort {
             ProjectionType::Ait(_) => self.aperture >= 100.0_f64.to_radians(),
             ProjectionType::Mol(_) => self.aperture >= 100.0_f64.to_radians(),
             ProjectionType::Zea(_) => self.aperture >= 140.0_f64.to_radians(),
+            _ => self.aperture >= 140.0_f64.to_radians(),
         }
     }
 

diff --git a/src/core/src/lib.rs b/src/core/src/lib.rs
@@ -231,59 +231,59 @@ impl WebClient {
             "ZEA" => self
                 .app
                 .set_projection(ProjectionType::Zea(mapproj::zenithal::zea::Zea::new())), /* Equal-area 		         */
-            /*"FEYE" => self
+            "FEYE" => self
                 .app
                 .set_projection(ProjectionType::Feye(mapproj::zenithal::feye::Feye::new())),
             "AIR" => {
                 let air_proj = mapproj::zenithal::air::Air::new();
                 //air_proj.set_n_iter(10);
                 //air_proj.set_eps(1e-12);
                 self.app.set_projection(ProjectionType::Air(air_proj))
-            }*/
+            }
             //"AZP",
-            /*"ARC" => self
+            "ARC" => self
                 .app
                 .set_projection(ProjectionType::Arc(mapproj::zenithal::arc::Arc::new())),
             "NCP" => self
                 .app
-                .set_projection(ProjectionType::Ncp(mapproj::zenithal::ncp::Ncp::new())),*/
+                .set_projection(ProjectionType::Ncp(mapproj::zenithal::ncp::Ncp::new())),
             // Cylindrical
             "MER" => self
                 .app
                 .set_projection(ProjectionType::Mer(mapproj::cylindrical::mer::Mer::new())),
-            /*"CAR" => self
+            "CAR" => self
                 .app
                 .set_projection(ProjectionType::Car(mapproj::cylindrical::car::Car::new())),
             "CEA" => self
                 .app
                 .set_projection(ProjectionType::Cea(mapproj::cylindrical::cea::Cea::new())),
             "CYP" => self
                 .app
-                .set_projection(ProjectionType::Cyp(mapproj::cylindrical::cyp::Cyp::new())),*/
+                .set_projection(ProjectionType::Cyp(mapproj::cylindrical::cyp::Cyp::new())),
             // Pseudo-cylindrical
             "AIT" => self
                 .app
                 .set_projection(ProjectionType::Ait(mapproj::pseudocyl::ait::Ait::new())),
-            /*"PAR" => self
+            "PAR" => self
                 .app
                 .set_projection(ProjectionType::Par(mapproj::pseudocyl::par::Par::new())),
             "SFL" => self
                 .app
-                .set_projection(ProjectionType::Sfl(mapproj::pseudocyl::sfl::Sfl::new())),*/
+                .set_projection(ProjectionType::Sfl(mapproj::pseudocyl::sfl::Sfl::new())),
             "MOL" => {
                 let mut mol_proj = mapproj::pseudocyl::mol::Mol::new();
                 mol_proj.set_n_iter(10);
                 mol_proj.set_epsilon(1e-12);
 
                 self.app.set_projection(ProjectionType::Mol(mol_proj))
             } // Conic
-            /*"COD" => self
+            "COD" => self
                 .app
                 .set_projection(ProjectionType::Cod(mapproj::conic::cod::Cod::new())),
             // Hybrid
             "HPX" => self
                 .app
-                .set_projection(ProjectionType::Hpx(mapproj::hybrid::hpx::Hpx::new())),*/
+                .set_projection(ProjectionType::Hpx(mapproj::hybrid::hpx::Hpx::new())),
             _ => Err(JsValue::from_str(
                 "Not a valid projection name. AIT, ZEA, SIN, STG, TAN, MOL and MER are accepted",
             )),