Allow customizing size and color source from its data content

sourceSize and color properties when creating a new Catalog now accepts a function
allowing to set different sizes/colors in function of the source catalog row

.github/workflows/test.yml

@@ -25,6 +25,10 @@ jobs:
       - name: "Install wasm-pack"
         run: |
           curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Run cargo clippy"
+        run: cd src/core && cargo clippy --all-targets --features=webgl2 -- -D warnings
+      - name: Format check
+        run: cd src/core && cargo fmt --all -- --check
       - name: "Install dependencies"
         run: |
           npm install

README.md

@@ -15,7 +15,13 @@ A new [API technical documentation](https://cds-astro.github.io/aladin-lite/) is
 [![API Documentation](https://img.shields.io/badge/API-documentation-blue.svg)](https://cds-astro.github.io/aladin-lite)
 [![Release page](https://img.shields.io/badge/Release-download-yellow.svg)](https://aladin.cds.unistra.fr/AladinLite/doc/release/)
 
-Aladin Lite is available [at this link](https://aladin.u-strasbg.fr/AladinLite).
+Try Aladin Lite [here](https://aladin.u-strasbg.fr/AladinLite).
+
+Aladin Lite is made possible thanks to pure Rust core libraries:
+* [cdshealpix](https://github.com/cds-astro/cds-healpix-rust) - for HEALPix projection and unprojection to/from sky coordinates 
+* [mapproj](https://github.com/cds-astro/cds-mapproj-rust) - for computing (un)projections described by a WCS
+* [fitsrs](https://github.com/cds-astro/fitsrs) - for reading and parsing FITS images
+* [moc](https://github.com/cds-astro/cds-moc-rust) - for parsing, manipulating, and serializing multi-order HEALPix coverage maps
 
 ## Running & editable JS examples
 
@@ -102,14 +108,15 @@ Aladin Lite can be imported with:
 * [X] FITS images support
 * [X] WCS parsing, displaying an (JPEG/PNG) image in aladin lite view
 * [X] Display customized shapes (e.g. proper motions) from astronomical catalog data
-* [X] AVM tags parsing support
+* [X] AVM tags parsing support inside JPEG
 * [X] Easy sharing of current « view »
 * [ ] All VOTable serializations
 * [ ] FITS tables
 * [X] Creating HiPS instance from an URL
 * [X] Local HiPS loading 
 * [X] Multiple mirrors handling for HiPS tile retrival
-* [ ] HiPS cube
+* [X] HiPS cube
+* [ ] HiPS3D
 
 ## Licence
 

assets/icons/color-picker.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" fill="none" width="20" height="20"/>
+
+<g>

codemeta.json

@@ -8,8 +8,8 @@
     "dateModified": "2023-01-31",
     "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
     "name": "Aladin Lite",
-    "version": "3.6.4",
-    "softwareVersion": "3.6.4",
+    "version": "3.6.5",
+    "softwareVersion": "3.6.5",
     "description": "An astronomical HiPS visualizer in the browser.",
     "identifier": "10.5281/zenodo.7638833",
     "applicationCategory": "Astronomy, Visualization",

examples/al-adass2022.html

@@ -14,7 +14,7 @@
         aladin = A.aladin('#aladin-lite-div', {showSettingsControl: true, survey: "P/PanSTARRS/DR1/color-z-zg-g", showReticle: false, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: startFov, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGridControl: false});
 
         const chft = aladin.createImageSurvey('CFHT', "CFHT deep view of NGC7331 and Stephan's quintet u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", null, null, {imgFormat: 'png'});
-        const nircamJWST = aladin.createImageSurvey('Nircam', "Stephans Quintet NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI/", null, null, {imgFormat: 'png', colormap: "viridis"});
+        const nircamJWST = aladin.createImageSurvey('Nircam', "Stephans Quintet NIRCam+MIRI", "https://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam-MIRI/", null, null, {imgFormat: 'png', colormap: "viridis"});
         
         aladin.setOverlayImageLayer("CFHT", "CFHT");
         aladin.setOverlayImageLayer("Nircam", "Nircam");

examples/al-animation-CS-CDS-2022.html

@@ -201,7 +201,7 @@
 
         let stephansNIRCamMIRI
         async function s11() {
-            stephansNIRCamMIRI = aladin.createImageSurvey('CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI', "stephansMIRI", null, null, null)
+            stephansNIRCamMIRI = aladin.createImageSurvey('CDS/P/JWST/Stephans-Quintet/NIRCam-MIRI', "stephansNircamMIRI", null, null, null)
             stephansNIRCamMIRI.setOpacity(0.0)
             aladin.setOverlayImageLayer(stephansNIRCamMIRI, 'stephansNIRCamMIRI')
 

examples/al-artifact.html

@@ -4,7 +4,7 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 256px;"></div>
+<div id="aladin-lite-div" style="width: 1024px; height: 768px;"></div>
 
 <script type="module">
     import A from '../src/js/A.js';
@@ -13,12 +13,14 @@
         var aladin = A.aladin(
             '#aladin-lite-div',
             {
-                survey: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-z-zg-g/', // set initial image survey
+                survey: 'data/hips/wcs', // set initial image survey
                 projection: 'SIN', // set a projection
-                fov: 114.19, // initial field of view in degrees
-                target: '19 24 51.556 +45 16 44.36', // initial target
-                cooFrame: 'equatorial', // set galactic frame
-                showCooGrid: true, // set the grid
+                fov: 80.0, // initial field of view in degrees
+                target: '96.5279427 -88.0037230', // initial target
+                cooFrame: 'galactic', // set galactic frame
+                showCooGrid: true, // set the grid,
+                fullScreen: true,
+                showSettingsControl: true,
             }
         );
     });

examples/al-cat-galaxy-shape.html

@@ -26,8 +26,16 @@
         limit: 1000,
         //orderBy: 'nb_ref',
         onClick: 'showTable',
-        color: 'yellow',
-        hoverColor: 'blue',
+        color: (s) => {
+          let coo = A.coo();
+          coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])
+
+          let a = (0.1 * Math.pow(10, +s.data.logD25)) / 60;
+          let b = (1.0 / Math.pow(10, +s.data.logR25)) * a
+
+          return `rgb(${s.data["logR25"]*255.0}, ${s.data["logR25"]*255.0}, 255)`
+        },
+        hoverColor: 'red',
         shape: (s) => {
           let coo = A.coo();
           coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])

examples/al-cat-proper-motion.html

@@ -31,15 +31,21 @@
         hoverColor: 'yellow',
         selectionColor: 'white',
         // Footprint associated to sources
-        shape: (s) => {
+        color: (s) => {
           // discard drawing a vector for big pm
           let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
           if (totalPmSquared > 6) {
             return;
           }
 
-          let color = rainbowColorMap((totalPmSquared - 2.5) / 2)
-
+          return rainbowColorMap((totalPmSquared - 2.5) / 2)
+        },
+        shape: (s) => {
+          // discard drawing a vector for big pm
+          let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
+          if (totalPmSquared > 6) {
+            return;
+          }
           // Compute the mean of pm over the catalog sources
           if (!pmraMean || !pmdecMean) {
             pmraMean = 0, pmdecMean = 0;
@@ -62,7 +68,6 @@
             s.dec,
             s.ra + dra,
             s.dec + ddec,
-            {color}
           )
         }
       });

examples/al-coronelli.html

@@ -23,6 +23,7 @@
 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script type="text/javascript">
     let aladin;
+    let longitudeReversed = false;
 </script>
 <div id="aladin-lite-div" style="width:100vw;height:100vh;">
     <div id="calibCircle" style="display: none;"></div>
@@ -37,8 +38,8 @@
     <!-- fin temporaire gestion cercle -->
 
 	<b>Orientation</b><br>
-              <button id="hips-coronelli" class="pure-button" name="ref-hips" onclick="aladin.setImageSurvey('Coronelli')">Normal</button><br>
-              <button id="hips-illenoroc" class="pure-button" name="ref-hips" onclick="aladin.setImageSurvey('illenoroC')">Inversé</button>
+              <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>
 	<br><br>
 
 	<b>Constellations</b>
@@ -232,8 +233,7 @@
     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('illenoroC', 'illenoroC', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: false});
-        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: true});
+        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg'});
         aladin.setImageSurvey('Coronelli');
 
         $('#layersControlLeft').show();

examples/al-event-listeners.html

@@ -64,6 +64,10 @@
             console.log(proj)
         });
 
+        aladin.on('positionChanged', function(pos) {
+            console.log(pos)
+        });
+
         aladin.on('layerChanged', function(imageLayer, layer, state){
             console.log(imageLayer, layer, state)
         });

examples/al-flip-longitude-axis.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script type="module">
+import A from '../src/js/A.js';
+
+A.init.then(() => {
+    let aladin = A.aladin('#aladin-lite-div', {longitudeReversed: true, showCooGrid: true, cooFrame: 'galactic', target: '0 0', fov: 100});
+    //aladin.reverseLongitude(true)
+
+    setTimeout(
+        () => {
+            aladin.reverseLongitude(false)
+        },
+        5000
+    )
+});
+</script>
+</body>
+</html>

examples/al-footprints.html

@@ -11,9 +11,9 @@
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite
-        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
         var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3, lineDash: [2, 2]});
-        /*aladin.addOverlay(overlay);
+        aladin.addOverlay(overlay);
         overlay.addFootprints([
             A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
@@ -21,7 +21,7 @@
         ]);
         overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
         overlay.add(A.vector(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
-        */
+        
         aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
             console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
@@ -35,8 +35,8 @@
             console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
 
-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
-        aladin.addCatalog(cat);
+        //const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
+        //aladin.addCatalog(cat);
     });
 </script>
 </body>

examples/al-fullscreen.html

@@ -5,16 +5,16 @@
 <body>
     <div>
 <div id="offset" style="display: inline-block; width: 200px; height: 100px"></div>
-<div id="aladin-lite-div" style="display: inline-block; width: 50%"></div>
+<div id="aladin-lite-div" style="width: 500px; height: 500px"></div>
 </div>
 <!--<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>-->
 
 
-<script>let aladin, hips</script>
 <script type="module">
     import A from '../src/js/A.js';
+    let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {projection: 'TAN', cooFrame: 'galactic', showSettingsControl: true, showSimbadPointerControl: true, showContextMenu: true, target: 'galactic center', survey: 'P/Finkbeiner'});
+        aladin = A.aladin('#aladin-lite-div', {projection: 'TAN', cooFrame: 'galactic', showSettingsControl: true, showSimbadPointerControl: true, showContextMenu: true, target: 'galactic center'});
         // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
         // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
 

examples/al-hips-order-list.html

@@ -10,7 +10,7 @@
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', showProjectionControl: true, showContextMenu: true, showStatusBar: true, fullScreen: true, target: 'galactic center'});
+        aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', showProjectionControl: true, showContextMenu: true, showStatusBar: true, fullScreen: true, target: 'galactic center', expandLayersControl: true});
 
         const fluxMap = aladin.createImageSurvey('gdr3-color-flux-map', 'Gaia DR3 flux map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/color-Rp-G-Bp-flux-map', 'equatorial', 7);
         const densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'sdfsg', 'equatorial', 7, {formats: ['fits']});

examples/al-image-with-AVM-tags.html

@@ -7,12 +7,12 @@
     <script type="module">
         import A from '../src/js/A.js';
         A.init.then(() => {
-            let aladin = A.aladin('#aladin-lite-div', {fov: 30, survey: "CDS/P/DSS2/color", target: "280 +0", projection: "AIT", showShareControl:true, showSettingsControl: true, showContextMenu:true});
-            
+            let aladin = A.aladin('#aladin-lite-div', {fov: 30, target: "280 +0", projection: "AIT", showShareControl:true, showSettingsControl: true, showContextMenu:true});
+
             aladin.setOverlayImageLayer(A.image(
-                "https://www.virtualastronomy.org/images/sig05-013.jpg",
+                "https://www.virtualastronomy.org/files/avm_examples/spitzer/ssc2005-24a1.jpg",
                 {
-                    name: "sig05-017",
+                    name: "spitzer-ssc2005-24a1",
                     successCallback: (ra, dec, fov, image) => {
                         console.log(ra, dec)
                         aladin.gotoRaDec(ra, dec);

examples/al-image-with-WCS.html

@@ -14,7 +14,7 @@
                 {
                     name: "M61",
                     wcs: {
-                        NAXIS: 0, // Minimal header
+                        NAXIS: 2, // Minimal header
                         CTYPE1: 'RA---TAN', // TAN (gnomic) projection
                         CTYPE2: 'DEC--TAN', // TAN (gnomic) projection
                         EQUINOX: 2000.0, // Equatorial coordinates definition (yr)

examples/al-init-custom-options.html

@@ -14,7 +14,7 @@
             '#aladin-lite-div',
             {
                 showSimbadPointerControl: true,
-                survey: 'P/allWISE/color', // set initial image survey
+                survey: 'https://skies.esac.esa.int/AKARI/color/', // set initial image survey
                 projection: 'AIT', // set a projection
                 fov: 360, // initial field of view in degrees
                 target: 'orion', // initial target
@@ -29,6 +29,7 @@
                 showCooGrid: true,
                 fullScreen: true,
                 samp: true,
+                realFullscreen: true,
                 lockNorthUp: true,
             }
         );

examples/al-moc-sdss9.html

@@ -12,7 +12,7 @@
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {inertia: false, target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color', showContextMenu: true, fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {inertia: true, target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color', showContextMenu: true, fullScreen: true});
         var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3}, (moc) => {
             // moc is ready
             console.log(moc.contains(205.9019247, +2.4492764));

examples/al-multiple-surveys.html

@@ -8,7 +8,7 @@
 <script type="module">
     import A from '../src/js/A.js';
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', fullScreen: true, fov: 360, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showProjectionControl: false, showSettingsControl: false, showLayersControl: false, showCooGrid: false, showFrame: false, showCooLocation: false});
+        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', fullScreen: true, fov: 360, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showProjectionControl: false, showSettingsControl: false, showLayersControl: true, showCooGrid: false, showFrame: false, showCooLocation: false});
     });
 </script>
 

examples/al-no-properties.html

@@ -10,7 +10,6 @@ A.init.then(() => {
     let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
     
     aladin.setOverlayImageLayer(A.imageHiPS(
-        'Fermi',
         "https://alasky.cds.unistra.fr/Fermi/Color",
         {
             name: "Fermi color",

examples/al-read-pixel.html

@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+    <head>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+    </head>
+<body>
+    <div id="aladin-lite-div" style="width: 768px; height: 512px"></div>
+    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
+
+<script>let aladin;</script>
+<script type="module">
+    function getPixelsOnLine(startX, startY, endX, endY){
+        const pixelCols = [];
+
+        var x = Math.floor(startX);
+        var y = Math.floor(startY);
+        const xx = Math.floor(endX);
+        const yy = Math.floor(endY);
+        const dx = Math.abs(xx - x); 
+        const sx = x < xx ? 1 : -1;
+        const dy = -Math.abs(yy - y);
+        const sy = y < yy ? 1 : -1;
+        var err = dx + dy;
+        var e2;
+        var end = false;
+        while (!end) {
+            pixelCols.push([x,y]);
+            if ((x === xx && y === yy)) {
+                end = true;
+            } else {
+                e2 = 2 * err;
+                if (e2 >= dy) {
+                    err += dy;
+                    x += sx;
+                }
+                if (e2 <= dx) {
+                    err += dx;
+                    y += sy;
+                }
+            }
+        }
+        return pixelCols;
+    }
+
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                showSimbadPointerControl: true,
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 360, // initial field of view in degrees
+                target: 'orion', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showContextMenu: true,
+                showShareControl: true,
+                showFrame: true,
+                showZoomControl:true,
+                showSettingsControl:true,
+                showColorPickerControl: true,
+                showCooGrid: true,
+                fullScreen: true,
+                samp: true,
+                realFullscreen: true,
+            }
+        );
+        
+        let base = aladin.getBaseImageLayer();
+
+        aladin.select('line', p => {
+                let xValues = [];
+                let rValues = [];
+                let gValues = [];
+                let bValues = [];
+
+                let i = 0;
+                for(var [r, g, b] of base.probe({type: 'line', x1: p.a.x, y1: p.a.y, x2: p.b.x, y2: p.b.y})) {
+                    xValues.push(i)
+                    rValues.push(r)
+                    gValues.push(g)
+                    bValues.push(b)
+                    i++;
+                }
+
+                new Chart("myChart", {
+                    type: "line",
+                    data: {
+                      labels: xValues,
+                      datasets: [{
+                        fill: false,
+                        lineTension: 0,
+                        backgroundColor: "rgba(255,0,0,1.0)",
+                        data: rValues
+                      },
+                      {
+                        fill: false,
+                        lineTension: 0,
+                        backgroundColor: "rgba(0,255,0,1.0)",
+                        data: gValues
+                      },
+                      {
+                        fill: false,
+                        lineTension: 0,
+                        backgroundColor: "rgba(0,0,255,1.0)",
+                        data: bValues
+                      }]
+                    },
+                    options: {
+                      legend: {display: false},
+                      scales: {
+                        yAxes: [{ticks: {min: 0, max:255}}],
+                      }
+                    }
+                  });
+            
+        })
+    });
+</script>
+</body>
+</html>

examples/al-save-colormap.html

@@ -15,16 +15,17 @@
         let survey1 = aladin.getBaseImageLayer();
         survey1.setColormap('magma', {stretch: 'linear'});
 
-        let survey2 = aladin.newImageSurvey("CSIRO/P/RACS/low/I");
-        aladin.setImageLayer(survey2)
+        let survey2 = aladin.newImageSurvey("CSIRO/P/RACS/low/I", {name: 'racs low'});
         survey2.setColormap('rdbu', {stretch: 'linear'});
 
+        aladin.setImageLayer(survey2)
+
+
         let survey3 = aladin.newImageSurvey("CSIRO/P/RACS/mid/I");
         aladin.setImageLayer(survey3)
         survey3.setColormap('cubehelix', {stretch: 'asinh'});
 
         aladin.setImageLayer(survey2);
-
         setTimeout(() => {
             aladin.removeHiPSFromFavorites(survey3)
         }, 5000);

examples/al-set-colormap.html

@@ -5,7 +5,6 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
 <script>let aladin, hips</script>
 <script type="module">
     import A from '../src/js/A.js';

examples/al-simbad-filter.html

@@ -33,10 +33,16 @@ var myFilterFunction = function(source) {
     return color>colorThreshold;
 }
 
-aladin = A.aladin('#aladin-lite-div', {target: 'M 81', fov: 0.5, survey: 'CDS/P/SDSS9/color'});
-var cat = A.catalogFromSimbad('M 81', 0.25, {onClick: 'showTable', verbosity: 3, filter: myFilterFunction});
-aladin.addCatalog(cat);
+    aladin = A.aladin('#aladin-lite-div', {target: 'M 81', fov: 0.5, survey: 'CDS/P/SDSS9/color'});
+    var cat = A.catalogFromSimbad('M 81', 0.25, {
+        shape: (s) => {
+            return A.circle(s.ra, s.dec, 0.003, {lineWidth: 3});
+        },
+        onClick: 'showTable', verbosity: 3, filter: myFilterFunction
     });
+
+    aladin.addCatalog(cat);
+});
 </script>
 
 </body>

examples/al-zoomchanged.html

@@ -17,6 +17,9 @@
         aladin.on("zoomChanged", () => {
             console.log("zoomChanged")
         })
+        aladin.on("rotationChanged", (rotation) => {
+            console.log("Rotation just changed to ", rotation);
+        })
         aladin.on("positionChanged", ({ra, dec}) => {
             console.log('call to aladin', aladin.pix2world(300, 300))
             console.log('positionChanged in icrs', ra, dec)
@@ -25,6 +28,7 @@
         aladin.gotoRaDec(0, 20);
 
         aladin.on('rightClickMove', (x, y) => {
+            aladin.setRotation(aladin.getRotation() + 2)
             console.log("right click move", x, y)
         })
     });