new UI StackBox

save the imageHiPS once it has been changed so that the HiPS stack is saved. One can go back from the UI afterwards
add zoom heuristic for mouse
2026-04-29 12:19:03 -07:00 · 2024-04-23 00:17:07 +02:00 · 2024-04-12 19:23:47 +02:00 · 2024-04-12 19:12:55 +02:00 · 2024-04-12 14:33:01 +02:00 · 2024-04-12 11:50:25 +02:00
146 changed files with 5989 additions and 3358 deletions
--- a/.github/workflows/api_doc.yml
+++ b/.github/workflows/api_doc.yml
@@ -4,8 +4,10 @@ name: Deploy static content to Pages
 on:
  # Runs on pushes targeting the default branch
  push:
-    branches: ["develop"]
-
+    tags:
+      - '*'
+    branches:
+      - develop
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

--- a/.github/workflows/codemeta_validator.yml
+++ b/.github/workflows/codemeta_validator.yml
@@ -0,0 +1,16 @@
+name: test_codemeta
+
+on:
+  release:
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container:
+      image: gitlab-registry.in2p3.fr/escape2020/wp3/eossr:v1.0
+    steps:
+      - uses: actions/checkout@v3
+      - name: validate codemeta
+        run: eossr-metadata-validator codemeta.json
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -6,6 +6,9 @@ name: Publish to NPM
 on:
  release:
    types: [created]
+  push:
+    tags:
+      - '*'
  workflow_dispatch:

 jobs:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,34 @@
 # Changelogs

+## 3.3.3
+
+* [feat] New `hipsList` option parameter when instancing a new Aladin object.
+* [feat] Zoom smoothing using hermite cubic interpolation functions
+* [feat] shape option of Catalog and ProgressiveCat accepts a function returning a Footprint. This allow user to
+         associate a footprint to a specific source
+* [feat] Hover color support by @pmatsson and @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/145>
+
+## 3.3.2
+
+* [fixed] do not allow to query the properties several times for an imageHiPS
+* [fixed] Detecting raytracing rendering mode. Adapt the rendering mode in function of the fov value and the projection used. Some projections do have more distortions with wide FoVs so it is better to use the raytracing rendering mode when fov >= smaller FoV threshold.
+
 ## 3.3.0

+* [fixed] multiple calls to setImageSurvey with the same survey object led to strange behaviour.
+* [perf] Display the first tile received instantly with no blending. Should enhance the slow reported in issue #88.
+* [fixed] A.on('select') (debugged from ipyaladin)  
+* [fixed] Simbad pointer in galactical frame, cone search of simbad/vizier cats/other cone search services in galactical frame and MOC creation from selection in galactical frame => there is now a new `frame` optional param to Aladin.pix2world. If not given, the coo returned are in the frame of the view.
+* [doc] Add doc for image survey definition
+* [deprecation] A.createImageSurvey/A.newImageSurvey are now deprecated (but still in the API). Please use `A.imageHiPS` instead by providing a valid url or CDS ID conformed to <https://aladin.cds.unistra.fr/hips/list>
+* [refac] Simplify the instanciation of an imageHiPS/ imageFITS. Add a `A.imageHiPS` method for defining a HiPS object
+* [fixed] At initialisation, giving a fov > 180 was clamped back to 180 even if we specify allsky projection (i.e. accepting fov > 180). This is now fixed.
+* [fixed] MeasurementTable now display the full cell values (no ellipsis anymore)
+* [fixed] aladin.on('select') has been implemented. Callback is triggered on a circle and rect selections for not on polygonal selection.
+* [fixed] the cooFrame UI selector is updated if the user calls `aladin.setFrame`
+* [fixed] `reticleColor` and `reticleSize` options in the public API 
+* Restore setFoVRange
+* Add CSS class for positioning the UI elements as the user wants. See the API doc aladin options for the class names to use.
 * [style] The default grid color is now `rgb(178, 50, 178)` to fit the classic Aladin color palette
 * [feat] The object of grid options `gridOptions` is now available in the public API
 * [fixed] The parameters `gridColor` and `gridOpacity`, `gridOptions.showLabels` now work as expected
@@ -9,7 +36,7 @@
 * New release page here: <https://aladin.cds.unistra.fr/AladinLite/doc/release/>
 * A major UI update by @bmatthieu3
  1. Some API new classes A.box, A.button
-  2. A status bar where the user can enque messages for a specific amount of time (Aladin.appendStatusBarMessage)
+  2. A status bar where the user can enque messages for a specific amount of time (Aladin.addStatusBarMessage)
 * Remove of JQuery and autocompletejs dependencies by @bmatthieu3
 * Fix some performances issues, i.e. a bug when resizing the aladin lite view and which launched several parallel requestAnimationFrame by @bmatthieu3
 * Polygon and circular selection (see Aladin class API documentation for how to use it)
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ Aladin Lite is built to be easily embeddable in any web page. It powers astronom
 More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/AladinLite/doc/).

 [![Run tests](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml/badge.svg)](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml)
+[![API Documentation](https://img.shields.io/badge/docs-latest-blue.svg)](https://cds-astro.github.io/aladin-lite)

 # How to test it ?

@@ -142,33 +143,53 @@ to compile the core project into WebAssembly.
 Follow the steps from the Rust official website [here](https://www.rust-lang.org/learn/get-started)
 You will also need [wasm-pack](https://rustwasm.github.io/wasm-pack/), a tool helping compiling rust into a proper .wasm file.

-Once it's installed you can only build the project:
+Once it's installed you will need to switch to the nightly rust version:
+
+```bash
+rustup default nightly
+```
+
+Then you can build the project:
+
 ```bash
 npm run build
 ```

-Or build it and launch a localhost server (usually starting on port 8080 but it can be another one if 8080 is occupied):
+:warning: **If you are experimenting rust error compilations**:
+
+- Make sure you have your **wasm-pack** version updated. To do so:
+
+```bash
+cargo install wasm-pack --version ~0.12
+```
+
+- Make sure you are using the rust **nightly** toolchain
+- Remove your `src/core/Cargo.lock` file and `src/core/target` directory -- this ensures that you'd escape any bad compilation state:
+
+```bash
+git clean -di
+```
+ 
+-  then recompile with `npm run build`.
+
+It will generate the aladin lite compiled code into a `dist/` directory located at the root of the repository. This directory contains two javascript files. `aladin.umd.cjs` follows the UMD module export convention and it is the one you can use for your project.
+
+To run the examples, you can start a localhost server with the following command:
+
 ```bash
 npm run serve
 ```

-For just compiling the rust core from the root location (it is faster to do so)
+For just compiling the rust core, from the root location do:

 ```bash
 cd src/core
 cargo check --features webgl2
 ```

-and run the tests
+and run the tests:

 ```bash
 cd src/core
 cargo test --features webgl2
 ```
-
-To generate the Rust backend API documentation
-
-```bash
-cd src/core
-cargo doc --no-deps --open
-```
--- a/assets/icons/add.svg
+++ b/assets/icons/add.svg
@@ -0,0 +1,5 @@
+<?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 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44771 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44771 11 8 11H11V8Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z" fill="#0F0F0F"/>
+</svg>
--- a/assets/icons/jupyter.svg
+++ b/assets/icons/jupyter.svg
@@ -0,0 +1,2 @@
+<?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 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_jupyter</title><path d="M26.233,3.588A1.69,1.69,0,1,1,24.473,2a1.67,1.67,0,0,1,1.76,1.585Z" style="fill:#767677"/><path d="M16.375,23.111c-4.487,0-8.43-1.61-10.469-3.988a11.162,11.162,0,0,0,20.938,0C24.81,21.5,20.882,23.111,16.375,23.111Z" style="fill:#f37726"/><path d="M16.375,7.648c4.487,0,8.43,1.61,10.469,3.988a11.162,11.162,0,0,0-20.938,0C7.945,9.253,11.869,7.648,16.375,7.648Z" style="fill:#f37726"/><path d="M10.2,27.739a2.109,2.109,0,1,1-.2-.8,2.129,2.129,0,0,1,.2.8Z" style="fill:#9e9e9e"/><path d="M6.416,7.106A1.226,1.226,0,1,1,7.608,5.83,1.241,1.241,0,0,1,6.416,7.106Z" style="fill:#616262"/></svg>
--- a/assets/icons/link.svg
+++ b/assets/icons/link.svg
@@ -0,0 +1,5 @@
+<?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 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.197 3.35462C16.8703 1.67483 19.4476 1.53865 20.9536 3.05046C22.4596 4.56228 22.3239 7.14956 20.6506 8.82935L18.2268 11.2626M10.0464 14C8.54044 12.4882 8.67609 9.90087 10.3494 8.22108L12.5 6.06212" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M13.9536 10C15.4596 11.5118 15.3239 14.0991 13.6506 15.7789L11.2268 18.2121L8.80299 20.6454C7.12969 22.3252 4.55237 22.4613 3.0464 20.9495C1.54043 19.4377 1.67609 16.8504 3.34939 15.1706L5.77323 12.7373" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
--- a/codemeta.json
+++ b/codemeta.json
@@ -0,0 +1,83 @@
+{
+    "@context": "https://doi.org/10.5063/schema/codemeta-2.0",
+    "@type": "SoftwareSourceCode",
+    "license": "https://spdx.org/licenses/GPL-3.0",
+    "codeRepository": "https://github.com/cds-astro/aladin-lite",
+    "dateCreated": "2013-05-01",
+    "datePublished": "2013-05-01",
+    "dateModified": "2023-01-31",
+    "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
+    "name": "Aladin Lite",
+    "version": "3.3.2",
+    "softwareVersion": "3.3.2",
+    "description": "An astronomical HiPS visualizer in the browser.",
+    "identifier": "10.5281/zenodo.7638833",
+    "applicationCategory": "Astronomy, Visualization",
+    "funding": "ESCAPE 824064",
+    "referencePublication": "http://aspbooks.org/publications/532/007.pdf",
+    "readme": "https://aladin.cds.unistra.fr/AladinLite/doc/",
+    "releaseNotes": "https://aladin.cds.unistra.fr/AladinLite/doc/#release-notes",
+    "funder": {
+        "@type": "Organization",
+        "name": "European Commission Framework Programme Horizon 2020 Research and Innovation action"
+    },
+    "keywords": [
+        "IVOA",
+        "Astronomy"
+    ],
+    "programmingLanguage": [
+        "Rust",
+        "Javascript"
+    ],
+    "relatedLink": [
+        "https://aladin.cds.unistra.fr/"
+    ],
+    "author": [
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0002-7123-773X",
+            "givenName": "Matthieu",
+            "familyName": "Baumann",
+            "email": "matthieu.baumann@unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        },
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0001-5818-2781",
+            "givenName": "Thomas",
+            "familyName": "Boch",
+            "email": "thomas.boch@astro.unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        }
+    ],
+    "maintainer": [
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0002-7123-773X",
+            "givenName": "Matthieu",
+            "familyName": "Baumann",
+            "email": "matthieu.baumann@unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        },
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0001-5818-2781",
+            "givenName": "Thomas",
+            "familyName": "Boch",
+            "email": "thomas.boch@astro.unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        }
+    ]
+}
--- a/examples/al-adass2022.html
+++ b/examples/al-adass2022.html
@@ -10,7 +10,7 @@
    import A from '../src/js/A.js';
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, gridOptions: {opacity: 0.5, color: 'rgba(255, 0, 0)'}, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: true, showCooGridControl: false});
+        aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: 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"});
--- a/examples/al-animation-CS-CDS-2022.html
+++ b/examples/al-animation-CS-CDS-2022.html
@@ -15,19 +15,15 @@
        </div>
    </div>
 </div>
-
 <script type="module">
    import A from '../src/js/A.js';
-    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', fov: 400, fullScreen: true, showCooGrid: false, showReticle: false})
+        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', cooFrame: 'galactic', fov: 360, fullScreen: true, showCooGrid: false, showReticle: false})
        aladin.gotoRaDec(79.9525321, -69.2742586)
        const gaiaFlux = aladin.createImageSurvey('P/DM/flux-G/I/355/gaiadr3', "GaiaDR3GFlux", null, null, null, {imgFormat: 'fits', stretch: 'log'})
        aladin.setBaseImageLayer(gaiaFlux)
        gaiaFlux.setCuts(3e5, 1e8)

-        aladin.setProjection('MOL')
-

        
        function notify(title, sub, delay) {
@@ -54,8 +50,8 @@
            }
        }

-        aladin.view.setGridConfig({opacity: 0, color: {r: 51/255, g: 209/255, b: 1}})
-        aladin.view.setGridConfig({enabled: true})
+        aladin.setCooGrid({opacity: 0, color: {r: 51/255, g: 209/255, b: 1}})
+        aladin.setCooGrid({enabled: true})

        async function s_1() {
            return new Promise((resolve, reject) => {
@@ -100,7 +96,7 @@

        async function showGrid() {
            for await(const it of interval(50, 40)) {
-                aladin.view.setGridConfig({opacity: it / 40})
+                aladin.setCooGrid({opacity: it / 40})
            }
        }
        
@@ -157,7 +153,7 @@

        async function hideGrid() {
            for await(const it of interval(50, 40)) {
-                aladin.view.setGridConfig({opacity: 1 - it / 40})
+                aladin.setCooGrid({opacity: 1 - it / 40})
            }
        }

--- a/examples/al-artifact.html
+++ b/examples/al-artifact.html
@@ -4,7 +4,7 @@
 </head>
 <body>

-<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<div id="aladin-lite-div" style="width: 1024px; height: 100%;"></div>

 <script type="module">
    import A from '../src/js/A.js';
@@ -19,7 +19,6 @@
                target: '19 24 51.556 +45 16 44.36', // initial target
                cooFrame: 'equatorial', // set galactic frame
                showCooGrid: true, // set the grid
-                fullScreen: true,
            }
        );
    });
--- a/examples/al-badbaselayer.html
+++ b/examples/al-badbaselayer.html
@@ -9,8 +9,8 @@
 A.init.then(() => {
    let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
    
-    //let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});
-    //aladin.setBaseImageLayer(hsc);
+    let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});
+    aladin.setBaseImageLayer(hsc);

 });
 </script>
--- a/examples/al-cat-galaxy-shape.html
+++ b/examples/al-cat-galaxy-shape.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script>let aladin;</script>
+<script type="module">
+  import A from '../src/js/A.js';
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {
+        target: "M31",
+        fov: 89.78,
+        showContextMenu: true,
+        fullScreen: true,
+        showSimbadPointerControl: true,
+        showShareControl: true,
+        showSettingsControl: true,
+        showStackLayerControl: true,
+        samp: true,
+      });
+
+      aladin.addCatalog(A.catalogFromVizieR("VII/237/pgc", "M31", 3, {
+        limit: 1000,
+        //orderBy: 'nb_ref',
+        onClick: 'showTable',
+        color: 'yellow',
+        hoverColor: 'blue',
+        shape: (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 A.ellipse(coo.lon, coo.lat, a, b, +s.data.PA, {lineWidth: 3});
+        }
+      }));
+  });
+</script>
+
+</body>
+</html>
--- a/examples/al-cat-proper-motion.html
+++ b/examples/al-cat-proper-motion.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script>let aladin;</script>
+<script type="module">
+  import A from '../src/js/A.js';
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {
+        target: "LMC",
+        fov: 10,
+        showContextMenu: true,
+        fullScreen: true,
+        showSimbadPointerControl: true,
+        showShareControl: true,
+        showSettingsControl: true,
+        showStackLayerControl: true,
+        samp: true,
+      });
+
+      let pmraMean = null, pmdecMean = null;
+      //aladin.addCatalog(A.catalogFromSimbad('LMC', 2.5, {
+      //aladin.addCatalog(A.catalogFromVizieR('J/A+A/663/A107/table5', 'LMC', 5, {
+    
+      const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
+        onClick: 'showTable',
+        name: 'mean pm over HPX cells around LMC from GaiaDR2',
+        hoverColor: 'yellow',
+        selectionColor: 'white',
+        // Footprint associated to sources
+        shape: (s) => {
+          
+          // Compute the mean of pm over the catalog sources
+          if (!pmraMean || !pmdecMean) {
+            pmraMean = 0, pmdecMean = 0;
+            for (var s of pmCat.getSources()) {
+              pmraMean += +s.data.pmra;
+              pmdecMean += +s.data.pmdec;
+            }
+
+            const numSources = pmCat.getSources().length;
+
+            pmraMean /= numSources
+            pmdecMean /= numSources
+          }
+
+          console.log("mean", pmraMean, pmdecMean)
+
+          let dra = +s.data.pmra - pmraMean;
+          let ddec = +s.data.pmdec - pmdecMean;
+
+          // 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 A.vector(
+            s.ra,
+            s.dec,
+            s.ra + dra,
+            s.dec + ddec,
+            null,
+            {lineWidth: 3, color}
+          )
+        }
+      });
+      aladin.addCatalog(pmCat);
+  });
+
+  function rainbowColorMap(value) {
+    // Ensure value is within range [0, 1]
+    value = Math.max(0, Math.min(1, value));
+
+    // Convert value to hue
+    var hue = (1 - value) * 240; // 240 is the maximum hue value for blue
+
+    // Convert HSV to RGB
+    var chroma = 1;
+    var x = chroma * (1 - Math.abs((hue / 60) % 2 - 1));
+    var r1, g1, b1;
+
+    if (hue >= 0 && hue < 60) {
+        [r1, g1, b1] = [chroma, x, 0];
+    } else if (hue >= 60 && hue < 120) {
+        [r1, g1, b1] = [x, chroma, 0];
+    } else if (hue >= 120 && hue < 180) {
+        [r1, g1, b1] = [0, chroma, x];
+    } else if (hue >= 180 && hue < 240) {
+        [r1, g1, b1] = [0, x, chroma];
+    }
+
+    var m = 1 - chroma;
+    var r = r1 + m;
+    var g = g1 + m;
+    var b = b1 + m;
+
+    // Convert RGB to HEX
+    r = Math.round(r * 255);
+    g = Math.round(g * 255);
+    b = Math.round(b * 255);
+    var colorHex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+
+    return colorHex;
+  }
+</script>
+
+</body>
+</html>
--- a/examples/al-catalog-hips-shape.html
+++ b/examples/al-catalog-hips-shape.html
@@ -10,28 +10,22 @@
    import A from '../src/js/A.js';
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
+        aladin = A.aladin('#aladin-lite-div', {target: '12 25 41.512 +12 48 47.2', inertia: false, fov: 1, showContextMenu: true});
        // define custom draw function
-        var drawFunction = function(source, canvasCtx, viewParams) {
-            canvasCtx.beginPath();
-            canvasCtx.arc(source.x, source.y, source.data['coo_err_min'] * 5, 0, 2 * Math.PI, false);
-            canvasCtx.closePath();
-            canvasCtx.strokeStyle = '#c38';
-            canvasCtx.lineWidth = 3;
-            canvasCtx.globalAlpha = 0.7,
-            canvasCtx.stroke();
-            var fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);

-            // object name is displayed only if fov<10°
-            if (fov>10) {
+        var drawFunctionFootprint = function(s) {
+            let a = +s.data.size_maj;
+            let b = +s.data.size_min;
+
+            let galaxy = ['Seyfert', 'Gin', 'StarburstG', 'LINER', 'AGN', 'Galaxy'].some((n) => s.data.main_type.indexOf(n) >= 0)
+            if (!galaxy)
                return;
-            }

-            canvasCtx.globalAlpha = 0.9;
-            canvasCtx.globalAlpha = 1;
+            let theta = +s.data.size_angle || 0.0;
+            return A.ellipse(s.ra, s.dec, a / 60, b / 60, theta, {color: 'cyan'});
        };

-        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad', shape: drawFunction});
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad', color: 'cyan', hoverColor: 'red', shape: drawFunctionFootprint});
        aladin.addCatalog(hips);
    });
 </script>
--- a/examples/al-catalog-hips.html
+++ b/examples/al-catalog-hips.html
@@ -11,7 +11,7 @@
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
-        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showPopup', name: 'Simbad'});
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {hoverColor: 'yellow', onClick: 'showPopup', name: 'Simbad'});
        aladin.addCatalog(hips);
    });
 </script>
--- a/examples/al-coronelli.html
+++ b/examples/al-coronelli.html
@@ -231,7 +231,7 @@

    A.init.then(() => {
        var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
-        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
+        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.setImageSurvey('Coronelli');
@@ -252,13 +252,13 @@
        aladin.addCatalog(hipsCats['constellations-boundaries']);
        aladin.addCatalog(hipsCats['gaia']);

-
        var coronelliStars = {
-        'coronelli-stars-white': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/white.xml", {name: 'Coronelli white', color: '#ffffff', shape: 'rhomb', sourceSize: 10}),
-        'coronelli-stars-yellow': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/yellow.xml", {name: 'Coronelli yellow', color: '#f6f874', shape: 'rhomb', sourceSize: 10}),
-        'coronelli-stars-red': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/red.xml", {name: 'Coronelli red', color: '#ff5555', shape: 'rhomb', sourceSize: 10}),
-        'coronelli-stars-blue': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/blue.xml", {name: 'Coronelli blue', color: '#1ca5ec', shape: 'rhomb', sourceSize: 10})
+            'coronelli-stars-white': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/white.xml", {name: 'Coronelli white', color: '#ffffff', shape: 'rhomb', sourceSize: 10}),
+            'coronelli-stars-yellow': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/yellow.xml", {name: 'Coronelli yellow', color: '#f6f874', shape: 'rhomb', sourceSize: 10}),
+            'coronelli-stars-red': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/red.xml", {name: 'Coronelli red', color: '#ff5555', shape: 'rhomb', sourceSize: 10}),
+            'coronelli-stars-blue': A.catalogFromURL("http://cdsweb.u-strasbg.fr/~derriere/coronelli/blue.xml", {name: 'Coronelli blue', color: '#1ca5ec', shape: 'rhomb', sourceSize: 20})
        };
+
        coronelliStars['coronelli-stars-white'].hide();
        coronelliStars['coronelli-stars-yellow'].hide();
        coronelliStars['coronelli-stars-red'].hide();
--- a/examples/al-customize-button.html
+++ b/examples/al-customize-button.html
@@ -27,9 +27,7 @@

        let btn = A.button({
            content: 'My button',
-            position: {
-                anchor: 'left bottom'
-            },
+            classList: ['myButton'],
            tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
            action(o) {
                aladin.select('poly', p => {
@@ -65,16 +63,14 @@
                title: "My window",
                draggable: true,
            },
+            classList: ['myBox'],
            content: "This is the content of my window<br/> I can write proper html",
-            position: {
-                anchor: 'center center'
-            }
        }))

-        aladin.appendStatusBarMessage({
+        aladin.addStatusBarMessage({
            duration: 10000,
            type: 'info',
-            message: 'Aladin Lite v3.3 is out. New features available:<ul><li>New Button, Box objects</li><li>Polygonal, circular selection</li></ul>'
+            message: 'Aladin Lite v3.3 is out. New features available:<ul><li>New Button, Box <b>objects</b></li><li>Polygonal, circular selection</li></ul>'
        })
    });
 </script>
@@ -84,6 +80,25 @@
        top: 10rem;
        left: 10rem;
    }
+
+    .myBox {
+        top: unset;
+        bottom: 0;
+        left: 0;
+    }
+
+    .myButton {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        background-color: pink;
+    }
+
+    .aladin-cooFrame {
+        position: absolute;
+        top: 10rem;
+    }
 </style>
 </body>
 </html>
--- a/examples/al-displayFITS.html
+++ b/examples/al-displayFITS.html
@@ -26,6 +26,7 @@
            }, // no optional params
            (ra, dec, fov, image) => {
                // ra, dec and fov are centered around the fits image
+                console.log("jjj", image)
                image.setColormap("magma", {stretch: "asinh"});

                aladin.gotoRaDec(ra, dec);
--- a/examples/al-distortion.html
+++ b/examples/al-distortion.html
@@ -25,8 +25,7 @@
        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {imgFormat: "fits"});
        aladin.getBaseImageLayer().setColormap('redtemperature', {stretch: "Asinh"});*/

-        aladin = A.aladin('#aladin-lite-div', {survey: 'CDS/P/SDSS9/color', fov: 60, target: '0 90', fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
-        aladin.setProjection('SIN');
+        aladin = A.aladin('#aladin-lite-div', {survey: 'CDS/P/SDSS9/color', fov: 150, target: '0 90', fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});

        //let survey = aladin.createImageSurvey("P/PanSTARRS/DR1/g", null, null, null, null, );
        /*aladin.setBaseImageLayer("P/PanSTARRS/DR1/g");
--- a/examples/al-easy-access-simbad-ned.html
+++ b/examples/al-easy-access-simbad-ned.html
@@ -16,21 +16,13 @@
        showContextMenu: true,
        fullScreen: true,
        showSimbadPointerControl: true,
-        showSimbadPointerControl: false,
        showShareControl: true,
-        showStatusBar: {
-          position: {
-            bottom: 0,
-            left: '3rem'
-          },
-        },
+        showSettingsControl: true,
        showStackLayerControl: true,
        samp: true,
      });

-      A.catalogFromSimbad('09 55 52.4 +69 40 47', 0.1, {onClick: 'showTable', limit: 1000}, (cat) => {
-        aladin.addCatalog(cat)
-      });
+      aladin.addCatalog(A.catalogFromSimbad('M 82', 0.1, {onClick: 'showTable'}));
      aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));
  });
 </script>
--- a/examples/al-easy-access-vizier.html
+++ b/examples/al-easy-access-vizier.html
@@ -29,13 +29,14 @@ A.init.then(() => {

    aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));

- 

    aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}));
    aladin.on('select', (objs) => {
        console.log(objs, "are selected");
    })

+    aladin.select();
+
 });
 </script>
 </body>
--- a/examples/al-footprints.html
+++ b/examples/al-footprints.html
@@ -15,7 +15,7 @@
        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
        aladin.addOverlay(overlay);
        overlay.addFootprints([
-            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]),
+            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]]),
            A.polygon([[8.62807, 220.06330], [83.58397, 10.02280], [150.62792, 87.02258]])
        ]);
@@ -34,7 +34,7 @@
            console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
        })

-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 100, {onClick: 'showTable', limit: 1000});
+        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', hoverColor: 'purple', limit: 10000});
        aladin.addCatalog(cat);
    });
 </script>
--- a/examples/al-fov-range.html
+++ b/examples/al-fov-range.html
@@ -0,0 +1,42 @@
+<!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';
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'galactic', // set galactic frame
+                reticleColor: '#00ff00', // change reticle color
+                reticleSize: 40, // change reticle size
+                gridOptions: {color: 'pink'},
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+                showShareControl: true,
+                showSettingsControl: true,
+                showLayersControl: true,
+                showZoomControl: true,
+                showContextMenu: true,
+                showCooGridControl: true,
+                showSimbadPointerControl: true,
+                showFullscreenControl: true,
+            }
+        );
+
+        aladin.setFoVRange(1, 60)
+    });
+</script>
+
+</body>
+</html>
--- a/examples/al-fullscreen.html
+++ b/examples/al-fullscreen.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<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>
+<!--<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';
+    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'});
+        // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
+        // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
+
+        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
+    });
+</script>
+
+</body>
+</html>
--- a/examples/al-hips-order-list.html
+++ b/examples/al-hips-order-list.html
@@ -13,9 +13,9 @@
        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'});

        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, {imgFormat: 'fits'});
-        const decaps = aladin.createImageSurvey("decaps", "DECaPS DR1", "http://alasky.u-strasbg.fr/DECaPS/DR1/color/", "equatorial", 11, {imgFormat: 'png'});
-        const panstarrs = aladin.createImageSurvey("panstarrs", "PanSTARRS", "http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-i-r-g/", "equatorial", 11, {imgFormat: 'jpg'});
+        const densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'sdfsg', 'equatorial', 7, {formats: ['fits']});
+        const decaps = aladin.createImageSurvey("decaps", "DECaPS DR1", "http://alasky.u-strasbg.fr/DECaPS/DR1/color/", "equatorial", 11, {formats: ['png'], tileSize: 512});
+        const panstarrs = aladin.createImageSurvey("panstarrs", "PanSTARRS", "http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-i-r-g/", "equatorial", 11, {formats: ['jpg']});

        aladin.setOverlayImageLayer(fluxMap)
        aladin.setOverlayImageLayer(densityMap, "density")
--- a/examples/al-image-hips.html
+++ b/examples/al-image-hips.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 500px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, cooFrame: "ICRSd", showSimbadPointerControl: true, showShareControl: true, showShareControl: true, survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', fov: 180, showContextMenu: true});
+        // manage URL parameters
+        let survey1 = aladin.getBaseImageLayer();
+        survey1.setColormap('magma', {stretch: 'linear'});
+
+        let survey2 = aladin.newImageSurvey("CSIRO/P/RACS/mid/I");
+        aladin.setImageLayer(survey2)
+        survey2.setColormap('rdbu', {stretch: 'linear'});
+
+        let survey3 = aladin.newImageSurvey("CSIRO/P/RACS/low/I");
+        aladin.setImageLayer(survey3)
+        survey3.setColormap('cubehelix', {stretch: 'asinh'});
+        aladin.setImageLayer(survey3)
+        aladin.setImageLayer(survey3)
+
+        aladin.setImageLayer(survey2);
+
+        aladin.setImageLayer(survey3)
+        aladin.setImageLayer(survey2);
+
+
+    });
+</script>
--- a/examples/al-image-layer-by-name.html
+++ b/examples/al-image-layer-by-name.html
@@ -10,8 +10,7 @@
    import A from '../src/js/A.js';
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
-        aladin.setImageSurvey('P/allWISE/color');
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/allWISE/color', target: 'galactic center'});
    });
 </script>

--- a/examples/al-init-custom-options.html
+++ b/examples/al-init-custom-options.html
@@ -5,12 +5,12 @@
 <body>

 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-
+<script>    let aladin;
+</script>
 <script type="module">
    import A from '../src/js/A.js';
-    let aladin;
    A.init.then(() => {
-        var aladin = A.aladin(
+        aladin = A.aladin(
            '#aladin-lite-div',
            {
                survey: 'P/allWISE/color', // set initial image survey
@@ -21,16 +21,18 @@
                reticleColor: '#00ff00', // change reticle color
                reticleSize: 40, // change reticle size
                gridOptions: {color: 'pink'},
-                showCooGrid: true, // set the grid
+                showCooGrid: false, // set the grid
                fullScreen: true,
+                inertia: false,
+                showStatusBar: false,
                showShareControl: true,
                showSettingsControl: true,
                showLayersControl: true,
+                showZoomControl: true,
                showContextMenu: true,
                showCooGridControl: true,
-                showSimbadPointerControl: true,
+                //showSimbadPointerControl: true,
                showFullscreenControl: true,
-                showZoomControl: false,
            }
        );
    });
--- a/examples/al-moc-sdss9.html
+++ b/examples/al-moc-sdss9.html
@@ -12,7 +12,7 @@
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color'});
-        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3, fill: true}, (moc) => {
+        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3, perimeter: true}, (moc) => {
            // moc is ready
            console.log(moc.contains(205.9019247, +2.4492764));
            console.log(moc.contains(-205.9019247, +2.4492764));
--- a/examples/al-multiple-surveys.html
+++ b/examples/al-multiple-surveys.html
@@ -4,12 +4,11 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-
+<script>var aladin;</script>
 <script type="module">
    import A from '../src/js/A.js';
-    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showProjectionControl: true, showCooGrid: true, fov: 180});
+        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: true, showSettingsControl: true, showCooGrid: true});
    });
 </script>

--- a/examples/al-no-properties.html
+++ b/examples/al-no-properties.html
@@ -0,0 +1,27 @@
+<!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', {fov: 70,projection: "AIT"});
+    
+    aladin.setOverlayImageLayer(A.imageHiPS(
+        'Fermi',
+        "https://alasky.cds.unistra.fr/Fermi/Color",
+        {
+            name: "Fermi color",
+            maxOrder: 3,
+            imgFormat: 'jpeg',
+            tileSize: 512,
+            cooFrame: 'equatorial'
+        }
+    ));
+
+});
+</script>
+</body>
+</html>
--- a/examples/al-obscore.html
+++ b/examples/al-obscore.html
@@ -12,11 +12,11 @@
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'NGC 1367', fov: 360, samp: false, projection: 'AIT', fullScreen: true, showContextMenu: true});

-        A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable'}, (catalog) => {
+        A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable', hoverColor: 'purple'}, (catalog) => {
            aladin.addCatalog(catalog)
        });

-        aladin.addCatalog(A.catalogFromVizieR("B/assocdata/obscore", "0 +0", 20, {limit: 1000}))
+        aladin.addCatalog(A.catalogFromVizieR("B/assocdata/obscore", "0 +0", 20, {onClick: 'showTable', hoverColor: 'yellow', limit: 1000}))
    });
 </script>
 </body>
--- a/examples/al-perseverence.html
+++ b/examples/al-perseverence.html
@@ -14,13 +14,14 @@
        // Start up Aladin Lite
        aladin = A.aladin('#aladin-lite-div', {
            fov: 360,
+            projection: 'MER',
            target: '0 0',
            fullScreen: true,
            survey: "CDS/P/Mars/Pan-Perseverance-PIA24422",
            showCooGrid: true,
            showCooGridControl: true,
        });
-        aladin.setProjection('MER');
+
  });
 </script>

--- a/examples/al-save-colormap.html
+++ b/examples/al-save-colormap.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, cooFrame: "ICRSd", showSimbadPointerControl: true, showShareControl: true, showShareControl: true, survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', fov: 180, showContextMenu: true});
+        // manage URL parameters
+        let survey1 = aladin.getBaseImageLayer();
+        survey1.setColormap('magma', {stretch: 'linear'});
+
+        let survey2 = aladin.newImageSurvey("CSIRO/P/RACS/low/I");
+        aladin.setImageLayer(survey2)
+        survey2.setColormap('rdbu', {stretch: 'linear'});
+
+        let survey3 = aladin.newImageSurvey("CSIRO/P/RACS/mid/I");
+        aladin.setImageLayer(survey3)
+        survey3.setColormap('cubehelix', {stretch: 'asinh'});
+
+        aladin.setImageLayer(survey2);
+    });
+</script>
+
+</body>
+</html>
--- a/examples/al-set-colormap.html
+++ b/examples/al-set-colormap.html
@@ -6,14 +6,18 @@
 <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';
-    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center', survey: 'P/Finkbeiner'});
        // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
        // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
-        aladin.getBaseImageLayer().setColormap("cubehelix");
+        hips = aladin.getBaseImageLayer()
+        hips.setColormap("cubehelix");
+
+        aladin.setImageSurvey('astron.nl/P/lotss_dr2_high')
+
        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
    });
 </script>
--- a/examples/al-simbad-filter.html
+++ b/examples/al-simbad-filter.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+Show sources with proper motion greater than:
+<input id='slider' style='vertical-align:middle;width:60vw;' step='1' min='0' max='10' type='range' value='0'>
+<span id='pmVal'  >0 mas/yr</span><br><br><div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var colorThreshold = 0;
+var slider = document.getElementById('slider');
+slider.oninput = function() {
+    colorThreshold = this.value;
+    $('#colorVal').html(colorThreshold);
+    cat.reportChange();
+}
+var myFilterFunction = function(source) {
+    const magB  = parseFloat(source.data['B']);
+    const magV  = parseFloat(source.data['V']);
+    if (isNaN(magB) || isNaN(magV) ) {
+        return false;
+    }
+    const color = magB - magV;
+    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);
+    });
+</script>
+
+</body>
+</html>
+
+
--- a/examples/al-soda-ska.html
+++ b/examples/al-soda-ska.html
@@ -10,9 +10,9 @@
    import A from '../src/js/A.js';
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, target: "Abell 194", fov: 180, projection: 'SIN', showContextMenu: true});
-
-        A.catalogFromSKAORucio("m51", 90, {onClick: 'showTable'}, (cat) => {
+        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, target: "Abell 194", fov: 180, projection: 'AIT', showContextMenu: true});
+        aladin.setImageSurvey('astron.nl/P/lotss_dr2_high')
+        A.catalogFromSKAORucio("Abell 194", 90, {onClick: 'showTable', hoverColor: 'yellow'}, (cat) => {
            aladin.addCatalog(cat);
        });

--- a/examples/al-stcs-footprints.html
+++ b/examples/al-stcs-footprints.html
@@ -14,7 +14,7 @@
        let aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5, showContextMenu: true});
        // This table contains a s_region column containing stcs expressed regions
        // that are automatically parsed
-        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {name: 'ALMA footprints', onClick: 'showTable'}));
+        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {name: 'ALMA footprints', onClick: 'showTable', hoverColor: 'lightgreen'}));
    });
 </script>
 </body>
--- a/examples/al-vertices.html
+++ b/examples/al-vertices.html
@@ -8,15 +8,13 @@

 <script type="module">
    import A from '../src/js/A.js';
-    import {AladinUtils} from '../src/js/AladinUtils.js';

    A.init.then(() => {
-        let vertices = AladinUtils.HEALPix.vertices(8, 0n)
-
-        let lonlat = AladinUtils.HEALPix.pix2ang(8, 0n)
-
-        let ipix = AladinUtils.HEALPix.ang2pix(8, 0.1, 0.4)
-        console.log(vertices, lonlat, ipix)
+        let vertices = A.Utils.HEALPix.vertices(Math.pow(2, 3), BigInt(276))
+        //let lonlat = A.Utils.HEALPix.pix2ang(8, 0n)
+        //let ipix = A.Utils.HEALPix.ang2pix(8, 0.1, 0.4)
+        //console.log("vertices", vertices, lonlat, ipix)
+        console.log(vertices)
    })
    
 </script>
--- a/examples/al-zoom-meerkat.html
+++ b/examples/al-zoom-meerkat.html
@@ -5,8 +5,6 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>

-<div id='aladin-statsDiv'></div>
-
 <script type="module">
    import A from '../src/js/A.js';

--- a/examples/index.html
+++ b/examples/index.html
@@ -36,7 +36,7 @@
        }
        if (searchParams.has('showCooGrid')) {
            const b = searchParams.get('showCooGrid') === 'true';
-            aladin.view.setGridConfig({
+            aladin.setCooGrid({
                enabled: b
            });
        }
--- a/examples/index_es.html
+++ b/examples/index_es.html
@@ -37,7 +37,7 @@
        }
        if (searchParams.has('showCooGrid')) {
            const b = searchParams.get('showCooGrid') === 'true';
-            aladin.view.setGridConfig({
+            aladin.setCooGrid({
                enabled: b
            });
        }
--- a/examples/index_umd.html
+++ b/examples/index_umd.html
@@ -36,7 +36,7 @@
        }
        if (searchParams.has('showCooGrid')) {
            const b = searchParams.get('showCooGrid') === 'true';
-            aladin.view.setGridConfig({
+            aladin.setCooGrid({
                enabled: b
            });
        }
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "homepage": "https://aladin.u-strasbg.fr/",
  "name": "aladin-lite",
  "type": "module",
-  "version": "3.3.1-beta",
+  "version": "3.3.3",
  "description": "An astronomical HiPS visualizer in the browser",
  "author": "Thomas Boch and Matthieu Baumann",
  "license": "GPL-3",
@@ -33,7 +33,7 @@
  ],
  "scripts": {
    "wasm": "wasm-pack build ./src/core --target web --release --out-name core -- --features webgl2 -Z build-std=panic_abort,std -Z build-std-features=panic_immediate_abort ",
-    "predeploy": "npm run build && rm -rf aladin-lite.tgz && npm pack",
+    "predeploy": "npm run build && rm -rf aladin-lite*.tgz && npm pack",
    "deploy": "python3 deploy/deploy.py",
    "build": "npm run wasm && vite build && cp examples/index.html dist/index.html",
    "dev": "npm run build && vite",
--- 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.3.0"
+version = "3.3.2"
 authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
 edition = "2018"

--- a/src/core/al-api/src/hips.rs
+++ b/src/core/al-api/src/hips.rs
@@ -43,10 +43,9 @@ pub struct HiPSProperties {
    // Associated with the HiPS
    url: String,
    max_order: u8,
-    frame: CooSystem,
+    coo_frame: CooSystem,
    tile_size: i32,
    formats: Vec<ImageExt>,
-    dataproduct_subtype: Option<Vec<String>>,

    is_planetary_body: Option<bool>,

@@ -103,7 +102,7 @@ impl HiPSProperties {

    #[inline(always)]
    pub fn get_frame(&self) -> CooSystem {
-        self.frame
+        self.coo_frame
    }

    #[inline(always)]
@@ -125,11 +124,6 @@ impl HiPSProperties {
    pub fn get_initial_dec(&self) -> Option<f64> {
        self.hips_initial_dec
    }
-
-    #[inline(always)]
-    pub fn get_dataproduct_subtype(&self) -> &Option<Vec<String>> {
-        &self.dataproduct_subtype
-    }
 }

 #[derive(Deserialize, Debug, Clone, Copy, PartialEq, Eq, Hash)]
--- a/src/core/al-core/src/image/fits.rs
+++ b/src/core/al-core/src/image/fits.rs
@@ -17,45 +17,34 @@ pub enum Data<'a> {
    I32(Cow<'a, [i32]>),
    F32(Cow<'a, [f32]>),
 }
+use fitsrs::{fits::Fits as FitsData, hdu::data::InMemData};
 use std::io::Cursor;
-use fitsrs::{
-    hdu::data::InMemData,
-    fits::Fits as FitsData,
-};

 impl<'a> Fits<'a> {
    pub fn from_byte_slice(bytes_reader: &'a mut Cursor<&[u8]>) -> Result<Self, JsValue> {
        let FitsData { hdu } = FitsData::from_reader(bytes_reader)
-            .map_err(|_| {
-                JsValue::from_str(&"Parsing fits error")
-            })?;
+            .map_err(|_| JsValue::from_str(&"Parsing fits error"))?;

        let header = hdu.get_header();
        let xtension = header.get_xtension();
-        let width = xtension.get_naxisn(1)
+        let width = xtension
+            .get_naxisn(1)
            .ok_or_else(|| JsValue::from_str("NAXIS1 not found in the fits"))?;

-        let height = xtension.get_naxisn(2)
+        let height = xtension
+            .get_naxisn(2)
            .ok_or_else(|| JsValue::from_str("NAXIS2 not found in the fits"))?;
-        
+
        let data = hdu.get_data();
        let data = match *data {
-            InMemData::U8(slice) => {
-                Data::U8(Cow::Borrowed(slice))
-            },
-            InMemData::I16(slice) => {
-                Data::I16(Cow::Borrowed(slice))
-            },
-            InMemData::I32(slice) => {
-                Data::I32(Cow::Borrowed(slice))
-            },
+            InMemData::U8(slice) => Data::U8(Cow::Borrowed(slice)),
+            InMemData::I16(slice) => Data::I16(Cow::Borrowed(slice)),
+            InMemData::I32(slice) => Data::I32(Cow::Borrowed(slice)),
            InMemData::I64(slice) => {
                let data = slice.iter().map(|v| *v as i32).collect();
                Data::I32(Cow::Owned(data))
-            },
-            InMemData::F32(slice) => {
-                Data::F32(Cow::Borrowed(slice))
-            },
+            }
+            InMemData::F32(slice) => Data::F32(Cow::Borrowed(slice)),
            InMemData::F64(slice) => {
                let data = slice.iter().map(|v| *v as f32).collect();
                Data::F32(Cow::Owned(data))
@@ -66,8 +55,8 @@ impl<'a> Fits<'a> {
            // Tile size
            size: Vector2::new(*width as i32, *height as i32),

-            // Allocation info of the layout            
-            data
+            // Allocation info of the layout
+            data,
        })
    }

@@ -121,14 +110,14 @@ impl<'a> Fits<'a> {
            // Tile size
            size: Vector2::new(*width as i32, *height as i32),

-            // Allocation info of the layout            
+            // Allocation info of the layout
            data
        })
    }
 }*/

-use crate::Texture2DArray;
 use crate::image::Image;
+use crate::Texture2DArray;
 impl Image for Fits<'_> {
    fn tex_sub_image_3d(
        &self,
@@ -138,7 +127,7 @@ impl Image for Fits<'_> {
        offset: &Vector3<i32>,
    ) -> Result<(), JsValue> {
        match &self.data {
-            Data::U8(data) => { 
+            Data::U8(data) => {
                let view = unsafe { R8UI::view(&data) };
                textures[offset.z as usize]
                    .bind()
@@ -150,7 +139,7 @@ impl Image for Fits<'_> {
                        Some(view.as_ref()),
                    );
            }
-            Data::I16(data) => { 
+            Data::I16(data) => {
                let view = unsafe { R16I::view(&data) };
                textures[offset.z as usize]
                    .bind()
@@ -162,7 +151,7 @@ impl Image for Fits<'_> {
                        Some(view.as_ref()),
                    );
            }
-            Data::I32(data) => { 
+            Data::I32(data) => {
                let view = unsafe { R32I::view(&data) };
                textures[offset.z as usize]
                    .bind()
@@ -174,7 +163,7 @@ impl Image for Fits<'_> {
                        Some(view.as_ref()),
                    );
            }
-            Data::F32(data) => { 
+            Data::F32(data) => {
                let view = unsafe { R32F::view(&data) };
                textures[offset.z as usize]
                    .bind()
@@ -192,8 +181,8 @@ impl Image for Fits<'_> {
    }
 }

-use wasm_bindgen::JsValue;
 use crate::image::format::ImageFormat;
+use wasm_bindgen::JsValue;

 pub trait FitsImageFormat: ImageFormat {
    const BITPIX: i8;
@@ -205,7 +194,7 @@ impl FitsImageFormat for R32F {
 }

 #[cfg(feature = "webgl2")]
-use crate::image::{R16I, R32I, R8UI, R64F};
+use crate::image::{R16I, R32I, R64F, R8UI};
 #[cfg(feature = "webgl2")]
 impl FitsImageFormat for R64F {
    const BITPIX: i8 = -64;
--- a/src/core/al-core/src/texture/mod.rs
+++ b/src/core/al-core/src/texture/mod.rs
@@ -60,14 +60,14 @@ pub struct Texture2D {
 pub enum SamplerType {
    Float,
    Integer,
-    Unsigned
+    Unsigned,
 }

 use crate::image::format::ImageFormat;
 //use super::pixel::PixelType;
+use std::cell::RefCell;
 use std::path::Path;
 use std::rc::Rc;
-use std::cell::RefCell;
 impl Texture2D {
    pub fn create_from_path<P: AsRef<Path>, F: ImageFormat>(
        gl: &WebGlContext,
@@ -145,7 +145,6 @@ impl Texture2D {
        onload.forget();
        onerror.forget();

-
        let gl = gl.clone();
        Ok(Texture2D {
            texture,
@@ -163,16 +162,12 @@ impl Texture2D {
        tex_params: &'static [(u32, u32)],
        data: Option<&[<F::P as Pixel>::Item]>,
    ) -> Result<Texture2D, JsValue> {
-        let texture = Texture2D::create_empty_with_format::<F>(
-            gl,
-            width,
-            height,
-            tex_params
-        )?;
+        let texture = Texture2D::create_empty_with_format::<F>(gl, width, height, tex_params)?;

        if let Some(data) = data {
            let buf_data = unsafe { F::view(data) };
-            texture.bind()
+            texture
+                .bind()
                .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
                    0,
                    0,
@@ -235,7 +230,6 @@ impl Texture2D {
            None,
        )
        .expect("Texture 2D");
-        //gl.generate_mipmap(WebGlRenderingCtx::TEXTURE_2D);

        let gl = gl.clone();
        let metadata = Some(Rc::new(RefCell::new(Texture2DMeta {
@@ -329,7 +323,8 @@ impl Texture2D {
        } else {
            // set the viewport as the FBO won't be the same dimension as the screen
            let metadata = self.metadata.as_ref().unwrap_abort().borrow();
-            self.gl.viewport(x, y, metadata.width as i32, metadata.height as i32);
+            self.gl
+                .viewport(x, y, metadata.width as i32, metadata.height as i32);
            #[cfg(feature = "webgl2")]
            let value = match (metadata.format, metadata.type_) {
                (WebGlRenderingCtx::RED_INTEGER, WebGlRenderingCtx::UNSIGNED_BYTE) => {
@@ -650,4 +645,4 @@ impl<'a> Texture2DBoundMut<'a> {
            )
            .expect("Sub texture 2d");
    }
-}
+}
--- a/src/core/al-core/src/texture/texture_array.rs
+++ b/src/core/al-core/src/texture/texture_array.rs
@@ -27,12 +27,12 @@ impl Texture2DArray {
        tex_params: &'static [(u32, u32)],
    ) -> Result<Texture2DArray, JsValue> {
        let textures: Result<Vec<_>, _> = (0..num_slices)
-            .map(|_| {
-                Texture2D::create_empty_with_format::<F>(gl, width, height, tex_params)
-            })
+            .map(|_| Texture2D::create_empty_with_format::<F>(gl, width, height, tex_params))
            .collect();

-        Ok(Texture2DArray { textures: textures? })
+        Ok(Texture2DArray {
+            textures: textures?,
+        })
    }
 }

--- a/src/core/src/app.rs
+++ b/src/core/src/app.rs
@@ -115,7 +115,7 @@ use cgmath::{Vector2, Vector3};
 use futures::{io::BufReader, stream::StreamExt}; // for `next`

 use crate::math::projection::*;
-pub const BLENDING_ANIM_DURATION: DeltaTime = DeltaTime::from_millis(400.0); // in ms
+pub const BLENDING_ANIM_DURATION: DeltaTime = DeltaTime::from_millis(200.0); // in ms
                                                                             //use crate::buffer::Tile;
 use crate::time::Time;
 use cgmath::InnerSpace;
@@ -270,6 +270,8 @@ impl App {
        // Move the views of the different active surveys
        self.tile_fetcher.clear();
        // Loop over the surveys
+        let raytracer = self.layers.get_raytracer();
+
        for survey in self.layers.values_mut_hips() {
            if self.camera.get_texture_depth() == 0
                && self
@@ -290,7 +292,8 @@ impl App {
            let root_url = survey.get_config().get_root_url().to_string();
            let format = survey.get_config().get_format();

-            if let Some(tiles_iter) = survey.look_for_new_tiles(&mut self.camera) {
+            if let Some(tiles_iter) = survey.look_for_new_tiles(&mut self.camera, &self.projection)
+            {
                for tile_cell in tiles_iter.into_iter() {
                    self.tile_fetcher.append(
                        query::Tile::new(&tile_cell, creator_did.clone(), root_url.clone(), format),
@@ -603,11 +606,11 @@ impl App {
            for rsc in rscs_received {
                match rsc {
                    Resource::Tile(tile) => {
-                        if !has_camera_moved {
+                        if !_has_camera_zoomed {
                            if let Some(survey) =
-                                self.layers.get_mut_hips_from_url(&tile.get_hips_url())
+                                self.layers.get_mut_hips_from_cdid(&tile.get_hips_cdid())
                            {
-                                let cfg = survey.get_config();
+                                let cfg = survey.get_config_mut();

                                if cfg.get_format() == tile.format {
                                    let delta_depth = cfg.delta_depth();
@@ -620,10 +623,10 @@ impl App {
                                            fov_coverage.intersects_cell(&neighbor_tile_cell)
                                        });

-                                    let is_tile_root = tile.cell().depth() == delta_depth;
-                                    let _depth = tile.cell().depth();
+                                    //let is_tile_root = tile.cell().depth() == delta_depth;
+                                    //let _depth = tile.cell().depth();
                                    // do not perform tex_sub costly GPU calls while the camera is zooming
-                                    if is_tile_root || included_or_near_coverage {
+                                    if included_or_near_coverage {
                                        let is_missing = tile.missing();
                                        /*self.tile_fetcher.notify_tile(
                                            &tile,
@@ -646,9 +649,65 @@ impl App {
                                        } else {
                                            Some(image)
                                        };
+                                        use al_core::image::ImageType;
+                                        use fitsrs::fits::Fits;
+                                        use std::{io::Cursor, rc::Rc};
+                                        if let Some(image) = image.as_ref() {
+                                            match &*image.lock().unwrap_abort() {
+                                                Some(ImageType::FitsImage {
+                                                    raw_bytes: raw_bytes_buf,
+                                                }) => {
+                                                    // check if the metadata has not been set
+                                                    if !cfg.fits_metadata {
+                                                        let num_bytes =
+                                                            raw_bytes_buf.length() as usize;
+                                                        let mut raw_bytes = vec![0; num_bytes];
+                                                        raw_bytes_buf.copy_to(&mut raw_bytes[..]);
+
+                                                        let mut bytes_reader =
+                                                            Cursor::new(raw_bytes.as_slice());
+                                                        let Fits { hdu } =
+                                                            Fits::from_reader(&mut bytes_reader)
+                                                                .map_err(|_| {
+                                                                    JsValue::from_str(
+                                                                        "Parsing fits error",
+                                                                    )
+                                                                })?;
+
+                                                        let header = hdu.get_header();
+                                                        let bscale = if let Some(
+                                                            fitsrs::card::Value::Float(bscale),
+                                                        ) = header.get(b"BSCALE  ")
+                                                        {
+                                                            *bscale as f32
+                                                        } else {
+                                                            1.0
+                                                        };
+                                                        let bzero = if let Some(
+                                                            fitsrs::card::Value::Float(bzero),
+                                                        ) = header.get(b"BZERO   ")
+                                                        {
+                                                            *bzero as f32
+                                                        } else {
+                                                            0.0
+                                                        };
+                                                        let blank = if let Some(
+                                                            fitsrs::card::Value::Float(blank),
+                                                        ) = header.get(b"BLANK   ")
+                                                        {
+                                                            *blank as f32
+                                                        } else {
+                                                            std::f32::NAN
+                                                        };
+
+                                                        cfg.set_fits_metadata(bscale, bzero, blank);
+                                                    }
+                                                }
+                                                _ => (),
+                                            }
+                                        }

                                        survey.add_tile(&cell, image, time_req)?;
-
                                        self.request_redraw = true;

                                        self.time_start_blending = Time::now();
@@ -660,9 +719,9 @@ impl App {
                        }
                    }
                    Resource::Allsky(allsky) => {
-                        let hips_url = allsky.get_hips_url();
+                        let hips_cdid = allsky.get_hips_cdid();

-                        if let Some(survey) = self.layers.get_mut_hips_from_url(hips_url) {
+                        if let Some(survey) = self.layers.get_mut_hips_from_cdid(hips_cdid) {
                            let is_missing = allsky.missing();
                            if is_missing {
                                // The allsky image is missing so we donwload all the tiles contained into
@@ -691,7 +750,8 @@ impl App {
                        }
                    }
                    Resource::PixelMetadata(metadata) => {
-                        if let Some(hips) = self.layers.get_mut_hips_from_url(&metadata.hips_url) {
+                        if let Some(hips) = self.layers.get_mut_hips_from_cdid(&metadata.hips_cdid)
+                        {
                            let mut cfg = hips.get_config_mut();

                            if let Some(metadata) = *metadata.value.lock().unwrap_abort() {
@@ -702,9 +762,9 @@ impl App {
                        }
                    }
                    Resource::Moc(moc) => {
-                        let moc_url = moc.get_url();
-                        let url = &moc_url[..moc_url.find("/Moc.fits").unwrap_abort()];
-                        if let Some(hips) = self.layers.get_mut_hips_from_url(url) {
+                        let moc_hips_cdid = moc.get_hips_cdid();
+                        //let url = &moc_url[..moc_url.find("/Moc.fits").unwrap_abort()];
+                        if let Some(hips) = self.layers.get_mut_hips_from_cdid(moc_hips_cdid) {
                            let request::moc::Moc { moc, .. } = moc;

                            if let Some(moc) = &*moc.lock().unwrap_abort() {
@@ -756,14 +816,13 @@ impl App {
        // - there is at least one tile in its blending phase
        let blending_anim_occuring =
            (Time::now() - self.time_start_blending) < BLENDING_ANIM_DURATION;
-
-        let start_fading = self.layers.values_hips().any(|hips| {
+        /*let start_fading = self.layers.values_hips().any(|hips| {
            if let Some(start_time) = hips.get_ready_time() {
                Time::now() - *start_time < BLENDING_ANIM_DURATION
            } else {
                false
            }
-        });
+        });*/

        // Finally update the camera that reset the flag camera changed
        //if has_camera_moved {
@@ -787,8 +846,7 @@ impl App {
            })
        }

-        self.rendering =
-            blending_anim_occuring | has_camera_moved | self.request_redraw | start_fading;
+        self.rendering = blending_anim_occuring | has_camera_moved | self.request_redraw /*| start_fading*/;
        self.request_redraw = false;

        self.draw(false)?;
@@ -820,6 +878,10 @@ impl App {
        }
    }

+    pub(crate) fn draw_grid_labels(&mut self) -> Result<(), JsValue> {
+        self.grid.draw_labels(&self.camera)
+    }
+
    pub(crate) fn draw(&mut self, force_render: bool) -> Result<(), JsValue> {
        /*let scene_redraw = self.rendering | force_render;
        let mut ui = self.ui.lock();
@@ -1189,17 +1251,13 @@ impl App {
        self.layers.get_layer_cfg(layer)
    }

-    pub(crate) fn set_hips_url(
-        &mut self,
-        past_url: String,
-        new_url: String,
-    ) -> Result<(), JsValue> {
-        self.layers.set_survey_url(past_url, new_url.clone())?;
+    pub(crate) fn set_hips_url(&mut self, cdid: &String, new_url: String) -> Result<(), JsValue> {
+        self.layers.set_survey_url(cdid, new_url.clone())?;

-        let hips = self.layers.get_hips_from_url(&new_url).unwrap_abort();
+        //let hips = self.layers.get_hips_from_url(&new_url).unwrap_abort();
        // Relaunch the base tiles for the survey to be ready with the new url
-        self.tile_fetcher
-            .launch_starting_hips_requests(hips, &mut self.downloader);
+        //self.tile_fetcher
+        //    .launch_starting_hips_requests(hips, &mut self.downloader);

        Ok(())
    }
@@ -1302,12 +1360,8 @@ impl App {
        self.request_redraw = true;
    }

-    pub(crate) fn set_survey_url(
-        &mut self,
-        past_url: String,
-        new_url: String,
-    ) -> Result<(), JsValue> {
-        self.layers.set_survey_url(past_url, new_url)
+    pub(crate) fn set_survey_url(&mut self, cdid: &String, new_url: String) -> Result<(), JsValue> {
+        self.layers.set_survey_url(cdid, new_url)
    }

    pub(crate) fn set_catalog_opacity(
@@ -1504,6 +1558,10 @@ impl App {
        self.request_redraw = true;
    }

+    pub(crate) fn set_inertia(&mut self, inertia: bool) {
+        *self.disable_inertia.borrow_mut() = !inertia;
+    }
+
    /*pub(crate) fn project_line(&self, lon1: f64, lat1: f64, lon2: f64, lat2: f64) -> Vec<Vector2<f64>> {
        let v1: Vector3<f64> = LonLatT::new(ArcDeg(lon1).into(), ArcDeg(lat1).into()).vector();
        let v2: Vector3<f64> = LonLatT::new(ArcDeg(lon2).into(), ArcDeg(lat2).into()).vector();
--- a/src/core/src/camera/view_hpx_cells.rs
+++ b/src/core/src/camera/view_hpx_cells.rs
@@ -10,6 +10,7 @@ use crate::HEALPixCoverage;
 use std::ops::Range;

 use al_api::cell::HEALPixCellProjeted;
+use al_core::log::console_log;

 pub fn project(
    cell: HEALPixCellProjeted,
--- a/src/core/src/camera/viewport.rs
+++ b/src/core/src/camera/viewport.rs
@@ -9,7 +9,9 @@ pub enum UserAction {
 use super::{fov::FieldOfView, view_hpx_cells::ViewHpxCells};
 use crate::healpix::cell::HEALPixCell;
 use crate::healpix::coverage::HEALPixCoverage;
+use crate::math::angle::ToAngle;
 use crate::math::{projection::coo_space::XYZWModel, projection::domain::sdf::ProjDef};
+use al_core::log::console_log;
 use al_core::{info, inforec, log};

 use cgmath::{Matrix4, Vector2};
@@ -210,12 +212,31 @@ impl CameraViewPort {

    pub fn get_hpx_cells<'a>(
        &'a mut self,
-        depth: u8,
+        mut depth: u8,
        frame: CooSystem,
    ) -> impl Iterator<Item = &'a HEALPixCell> {
        self.view_hpx_cells.get_cells(depth, frame)
    }

+    pub fn is_raytracing(&self, proj: &ProjectionType) -> bool {
+        // Check whether the tile depth is 0 for square projection
+        // definition domains i.e. Mercator
+        if self.is_allsky() {
+            return true;
+        }
+
+        // check the projection
+        match proj {
+            ProjectionType::Tan(_) => self.aperture >= 100.0_f64.to_radians().to_angle(),
+            ProjectionType::Mer(_) => self.aperture >= 200.0_f64.to_radians().to_angle(),
+            ProjectionType::Stg(_) => self.aperture >= 200.0_f64.to_radians().to_angle(),
+            ProjectionType::Sin(_) => false,
+            ProjectionType::Ait(_) => false,
+            ProjectionType::Mol(_) => false,
+            ProjectionType::Zea(_) => false,
+        }
+    }
+
    fn recompute_scissor(&self) {
        // Clear all the screen before updating the scissor
        //self.gl.scissor(0, 0, self.width as i32, self.height as i32);
@@ -253,41 +274,6 @@ impl CameraViewPort {
        );
    }

-    fn set_canvas_size(&self, width: f32, height: f32) {
-        let canvas = self
-            .gl
-            .canvas()
-            .unwrap_abort()
-            .dyn_into::<web_sys::HtmlCanvasElement>()
-            .unwrap_abort();
-
-        canvas
-            .style()
-            .set_property("width", &format!("{}px", width))
-            .unwrap_abort();
-        canvas
-            .style()
-            .set_property("height", &format!("{}px", height))
-            .unwrap_abort();
-        /*grid_canvas
-            .style()
-            .set_property("width", &format!("{}px", width))
-            .unwrap_abort();
-        grid_canvas
-            .style()
-            .set_property("height", &format!("{}px", height))
-            .unwrap_abort();*/
-
-        canvas.set_width(self.width as u32);
-        canvas.set_height(self.height as u32);
-        //grid_canvas.set_width(self.width as u32);
-        //grid_canvas.set_height(self.height as u32);
-
-        // Once the canvas size is changed, we have to set the viewport as well
-        self.gl
-            .viewport(0, 0, self.width as i32, self.height as i32);
-    }
-
    pub fn set_screen_size(&mut self, width: f32, height: f32, projection: &ProjectionType) {
        self.width = (width as f32) * self.dpi;
        self.height = (height as f32) * self.dpi;
@@ -310,7 +296,18 @@ impl CameraViewPort {
        ));

        // Update the size of the canvas
-        self.set_canvas_size(width, height);
+        let canvas = self
+            .gl
+            .canvas()
+            .unwrap_abort()
+            .dyn_into::<web_sys::HtmlCanvasElement>()
+            .unwrap_abort();
+
+        canvas.set_width(self.width as u32);
+        canvas.set_height(self.height as u32);
+        // Once the canvas size is changed, we have to set the viewport as well
+        self.gl
+            .viewport(0, 0, self.width as i32, self.height as i32);
        // Once it is done, recompute the scissor
        self.recompute_scissor();
    }
@@ -384,6 +381,8 @@ impl CameraViewPort {
            }
        };

+        //console_log(&format!("clip factor {:?}", self.aperture));
+
        // Project this vertex into the screen
        self.moved = true;
        self.zoomed = true;
--- a/src/core/src/downloader/mod.rs
+++ b/src/core/src/downloader/mod.rs
@@ -11,8 +11,8 @@ pub struct Downloader {
    requests: Vec<RequestType>,
    queried_list: HashSet<QueryId>,

-    cache: Cache<Url, Resource>,
-    queried_cached_urls: Vec<Url>,
+    cache: Cache<QueryId, Resource>,
+    queried_cached_ids: Vec<QueryId>,
 }

 use crate::fifo_cache::Cache;
@@ -25,12 +25,12 @@ impl Downloader {
        let requests = Vec::with_capacity(32);
        let queried_list = HashSet::with_capacity(64);
        let cache = Cache::new();
-        let queried_cached_urls = Vec::with_capacity(64);
+        let queried_cached_ids = Vec::with_capacity(64);
        Self {
            requests,
            queried_list,
            cache,
-            queried_cached_urls,
+            queried_cached_ids,
        }
    }
    // Returns true if the fetch has been done
@@ -39,8 +39,8 @@ impl Downloader {
    where
        T: Query,
    {
-        let url = query.url();
-        if self.cache.contains(url) {
+        let id = query.id();
+        if self.cache.contains(id) {
            //self.queried_cached_urls.push(url.clone());
            false
        } else {
@@ -85,8 +85,8 @@ impl Downloader {
            self.queried_list.remove(&query_id);
        }

-        while let Some(url) = self.queried_cached_urls.pop() {
-            if let Some(rsc) = self.cache.extract(&url) {
+        while let Some(id) = self.queried_cached_ids.pop() {
+            if let Some(rsc) = self.cache.extract(&id) {
                rscs.push(rsc);
            }
        }
@@ -105,7 +105,7 @@ impl Downloader {
    }*/

    pub fn delay_rsc(&mut self, rsc: Resource) {
-        self.queried_cached_urls.push(rsc.url().clone());
-        self.cache.insert(rsc.url().clone(), rsc);
+        self.queried_cached_ids.push(rsc.id().clone());
+        self.cache.insert(rsc.id().clone(), rsc);
    }
 }
--- a/src/core/src/downloader/query.rs
+++ b/src/core/src/downloader/query.rs
@@ -4,7 +4,7 @@ use super::request::RequestType;
 pub trait Query: Sized {
    type Request: From<Self> + Into<RequestType>;

-    fn url(&self) -> &Url;
+    fn hips_cdid(&self) -> &CreatorDid;
    fn id(&self) -> &QueryId;
 }

@@ -17,17 +17,18 @@ pub struct Tile {
    pub cell: HEALPixCell,
    pub format: ImageFormatType,
    // The root url of the HiPS
-    pub hips_url: Url,
+    pub hips_cdid: CreatorDid,
    // The total url of the query
    pub url: Url,
    pub id: QueryId,
 }

+use crate::renderable::CreatorDid;
 use crate::{healpix::cell::HEALPixCell, survey::config::HiPSConfig};
 impl Tile {
    pub fn new(
        cell: &HEALPixCell,
-        hips_id: String,
+        hips_cdid: String,
        hips_url: String,
        format: ImageFormatType,
    ) -> Self {
@@ -42,10 +43,10 @@ impl Tile {
            hips_url, depth, dir_idx, idx, ext
        );

-        let id = format!("{}{}{}{}", hips_id, depth, idx, ext);
+        let id = format!("{}{}{}{}", hips_cdid, depth, idx, ext);

        Tile {
-            hips_url,
+            hips_cdid,
            url,
            cell: *cell,
            format,
@@ -58,8 +59,8 @@ use super::request::tile::TileRequest;
 impl Query for Tile {
    type Request = TileRequest;

-    fn url(&self) -> &Url {
-        &self.url
+    fn hips_cdid(&self) -> &CreatorDid {
+        &self.hips_cdid
    }

    fn id(&self) -> &QueryId {
@@ -73,7 +74,7 @@ pub struct Allsky {
    pub tile_size: i32,
    pub texture_size: i32,
    // The root url of the HiPS
-    pub hips_url: Url,
+    pub hips_cdid: CreatorDid,
    // The total url of the query
    pub url: Url,
    pub id: QueryId,
@@ -81,20 +82,20 @@ pub struct Allsky {

 impl Allsky {
    pub fn new(cfg: &HiPSConfig) -> Self {
-        let hips_url = cfg.get_root_url().to_string();
+        let hips_cdid = cfg.get_creator_did().to_string();
        let tile_size = cfg.get_tile_size();
        let texture_size = cfg.get_texture_size();
        let format = cfg.get_format();
        let ext = format.get_ext_file();

-        let url = format!("{}/Norder3/Allsky.{}", hips_url, ext);
+        let url = format!("{}/Norder3/Allsky.{}", cfg.get_root_url(), ext);

        let id = format!("{}Allsky{}", cfg.get_creator_did(), ext);

        Allsky {
            tile_size,
            texture_size,
-            hips_url,
+            hips_cdid,
            url,
            format,
            id,
@@ -106,8 +107,8 @@ use super::request::allsky::AllskyRequest;
 impl Query for Allsky {
    type Request = AllskyRequest;

-    fn url(&self) -> &Url {
-        &self.url
+    fn hips_cdid(&self) -> &CreatorDid {
+        &self.hips_cdid
    }

    fn id(&self) -> &QueryId {
@@ -119,7 +120,7 @@ impl Query for Allsky {
 pub struct PixelMetadata {
    pub format: ImageFormatType,
    // The root url of the HiPS
-    pub hips_url: Url,
+    pub hips_cdid: CreatorDid,
    // The total url of the query
    pub url: Url,
    pub id: QueryId,
@@ -127,15 +128,15 @@ pub struct PixelMetadata {

 impl PixelMetadata {
    pub fn new(cfg: &HiPSConfig) -> Self {
-        let hips_url = cfg.get_root_url().to_string();
+        let hips_cdid = cfg.get_creator_did().to_string();
        let format = cfg.get_format();
        let ext = format.get_ext_file();

-        let url = format!("{}/Norder3/Allsky.{}", hips_url, ext);
+        let url = format!("{}/Norder3/Allsky.{}", cfg.get_root_url(), ext);

-        let id = format!("{}Allsky{}", cfg.get_creator_did(), ext);
+        let id = format!("{}Allsky{}", hips_cdid, ext);
        PixelMetadata {
-            hips_url,
+            hips_cdid,
            url,
            format,
            id,
@@ -147,8 +148,8 @@ use super::request::blank::PixelMetadataRequest;
 impl Query for PixelMetadata {
    type Request = PixelMetadataRequest;

-    fn url(&self) -> &Url {
-        &self.url
+    fn hips_cdid(&self) -> &CreatorDid {
+        &self.hips_cdid
    }

    fn id(&self) -> &QueryId {
@@ -161,10 +162,15 @@ pub struct Moc {
    // The total url of the query
    pub url: Url,
    pub params: al_api::moc::MOC,
+    pub hips_cdid: CreatorDid,
 }
 impl Moc {
-    pub fn new(url: String, params: al_api::moc::MOC) -> Self {
-        Moc { url, params }
+    pub fn new(url: String, hips_cdid: CreatorDid, params: al_api::moc::MOC) -> Self {
+        Moc {
+            url,
+            params,
+            hips_cdid,
+        }
    }
 }

@@ -172,8 +178,8 @@ use super::request::moc::MOCRequest;
 impl Query for Moc {
    type Request = MOCRequest;

-    fn url(&self) -> &Url {
-        &self.url
+    fn hips_cdid(&self) -> &CreatorDid {
+        &self.hips_cdid
    }

    fn id(&self) -> &QueryId {
--- a/src/core/src/downloader/request/allsky.rs
+++ b/src/core/src/downloader/request/allsky.rs
@@ -1,6 +1,7 @@
 use std::io::Cursor;

 use crate::downloader::query;
+use crate::renderable::CreatorDid;
 use al_core::image::format::ChannelType;
 use al_core::image::ImageType;

@@ -9,7 +10,7 @@ use fitsrs::{fits::Fits, hdu::data::InMemData};
 use super::{Request, RequestType};
 use crate::downloader::QueryId;
 pub struct AllskyRequest {
-    pub hips_url: Url,
+    pub hips_cdid: CreatorDid,
    pub url: Url,
    pub depth_tile: u8,
    pub id: QueryId,
@@ -76,7 +77,7 @@ impl From<query::Allsky> for AllskyRequest {
            format,
            tile_size,
            url,
-            hips_url,
+            hips_cdid,
            texture_size,
            id,
        } = query;
@@ -207,7 +208,7 @@ impl From<query::Allsky> for AllskyRequest {

        Self {
            id,
-            hips_url,
+            hips_cdid,
            depth_tile,
            url,
            request,
@@ -309,7 +310,7 @@ pub struct Allsky {
    pub time_req: Time,
    pub depth_tile: u8,

-    pub hips_url: Url,
+    pub hips_cdid: CreatorDid,
    url: Url,
 }

@@ -320,8 +321,8 @@ impl Allsky {
        self.image.lock().unwrap_abort().is_none()
    }

-    pub fn get_hips_url(&self) -> &Url {
-        &self.hips_url
+    pub fn get_hips_cdid(&self) -> &CreatorDid {
+        &self.hips_cdid
    }

    pub fn get_url(&self) -> &Url {
@@ -333,7 +334,7 @@ impl<'a> From<&'a AllskyRequest> for Option<Allsky> {
    fn from(request: &'a AllskyRequest) -> Self {
        let AllskyRequest {
            request,
-            hips_url,
+            hips_cdid,
            depth_tile,
            url,
            ..
@@ -346,7 +347,7 @@ impl<'a> From<&'a AllskyRequest> for Option<Allsky> {
                time_req: *time_request,
                // This is a clone on a Arc, it is supposed to be fast
                image: data.clone(),
-                hips_url: hips_url.clone(),
+                hips_cdid: hips_cdid.clone(),
                url: url.clone(),
                depth_tile: *depth_tile,
            })
--- a/src/core/src/downloader/request/blank.rs
+++ b/src/core/src/downloader/request/blank.rs
@@ -2,6 +2,7 @@ use al_core::image::format::ChannelType;
 use std::io::Cursor;

 use crate::downloader::query;
+use crate::renderable::CreatorDid;
 use fitsrs::fits::Fits;

 #[derive(Debug, Clone, Copy)]
@@ -27,7 +28,7 @@ use crate::downloader::QueryId;
 pub struct PixelMetadataRequest {
    pub id: QueryId,
    pub url: Url,
-    pub hips_url: Url,
+    pub hips_cdid: CreatorDid,
    request: Request<Metadata>,
 }

@@ -49,7 +50,7 @@ impl From<query::PixelMetadata> for PixelMetadataRequest {
        let query::PixelMetadata {
            format,
            url,
-            hips_url,
+            hips_cdid,
            id,
        } = query;

@@ -126,7 +127,7 @@ impl From<query::PixelMetadata> for PixelMetadataRequest {
        Self {
            id,
            url,
-            hips_url,
+            hips_cdid,
            request,
        }
    }
@@ -136,7 +137,7 @@ use std::sync::{Arc, Mutex};
 #[derive(Debug)]
 pub struct PixelMetadata {
    pub value: Arc<Mutex<Option<Metadata>>>,
-    pub hips_url: String,
+    pub hips_cdid: CreatorDid,
    pub url: String,
 }
 use crate::Abort;
@@ -144,7 +145,7 @@ impl<'a> From<&'a PixelMetadataRequest> for Option<PixelMetadata> {
    fn from(request: &'a PixelMetadataRequest) -> Self {
        let PixelMetadataRequest {
            request,
-            hips_url,
+            hips_cdid,
            url,
            ..
        } = request;
@@ -152,7 +153,7 @@ impl<'a> From<&'a PixelMetadataRequest> for Option<PixelMetadata> {
            let Request::<Metadata> { data, .. } = request;
            // It will always be resolved and found as we will request a well know tile (Norder0/Tile0)
            Some(PixelMetadata {
-                hips_url: hips_url.clone(),
+                hips_cdid: hips_cdid.clone(),
                url: url.to_string(),
                value: data.clone(),
            })
--- a/src/core/src/downloader/request/moc.rs
+++ b/src/core/src/downloader/request/moc.rs
@@ -1,4 +1,5 @@
 use crate::downloader::query;
+use crate::renderable::CreatorDid;

 use super::{Request, RequestType};
 use crate::downloader::QueryId;
@@ -8,7 +9,7 @@ use moclib::qty::Hpx;

 pub struct MOCRequest {
    //pub id: QueryId,
-    pub url: Url,
+    pub hips_cdid: CreatorDid,
    pub params: al_api::moc::MOC,
    request: Request<HEALPixCoverage>,
 }
@@ -48,7 +49,11 @@ use wasm_bindgen::JsValue;
 impl From<query::Moc> for MOCRequest {
    // Create a tile request associated to a HiPS
    fn from(query: query::Moc) -> Self {
-        let query::Moc { url, params } = query;
+        let query::Moc {
+            url,
+            params,
+            hips_cdid,
+        } = query;

        let url_clone = url.clone();

@@ -88,7 +93,8 @@ impl From<query::Moc> for MOCRequest {

        Self {
            //id,
-            url,
+            //url,
+            hips_cdid,
            request,
            params,
        }
@@ -99,12 +105,12 @@ use std::sync::{Arc, Mutex};
 pub struct Moc {
    pub moc: Arc<Mutex<Option<HEALPixCoverage>>>,
    pub params: al_api::moc::MOC,
-    pub url: Url,
+    pub hips_cdid: Url,
 }

 impl Moc {
-    pub fn get_url(&self) -> &Url {
-        &self.url
+    pub fn get_hips_cdid(&self) -> &Url {
+        &self.hips_cdid
    }
 }

@@ -112,7 +118,7 @@ impl<'a> From<&'a MOCRequest> for Option<Moc> {
    fn from(request: &'a MOCRequest) -> Self {
        let MOCRequest {
            request,
-            url,
+            hips_cdid,
            params,
            ..
        } = request;
@@ -121,7 +127,7 @@ impl<'a> From<&'a MOCRequest> for Option<Moc> {
            Some(Moc {
                // This is a clone on a Arc, it is supposed to be fast
                moc: data.clone(),
-                url: url.clone(),
+                hips_cdid: hips_cdid.clone(),
                params: params.clone(),
            })
        } else {
--- a/src/core/src/downloader/request/mod.rs
+++ b/src/core/src/downloader/request/mod.rs
@@ -95,7 +95,7 @@ impl RequestType {
            RequestType::Tile(request) => &request.id,
            RequestType::Allsky(request) => &request.id,
            RequestType::PixelMetadata(request) => &request.id,
-            RequestType::Moc(request) => &request.url,
+            RequestType::Moc(request) => &request.hips_cdid,
        }
    }
 }
@@ -125,12 +125,12 @@ pub enum Resource {
 }

 impl Resource {
-    pub fn url(&self) -> &Url {
+    pub fn id(&self) -> &String {
        match self {
-            Resource::Tile(tile) => tile.get_url(),
-            Resource::Allsky(allsky) => allsky.get_url(),
-            Resource::PixelMetadata(PixelMetadata { url, .. }) => url,
-            Resource::Moc(moc) => moc.get_url(),
+            Resource::Tile(tile) => tile.get_hips_cdid(),
+            Resource::Allsky(allsky) => allsky.get_hips_cdid(),
+            Resource::PixelMetadata(PixelMetadata { hips_cdid, .. }) => hips_cdid,
+            Resource::Moc(moc) => moc.get_hips_cdid(),
        }
    }
 }
--- a/src/core/src/downloader/request/tile.rs
+++ b/src/core/src/downloader/request/tile.rs
@@ -1,4 +1,5 @@
 use crate::healpix::cell::HEALPixCell;
+use crate::renderable::CreatorDid;
 use al_core::image::format::{ChannelType, ImageFormatType, RGB8U, RGBA8U};

 use crate::downloader::query;
@@ -12,7 +13,7 @@ pub struct TileRequest {
    pub id: QueryId,

    cell: HEALPixCell,
-    hips_url: Url,
+    hips_cdid: CreatorDid,
    url: Url,
    format: ImageFormatType,

@@ -57,7 +58,7 @@ impl From<query::Tile> for TileRequest {
            format,
            cell,
            url,
-            hips_url,
+            hips_cdid,
            id,
        } = query;

@@ -177,7 +178,7 @@ impl From<query::Tile> for TileRequest {
            cell,
            format,
            id,
-            hips_url,
+            hips_cdid,
            url,
            request,
        }
@@ -191,7 +192,7 @@ pub struct Tile {
    pub time_req: Time,
    pub cell: HEALPixCell,
    pub format: ImageFormatType,
-    hips_url: Url,
+    hips_cdid: CreatorDid,
    url: Url,
 }

@@ -203,8 +204,8 @@ impl Tile {
    }

    #[inline(always)]
-    pub fn get_hips_url(&self) -> &Url {
-        &self.hips_url
+    pub fn get_hips_cdid(&self) -> &CreatorDid {
+        &self.hips_cdid
    }

    #[inline(always)]
@@ -228,7 +229,7 @@ impl<'a> From<&'a TileRequest> for Option<Tile> {
        let TileRequest {
            cell,
            request,
-            hips_url,
+            hips_cdid,
            url,
            format,
            ..
@@ -242,7 +243,7 @@ impl<'a> From<&'a TileRequest> for Option<Tile> {
                time_req: *time_request,
                // This is a clone on a Arc, it is supposed to be fast
                image: data.clone(),
-                hips_url: hips_url.clone(),
+                hips_cdid: hips_cdid.clone(),
                url: url.clone(),
                format: *format,
            })
--- a/src/core/src/grid/mod.rs
+++ b/src/core/src/grid/mod.rs
@@ -2,6 +2,7 @@ pub mod label;
 pub mod meridian;
 pub mod parallel;

+use crate::grid::parallel::Parallel;
 use crate::math::projection::coo_space::XYScreen;
 use crate::Abort;

@@ -31,6 +32,9 @@ pub struct ProjetedGrid {
    fmt: angle::SerializeFmt,

    line_style: line::Style,
+
+    meridians: Vec<Meridian>,
+    parallels: Vec<Parallel>,
 }

 use crate::shader::ShaderManager;
@@ -40,6 +44,8 @@ use crate::renderable::line::RasterizedLineRenderer;
 use crate::renderable::text::TextRenderManager;
 use web_sys::HtmlElement;

+use self::meridian::Meridian;
+
 impl ProjetedGrid {
    pub fn new(aladin_div: &HtmlElement) -> Result<ProjetedGrid, JsValue> {
        let text_renderer = TextRenderManager::new(aladin_div)?;
@@ -56,6 +62,8 @@ impl ProjetedGrid {
        let line_style = line::Style::None;
        let fmt = angle::SerializeFmt::DMS;
        let thickness = 2.0;
+        let meridians = Vec::new();
+        let parallels = Vec::new();

        let grid = ProjetedGrid {
            color,
@@ -66,6 +74,8 @@ impl ProjetedGrid {
            thickness,

            text_renderer,
+            meridians,
+            parallels,
            fmt,
        };
        // Initialize the vertices & labels
@@ -126,9 +136,9 @@ impl ProjetedGrid {
        if let Some(enabled) = enabled {
            self.enabled = enabled;

-            if !self.enabled {
+            /*if !self.enabled {
                self.text_renderer.clear_text_canvas();
-            }
+            }*/
        }

        Ok(())
@@ -147,7 +157,7 @@ impl ProjetedGrid {
        let step_line_px = max_dim_px * 0.2;

        // update meridians
-        let meridians = {
+        self.meridians = {
            // Select the good step with a binary search
            let step_lon_precised =
                (bbox.get_lon_size() as f64) * step_line_px / (camera.get_width() as f64);
@@ -173,7 +183,7 @@ impl ProjetedGrid {
            meridians
        };

-        let parallels = {
+        self.parallels = {
            let step_lat_precised =
                (bbox.get_lat_size() as f64) * step_line_px / (camera.get_height() as f64);
            let step_lat = select_fixed_step(step_lat_precised);
@@ -196,11 +206,12 @@ impl ProjetedGrid {
        };

        // update the line buffers
-        let paths = meridians
+        let paths = self
+            .meridians
            .iter()
            .map(|meridian| meridian.get_lines_vertices())
            .chain(
-                parallels
+                self.parallels
                    .iter()
                    .map(|parallel| parallel.get_lines_vertices()),
            )
@@ -213,12 +224,16 @@ impl ProjetedGrid {
        let m = camera.get_screen_size().magnitude();
        rasterizer.add_stroke_paths(paths, self.thickness, &self.color, &self.line_style);

-        // update labels
-        if self.show_labels {
-            let labels = meridians
+        Ok(())
+    }
+
+    pub fn draw_labels(&mut self, camera: &CameraViewPort) -> Result<(), JsValue> {
+        if self.enabled && self.show_labels {
+            let labels = self
+                .meridians
                .iter()
                .filter_map(|m| m.get_label())
-                .chain(parallels.iter().filter_map(|p| p.get_label()));
+                .chain(self.parallels.iter().filter_map(|p| p.get_label()));

            let dpi = camera.get_dpi();
            self.text_renderer.begin();
--- a/src/core/src/lib.rs
+++ b/src/core/src/lib.rs
@@ -73,6 +73,7 @@ extern "C" {
 #[macro_use]
 mod utils;

+use al_core::log::console_log;
 use math::projection::*;
 use renderable::coverage::moc::MOC;
 //use votable::votable::VOTableWrapper;
@@ -404,8 +405,8 @@ impl WebClient {
    }

    #[wasm_bindgen(js_name = setHiPSUrl)]
-    pub fn set_hips_url(&mut self, past_url: String, new_url: String) -> Result<(), JsValue> {
-        self.app.set_hips_url(past_url, new_url)
+    pub fn set_hips_url(&mut self, cdid: String, new_url: String) -> Result<(), JsValue> {
+        self.app.set_hips_url(&cdid, new_url)
    }

    #[wasm_bindgen(js_name = getImageMetadata)]
@@ -422,8 +423,8 @@ impl WebClient {
    }

    #[wasm_bindgen(js_name = setImageSurveyUrl)]
-    pub fn set_survey_url(&mut self, past_url: String, new_url: String) -> Result<(), JsValue> {
-        self.app.set_survey_url(past_url, new_url)
+    pub fn set_survey_url(&mut self, cdid: String, new_url: String) -> Result<(), JsValue> {
+        self.app.set_survey_url(&cdid, new_url)
    }

    #[wasm_bindgen(js_name = setBackgroundColor)]
@@ -442,7 +443,7 @@ impl WebClient {
    /// * `green` - Green amount (between 0.0 and 1.0)
    /// * `blue` - Blue amount (between 0.0 and 1.0)
    /// * `alpha` - Alpha amount (between 0.0 and 1.0)
-    #[wasm_bindgen(js_name = setGridConfig)]
+    #[wasm_bindgen(js_name = setGridOptions)]
    pub fn set_grid_cfg(&mut self, cfg: JsValue) -> Result<(), JsValue> {
        let cfg = serde_wasm_bindgen::from_value(cfg)?;

@@ -484,6 +485,13 @@ impl WebClient {
        Ok(())
    }

+    #[wasm_bindgen(js_name = setInertia)]
+    pub fn set_inertia(&mut self, inertia: bool) -> Result<(), JsValue> {
+        self.app.set_inertia(inertia);
+
+        Ok(())
+    }
+
    /// Set the absolute orientation of the view
    ///
    /// # Arguments
@@ -927,6 +935,11 @@ impl WebClient {
        self.app.is_rendering()
    }

+    #[wasm_bindgen(js_name = drawGridLabels)]
+    pub fn draw_grid_labels(&mut self) -> Result<(), JsValue> {
+        self.app.draw_grid_labels()
+    }
+
    #[wasm_bindgen(js_name = parseVOTable)]
    pub fn parse_votable(&mut self, s: &str) -> Result<JsValue, JsValue> {
        /*let votable: VOTableWrapper<votable::impls::mem::InMemTableDataRows> =
--- a/src/core/src/renderable/hips/mod.rs
+++ b/src/core/src/renderable/hips/mod.rs
@@ -4,10 +4,10 @@ pub mod uv;

 use al_api::hips::ImageExt;
 use al_api::hips::ImageMetadata;
-
 use al_core::colormap::Colormap;
 use al_core::colormap::Colormaps;
 use al_core::image::format::ChannelType;
+use al_core::image::format::ImageFormatType;
 use al_core::image::Image;
 use al_core::log::console_log;
 use al_core::shader::Shader;
@@ -30,6 +30,7 @@ use crate::math::angle::ToAngle;
 use crate::math::lonlat::LonLat;
 use crate::time::Time;
 use al_core::log;
+use std::collections::HashSet;

 // Recursively compute the number of subdivision needed for a cell
 // to not be too much skewed
@@ -282,9 +283,7 @@ pub fn get_raster_shader<'a>(
    shaders: &'a mut ShaderManager,
    config: &HiPSConfig,
 ) -> Result<&'a Shader, JsValue> {
-    let colored_hips = config.is_colored();
-
-    if colored_hips && cmap.label() == "native" {
+    if config.get_format().is_colored() && cmap.label() == "native" {
        crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerColorFS")
    } else {
        if config.tex_storing_unsigned_int {
@@ -318,8 +317,8 @@ pub fn get_raytracer_shader<'a>(
    shaders: &'a mut ShaderManager,
    config: &HiPSConfig,
 ) -> Result<&'a Shader, JsValue> {
-    let colored_hips = config.is_colored();
-    if colored_hips && cmap.label() == "native" {
+    //let colored_hips = config.is_colored();
+    if config.get_format().is_colored() && cmap.label() == "native" {
        crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerColorFS")
    } else {
        if config.tex_storing_unsigned_int {
@@ -530,11 +529,13 @@ impl HiPS {
    pub fn look_for_new_tiles<'a>(
        &'a mut self,
        camera: &'a mut CameraViewPort,
-    ) -> Option<impl Iterator<Item = &'a HEALPixCell> + 'a> {
+        proj: &ProjectionType,
+    ) -> Option<impl Iterator<Item = HEALPixCell> + 'a> {
        // do not add tiles if the view is already at depth 0
-        let depth_tile = (camera.get_texture_depth() + self.get_config().delta_depth())
+        let mut depth_tile = (camera.get_texture_depth() + self.get_config().delta_depth())
            .min(self.get_config().get_max_depth_tile())
            .max(self.get_config().get_min_depth_tile());
+        let dd = self.get_config().delta_depth();

        //let min_depth_tile = self.get_min_depth_tile();
        //let delta_depth = self.get_config().delta_depth();
@@ -549,13 +550,31 @@ impl HiPS {
        //if depth_tile >= min_bound_depth {
        //let depth_tile = depth_tile.max(min_bound_depth);
        let survey_frame = self.get_config().get_frame();
+        let mut already_considered_tiles = HashSet::new();
+
+        // raytracer is rendering and the shader only renders HPX texture cells of depth 0
+        if camera.is_raytracing(proj) {
+            depth_tile = 0;
+        }
+
        let tile_cells_iter = camera
            .get_hpx_cells(depth_tile, survey_frame)
            //.flat_map(move |cell| {
            //    let texture_cell = cell.get_texture_cell(delta_depth);
            //    texture_cell.get_tile_cells(delta_depth)
            //})
+            .flat_map(move |tile_cell| {
+                let tex_cell = tile_cell.get_texture_cell(dd);
+                //console_log(&format!("{:?}, dd:{:?}", tex_cell, dd));
+                tex_cell.get_tile_cells(dd)
+            })
            .filter(move |tile_cell| {
+                if already_considered_tiles.contains(tile_cell) {
+                    return false;
+                }
+
+                already_considered_tiles.insert(*tile_cell);
+
                if let Some(moc) = self.footprint_moc.as_ref() {
                    moc.intersects_cell(tile_cell) && !self.update_priority_tile(tile_cell)
                } else {
@@ -589,13 +608,8 @@ impl HiPS {
        self.textures.contains_tile(cell)
    }

-    pub fn update(
-        &mut self,
-        raytracer: &RayTracer,
-        camera: &mut CameraViewPort,
-        projection: &ProjectionType,
-    ) {
-        let raytracing = raytracer.is_rendering(camera);
+    pub fn update(&mut self, camera: &mut CameraViewPort, projection: &ProjectionType) {
+        let raytracing = camera.is_raytracing(projection);

        let vertices_recomputation_needed =
            !raytracing && (self.textures.reset_available_tiles() | camera.has_moved());
@@ -618,7 +632,7 @@ impl HiPS {
        self.textures.set_format(&self.gl, ext)
    }

-    pub fn get_fading_factor(&self) -> f32 {
+    /*pub fn get_fading_factor(&self) -> f32 {
        self.textures
            .start_time
            .map(|start_time| {
@@ -626,7 +640,7 @@ impl HiPS {
                fading.clamp(0.0, 1.0)
            })
            .unwrap_or(0.0)
-    }
+    }*/

    pub fn is_allsky(&self) -> bool {
        self.textures.config().is_allsky
@@ -718,15 +732,22 @@ impl HiPS {

            if let Some(cell) = cell {
                let texture_to_draw = if self.textures.contains(cell) {
-                    let parent_cell = self.textures.get_nearest_parent(cell);
-
                    if let Some(ending_cell_in_tex) = self.textures.get(cell) {
-                        if let Some(starting_cell_in_tex) = self.textures.get(&parent_cell) {
-                            Some(TextureToDraw::new(
-                                starting_cell_in_tex,
-                                ending_cell_in_tex,
-                                cell,
-                            ))
+                        if let Some(parent_cell) = self.textures.get_nearest_parent(cell) {
+                            if let Some(starting_cell_in_tex) = self.textures.get(&parent_cell) {
+                                Some(TextureToDraw::new(
+                                    starting_cell_in_tex,
+                                    ending_cell_in_tex,
+                                    cell,
+                                ))
+                            } else {
+                                // no blending here
+                                Some(TextureToDraw::new(
+                                    ending_cell_in_tex,
+                                    ending_cell_in_tex,
+                                    cell,
+                                ))
+                            }
                        } else {
                            Some(TextureToDraw::new(
                                ending_cell_in_tex,
@@ -738,22 +759,36 @@ impl HiPS {
                        None
                    }
                } else {
-                    let parent_cell = self.textures.get_nearest_parent(cell);
-                    let grand_parent_cell = self.textures.get_nearest_parent(&parent_cell);
-
-                    if let Some(ending_cell_in_tex) = self.textures.get(&parent_cell) {
-                        if let Some(starting_cell_in_tex) = self.textures.get(&grand_parent_cell) {
-                            Some(TextureToDraw::new(
-                                starting_cell_in_tex,
-                                ending_cell_in_tex,
-                                cell,
-                            ))
+                    if let Some(parent_cell) = self.textures.get_nearest_parent(cell) {
+                        if let Some(ending_cell_in_tex) = self.textures.get(&parent_cell) {
+                            if let Some(grand_parent_cell) =
+                                self.textures.get_nearest_parent(&parent_cell)
+                            {
+                                if let Some(starting_cell_in_tex) =
+                                    self.textures.get(&grand_parent_cell)
+                                {
+                                    Some(TextureToDraw::new(
+                                        starting_cell_in_tex,
+                                        ending_cell_in_tex,
+                                        cell,
+                                    ))
+                                } else {
+                                    // no blending
+                                    Some(TextureToDraw::new(
+                                        ending_cell_in_tex,
+                                        ending_cell_in_tex,
+                                        cell,
+                                    ))
+                                }
+                            } else {
+                                Some(TextureToDraw::new(
+                                    ending_cell_in_tex,
+                                    ending_cell_in_tex,
+                                    cell,
+                                ))
+                            }
                        } else {
-                            Some(TextureToDraw::new(
-                                ending_cell_in_tex,
-                                ending_cell_in_tex,
-                                cell,
-                            ))
+                            None
                        }
                    } else {
                        None
@@ -978,6 +1013,7 @@ impl HiPS {
        camera: &CameraViewPort,
        raytracer: &RayTracer,
        cfg: &ImageMetadata,
+        proj: &ProjectionType,
    ) -> Result<(), JsValue> {
        // Get the coo system transformation matrix
        let selected_frame = camera.get_coo_system();
@@ -989,7 +1025,7 @@ impl HiPS {
        let w2v = c * (*camera.get_w2m());
        let v2w = w2v.transpose();

-        let raytracing = raytracer.is_rendering(camera);
+        let raytracing = camera.is_raytracing(proj);
        let config = self.get_config();

        self.gl.enable(WebGl2RenderingContext::BLEND);
@@ -1002,8 +1038,8 @@ impl HiPS {
        } = cfg;

        // Add starting fading
-        let fading = self.get_fading_factor();
-        let opacity = opacity * fading;
+        //let fading = self.get_fading_factor();
+        //let opacity = opacity * fading;
        // Get the colormap from the color
        let cmap = colormaps.get(color.cmap_name.as_ref());

@@ -1021,7 +1057,7 @@ impl HiPS {
                    .attach_uniform("model", &w2v)
                    .attach_uniform("inv_model", &v2w)
                    .attach_uniform("current_time", &utils::get_current_time())
-                    .attach_uniform("opacity", &opacity)
+                    .attach_uniform("opacity", opacity)
                    .attach_uniforms_from(colormaps);

                raytracer.draw(&shader);
@@ -1049,7 +1085,7 @@ impl HiPS {
                    .attach_uniform("model", &w2v)
                    .attach_uniform("inv_model", &v2w)
                    .attach_uniform("current_time", &utils::get_current_time())
-                    .attach_uniform("opacity", &opacity)
+                    .attach_uniform("opacity", opacity)
                    .attach_uniforms_from(colormaps)
                    .bind_vertex_array_object_ref(&self.vao)
                    .draw_elements_with_i32(
--- a/src/core/src/renderable/hips/raytracing.rs
+++ b/src/core/src/renderable/hips/raytracing.rs
@@ -239,11 +239,4 @@ impl RayTracer {
                0,
            )
    }
-
-    pub fn is_rendering(&self, camera: &CameraViewPort) -> bool {
-        // Check whether the tile depth is 0 for square projection
-        // definition domains i.e. Mercator
-        let depth = camera.get_texture_depth();
-        camera.is_allsky() || depth == 0
-    }
 }
--- a/src/core/src/renderable/mod.rs
+++ b/src/core/src/renderable/mod.rs
@@ -47,15 +47,17 @@ pub trait Renderer {
 }

 pub(crate) type Url = String;
+pub(crate) type CreatorDid = String;
+
 type LayerId = String;
 pub struct Layers {
    // Surveys to query
-    surveys: HashMap<Url, HiPS>,
+    surveys: HashMap<CreatorDid, HiPS>,
    images: HashMap<Url, Image>,
    // The meta data associated with a layer
    meta: HashMap<LayerId, ImageMetadata>,
-    // Hashmap between urls and layers
-    urls: HashMap<LayerId, Url>,
+    // Hashmap between FITS image urls/HiPS creatorDid and layers
+    ids: HashMap<LayerId, String>,
    // Layers given in a specific order to draw
    layers: Vec<LayerId>,

@@ -112,7 +114,7 @@ impl Layers {
        let surveys = HashMap::new();
        let images = HashMap::new();
        let meta = HashMap::new();
-        let urls = HashMap::new();
+        let ids = HashMap::new();
        let layers = Vec::new();

        // - The raytracer is a mesh covering the view. Each pixel of this mesh
@@ -164,7 +166,7 @@ impl Layers {
            images,

            meta,
-            urls,
+            ids,
            layers,

            raytracer,
@@ -176,19 +178,19 @@ impl Layers {
        })
    }

-    pub fn set_survey_url(&mut self, past_url: String, new_url: String) -> Result<(), JsValue> {
-        if let Some(mut survey) = self.surveys.remove(&past_url) {
+    pub fn set_survey_url(&mut self, cdid: &CreatorDid, new_url: String) -> Result<(), JsValue> {
+        if let Some(mut survey) = self.surveys.get_mut(cdid) {
            // update the root_url
            survey.get_config_mut().set_root_url(new_url.clone());

-            self.surveys.insert(new_url.clone(), survey);
+            //self.surveys.insert(new_url.clone(), survey);

            // update all the layer urls
-            for url in self.urls.values_mut() {
-                if *url == past_url {
-                    *url = new_url.clone();
+            /*for id in self.ids.values_mut() {
+                if *id == past_url {
+                    *id = new_url.clone();
                }
-            }
+            }*/

            Ok(())
        } else {
@@ -212,6 +214,10 @@ impl Layers {
        self.background_color = color;
    }

+    pub fn get_raytracer(&self) -> &RayTracer {
+        &self.raytracer
+    }
+
    pub fn draw(
        &mut self,
        camera: &mut CameraViewPort,
@@ -220,15 +226,15 @@ impl Layers {
        projection: &ProjectionType,
    ) -> Result<(), JsValue> {
        let raytracer = &self.raytracer;
-        let raytracing = raytracer.is_rendering(camera);
+        let raytracing = camera.is_raytracing(projection);

        // Check whether a survey to plot is allsky
        // if neither are, we draw a font
        // if there are, we do not draw nothing
        let render_background_color = !self.layers.iter().any(|layer| {
            let meta = self.meta.get(layer).unwrap_abort();
-            let url = self.urls.get(layer).unwrap_abort();
-            if let Some(survey) = self.surveys.get(url) {
+            let cdid = self.ids.get(layer).unwrap_abort();
+            if let Some(survey) = self.surveys.get(cdid) {
                let hips_cfg = survey.get_config();
                (survey.is_allsky() || hips_cfg.get_format().get_channel() == ChannelType::RGB8U)
                    && meta.opacity == 1.0
@@ -270,8 +276,8 @@ impl Layers {
        for (idx_layer, layer) in self.layers.iter().enumerate().skip(1) {
            let meta = self.meta.get(layer).expect("Meta should be found");

-            let url = self.urls.get(layer).expect("Url should be found");
-            if let Some(survey) = self.surveys.get_mut(url) {
+            let id = self.ids.get(layer).expect("Url should be found");
+            if let Some(survey) = self.surveys.get_mut(id) {
                let hips_cfg = survey.get_config();

                let fully_covering_survey = (survey.is_allsky()
@@ -288,13 +294,13 @@ impl Layers {
            let draw_opt = self.meta.get(layer).expect("Meta should be found");
            if draw_opt.visible() {
                // 1. Update the survey if necessary
-                let url = self.urls.get(layer).expect("Url should be found");
-                if let Some(survey) = self.surveys.get_mut(url) {
-                    survey.update(&self.raytracer, camera, projection);
+                let id = self.ids.get(layer).expect("Url should be found");
+                if let Some(survey) = self.surveys.get_mut(id) {
+                    survey.update(camera, projection);

                    // 2. Draw it if its opacity is not null
-                    survey.draw(shaders, colormaps, camera, raytracer, draw_opt)?;
-                } else if let Some(image) = self.images.get_mut(url) {
+                    survey.draw(shaders, colormaps, camera, raytracer, draw_opt, projection)?;
+                } else if let Some(image) = self.images.get_mut(id) {
                    image.update(camera, projection)?;

                    // 2. Draw it if its opacity is not null
@@ -326,7 +332,7 @@ impl Layers {
        ));
        // Color configs, and urls are indexed by layer
        self.meta.remove(layer).ok_or(err_layer_not_found.clone())?;
-        let url = self.urls.remove(layer).ok_or(err_layer_not_found.clone())?;
+        let id = self.ids.remove(layer).ok_or(err_layer_not_found.clone())?;
        // layer from layers does also need to be removed
        let id_layer = self
            .layers
@@ -342,26 +348,26 @@ impl Layers {
        camera.set_longitude_reversed(longitude_reversed, proj);

        // Check if the url is still used
-        let url_still_used = self.urls.values().any(|rem_url| rem_url == &url);
-        if url_still_used {
+        let id_still_used = self.ids.values().any(|rem_id| rem_id == &id);
+        if id_still_used {
            // Keep the resource whether it is a HiPS or a FITS
            Ok(id_layer)
        } else {
            // Resource not needed anymore
-            if let Some(s) = self.surveys.remove(&url) {
+            if let Some(s) = self.surveys.remove(&id) {
                // A HiPS has been found and removed
                let hips_frame = s.get_config().get_frame();
                // remove the frame
                camera.unregister_view_frame(hips_frame, proj);

                Ok(id_layer)
-            } else if let Some(_) = self.images.remove(&url) {
+            } else if let Some(_) = self.images.remove(&id) {
                // A FITS image has been found and removed
                Ok(id_layer)
            } else {
                Err(JsValue::from_str(&format!(
                    "Url found {:?} is associated to no surveys.",
-                    url
+                    id
                )))
            }
        }
@@ -383,11 +389,11 @@ impl Layers {
        self.layers[id_layer] = new_layer.to_string();

        let meta = self.meta.remove(layer).ok_or(err_layer_not_found.clone())?;
-        let url = self.urls.remove(layer).ok_or(err_layer_not_found)?;
+        let id = self.ids.remove(layer).ok_or(err_layer_not_found)?;

        // Add the new
        self.meta.insert(new_layer.to_string(), meta);
-        self.urls.insert(new_layer.to_string(), url);
+        self.ids.insert(new_layer.to_string(), id);

        Ok(())
    }
@@ -451,13 +457,16 @@ impl Layers {
        camera.set_longitude_reversed(longitude_reversed, proj);

        // 3. Add the image survey
-        let url = String::from(properties.get_url());
+        let creator_did = String::from(properties.get_creator_did());
        // The layer does not already exist
        // Let's check if no other hipses points to the
        // same url than `hips`
-        let url_already_found = self.surveys.keys().any(|hips_url| hips_url == &url);
+        let cdid_already_found = self
+            .surveys
+            .keys()
+            .any(|hips_cdid| hips_cdid == &creator_did);

-        if !url_already_found {
+        if !cdid_already_found {
            // The url is not processed yet
            let cfg = HiPSConfig::new(&properties, img_ext)?;

@@ -475,14 +484,14 @@ impl Layers {
            let hips = HiPS::new(cfg, gl, camera)?;
            // add the frame to the camera

-            self.surveys.insert(url.clone(), hips);
+            self.surveys.insert(creator_did.clone(), hips);
        }

-        self.urls.insert(layer.clone(), url.clone());
+        self.ids.insert(layer.clone(), creator_did.clone());

        let hips = self
            .surveys
-            .get(&url)
+            .get(&creator_did)
            .ok_or(JsValue::from_str("HiPS not found"))?;
        Ok(hips)
    }
@@ -541,7 +550,7 @@ impl Layers {
            self.images.insert(url.clone(), image);
        }

-        self.urls.insert(layer.clone(), url.clone());
+        self.ids.insert(layer.clone(), url.clone());

        let fits = self
            .images
@@ -617,26 +626,26 @@ impl Layers {
    // Accessors
    // HiPSes getters
    pub fn get_hips_from_layer(&self, layer: &str) -> Option<&HiPS> {
-        self.urls
+        self.ids
            .get(layer)
-            .map(|url| self.surveys.get(url))
+            .map(|cdid| self.surveys.get(cdid))
            .flatten()
    }

    pub fn get_mut_hips_from_layer(&mut self, layer: &str) -> Option<&mut HiPS> {
-        if let Some(url) = self.urls.get_mut(layer) {
-            self.surveys.get_mut(url)
+        if let Some(cdid) = self.ids.get_mut(layer) {
+            self.surveys.get_mut(cdid)
        } else {
            None
        }
    }

-    pub fn get_mut_hips_from_url(&mut self, root_url: &str) -> Option<&mut HiPS> {
-        self.surveys.get_mut(root_url)
+    pub fn get_mut_hips_from_cdid(&mut self, cdid: &str) -> Option<&mut HiPS> {
+        self.surveys.get_mut(cdid)
    }

-    pub fn get_hips_from_url(&mut self, root_url: &str) -> Option<&HiPS> {
-        self.surveys.get(root_url)
+    pub fn get_hips_from_cdid(&mut self, cdid: &str) -> Option<&HiPS> {
+        self.surveys.get(cdid)
    }

    pub fn values_hips(&self) -> impl Iterator<Item = &HiPS> {
@@ -649,7 +658,7 @@ impl Layers {

    // Fits images getters
    pub fn get_mut_image_from_layer(&mut self, layer: &str) -> Option<&mut Image> {
-        if let Some(url) = self.urls.get(layer) {
+        if let Some(url) = self.ids.get(layer) {
            self.images.get_mut(url)
        } else {
            None
@@ -657,7 +666,7 @@ impl Layers {
    }

    pub fn get_image_from_layer(&self, layer: &str) -> Option<&Image> {
-        self.urls
+        self.ids
            .get(layer)
            .map(|url| self.images.get(url))
            .flatten()
--- a/src/core/src/renderable/text.rs
+++ b/src/core/src/renderable/text.rs
@@ -1,4 +1,5 @@
 use super::Renderer;
+use al_core::log::console_log;
 use web_sys::CanvasRenderingContext2d;

 pub struct TextRenderManager {
@@ -25,7 +26,7 @@ impl TextRenderManager {
    pub fn new(aladin_div: &HtmlElement) -> Result<Self, JsValue> {
        let canvas = aladin_div
            // Inside it, retrieve the canvas
-            .get_elements_by_class_name("aladin-gridCanvas")
+            .get_elements_by_class_name("aladin-catalogCanvas")
            .get_with_index(0)
            .unwrap_abort()
            .dyn_into::<web_sys::HtmlCanvasElement>()?;
@@ -67,6 +68,7 @@ impl TextRenderManager {
        angle: A,
    ) -> Result<(), JsValue> {
        self.ctx.save();
+
        self.ctx
            .translate(screen_pos.x as f64, screen_pos.y as f64)?;

@@ -80,37 +82,19 @@ impl TextRenderManager {

        Ok(())
    }
-
-    pub fn draw(
-        &mut self,
-        _camera: &CameraViewPort,
-        _color: &ColorRGBA,
-        _scale: f32,
-    ) -> Result<(), JsValue> {
-        Ok(())
-    }
-
-    pub fn clear_text_canvas(&mut self) {
-        self.ctx.clear_rect(
-            0_f64,
-            0_f64,
-            self.canvas.width() as f64,
-            self.canvas.height() as f64,
-        );
-    }
 }

 impl Renderer for TextRenderManager {
    fn begin(&mut self) {
-        self.ctx = self
-            .canvas
-            .get_context("2d")
-            .unwrap_abort()
-            .unwrap_abort()
-            .dyn_into::<web_sys::CanvasRenderingContext2d>()
-            .unwrap_abort();
-
-        self.clear_text_canvas();
+        //self.clear_text_canvas();
+        // Clear the Aladin Lite 2d canvas
+        // This canvas is where catalogs, grid labels, Hpx grid are drawn
+        /*self.ctx.clear_rect(
+            0_f64,
+            0_f64,
+            self.canvas.width() as f64,
+            self.canvas.height() as f64,
+        );*/

        // reset the font and color
        self.ctx
--- a/src/core/src/survey/buffer.rs
+++ b/src/core/src/survey/buffer.rs
@@ -134,11 +134,11 @@ pub struct ImageSurveyTextures {
    size: usize,

    pub textures: HashMap<HEALPixCell, Texture>,
-    pub base_textures: [Texture; NUM_HPX_TILES_DEPTH_ZERO],
+    //pub base_textures: [Texture; NUM_HPX_TILES_DEPTH_ZERO],
    //pub cutoff_values_tile: Rc<RefCell<HashMap<HEALPixCell, (f32, f32)>>>,

    // Array of 2D textures
-    texture_2d_array: Rc<Texture2DArray>,
+    texture_2d_array: Texture2DArray,

    // A boolean ensuring the root textures
    // have already been loaded
@@ -146,6 +146,7 @@ pub struct ImageSurveyTextures {
    pub start_time: Option<Time>,

    available_tiles_during_frame: bool,
+    //num_base_textures: usize,
    //exec: Rc<RefCell<TaskExecutor>>,
 }

@@ -176,11 +177,11 @@ impl ImageSurveyTextures {
        // Ensures there is at least space for the 12
        // root textures
        debug_assert!(size >= NUM_HPX_TILES_DEPTH_ZERO);
-        let heap = HEALPixCellHeap::with_capacity(size - NUM_HPX_TILES_DEPTH_ZERO);
+        let heap = HEALPixCellHeap::with_capacity(size);
        let textures = HashMap::with_capacity(size);

        let now = Time::now();
-        let base_textures = [
+        /*let base_textures = [
            Texture::new(&HEALPixCell(0, 0), 0, now),
            Texture::new(&HEALPixCell(0, 1), 1, now),
            Texture::new(&HEALPixCell(0, 2), 2, now),
@@ -193,34 +194,31 @@ impl ImageSurveyTextures {
            Texture::new(&HEALPixCell(0, 9), 9, now),
            Texture::new(&HEALPixCell(0, 10), 10, now),
            Texture::new(&HEALPixCell(0, 11), 11, now),
-        ];
+        ];*/
        let channel = config.get_format().get_channel();

-        #[cfg(feature = "webgl2")]
        let texture_2d_array = match channel {
            ChannelType::RGBA32F => unimplemented!(),
            ChannelType::RGB32F => unimplemented!(),
-            ChannelType::RGBA8U => Rc::new(create_texture_array::<RGBA8U>(gl, &config)?),
-            ChannelType::RGB8U => Rc::new(create_texture_array::<RGB8U>(gl, &config)?),
-            ChannelType::R8UI => Rc::new(create_texture_array::<R8UI>(gl, &config)?),
-            ChannelType::R16I => Rc::new(create_texture_array::<R16I>(gl, &config)?),
-            ChannelType::R32I => Rc::new(create_texture_array::<R32I>(gl, &config)?),
-            ChannelType::R32F => Rc::new(create_texture_array::<R32F>(gl, &config)?),
-            ChannelType::R64F => Rc::new(create_texture_array::<R64F>(gl, &config)?),
-        };
-        #[cfg(feature = "webgl1")]
-        let texture_2d_array = match config.get_format() {
-            ChannelType::RGBA32F => unimplemented!(),
-            ChannelType::RGB32F => unimplemented!(),
-            ChannelType::RGBA8U => Rc::new(create_texture_array::<RGBA8U>(gl, &config)?),
-            ChannelType::RGB8U => Rc::new(create_texture_array::<RGB8U>(gl, &config)?),
-            ChannelType::R32F => Rc::new(create_texture_array::<R32F>(gl, &config)?),
+            ChannelType::RGBA8U => create_texture_array::<RGBA8U>(gl, &config)?,
+            ChannelType::RGB8U => create_texture_array::<RGB8U>(gl, &config)?,
+            ChannelType::R32F => create_texture_array::<R32F>(gl, &config)?,
+            #[cfg(feature = "webgl2")]
+            ChannelType::R8UI => create_texture_array::<R8UI>(gl, &config)?,
+            #[cfg(feature = "webgl2")]
+            ChannelType::R16I => create_texture_array::<R16I>(gl, &config)?,
+            #[cfg(feature = "webgl2")]
+            ChannelType::R32I => create_texture_array::<R32I>(gl, &config)?,
+            #[cfg(feature = "webgl2")]
+            ChannelType::R64F => create_texture_array::<R64F>(gl, &config)?,
        };
+
        // The root textures have not been loaded
        //let ready = false;
        //let num_root_textures_available = 0;
        let available_tiles_during_frame = false;
        let start_time = None;
+        //let num_base_textures = 0;
        Ok(ImageSurveyTextures {
            config,
            heap,
@@ -228,8 +226,8 @@ impl ImageSurveyTextures {
            size,
            //num_root_textures_available,
            textures,
-            base_textures,
-
+            //base_textures,
+            //num_base_textures,
            texture_2d_array,
            available_tiles_during_frame,

@@ -246,21 +244,21 @@ impl ImageSurveyTextures {
        self.texture_2d_array = match channel {
            ChannelType::RGBA32F => unimplemented!(),
            ChannelType::RGB32F => unimplemented!(),
-            ChannelType::RGBA8U => Rc::new(create_texture_array::<RGBA8U>(gl, &self.config)?),
-            ChannelType::RGB8U => Rc::new(create_texture_array::<RGB8U>(gl, &self.config)?),
-            ChannelType::R32F => Rc::new(create_texture_array::<R32F>(gl, &self.config)?),
+            ChannelType::RGBA8U => create_texture_array::<RGBA8U>(gl, &self.config)?,
+            ChannelType::RGB8U => create_texture_array::<RGB8U>(gl, &self.config)?,
+            ChannelType::R32F => create_texture_array::<R32F>(gl, &self.config)?,
            #[cfg(feature = "webgl2")]
-            ChannelType::R8UI => Rc::new(create_texture_array::<R8UI>(gl, &self.config)?),
+            ChannelType::R8UI => create_texture_array::<R8UI>(gl, &self.config)?,
            #[cfg(feature = "webgl2")]
-            ChannelType::R16I => Rc::new(create_texture_array::<R16I>(gl, &self.config)?),
+            ChannelType::R16I => create_texture_array::<R16I>(gl, &self.config)?,
            #[cfg(feature = "webgl2")]
-            ChannelType::R32I => Rc::new(create_texture_array::<R32I>(gl, &self.config)?),
+            ChannelType::R32I => create_texture_array::<R32I>(gl, &self.config)?,
            #[cfg(feature = "webgl2")]
-            ChannelType::R64F => Rc::new(create_texture_array::<R64F>(gl, &self.config)?),
+            ChannelType::R64F => create_texture_array::<R64F>(gl, &self.config)?,
        };

        let now = Time::now();
-        self.base_textures = [
+        /*self.base_textures = [
            Texture::new(&HEALPixCell(0, 0), 0, now),
            Texture::new(&HEALPixCell(0, 1), 1, now),
            Texture::new(&HEALPixCell(0, 2), 2, now),
@@ -273,7 +271,7 @@ impl ImageSurveyTextures {
            Texture::new(&HEALPixCell(0, 9), 9, now),
            Texture::new(&HEALPixCell(0, 10), 10, now),
            Texture::new(&HEALPixCell(0, 11), 11, now),
-        ];
+        ];*/

        self.heap.clear();
        self.textures.clear();
@@ -326,7 +324,7 @@ impl ImageSurveyTextures {
            let tex_cell = cell.get_texture_cell(self.config.delta_depth());

            let tex_cell_is_root = tex_cell.is_root(self.config.delta_depth());
-            if !tex_cell_is_root && !self.textures.contains_key(&tex_cell) {
+            if !self.textures.contains_key(&tex_cell) {
                // The texture is not among the essential ones
                // (i.e. is not a root texture)
                let texture = if self.is_heap_full() {
@@ -340,6 +338,12 @@ impl ImageSurveyTextures {
                        "Texture (oldest one) has not been found in the buffer of textures",
                    );
                    // Clear and assign it to tex_cell
+                    /*let idx = if tex_cell_is_root {
+                        self.num_base_textures += 1;
+                        Some(tex_cell.idx() as i32)
+                    } else {
+                        None
+                    };*/
                    texture.replace(&tex_cell, time_request);

                    texture
@@ -347,10 +351,18 @@ impl ImageSurveyTextures {
                    // The heap buffer is not full, let's create a new
                    // texture with an unique idx
                    // The idx is computed based on the current size of the buffer
-                    let idx = NUM_HPX_TILES_DEPTH_ZERO + self.heap.len();
+                    /*let idx = if tex_cell_is_root {
+                        self.num_base_textures += 1;
+                        tex_cell.idx() as usize
+                    } else {
+                        //NUM_HPX_TILES_DEPTH_ZERO + (self.heap.len() - self.num_base_textures)
+                        self.heap.len()
+                    };*/
+                    let idx = self.heap.len();

                    Texture::new(&tex_cell, idx as i32, time_request)
                };
+
                // Push it to the buffer
                self.heap.push(&texture);

@@ -363,50 +375,35 @@ impl ImageSurveyTextures {
            // We can safely push it
            // First get the texture

-            let texture = if !tex_cell_is_root {
+            let texture = //if !tex_cell_is_root {
                self.textures
                    .get_mut(&tex_cell)
-                    .expect("the cell has to be in the tile buffer")
-            } else {
+                    .expect("the cell has to be in the tile buffer");
+            /* } else {
                let HEALPixCell(_, idx) = tex_cell;
                &mut self.base_textures[idx as usize]
-            };
+            };*/

-            if let Some(image) = image {
-                send_to_gpu(
-                    cell,
-                    texture,
-                    image,
-                    self.texture_2d_array.clone(),
-                    &self.config,
-                )?;
-                // Once the texture has been received in the GPU
-                texture.append(
-                    cell, // The tile cell
-                    &self.config,
-                    false,
-                );
-            } else {
-                send_to_gpu(
-                    cell,
-                    texture,
-                    self.config.get_default_image(),
-                    self.texture_2d_array.clone(),
-                    &self.config,
-                )?;
-                // Once the texture has been received in the GPU
-                texture.append(
-                    cell, // The tile cell
-                    &self.config,
-                    true,
-                );
-            };
+            let missing = image.is_none();
+            send_to_gpu(
+                cell,
+                texture,
+                image,
+                &self.texture_2d_array,
+                &mut self.config,
+            )?;
+
+            texture.append(
+                cell, // The tile cell
+                &self.config,
+                missing,
+            );

            self.available_tiles_during_frame = true;
            //self.ready = true;
-            if self.start_time.is_none() {
+            /*if self.start_time.is_none() {
                self.start_time = Some(Time::now());
-            }
+            }*/

            /*if tex_cell.is_root(self.config.delta_depth()) && texture.is_available() {
                self.num_root_textures_available += 1;
@@ -436,23 +433,15 @@ impl ImageSurveyTextures {
        // textures in the buffer
        let num_textures_heap = self.heap.len();

-        num_textures_heap == (self.size - NUM_HPX_TILES_DEPTH_ZERO)
+        num_textures_heap == self.size
    }

    // Tell if a texture is available meaning all its sub tiles
    // must have been written for the GPU
    pub fn contains(&self, texture_cell: &HEALPixCell) -> bool {
-        if let Some(texture) = self.textures.get(texture_cell) {
-            // The texture is in the buffer i.e. there is at least one
-            // sub tile received
-
-            // It is possible that it is not available. Available means
-            // all its sub tiles have been received and written to the
-            // textures array!
-            texture.is_available()
+        if let Some(t) = self.get(texture_cell) {
+            t.is_full()
        } else {
-            // The texture is not contained in the buffer i.e.
-            // even not one sub tile that has been received
            false
        }
    }
@@ -463,20 +452,20 @@ impl ImageSurveyTextures {
    pub fn contains_tile(&self, cell: &HEALPixCell) -> bool {
        let texture_cell = cell.get_texture_cell(self.config.delta_depth());

-        let tex_cell_is_root = texture_cell.is_root(self.config.delta_depth());
-        if tex_cell_is_root {
-            let HEALPixCell(_, idx) = texture_cell;
-            self.base_textures[idx as usize].contains(cell)
+        //let tex_cell_is_root = texture_cell.is_root(self.config.delta_depth());
+        //if tex_cell_is_root {
+        //    let HEALPixCell(_, idx) = texture_cell;
+        //    self.base_textures[idx as usize].contains(cell)
+        //} else {
+        if let Some(texture) = self.get(&texture_cell) {
+            // The texture is present in the buffer
+            // We must check whether it contains the tile
+            texture.contains(cell)
        } else {
-            if let Some(texture) = self.textures.get(&texture_cell) {
-                // The texture is present in the buffer
-                // We must check whether it contains the tile
-                texture.contains(cell)
-            } else {
-                // The texture in which cell should be is not present
-                false
-            }
+            // The texture in which cell should be is not present
+            false
        }
+        //}
    }

    // Update the priority of the texture containing the tile
@@ -486,9 +475,9 @@ impl ImageSurveyTextures {

        // Get the texture cell in which the tile has to be
        let texture_cell = cell.get_texture_cell(self.config.delta_depth());
-        if texture_cell.is_root(self.config().delta_depth()) {
-            return;
-        }
+        //if texture_cell.is_root(self.config().delta_depth()) {
+        //    return;
+        //}

        let texture = self
            .textures
@@ -520,7 +509,7 @@ impl ImageSurveyTextures {
        let (pix, dx, dy) = crate::healpix::utils::hash_with_dxdy(depth, lonlat);
        let texture_cell = HEALPixCell(depth, pix);

-        if let Some(texture) = self.textures.get(&texture_cell) {
+        if let Some(texture) = self.get(&texture_cell) {
            let cfg = &self.config;

            // Index of the texture in the total set of textures
@@ -568,29 +557,33 @@ impl ImageSurveyTextures {

    /// Accessors
    pub fn get(&self, texture_cell: &HEALPixCell) -> Option<&Texture> {
-        if texture_cell.is_root(self.config().delta_depth()) {
-            let HEALPixCell(_, idx) = texture_cell;
-            Some(&self.base_textures[*idx as usize])
-        } else {
-            self.textures.get(texture_cell)
-        }
+        //if texture_cell.is_root(self.config().delta_depth()) {
+        //    let HEALPixCell(_, idx) = texture_cell;
+        //    Some(&self.base_textures[*idx as usize])
+        //} else {
+        self.textures.get(texture_cell)
+        //}
    }

    // Get the nearest parent tile found in the CPU buffer
-    pub fn get_nearest_parent(&self, cell: &HEALPixCell) -> HEALPixCell {
+    pub fn get_nearest_parent(&self, cell: &HEALPixCell) -> Option<HEALPixCell> {
        let dd = self.config.delta_depth();
-        if cell.is_root(dd) {
+        /*if cell.is_root(dd) {
            // Root cells are in the buffer by definition
            *cell
-        } else {
-            let mut parent_cell = cell.parent();
+        } else {*/
+        let mut parent_cell = cell.parent();

-            while !self.contains(&parent_cell) && !parent_cell.is_root(dd) {
-                parent_cell = parent_cell.parent();
-            }
-
-            parent_cell
+        while !self.contains(&parent_cell) && !parent_cell.is_root(dd) {
+            parent_cell = parent_cell.parent();
        }
+
+        if self.contains(&parent_cell) {
+            Some(parent_cell)
+        } else {
+            None
+        }
+        //}
    }

    pub fn config(&self) -> &HiPSConfig {
@@ -628,17 +621,17 @@ impl ImageSurveyTextures {
        ]
    }*/

-    pub fn get_texture_array(&self) -> Rc<Texture2DArray> {
-        self.texture_2d_array.clone()
+    pub fn get_texture_array(&self) -> &Texture2DArray {
+        &self.texture_2d_array
    }
 }

 fn send_to_gpu<I: Image>(
    cell: &HEALPixCell,
    texture: &Texture,
-    image: I,
-    texture_array: Rc<Texture2DArray>,
-    cfg: &HiPSConfig,
+    image: Option<I>,
+    texture_array: &Texture2DArray,
+    cfg: &mut HiPSConfig,
 ) -> Result<(), JsValue> {
    // Index of the texture in the total set of textures
    let texture_idx = texture.idx();
@@ -670,24 +663,42 @@ fn send_to_gpu<I: Image>(
        idx_slice,
    );

-    image.tex_sub_image_3d(&texture_array, &offset)
+    if let Some(image) = image {
+        image.tex_sub_image_3d(&texture_array, &offset)
+    } else {
+        cfg.get_default_image()
+            .tex_sub_image_3d(&texture_array, &offset)
+    }
 }

 impl SendUniforms for ImageSurveyTextures {
    // Send only the allsky textures
    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
        // Send the textures
-        let textures = &self.base_textures;
+        /*let textures = &self.base_textures;
        for (idx, texture) in textures.iter().enumerate() {
            let texture_uniforms = TextureUniforms::new(texture, idx as i32);
            shader.attach_uniforms_from(&texture_uniforms);
-        }
+        }*/
+
+        //if self.raytracing {
+        for idx in 0..NUM_HPX_TILES_DEPTH_ZERO {
+            let cell = HEALPixCell(0, idx as u64);
+
+            if let Some(texture) = self.get(&cell) {
+                let texture_uniforms = TextureUniforms::new(texture, idx as i32);
+                shader.attach_uniforms_from(&texture_uniforms);
+            } else {
+                let texture = &Texture::new(&cell, idx as i32, Time::now());
+                let texture_uniforms = TextureUniforms::new(texture, idx as i32);
+                shader.attach_uniforms_from(&texture_uniforms);
+            }
+        }
+        //}

-        let num_tiles = textures.len() as i32;
        let shader = shader
-            .attach_uniform("num_tiles", &num_tiles)
            .attach_uniforms_from(&self.config)
-            .attach_uniforms_from(&*self.texture_2d_array);
+            .attach_uniforms_from(&self.texture_2d_array);

        shader
    }
--- a/src/core/src/survey/config.rs
+++ b/src/core/src/survey/config.rs
@@ -156,6 +156,7 @@ pub struct HiPSConfig {
    // TODO: store this values in the ImageSurvey
    // These are proper to the survey (FITS one) and not
    // to a specific survey color
+    pub fits_metadata: bool,
    pub scale: f32,
    pub offset: f32,
    pub blank: f32,
@@ -168,8 +169,8 @@ pub struct HiPSConfig {
    pub frame: CooSystem,
    pub bitpix: Option<i32>,
    format: ImageFormatType,
-    dataproduct_subtype: Option<Vec<String>>,
-    colored: bool,
+    //dataproduct_subtype: Option<Vec<String>>,
+    //colored: bool,
    pub creator_did: String,
 }

@@ -272,7 +273,7 @@ impl HiPSConfig {
            }),
        }?;

-        let dataproduct_subtype = properties.get_dataproduct_subtype().clone();
+        /*let dataproduct_subtype = properties.get_dataproduct_subtype().clone();
        let colored = if tex_storing_fits {
            false
        } else {
@@ -281,7 +282,7 @@ impl HiPSConfig {
            } else {
                false
            }
-        };
+        };*/

        let empty_image = EmptyTileImage::new(tile_size, format.get_channel());

@@ -328,6 +329,7 @@ impl HiPSConfig {

            is_allsky,

+            fits_metadata: false,
            scale: 1.0,
            offset: 0.0,
            blank: -1.0, // by default, set it to -1
@@ -341,8 +343,8 @@ impl HiPSConfig {
            bitpix,
            format,
            tile_size,
-            dataproduct_subtype,
-            colored,
+            //dataproduct_subtype,
+            //colored,
        };

        Ok(hips_config)
@@ -421,7 +423,7 @@ impl HiPSConfig {
        self.empty_image = EmptyTileImage::new(self.tile_size, self.format.get_channel());

        // Recompute if the survey will be colored or not
-        self.colored = if self.tex_storing_fits {
+        /*self.colored = if self.tex_storing_fits {
            false
        } else {
            if let Some(subtypes) = &self.dataproduct_subtype {
@@ -429,7 +431,7 @@ impl HiPSConfig {
            } else {
                false
            }
-        };
+        };*/

        Ok(())
    }
@@ -449,6 +451,7 @@ impl HiPSConfig {
        self.scale = bscale;
        self.offset = bzero;
        self.blank = blank;
+        self.fits_metadata = true;
    }

    #[inline(always)]
@@ -528,7 +531,7 @@ impl HiPSConfig {

    #[inline(always)]
    pub fn is_colored(&self) -> bool {
-        self.colored
+        self.format.is_colored()
    }

    #[inline(always)]
--- a/src/core/src/survey/texture.rs
+++ b/src/core/src/survey/texture.rs
@@ -105,14 +105,10 @@ impl Texture {
        self.full
    }

-    pub fn is_available(&self) -> bool {
-        self.is_full()
-    }
-
    // Getter
    // Returns the current time if the texture is not full
    pub fn start_time(&self) -> Time {
-        if self.is_available() {
+        if self.is_full() {
            self.start_time.unwrap_abort()
        } else {
            Time::now()
--- a/src/core/src/tile_fetcher.rs
+++ b/src/core/src/tile_fetcher.rs
@@ -92,6 +92,7 @@ impl TileFetcherQueue {
        // Try to fetch the MOC
        downloader.fetch(query::Moc::new(
            format!("{}/Moc.fits", cfg.get_root_url()),
+            cfg.get_creator_did().to_string(),
            al_api::moc::MOC::default(),
        ));

--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -1,26 +1,16 @@
-body { overscroll-behavior: contain; }
-
 .aladin-container {
 	position: relative;
-	border: 1px solid #ddd;
-    height: 100%;
-
+	border: 0px solid #ddd;
+    /* SVG inside divs add a 4px height: https://stackoverflow.com/questions/75751593/why-there-is-additional-4px-height-for-div-when-there-is-svg-inside-it */
    /* disable x swipe on chrome, firefox */
    /* see. https://stackoverflow.com/questions/30636930/disable-web-page-navigation-on-swipeback-and-forward */
    overscroll-behavior-x: none;
-
    /* media query on the aladin lite container. not supported everywhere.
    There can be a more supported alternative here: https://caniuse.com/?search=grid-template-columns */
    /*container-type: inline-size;*/
 }

 .aladin-imageCanvas {
-	position: relative;
-	left: 0;
-	top: 0;
-}
-
-.aladin-gridCanvas {
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -57,18 +47,6 @@ body { overscroll-behavior: contain; }
    padding-top: 58.45%; /* aspect ratio of the background image */
 }

-.aladin-col {
-    float: left;
-    width: 45.00%;
-    margin-right: 5.0%;
-}
-  /* Clear floats after the columns */
-.aladin-row:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
 .aladin-clipboard::before {
    content: ' 📋';
    cursor:pointer;
@@ -80,7 +58,7 @@ body { overscroll-behavior: contain; }

    display: block;

-    max-height: 15em;
+    max-height: 30vh;
    max-width: 100%;
    -ms-overflow-style: none;
    overscroll-behavior-x: none;
@@ -115,6 +93,7 @@ body { overscroll-behavior: contain; }

 .aladin-measurement-div.aladin-dark-theme table thead {
    background-color: #000;
+    color: white;
 }

 .aladin-measurement-div table td.aladin-href-td-container a:hover {
@@ -150,8 +129,8 @@ body { overscroll-behavior: contain; }
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
-    max-width: 150px;
-    text-overflow: ellipsis;
+    /*max-width: 150px;
+    text-overflow: ellipsis;*/
 }

 .aladin-measurement-div table td.aladin-text-td-container {
@@ -159,8 +138,8 @@ body { overscroll-behavior: contain; }
    white-space: nowrap;
    overflow: hidden;

-    max-width: 150px;
-    text-overflow: ellipsis;
+    /*max-width: 150px;
+    text-overflow: ellipsis;*/
 }

 .aladin-measurement-div table td.aladin-href-td-container:hover {
@@ -244,8 +223,6 @@ body { overscroll-behavior: contain; }
 }

 .aladin-box {
-	display: none;
-
    padding: 0.2rem;
    background: whitesmoke;
    border-radius: 2px;
@@ -267,28 +244,9 @@ body { overscroll-behavior: contain; }
    overflow-y: none;
    max-height: 500px;
    max-width: fit-content;
+    height: fit-content;
 }

-.aladin-box::-webkit-scrollbar {
-    display: none; /* for Chrome, Safari, and Opera */
-}
-
-.aladin-dialog {
-	display: none;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: #eee;
-    border-radius: 4px;
-    /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
-    line-height: 1.3;
-    color: #222;
-    max-width: 500px;
-    padding: 0.8em;
-}
-
-
 canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
@@ -370,18 +328,6 @@ canvas {
    background-position:center center;
 }

-.aladin-fullscreen {
-	position: fixed !important;
-
-	top: 0;
-	left: 0;
-	height: 100% !important;
-	width: 100% !important;
-	border: 0 !important;
-    max-width: none !important;
-    background: #fff;
-}
-
 /* smartphones, iPhone, portrait 480x320 phones */
 .aladin-btn {
    all:unset;
@@ -445,6 +391,9 @@ canvas {
 .aladin-measurement-div.aladin-dark-theme {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
+}
+
+.aladin-measurement-div.aladin-dark-theme table {
    color: white;
 }

@@ -479,22 +428,12 @@ canvas {
    width: 100%;
 }

-.aladin-fov, .aladin-cooFrame, .aladin-location {
-    font-family: monospace;
-
-    color: white;
-
-    font-size: 1rem;
-    border-radius: 5px;
-    height: 1.7rem;
-}
-
 .aladin-input-text.aladin-dark-theme.search {
    width: 15rem;
    text-shadow: 0px 0px 2px #000;
 }

-.aladin-input-text.aladin-dark-theme.search:focus {
+.aladin-input-text.aladin-dark-theme.search:focus, .aladin-input-text.aladin-dark-theme.search:hover {
    background-image: url(../../assets/icons/search-white.svg);
    background-size: 1.8rem;
    background-repeat: no-repeat;
@@ -504,16 +443,16 @@ canvas {
 .aladin-input-text.search {
    background-image:none;
    text-indent: 0rem;
+    font-size: 1rem;
+    line-height: 1.2rem;
 }

 .aladin-input-text.search.aladin-unknownObject {
-    -webkit-box-shadow:inset 0px 0px 0px 3px #f00;
-    -moz-box-shadow:inset 0px 0px 0px 3px #f00;
-    box-shadow:inset 0px 0px 0px 3px #f00;
-}
+    -webkit-box-shadow:inset 0px 0px 0px 1px #f00;
+    -moz-box-shadow:inset 0px 0px 0px 1px #f00;
+    box-shadow:inset 0px 0px 0px 1px #f00;

-.aladin-dark-theme {
-    color: white;
+    border: 1px solid red;
 }

 .aladin-cancelBtn {
@@ -697,10 +636,14 @@ canvas {
 .aladin-status-bar-message {
    display: block;
    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;

-    max-width: 300px;
+    text-wrap: nowrap;
+    -ms-overflow-style: none;
+    overscroll-behavior-x: none;
+    overflow-y: scroll;
+    scrollbar-width: none;
+
+    max-width: 20rem;

    font-size: 1rem;
 }
@@ -762,8 +705,6 @@ canvas {
 .aladin-context-sub-menu,
 .aladin-context-menu {
    position: absolute;
-    background: #fff;
-    color: #000;

    font-family: monospace;
    width: max-content;
@@ -790,10 +731,13 @@ canvas {
    padding: 0.2rem 0.4rem;
    position: relative;

-    color: lightgray;
-    background-color: black;
-
    box-shadow:inset 1px 1px 0px 0px #fff;
+
+    background-color: rgba(0, 0, 0, 0.7);
+
+    margin: 0;
+    box-sizing: content-box;
+    line-height: normal;
 }

 .aladin-context-menu .aladin-context-menu-item:first-of-type {
@@ -880,6 +824,7 @@ canvas {
    border-radius: 5px;
    font-family: monospace;
    font-size: 1rem;
+    box-sizing: border-box;
 }

 .aladin-input-text.aladin-dark-theme, .aladin-input-number.aladin-dark-theme {
@@ -909,18 +854,20 @@ canvas {
    /* Remove focus outline */
    /* Remove IE arrow */
 }
+
 .aladin-input-select option {
    color: inherit;
    background-color: #320a28;
 }
+
 .aladin-input-select:focus {
    outline: none;
 }
+
 .aladin-input-select::-ms-expand {
    display: none;
 }

-
 /* Frames */
 .aladin-input-color {
    appearance: none;
@@ -955,6 +902,7 @@ canvas {
     background: transparent;
     cursor: pointer;
     width: 5em;
+     height: 1.5rem;
 }
 
 /* Removes default focus */
@@ -983,13 +931,6 @@ canvas {

    border-radius: 0.5rem;
 }
- .aladin-input-range:hover::-webkit-slider-thumb {
-    filter: brightness(105%);
- }
-
- /* aladin input text */
-
-
 
 /******** Firefox styles ********/
 /* slider track */
@@ -1011,12 +952,11 @@ canvas {

    border-radius: 0.5rem;
 }
+ 
+ .aladin-dark-theme {
+    color: white;
+}

- .aladin-input-range:hover::-moz-range-thumb {
-    filter: brightness(105%);
- }
- 
- 
 /* *********************************************** */

 /* Tooltip */
@@ -1026,22 +966,27 @@ canvas {
    /* take the size of its inner div child */

    font-family: monospace;
+    line-height: 1rem;
+
    
    float: left;
 }

 .aladin-tooltip-container .aladin-tooltip {
    pointer-events: none;
+    cursor: default;
    visibility: hidden;
-    background-color: black;
+    background-color: white;
+    color: black;

    width: max-content; 
-    color: #fff;
+    
    text-align: center;
    padding: 4px;
    border-radius: 2px;

    top:0%;
+    left:0%;

    z-index: 100;
 
@@ -1050,6 +995,13 @@ canvas {

    /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
    font-size: 0.9rem;
+
+    transition-delay: 100ms;
+}
+
+.aladin-tooltip-container .aladin-tooltip.aladin-dark-theme {
+    background-color: #333;
+    color: white;
 }

 /* Show the tooltip text when you mouse over the tooltip container */
@@ -1109,32 +1061,168 @@ canvas {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEIEwUMBS20MQAAApRJREFUWEfdV7GO2zAMfXY7x1luzOFwDeB/KHCAB87eumvqmI/JWhTwF3TIrMFAv8JbgWyHG3IpOjbpcKJC02KipECHclIU+j2KfKRlAABRUyFYak3UgKiZiXUJAIt1d1ysu2PYn53DsPCucpbkRE3JAdxKTtQgWo6zJAfGGbAwLuEV7OB9/yrXIbqZ9/0+rMuhdb+RYfWmm+fged8fihzyoXXxlNcYB2KRxwwA6SzI9Crgd973B/5/u3IF8FYSw98M5D2QR86kRE3pfX+AMqKm8iEQoqYaWrfj/4bW7QgokMhCeSs5KeVrDM4K29C6Y6oE0YGEUlndocVGyg/rGZDXBQpr0kmjLiAlOOvk3vf7RJZM5Q+te2W/7coVEq+wnC1yCZYyS3B8MMYF3vBKK9Jz5PWmm8sab1eu4N9D63aaHEAsH88SzmQpnSHsHDmnWvlXIoiJ4JTviY8FRUJ8ZAiOEiJbLpcjARM1M0twpmjZOeGQrXYm1/7yMLz/eH8fnyus6XXOtmLgWBrKtdMguNKYPPystIausn9egsVDfI674KxS6003F/sX357AdOBwcADwWD9EjBKJubxYd0cml4RhP5IPrduFk04GjiZXMyZiRHKdAU3OWeB2lLNAk+tpl9IHY0zSlBo4OgsaTJpFzs+F0pxKYEXK73Nd8+3KFfWmG71qGfgSeQqPN0fvdlZrSvmUoXaJJ7EiocArZaS6tgzA+5RQe3gumUl5gPLXzy+6pEQNzDuhvFKx1ZuuEuTxliwmY/KuoHxGhzGv5QDw9PTx7senz88aLHUpJeOu8OHb17u+//4CTMm97/eFVQK5vqR8y6xOyipByjn3+0C3moUH4O++D1UX3PR9eJWzJCf6Tz5O/wDUeIfTLPlbywAAAABJRU5ErkJggg==') 15 15, auto;
 }

-/* Aladin Lite pre-defined UI features */
+/** 
+ * Aladin Lite pre-defined UI features.
+ *
+ * User may need to overwrite those classes if they want
+ * change their position. They can also add media query on them.
+ *
+ */
+
 .aladin-stack-control {
    position: absolute;
    top: 3rem;
-    left: 0;
+    left: 0.2rem;
 }

 .aladin-settings-control {
    position: absolute;
    top: 5.4rem;
-    left: 0;
+    left: 0.2rem;
 }

 .aladin-simbadPointer-control {
    position: absolute;
    top: 7.8rem;
-    left: 0;
+    left: 0.2rem;
 }

 .aladin-grid-control {
    position: absolute;
    top: 10.2rem;
-    left: 0;
+    left: 0.2rem;
+}
+
+.aladin-cooFrame {
+    position: absolute;
+    top: 0.2rem;
+    left: 0.2rem;
+
+    font-family: monospace;
+
+    color: white;
+
+    font-size: 1rem;
+    border-radius: 5px;
+    height: 1.7rem;
+}
+
+.aladin-input-text.aladin-dark-theme.search.aladin-HiPS-search {
+    width: 100%;
+
+}
+
+.aladin-stack-box {
+    width: 17rem;
+}
+
+.aladin-stack-box .content > * {
+    margin-bottom: 0.5rem;
+}
+
+.aladin-location {
+    position: absolute;
+    top: 0.2rem;
+    left: 6.9rem;
+    font-family: monospace;
+
+    color: white;
+
+    font-size: 1rem;
+    border-radius: 5px;
+    height: 1.7rem;
+}
+
+.aladin-fov {
+    position: absolute;
+    bottom: 0.2rem;
+    left: 0.2rem;
+
+    background-color: red;
+
+    font-family: monospace;
+
+    font-size: 1rem;
+    border-radius: 5px;
+    line-height: 1.7rem;
+}
+
+.aladin-fov .aladin-zoom-in {
+    margin-right: 0;
+    border-right: none;
+    border-radius: 5px 0px 0px 5px;
+}
+
+.aladin-fov .aladin-zoom-out {
+    border-radius: 0px 5px 5px 0px;
+}
+
+.aladin-status-bar {
+    border-radius: 3px;
+    padding: 0.4rem;
+
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+.aladin-status-bar.aladin-dark-theme {
+    color: white;
+    background-color: black;
+}
+
+.aladin-fov.aladin-dark-theme {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.aladin-table {
+    position: absolute;
+    bottom: 2.8rem;
+    left: 0.2rem;
+    max-width: calc(100% - 0.4rem);
+    line-height: 1rem;
+}
+.aladin-measurement-div.aladin-dark-theme {
+    color: white;
+}
+
+.aladin-share-control {
+    position: absolute;
+    top: 12.6rem;
+    left: 0.2rem;
+}
+
+.aladin-fullScreen-control {
+    position: absolute;
+    top: 0.2rem;
+    right: 0.2rem;
+}
+
+.aladin-projection-control {
+    position: absolute;
+    top: 0.2rem;
+    right: 3rem;
+}
+
+.aladin-fullscreen {
+	position: fixed !important;
+
+	top: 0;
+	left: 0;
+	height: 100% !important;
+	width: 100% !important;
+	border: 0 !important;
+    max-width: none !important;
+    background: #fff;
 }

 /* Media query */
+/*@media screen and (max-width: 31rem) {
+    .aladin-projection-control {
+        display: none;
+    }
+}*/
 /*@container (max-width: 40rem) {
    .aladin-input-text.aladin-dark-theme.search {
        width: 6rem;
--- a/src/glsl/webgl2/hips/color.glsl
+++ b/src/glsl/webgl2/hips/color.glsl
@@ -1,7 +1,7 @@
 //const int MAX_NUM_TEX = 3;
 uniform sampler2D tex1;
 uniform sampler2D tex2;
-uniform sampler2D tex3;
+//uniform sampler2D tex3;

 uniform int num_tex;

@@ -23,16 +23,16 @@ uniform int tex_storing_fits;
 #include ./hsv.glsl;

 vec4 get_pixels(vec3 uv) {
-    int idx_texture = int(uv.z);
-    if (idx_texture == 0) {
+    
+    /*if (idx_texture == 0) {
        return texture(tex1, uv.xy);
    } else if (idx_texture == 1) {
        return texture(tex2, uv.xy);
-    } else if (idx_texture == 2) {
-        return texture(tex3, uv.xy);
    } else {
        return vec4(0.0, 1.0, 0.0, 1.0);
-    }
+    }*/
+    int idx_texture = int(uv.z);
+    return mix(texture(tex1, uv.xy), texture(tex2, uv.xy), float(idx_texture));
 }

 vec3 reverse_uv(vec3 uv) {
--- a/src/glsl/webgl2/hips/color_i.glsl
+++ b/src/glsl/webgl2/hips/color_i.glsl
@@ -1,7 +1,7 @@
 //const int MAX_NUM_TEX = 3;
 uniform isampler2D tex1;
 uniform isampler2D tex2;
-uniform isampler2D tex3;
+//uniform isampler2D tex3;
 uniform int num_tex;

 uniform float scale;
@@ -22,7 +22,7 @@ uniform int tex_storing_fits;
 #include ./tonal_corrections.glsl;

 ivec4 get_pixels(vec3 uv) {
-    int idx_texture = int(uv.z);
+    /*int idx_texture = int(uv.z);
    if (idx_texture == 0) {
        return texture(tex1, uv.xy);
    } else if (idx_texture == 1) {
@@ -31,7 +31,10 @@ ivec4 get_pixels(vec3 uv) {
        return texture(tex3, uv.xy);
    } else {
        return ivec4(0, 0, 0, 1);
-    }
+    }*/
+    //return texture(tex1, uv.xy);
+    int idx_texture = int(uv.z);
+    return ivec4(mix(vec4(texture(tex1, uv.xy)), vec4(texture(tex2, uv.xy)), float(idx_texture)));
 }

 vec3 reverse_uv(vec3 uv) {
--- a/src/glsl/webgl2/hips/color_u.glsl
+++ b/src/glsl/webgl2/hips/color_u.glsl
@@ -1,7 +1,7 @@
 //const int MAX_NUM_TEX = 3;
 uniform usampler2D tex1;
 uniform usampler2D tex2;
-uniform usampler2D tex3;
+//uniform usampler2D tex3;
 uniform int num_tex;

 uniform float scale;
@@ -22,7 +22,7 @@ uniform int tex_storing_fits;
 #include ./tonal_corrections.glsl;

 uvec4 get_pixels(vec3 uv) {
-    int idx_texture = int(uv.z);
+    /*int idx_texture = int(uv.z);
    if (idx_texture == 0) {
        return texture(tex1, uv.xy);
    } else if (idx_texture == 1) {
@@ -31,7 +31,11 @@ uvec4 get_pixels(vec3 uv) {
        return texture(tex3, uv.xy);
    } else {
        return uvec4(0, 0, 0, 1);
-    }
+    }*/
+    //return texture(tex1, uv.xy);
+    //int idx_texture = int(uv.z);
+    int idx_texture = int(uv.z);
+    return uvec4(mix(vec4(texture(tex1, uv.xy)), vec4(texture(tex2, uv.xy)), float(idx_texture)));
 }

 vec3 reverse_uv(vec3 uv) {
--- a/src/glsl/webgl2/hips/raytracer/color.frag
+++ b/src/glsl/webgl2/hips/raytracer/color.frag
@@ -17,7 +17,6 @@ struct Tile {
 };

 uniform Tile textures_tiles[12];
-uniform int num_tiles;

 #include ../color.glsl;
 #include ./healpix.glsl;
@@ -29,7 +28,6 @@ vec4 get_tile_color(vec3 pos) {

    int idx = result.idx;
    vec2 uv = vec2(result.dy, result.dx);
-
    Tile tile = textures_tiles[idx];

    int idx_texture = tile.texture_idx >> 6;
@@ -41,6 +39,7 @@ vec4 get_tile_color(vec3 pos) {
    vec3 UV = vec3(offset, float(idx_texture));

    vec4 color = get_color_from_texture(UV);
+    color.a *= (1.0 - tile.empty);
    return color;
 }

--- a/src/glsl/webgl2/hips/raytracer/grayscale_to_colormap_i.frag
+++ b/src/glsl/webgl2/hips/raytracer/grayscale_to_colormap_i.frag
@@ -49,7 +49,6 @@ vec4 get_tile_color(vec3 pos) {
    // For empty tiles we set the alpha of the pixel to 0.0
    // so that what is behind will be plotted
    color.a *= (1.0 - tile.empty);
-
    return color;
 }

--- a/src/js/A.js
+++ b/src/js/A.js
@@ -33,6 +33,7 @@ import { Overlay } from "./Overlay.js";
 import { Circle } from "./Circle.js";
 import { Ellipse } from "./Ellipse.js";
 import { Polyline } from "./Polyline.js";
+import { Line } from "./Line.js";
 import { Catalog } from "./Catalog.js";
 import { ProgressiveCat } from "./ProgressiveCat.js";
 import { Source } from "./Source.js";
@@ -43,6 +44,9 @@ import { Footprint } from './Footprint.js';
 import { Aladin } from "./Aladin.js";
 import { ActionButton } from "./gui/Widgets/ActionButton.js";
 import { Box } from "./gui/Widgets/Box.js";
+import { AladinUtils } from "./AladinUtils.js";
+import { Sesame } from "./Sesame.js";
+
 // Wasm top level import
 import init, * as module from './../core/pkg';

@@ -87,6 +91,7 @@ let A = {};
 */
 A.aladin = function (divSelector, options) {
    let divElement;
+
    if (!(divSelector instanceof HTMLElement)) {
        divElement = document.querySelector(divSelector)
    } else {
@@ -95,6 +100,45 @@ A.aladin = function (divSelector, options) {
    return new Aladin(divElement, options);
 };

+/**
+ * Creates a HiPS image object
+ *
+ * @function
+ * @name A.imageHiPS
+ * @memberof A
+ * @param {string} id - Mandatory unique identifier for the survey.
+ * @param {string} url - Can be an `url` that refers to a HiPS.
+ * Or it can be a "CDS ID" pointing towards a HiPS. One can found the list of IDs {@link https://aladin.cds.unistra.fr/hips/list| here}.
+ * @param {ImageSurveyOptions} [options] - Options describing the survey
+ * @returns {ImageSurvey} - A HiPS image object
+ */
+A.imageHiPS = function (id, url, options) {
+    return Aladin.createImageSurvey(
+        id,
+        options && options.name,
+        url,
+        options && options.cooFrame,
+        options && options.maxOrder,
+        options
+    );
+}
+
+/**
+ * Creates a celestial source object with the given coordinates.
+ *
+ * @function
+ * @name A.imageFITS
+ * @memberof A
+ * @param {string} url - Options describing the fits file. An url is mandatory
+ * @param {ImageFITSOptions} [options] - Options describing the fits file. An url is mandatory
+ * @returns {ImageSurvey} - A HiPS image object
+ * @example
+ * const sourceObj = A.source(180.0, 30.0, data, options);
+ */
+A.imageFITS = function (url, options) {
+    return Aladin.createImageFITS(url, options.name, options, options.successCallback, options.errorCallback);
+}
+
 /**
 * Creates a celestial source object with the given coordinates.
 *
@@ -103,7 +147,7 @@ A.aladin = function (divSelector, options) {
 * @memberof A
 * @param {number} ra - Right Ascension (RA) coordinate in degrees.
 * @param {number} dec - Declination (Dec) coordinate in degrees.
- * @param {*} [data] - Additional data associated with the source.
+ * @param {Object} [data] - Additional data associated with the source.
 * @param {SourceOptions} [options] - Options for configuring the source object.
 * @returns {Source} A celestial source object.
 * @example
@@ -122,7 +166,7 @@ A.source = function (ra, dec, data, options) {
 * @param {number} ra - Right Ascension (RA) coordinate in degrees.
 * @param {number} dec - Declination (Dec) coordinate in degrees.
 * @param {MarkerOptions} [options] - Options for configuring the marker.
- * @param {*} [data] - Additional data associated with the marker.
+ * @param {Object} [data] - Additional data associated with the marker.
 * @returns {Source} A marker source object.
 * @example
 * const markerObj = A.marker(180.0, 30.0, data, options);
@@ -140,10 +184,11 @@ A.marker = function (ra, dec, options, data) {
 * @memberof A
 * @name polygon
 *
- * @param {Array} raDecArray - Array of celestial coordinates representing the vertices of the polygon.
- *   Each element should be an object with properties `ra` (Right Ascension) in degrees and `dec` (Declination) in degrees.
- * @param {Object} options - Options for configuring the polygon.
+ * @param {Array.<number[]>} radecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees
+ * @param {ShapeOptions} options - Options for configuring the polygon
 * @throws {string} Throws an error if the number of vertices is less than 3.
+ * 
+ * @returns {Polyline}
 */
 A.polygon = function (raDecArray, options) {
    const numVertices = raDecArray.length;
@@ -168,15 +213,16 @@ A.polygon = function (raDecArray, options) {
 };

 /**
- * Creates a polyline object using an array of celestial coordinates (RA, Dec).
+ * Creates a polyline shape
 *
 * @function
 * @memberof A
 * @name polyline
 *
- * @param {Array} raDecArray - Array of celestial coordinates representing the vertices of the polyline.
- *   Each element should be an object with properties `ra` (Right Ascension) in degrees and `dec` (Declination) in degrees.
- * @param {Object} options - Options for configuring the polyline.
+ * @param {Array.<number[]>} radecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees
+ * @param {ShapeOptions} options - Options for configuring the polyline.
+ * 
+ * @returns {Polyline}
 */
 A.polyline = function (raDecArray, options) {
    return new Polyline(raDecArray, options);
@@ -184,7 +230,7 @@ A.polyline = function (raDecArray, options) {


 /**
- * Creates a circle object
+ * Creates a circle shape
 *
 * @function
 * @memberof A
@@ -194,14 +240,15 @@ A.polyline = function (raDecArray, options) {
 * @param {number} dec - Declination (Dec) coordinate of the center in degrees.
 * @param {number} radiusDeg - Radius in degrees.

- * @param {Object} options - Options for configuring the circle.
+ * @param {ShapeOptions} options - Options for configuring the circle.
+ * @returns {Circle}
 */
 A.circle = function (ra, dec, radiusDeg, options) {
    return new Circle([ra, dec], radiusDeg, options);
 };

 /**
- * Creates a ellipse object
+ * Creates an ellipse shape
 *
 * @function
 * @memberof A
@@ -213,12 +260,55 @@ A.circle = function (ra, dec, radiusDeg, options) {
 * @param {number} radiusDecDeg - the radius along the dec axis in degrees
 * @param {number} rotationDeg - the rotation angle in degrees

- * @param {Object} options - Options for configuring the ellipse.
+ * @param {ShapeOptions} options - Options for configuring the ellipse.
+ * @returns {Ellipse}
 */
 A.ellipse = function (ra, dec, radiusRaDeg, radiusDecDeg, rotationDeg, options) {
    return new Ellipse([ra, dec], radiusRaDeg, radiusDecDeg, rotationDeg, options);
 };

+/**
+ * Creates a line shape
+ *
+ * @function
+ * @memberof A
+ * @name line
+ *
+ * @param {number} ra1 - Right Ascension (RA) coordinate of the center in degrees.
+ * @param {number} dec1 - Declination (Dec) coordinate of the center in degrees.
+ * @param {number} ra2 - Right Ascension (RA) coordinate of the center in degrees.
+ * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees.
+ * @param {CooFrame} [frame] - Frame in which the coordinates are given. If none, the frame used is icrs/j2000.
+ * @param {ShapeOptions} options - Options for configuring the line.
+ * 
+ * @returns {Line}
+ */
+ A.line = function (ra1, dec1, ra2, dec2, frame, options) {
+    return new Line(ra1, dec1, ra2, dec2, frame, options);
+};
+
+/**
+ * Creates a vector shape
+ *
+ * @function
+ * @memberof A
+ * @name vector
+ *
+ * @param {number} ra1 - Right Ascension (RA) coordinate of the center in degrees.
+ * @param {number} dec1 - Declination (Dec) coordinate of the center in degrees.
+ * @param {number} ra2 - Right Ascension (RA) coordinate of the center in degrees.
+ * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees.
+ * @param {CooFrame} [frame] - Frame in which the coordinates are given. If none, the frame used is icrs/j2000.
+ * @param {ShapeOptions} options - Options for configuring the vector.
+ * 
+ * @returns {Line}
+ */
+A.vector = function (ra1, dec1, ra2, dec2, frame, options) {
+    options['arrow'] = true;
+
+    return A.line(ra1, dec1, ra2, dec2, frame, options);
+}
+
 /**
 * Creates a graphic overlay on the Aladin Lite view.
 *
@@ -274,27 +364,68 @@ A.coo = function (longitude, latitude, prec) {
    return new Coo(longitude, latitude, prec);
 };

-// API
-A.footprint = function(shapes, source) {
-    return new Footprint(shapes, source);
-};
-
-// API
+/**
+ * Parse shapes from a STC-S string
+ *
+ * @function
+ * @memberof A
+ * @name footprintsFromSTCS
+ *
+ * @param {string} stcs - The STC-S string describing the shapes
+ * @param {ShapeOptions} [options] - Options for the shape
+ * @returns {Array.<Polyline|Circle>} Returns a list of shapes from the STC-S string
+ */
 A.footprintsFromSTCS = function (stcs, options) {
    var footprints = Overlay.parseSTCS(stcs, options);
-
    return footprints;
 }

-// API
-A.MOCFromURL = function (url, options, successCallback) {
+/**
+ * Creates a new MOC (Multi-Order-Coverage) from an url
+ *
+ * @function
+ * @memberof A
+ * @name MOCFromURL
+ *
+ * @param {string} url - The url to the MOC (e.g. stored as FITS file)
+ * @param {MOCOptions} [options] - Display options for the MOC
+ * @param {function} [successCallback] - Callback function when the MOC loads
+ * @param {function} [errorCallback] - Callback function when the MOC fails loading
+ * @returns {MOC} Returns a new MOC object
+ */
+A.MOCFromURL = function (url, options, successCallback, errorCallback) {
    var moc = new MOC(options);
-    moc.parse(url, successCallback);
+    moc.parse(url, successCallback, errorCallback);

    return moc;
 };

-// API
+/**
+ * Creates a new MOC (Multi-Order-Coverage) from a JSON-like dictionary (javascript Object)
+ *
+ * @function
+ * @memberof A
+ * @name MOCFromJSON
+ *
+ * @param {Object} jsonMOC - The MOC stores as a JSON-like dictionary
+ * @param {MOCOptions} [options] - Display options for the MOC
+ * @param {function} [successCallback] - Callback function when the MOC loads
+ * @param {function} [errorCallback] - Callback function when the MOC fails loading
+ * @returns {MOC} Returns a new MOC object
+ * 
+ * @example
+ * var json = {"3":[517],
+ *  "4":[2065,2066,2067,2112,2344,2346,2432],
+ *   "5":[8221,8257,8258,8259,8293,8304,8305,8307,8308,8452,8456,9346,9352,9354,9736],
+ *   "6":[32861,32862,32863,32881,32882,32883,32892,32893,33025,33026,33027,33157,33168,33169,33171,
+ *   33181,33224,33225,33227,33236,33240,33812,33816,33828,33832,37377,37378,37379,37382,37388,
+ *   37390,37412,37414,37420,37422,37562,38928,38930,38936,38948,38952],
+ *   "7":[131423,131439,131443,131523,131556,131557,131580,131581,132099,132612,132613,132624,132625,132627,132637,
+ *   132680,132681,132683,132709,132720,132721,132904,132905,132948,132952,132964,132968,133008,133009,133012,135252,135256,135268,135316,135320,135332,135336,148143,148152,148154,149507,149520
+ *   ,149522,149523,149652,149654,149660,149662,149684,149686,149692,149694,149695,150120,150122,150208,150210,150216,150218,150240,150242,150243,155748,155752,155796,155800,155812,155816]};
+ * var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 3});
+ *   aladin.addMOC(moc);
+ */
 A.MOCFromJSON = function (jsonMOC, options, successCallback, errorCallback) {
    var moc = new MOC(options);
    moc.parse(jsonMOC, successCallback, errorCallback);
@@ -302,14 +433,44 @@ A.MOCFromJSON = function (jsonMOC, options, successCallback, errorCallback) {
    return moc;
 };

-// API
-A.MOCFromCircle = function (circle, options, successCallback, errorCallback) {
+/**
+ * Creates a new MOC (Multi-Order-Coverage) from an object describing a cone on the sky
+ *
+ * @function
+ * @memberof A
+ * @name MOCFromCone
+ *
+ * @param {Object} circle - A object describing a cone in the sky
+ * @param {number} circle.ra - Right-ascension of the circle's center (in deg)
+ * @param {number} circle.dec - Declination of the circle's center (in deg)
+ * @param {number} circle.radius - Radius of the circle (in deg)
+ * @param {MOCOptions} [options] - Display options for the MOC
+ * @param {function} [successCallback] - Callback function when the MOC loads
+ * @param {function} [errorCallback] - Callback function when the MOC fails loading
+ * @returns {MOC} Returns a new MOC object
+ */
+A.MOCFromCone = function (circle, options, successCallback, errorCallback) {
    var moc = new MOC(options);
    moc.parse(circle, successCallback, errorCallback);

    return moc;
 };

+/**
+ * Creates a new MOC (Multi-Order-Coverage) from an object describing a polygon on the sky
+ *
+ * @function
+ * @memberof A
+ * @name MOCFromPolygon
+ *
+ * @param {Object} polygon - A object describing a polygon in the sky
+ * @param {number[]} polygon.ra - Right-ascensions of the polygon's vertices (in deg)
+ * @param {number[]} polygon.dec - Declination of the polygon's vertices (in deg)
+ * @param {MOCOptions} [options] - Display options for the MOC
+ * @param {function} [successCallback] - Callback function when the MOC loads
+ * @param {function} [errorCallback] - Callback function when the MOC fails loading
+ * @returns {MOC} Returns a new MOC object
+ */
 A.MOCFromPolygon= function (polygon, options, successCallback, errorCallback) {
    var moc = new MOC(options);
    moc.parse(polygon, successCallback, errorCallback);
@@ -334,6 +495,7 @@ A.MOCFromPolygon= function (polygon, options, successCallback, errorCallback) {
 * @property {string} [decField] - The ID or name of the field holding Declination (dec).
 * @property {function} [filter] - The filtering function for sources. Returns a boolean
 * @property {boolean} [displayLabel=false] - Whether to display labels for sources.
+ * @property {string} [labelColumn] - The name of the column to be used for the label.
 * @property {string} [labelColor] - The color of the source labels.
 * @property {string} [labelFont="10px sans-serif"] - The font for the source labels.
 */
@@ -391,18 +553,24 @@ A.catalogFromURL = function (url, options, successCallback, errorCallback, usePr
    options.url = url;
    var catalog = A.catalog(options);
    const processVOTable = function (table) {
-        let {sources, footprints, fields, type} = table;
+        let {sources, fields} = table;
        catalog.setFields(fields);
-
-        if (catalog.type === 'ObsCore') {
-            // The fields corresponds to obscore ones
-            // Set the name of the catalog to be ObsCore:<catalog name>
-            catalog.name = "ObsCore:" + url;
-        }
-
-        catalog.addFootprints(footprints)
        catalog.addSources(sources);

+        if ('s_region' in fields && typeof catalog.shape !== 'function') {
+            // set the shape
+            catalog.setShape((s) => {
+                if (!s.data.s_region)
+                    return;
+
+                const shapes = A.footprintsFromSTCS(s.data.s_region, options)
+                let fp = new Footprint(shapes, s);
+                fp.setColor(catalog.color);
+
+                return fp;
+            })
+        }
+
        if (successCallback) {
            successCallback(catalog);
        }
@@ -459,9 +627,9 @@ A.catalogFromURL = function (url, options, successCallback, errorCallback, usePr
 * @param {number} target.dec - Declination in degrees of the cone's center
 * @param {number} radius - Radius of the cone in degrees
 * @param {Object|CatalogOptions} [options] - Additional configuration options for SIMBAD cone search. See the {@link https://simbad.cds.unistra.fr/cone/help/#/ConeSearch/get_ SIMBAD cone search} parameters.
- * @param {Object} [options.limit] - The max number of sources to return
- * @param {Object} [options.orderBy] - Order the result by specific
- *
+ * @param {number} [options.limit] - The max number of sources to return
+ * @param {string} [options.orderBy='nb_ref'] - Order the result by specific ref number
+ * @param {number} [options.verbosity=2] - Verbosity, put 3 if you want all the column
 * @param {function} [successCallback] - The callback function to execute on successful catalog creation.
 * @param {function} [errorCallback] - The callback function to execute on error during catalog creation.
 * @returns {Catalog} A new instance of the Catalog class created from the SIMBAD cone search.
@@ -476,8 +644,8 @@ A.catalogFromSimbad = function (target, radius, options, successCallback, errorC
    if (!('name' in options)) {
        options['name'] = 'Simbad';
    }
-
-    return new Promise((resolve, reject) => {
+    let cat = A.catalog(options);
+    new Promise((resolve, reject) => {
        let coo;
        if (target && (typeof target  === "object")) {
            if ('ra' in target && 'dec' in target) {
@@ -513,8 +681,44 @@ A.catalogFromSimbad = function (target, radius, options, successCallback, errorC
        }
    }).then((coo) => {
        const url = URLBuilder.buildSimbadCSURL(coo.lon, coo.lat, radius, options)
-        return A.catalogFromURL(url, options, successCallback, errorCallback, false);
+        const processVOTable = function (table) {
+            let {sources, fields} = table;
+            cat.setFields(fields);
+
+            if (cat.type === 'ObsCore') {
+                // The fields corresponds to obscore ones
+                // Set the name of the catalog to be ObsCore:<catalog name>
+                cat.name = "ObsCore:" + url;
+            }
+
+            cat.addSources(sources);
+
+            if (successCallback) {
+                successCallback(cat);
+            }
+
+            if (sources.length === 0) {
+                console.warn(cat.name + ' has no sources!')
+            }
+
+            // Even if the votable is not a proper ObsCore one, try to see if specific columns are given
+            // e.g. access_format and access_url
+            //ObsCore.handleActions(catalog);
+        };
+
+        
+        Catalog.parseVOTable(
+            url,
+            processVOTable,
+            errorCallback,
+            cat.maxNbSources,
+            false,
+            cat.raField, cat.decField
+        );
+
    })
+
+    return cat;
 };

 /**
@@ -668,37 +872,77 @@ A.catalogFromSkyBot = function (ra, dec, radius, epoch, queryOptions, options, s
 * @returns {ActionButton} Returns a new button object representing the graphic overlay.
 *
 * @example
- *       let btn = A.button({
- *           content: 'Draw your coverage',
- *           cssStyle: {
- *               backgroundColor: 'pink',
- *           },
- *           tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
- *           action(o) {
- *               // Enter a polygonal selection mode
- *               aladin.select('poly', p => {
- *                   // Create a moc from the polygon
- *                   try {
- *                       let ra = []
- *                       let dec = []
- *                       for (const v of p.vertices) {
- *                           let [lon, lat] = aladin.pix2world(v.x, v.y);
- *                           ra.push(lon)
- *                           dec.push(lat)
- *                       }
- *
- *                       let moc = A.MOCFromPolygon(
- *                           {ra, dec},
- *                           {name: 'poly', lineWidth: 3.0, color: 'pink'},
- *                       );
- *                       aladin.addMOC(moc)
- *                   } catch(_) {
- *                       alert('Selection covers a region out of the projection definition domain.');
- *                  }
- *              })
- *          }
- *       });
- *       aladin.addUI(btn)
+ * <!-- This example instanciates a customized button that when clicked, enters the user in
+ * the polygonal selection mode. Once the polygon selection is done, the vertices are converted
+ * to sky coords and a Multi-Order Coverage (MOC) is created from that list of sky coords. -->
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
+
+<script type="module">
+    import A from aladin-lite;
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showContextMenu: true,
+            }
+        );
+
+        let btn = A.button({
+            content: 'My button',
+            classList: ['myButton'],
+            tooltip: {cssStyle: {color: 'red'}, content: 'Create a moc in pink!', position: {direction: 'top'}},
+            action(o) {
+                aladin.select('poly', p => {
+                    try {
+                        let ra = []
+                        let dec = []
+                        for (const v of p.vertices) {
+                            let [lon, lat] = aladin.pix2world(v.x, v.y);
+                            ra.push(lon)
+                            dec.push(lat)
+                        }
+
+                        let moc = A.MOCFromPolygon(
+                            {ra, dec},
+                            {name: 'poly', lineWidth: 3.0, color: 'pink'},
+                        );
+                        aladin.addMOC(moc)
+                    } catch(_) {
+                        alert('Selection covers a region out of the projection definition domain.');
+                    }
+                })
+            }
+        });
+
+        aladin.addUI(btn)
+    });
+</script>
+<style>
+    .myButton {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        background-color: pink;
+    }
+</style>
+</body>
+</html>
 */
 A.button = function(options) {
    return new ActionButton(options);
@@ -726,10 +970,9 @@ A.button = function(options) {
 *           title: "My window",
 *           draggable: true,
 *       },
+ *       // Adding a CSS class allowing you to position your window on the aladin lite view
+ *       classList: ['myBox'],
 *       content: "This is the content of my window<br/> I can write proper html",
- *       position: {
- *           anchor: 'center center'
- *       }
 *   })
 *   aladin.addUI(box)
 */
@@ -741,6 +984,19 @@ A.getAvailableListOfColormaps = function() {
    return ColorCfg.COLORMAPS;
 };

+/**
+ * Returns utils object
+ * 
+ * This contains utilitary methods such as HEALPix basic or projection methods.
+ *
+ * @function
+ * @memberof A
+ * @name Utils
+ *
+ * @returns {AladinUtils} Returns a new box window object.
+ */
+A.Utils = AladinUtils;
+
 /**
 * Initializes the Aladin Lite library, checking for WebGL2 support.
 * This method must be called before instancing an Aladin Lite object.
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
--- a/src/js/AladinUtils.js
+++ b/src/js/AladinUtils.js
@@ -27,8 +27,6 @@
 * Author: Thomas Boch[CDS]
 * 
 *****************************************************************************/
-import { HPXVertices } from "../core/pkg/core";
-import A from "./A";
 import { Aladin } from "./Aladin";

 /**
@@ -147,69 +145,13 @@ export let AladinUtils = {
            }
        },

-    	/**
-    	 * passage de xy projection à xy dans la vue écran 
-    	 * @param x
-    	 * @param y
-    	 * @param width
-    	 * @param height
-    	 * @param largestDim largest dimension of the view
-    	 * @returns position in the view
-    	 */
-        /*
-    	xyToView: function(x, y, width, height, largestDim, zoomFactor, round) {
-    	    if (round==undefined) {
-                // we round by default
-    	        round = true;
-    	    }
-
-    	    if (round) {
-    	        // we round the result for potential performance gains
-    	        return {vx: AladinUtils.myRound(largestDim/2*(1+zoomFactor*x)-(largestDim-width)/2), vy: AladinUtils.myRound(largestDim/2*(1+zoomFactor*y)-(largestDim-height)/2)};
-
-    	    }
-    	    else {
-                return {vx: largestDim/2*(1+zoomFactor*x)-(largestDim-width)/2, vy: largestDim/2*(1+zoomFactor*y)-(largestDim-height)/2};
-    	    }
-    	},*/
-    	
-    	/**
-    	 * passage de xy dans la vue écran à xy projection
-    	 * @param vx
-    	 * @param vy
-    	 * @param width
-    	 * @param height
-    	 * @param largestDim
-    	 * @param zoomFactor
-    	 * @returns position in xy projection
-    	 */
-    	/*viewToXy: function(vx, vy, width, height, largestDim, zoomFactor) {
-    		return {x: ((2*vx+(largestDim-width))/largestDim-1)/zoomFactor, y: ((2*vy+(largestDim-height))/largestDim-1)/zoomFactor};
-    	},*/
-
-    	/**
-    	 * convert a 
-    	 * @returns position x,y in the view. Null if projection is impossible
-    	 */
-        /*radecToViewXy: function(ra, dec, currentProjection, currentFrame, width, height, largestDim, zoomFactor) {
-            var xy;
-            if (currentFrame.system != CooFrameEnum.SYSTEMS.J2000) {
-                var lonlat = CooConversion.J2000ToGalactic([ra, dec]);
-                xy = currentProjection.project(lonlat[0], lonlat[1]);
-            }
-            else {
-                xy = currentProjection.project(ra, dec);
-            }
-            if (!xy) {
-                return null;
-            }
-
-            return AladinUtils.xyToView(xy.X, xy.Y, width, height, largestDim, zoomFactor, false);
-        },*/
-
        /**
+         * @deprecated
+         * 
         * Converts celestial coordinates (ra, dec) to screen coordinates (x, y) in pixels within the view.
-         *
+         * Use {@link Aladin.world2pix} instead
+         * 
+         * 
         * @function
         * @memberof AladinUtils
         * @name radecToViewXy
@@ -220,150 +162,9 @@ export let AladinUtils = {
         * @returns {number[]} xy - A 2 elements array representing the screen coordinates [X, Y] in pixels.
         */
        radecToViewXy: function(ra, dec, aladin) {
-            let xy = aladin.view.wasm.worldToScreen(ra, dec);
-            return xy;
+            return aladin.world2pix(ra, dec);
        },

-        /**
-         * Converts screen coordinates (X, Y) to clip coordinates within the view (coordinates lying between 0 and 1).
-         *
-         * @function
-         * @memberof AladinUtils
-         * @name viewXyToClipXy
-         *
-         * @param {number} x - X-coordinate in pixel screen coordinates
-         * @param {number} y - Y-coordinate in pixel screen coordinates.
-         * @param {Aladin} aladin - Aladin Lite object containing the WebAssembly API.
-         * @returns {number[]} xy - An array representing the coordinates [X, Y] in clipping space.
-         */
-        viewXyToClipXy: function(x, y, aladin) {
-            let xy = aladin.view.wasm.screenToClip(x, y);
-            return xy;
-        },
-    	
-        /**
-         * @deprecated since version 2.0
-         */
-    	/*myRound: function(a) {
-    		if (a<0) {
-    			return -1*( (-a) | 0);
-    		}
-    		else {
-    			return a | 0;
-    		}
-    	},*/
-    	
-    	/**
-    	 * Test whether a xy position is the view
-    	 * @param vx
-    	 * @param vy
-    	 * @param width
-    	 * @param height
-    	 * @returns a boolean whether (vx, vy) is in the screen
-    	 */
-    	/*isInsideViewXy: function(vx, vy, width, height) {
-    		return vx >= 0 && vx < width && vy >= 0 && vy < height
-    	},*/
-    	
-    	/**
-    	 * tests whether a healpix pixel is visible or not
-    	 * @param pixCorners array of position (xy view) of the corners of the pixel
-    	 * @param viewW
-    	 */
-    	/*isHpxPixVisible: function(pixCorners, viewWidth, viewHeight) {
-    		for (var i = 0; i<pixCorners.length; i++) {
-    			if ( pixCorners[i].vx>=-20 && pixCorners[i].vx<(viewWidth+20) &&
-    				 pixCorners[i].vy>=-20 && pixCorners[i].vy<(viewHeight+20) ) {
-    				return true;
-    			}
-    		}
-    		return false;
-    	},*/
-
-        // Zoom is handled in the backend
-        /*getZoomFactorForAngle: function(angleInDegrees, projectionMethod) {
-            var p1 = {ra: 0, dec: 0};
-            var p2 = {ra: angleInDegrees, dec: 0};
-            var projection = new Projection(angleInDegrees/2, 0);
-            projection.setProjection(projectionMethod);
-            var p1Projected = projection.project(p1.ra, p1.dec);
-            var p2Projected = projection.project(p2.ra, p2.dec);
-           
-            var zoomFactor = 1/Math.abs(p1Projected.X - p2Projected.Y);
-
-            return zoomFactor;
-        },*/
-
-        /*counterClockwiseTriangle: function(x1, y1, x2, y2, x3, y3) {
-            // From: https://math.stackexchange.com/questions/1324179/how-to-tell-if-3-connected-points-are-connected-clockwise-or-counter-clockwise
-            // | x1, y1, 1 |
-            // | x2, y2, 1 | > 0 => the triangle is given in anticlockwise order
-            // | x3, y3, 1 |
-    
-            return x1*y2 + y1*x3 + x2*y3 - x3*y2 - y3*x1 - x2*y1 >= 0;
-        },*/
-
-        // grow array b of vx,vy view positions by *val* pixels
-        /*grow2: function(b, val) {
-            var j=0;
-            for ( var i=0; i<4; i++ ) {
-                if ( b[i]==null ) {
-                    j++;
-                }
-            }
-
-            if( j>1 ) {
-                return b;
-            }
-
-            var b1 = [];
-            for ( var i=0; i<4; i++ ) {
-                b1.push( {vx: b[i].vx, vy: b[i].vy} );
-            }
-    
-            for ( var i=0; i<2; i++ ) {
-                var a = i==1 ? 1 : 0;
-                var c = i==1 ? 3 : 2;
-
-                if ( b1[a]==null ) {
-                    var d,g;
-                    if ( a==0 || a==3 ) {
-                        d=1;
-                        g=2;
-                    }
-                    else {
-                        d=0;
-                        g=3;
-                    }
-                    b1[a] = {vx: (b1[d].vx+b1[g].vx)/2, vy: (b1[d].vy+b1[g].vy)/2};
-                }
-                if ( b1[c]==null ) {
-                    var d,g;
-                    if ( c==0 || c==3 ) {
-                        d=1;
-                        g=2;
-                    }
-                    else {
-                        d=0;
-                        g=3;
-                    }
-                    b1[c] = {vx: (b1[d].vx+b1[g].vx)/2, vy: (b1[d].vy+b1[g].vy)/2};
-                }
-                if( b1[a]==null || b1[c]==null ) {
-                    continue;
-                }
-
-                var angle = Math.atan2(b1[c].vy-b1[a].vy, b1[c].vx-b1[a].vx);
-                var chouilla = val*Math.cos(angle);
-                b1[a].vx -= chouilla;
-                b1[c].vx += chouilla;
-                chouilla = val*Math.sin(angle);
-                b1[a].vy-=chouilla;
-                b1[c].vy+=chouilla;
-            }
-            return b1;
-        },*/
-
        /**
        * @function degreesToString
        * Convert a number in degrees into a string<br>
--- a/src/js/Catalog.js
+++ b/src/js/Catalog.js
@@ -34,9 +34,13 @@ import { Color } from "./Color.js"
 import { Utils } from "./Utils";
 import { Coo } from "./libs/astro/coo.js";
 import { VOTable } from "./vo/VOTable.js";
-import { Footprint } from "./Footprint.js";
 import { ObsCore } from "./vo/ObsCore.js";
 import A from "./A.js";
+import { Polyline } from "./Polyline.js";
+import { Line } from "./Line.js";
+import { Ellipse } from "./Ellipse.js";
+import { Circle } from "./Circle.js";
+import { Footprint } from "./Footprint.js";

 /**
 * Represents a catalog with configurable options for display and interaction.
@@ -55,15 +59,17 @@ export let Catalog = (function() {
    * @param {string} [options.name="catalog"] - The name of the catalog.
    * @param {string} [options.color] - The color associated with the catalog.
    * @param {number} [options.sourceSize=8] - The size of the sources in the catalog.
-    * @param {number} [options.markerSize=12] - The size of the markers associated with sources.
-    * @param {string} [options.shape="square"] - The shape of the sources (can be, "square", "circle", "plus", "cross", "rhomb", "triangle").
+    * @param {string|function|Image|HTMLCanvasElement} [options.shape="square"] - The shape of the sources (can be, "square", "circle", "plus", "cross", "rhomb", "triangle").
    * @param {number} [options.limit] - The maximum number of sources to display.
    * @param {function} [options.onClick] - The callback function to execute on a source click.
    * @param {boolean} [options.readOnly=false] - Whether the catalog is read-only.
    * @param {string} [options.raField] - The ID or name of the field holding Right Ascension (RA).
    * @param {string} [options.decField] - The ID or name of the field holding Declination (dec).
    * @param {function} [options.filter] - The filtering function for sources.
+    * @param {string} [options.selectionColor] - The color to apply to selected sources in the catalog.
+    * @param {string} [options.hoverColor] - The color to apply to sources in the catalog when they are hovered.
    * @param {boolean} [options.displayLabel=false] - Whether to display labels for sources.
+    * @param {string} [options.labelColumn] - The name of the column to be used for the label.
    * @param {string} [options.labelColor] - The color of the source labels.
    * @param {string} [options.labelFont="10px sans-serif"] - The font for the source labels.
    *
@@ -81,6 +87,8 @@ export let Catalog = (function() {
    *   raField: "ra",
    *   decField: "dec",
    *   filter: (source) => source.mag < 15,
+    *   selectionColor: "#00ff00",
+    *   hoverColor: "#ff00ff",
    *   displayLabel: true,
    *   labelColor: "#00ff00",
    *   labelFont: "12px Arial"
@@ -107,7 +115,8 @@ export let Catalog = (function() {

        // allows for filtering of sources
        this.filterFn = options.filter || undefined; // TODO: do the same for catalog
-
+        this.selectionColor = options.selectionColor || '#00ff00';
+        this.hoverColor = options.hoverColor || this.color;
        this.displayLabel = options.displayLabel || false;
        this.labelColor = options.labelColor || this.color;
        this.labelFont = options.labelFont || '10px sans-serif';
@@ -118,8 +127,6 @@ export let Catalog = (function() {
            }
        }

-    	this.selectionColor = '#00ff00';
-
        this.showFieldCallback = {}; // callbacks when the user clicks on a cell in the measurement table associated
        this.fields = undefined;
        this.uuid = Utils.uuidv4();
@@ -285,14 +292,14 @@ export let Catalog = (function() {
                    var name = field.name || field.ID || '';
                    name = name.toLowerCase();

-                    if ( ! raFieldIdx) {
-                        if (name.indexOf('ra')==0 || name.indexOf('_ra')==0 || name.indexOf('ra(icrs)')==0 || name.indexOf('_ra')==0 || name.indexOf('alpha')==0) {
+                    if (raFieldIdx === null) {
+                        if (name.indexOf('ra')==0 || name.indexOf('_ra')==0 || name.indexOf('ra(icrs)')==0 || name.indexOf('alpha')==0) {
                            raFieldIdx = l;
                            continue;
                        }
                    }

-                    if ( ! decFieldIdx) {
+                    if (decFieldIdx === null) {
                        if (name.indexOf('dej2000')==0 || name.indexOf('_dej2000')==0 || name.indexOf('de')==0 || name.indexOf('de(icrs)')==0 || name.indexOf('_de')==0 || name.indexOf('delta')==0) {
                            decFieldIdx = l;
                            continue;
@@ -315,7 +322,6 @@ export let Catalog = (function() {
    Catalog.parseFields = function(fields, raField, decField) {
        // This votable is not an obscore one
        let [raFieldIdx, decFieldIdx] = findRADecFields(fields, raField, decField);
-
        let parsedFields = {};
        let fieldIdx = 0;
        fields.forEach((field) => {
@@ -358,19 +364,16 @@ export let Catalog = (function() {
                }

                let { fields, rows } = table;
-                let type;
                try {
                    fields = ObsCore.parseFields(fields);
                    //fields.subtype = "ObsCore";
-                    type = 'ObsCore';
                } catch(e) {
                    // It is not an ObsCore table
                    fields = Catalog.parseFields(fields, raField, decField);
-                    type = 'sources';
                }

                let sources = [];
-                let footprints = [];
+                //let footprints = [];

                var coo = new Coo();

@@ -400,22 +403,23 @@ export let Catalog = (function() {
                            dec = coo.lat;
                        }

-                        source = new Source(ra, dec, mesures);
+                        source = new Source(parseFloat(ra), parseFloat(dec), mesures);
                        source.rowIdx = rowIdx;
                    }

-                    let footprint = null;
-                    if (region) {
+                    //let footprint = null;
+                    /*if (region) {
                        let shapes = A.footprintsFromSTCS(region, {lineWidth: 2})
                        footprint = new Footprint(shapes, source);
-                    }
+                    }*/

-                    if (footprint) {
+                    /*if (footprint) {
                        footprints.push(footprint);
                        if (maxNbSources && footprints.length == maxNbSources) {
                            return false;
                        }
-                    } else if(source) {
+                    } else */
+                    if (source) {
                        sources.push(source);
                        if (maxNbSources && sources.length == maxNbSources) {
                            return false;
@@ -428,10 +432,9 @@ export let Catalog = (function() {

                if (successCallback) {
                    successCallback({
-                        sources: sources,
-                        footprints: footprints,
-                        fields: fields,
-                        type: type
+                        sources,
+                        //footprints,
+                        fields,
                    });
                }
            },
@@ -450,11 +453,16 @@ export let Catalog = (function() {
    	this.shape = options.shape || this.shape || "square";

        this._shapeIsFunction = false; // if true, the shape is a function drawing on the canvas
+        this._shapeIsFootprintFunction = false;
        if (typeof this.shape === 'function') {
            this._shapeIsFunction = true;
-        }
+            // do not need to compute any canvas

-        if (this.shape instanceof Image || this.shape instanceof HTMLCanvasElement) {
+            // there is a possibility that the user gives a function returning shape objects such as
+            // circle, polyline, line or even footprints
+            // we must test that here and precompute all those objects and add them as footprints to draw
+            // at this point, we do not have to draw any sources
+        } else if (this.shape instanceof Image || this.shape instanceof HTMLCanvasElement) {
            this.sourceSize = this.shape.width;
        }

@@ -462,7 +470,7 @@ export let Catalog = (function() {

        this.cacheCanvas = Catalog.createShape(this.shape, this.color, this.sourceSize);
        this.cacheSelectCanvas = Catalog.createShape(this.shape, this.selectionColor, this.selectSize);
-        this.cacheHoverCanvas = Catalog.createShape(this.shape, this.hoverColor, this.sourceSize);
+        this.cacheHoverCanvas = Catalog.createShape(this.shape, this.hoverColor, this.selectSize);

        this.reportChange();
    };
@@ -476,7 +484,7 @@ export let Catalog = (function() {
            return;
        }

-        if(!this.fields) {
+        if (!this.fields) {
            // Case where we create a catalog from scratch
            // We have to define its fields by looking at the source data
            let fields = [];
@@ -497,19 +505,52 @@ export let Catalog = (function() {
            this.dec.push(sources[k].dec);
    	}

+        this.recomputeFootprints = true;
+
        this.reportChange();
    };

-    Catalog.prototype.addFootprints = function(footprintsToAdd) {
+    /*Catalog.prototype.addFootprints = function(footprintsToAdd) {
        footprintsToAdd = [].concat(footprintsToAdd); // make sure we have an array and not an individual footprints
    	this.footprints = this.footprints.concat(footprintsToAdd);
-    	for (var k=0, len=footprintsToAdd.length; k<len; k++) {
-    	    footprintsToAdd[k].setCatalog(this);
-            footprintsToAdd[k].setColor(this.color);
-            footprintsToAdd[k].setSelectionColor(this.selectionColor);
-    	}
+
+        footprintsToAdd.forEach(f => {
+            f.setCatalog(this);
+        })
+
        this.reportChange();
-    };
+    };*/
+
+    Catalog.prototype.computeFootprints = function(sources) {
+        let footprints = [];
+
+        if (this._shapeIsFunction) {
+            for(const source of sources) {
+                try {
+                    let shape = this.shape(source)
+                    
+                    // convert simple shapes to footprints
+                    if (shape instanceof Circle || shape instanceof Polyline || shape instanceof Ellipse || shape instanceof Line) {
+                        shape = new Footprint(shape, source);
+                    }
+
+                    if (shape instanceof Footprint) {
+                        let footprint = shape;
+                        this._shapeIsFootprintFunction = true;
+                        footprint.setCatalog(this);
+
+                        // store the footprints
+                        footprints.push(footprint);
+                    }
+                } catch(e) {
+                    // do not create the footprint
+                    continue;
+                }
+            };
+        }
+
+        return footprints;
+    }

    Catalog.prototype.setFields = function(fields) {
        this.fields = fields;
@@ -653,6 +694,8 @@ export let Catalog = (function() {
        this.ra.splice(idx, 1);
        this.dec.splice(idx, 1);

+        this.recomputeFootprints = true;
+
        this.reportChange();
    };

@@ -664,20 +707,21 @@ export let Catalog = (function() {
        this.footprints = [];
    };

-    Catalog.prototype.draw = function(ctx, frame, width, height, largestDim) {
-        if (! this.isShowing) {
+    Catalog.prototype.draw = function(ctx, width, height) {
+        if (!this.isShowing) {
            return;
        }
        // tracé simple
-        ctx.strokeStyle= this.color;
+        ctx.strokeStyle = this.color;
+
+        // Draw the footprints first
+        this.drawFootprints(ctx);

-        //ctx.lineWidth = 1;
-        //ctx.beginPath();
        if (this._shapeIsFunction) {
            ctx.save();
        }

-        const sourcesInView = this.drawSources(ctx, width, height);
+        const drawnSources = this.drawSources(ctx, width, height);

        if (this._shapeIsFunction) {
            ctx.restore();
@@ -687,21 +731,19 @@ export let Catalog = (function() {
        if (this.displayLabel) {
            ctx.fillStyle = this.labelColor;
            ctx.font = this.labelFont;
-            sourcesInView.forEach((s) => {
+            drawnSources.forEach((s) => {
                this.drawSourceLabel(s, ctx);
            })
        }
-
-        // Draw the footprints
-        this.drawFootprints(ctx);
    };

    Catalog.prototype.drawSources = function(ctx, width, height) {
+        let inside = [];
+
        if (!this.sources) {
            return;
        }
-
-        let sourcesInsideView = [];
+    
        let xy = this.view.wasm.worldToScreenVec(this.ra, this.dec);

        let self = this;
@@ -712,12 +754,12 @@ export let Catalog = (function() {
                    s.y = xy[2*idx + 1];

                    self.drawSource(s, ctx, width, height)
-                    sourcesInsideView.push(s);
+                    inside.push(s);
                }
            }
        });

-        return sourcesInsideView;
+        return inside;
    };

    Catalog.prototype.drawSource = function(s, ctx, width, height) {
@@ -725,8 +767,12 @@ export let Catalog = (function() {
            return false;
        }

+        if (s.hasFootprint && !s.tooSmallFootprint) {
+            return false;
+        }
+
        if (s.x <= width && s.x >= 0 && s.y <= height && s.y >= 0) {
-            if (this._shapeIsFunction) {
+            if (this._shapeIsFunction && !this._shapeIsFootprintFunction) {
                this.shape(s, ctx, this.view.getViewParams());
            }
            else if (s.marker && s.useMarkerDefaultIcon) {
@@ -735,6 +781,9 @@ export let Catalog = (function() {
            else if (s.isSelected) {
                ctx.drawImage(this.cacheSelectCanvas, s.x-this.selectSize/2, s.y-this.selectSize/2);
            }
+            else if (s.isHovered) {
+                ctx.drawImage(this.cacheHoverCanvas, s.x-this.selectSize/2, s.y-this.selectSize/2);
+            }
            else {
                ctx.drawImage(this.cacheCanvas, s.x-this.cacheCanvas.width/2, s.y-this.cacheCanvas.height/2);
            }
@@ -764,9 +813,20 @@ export let Catalog = (function() {
    };

    Catalog.prototype.drawFootprints = function(ctx) {
-        this.footprints.forEach((f) => {
+        if (this.recomputeFootprints) {
+            this.footprints = this.computeFootprints(this.sources);
+            this.recomputeFootprints = false;
+        }
+
+        var f;
+        for(let k = 0; k < this.footprints.length; k++) {
+            f = this.footprints[k];
+
            f.draw(ctx, this.view)
-        });
+            f.source.tooSmallFootprint = f.isTooSmall()
+            // propagate the info that the footprint is too small
+            //f.source.tooSmallFootprint = f.isTooSmall
+        };
    };


--- a/src/js/Circle.js
+++ b/src/js/Circle.js
@@ -29,33 +29,49 @@
 *****************************************************************************/

 import { Utils } from "./Utils";
-import { AladinUtils } from "./AladinUtils.js";
 import { Overlay } from "./Overlay.js";

-// TODO : Circle and Footprint should inherit from the same root object
+/**
+ * Represents an circle shape
+ *
+ * @namespace
+ * @typedef {Object} Circle
+ */
 export let Circle = (function() {
-    // constructor
-    let Circle = function(centerRaDec, radiusDegrees, options) {
+    /**
+     * Constructor function for creating a new circle.
+     *
+     * @constructor
+     * @memberof Circle
+     * @param {number[]} center - right-ascension/declination 2-tuple of the circle's center in degrees
+     * @param {number} radius - radius in degrees
+     * @param {ShapeOptions} options - Configuration options for the circle
+     * 
+     * @returns {Circle} - The circle shape object
+     */
+    let Circle = function(center, radius, options) {
        options = options || {};

        this.color     = options['color']     || undefined;
        this.fillColor = options['fillColor'] || undefined;
        this.lineWidth = options["lineWidth"] || 2;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;

        // TODO : all graphic overlays should have an id
        this.id = 'circle-' + Utils.uuidv4();

-        this.setCenter(centerRaDec);
-        this.setRadius(radiusDegrees);
+        this.setCenter(center);
+        this.setRadius(radius);
    	this.overlay = null;

    	this.isShowing = true;
    	this.isSelected = false;
-        this.selectionColor = '#00ff00';
+        this.isHovered = false;
    };

    Circle.prototype.setColor = function(color) {
-        if (this.color == color) {
+        if (!color || this.color == color) {
            return;
        }
        this.color = color;
@@ -65,7 +81,7 @@ export let Circle = (function() {
    };

    Circle.prototype.setSelectionColor = function(color) {
-        if (this.selectionColor == color) {
+        if (!color || this.selectionColor == color) {
            return;
        }
        this.selectionColor = color;
@@ -74,6 +90,16 @@ export let Circle = (function() {
        }
    };

+    Circle.prototype.setHoverColor = function(color) {
+        if (!color || this.hoverColor == color) {
+            return;
+        }
+        this.hoverColor = color;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
    Circle.prototype.setLineWidth = function(lineWidth) {
        if (this.lineWidth == lineWidth) {
            return;
@@ -132,6 +158,26 @@ export let Circle = (function() {
        }
    };

+    Circle.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
+
+    Circle.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
+
    Circle.prototype.isFootprint = function() {
        return true;
    }
@@ -153,15 +199,15 @@ export let Circle = (function() {
    // TODO
    Circle.prototype.draw = function(ctx, view, noStroke) {
        if (! this.isShowing) {
-            return;
+            return false;
        }
        noStroke = noStroke===true || false;

-        var centerXyview = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1], view.aladin);
+        var centerXyview = view.aladin.world2pix(this.centerRaDec[0], this.centerRaDec[1]);
        if (!centerXyview) {
            // the center goes out of the projection
            // we do not draw it
-            return;
+            return false;
        }
        this.center = {
            x: centerXyview[0],
@@ -171,42 +217,27 @@ export let Circle = (function() {
        let hidden = true;

        var ra, dec, vertOnCircle, dx, dy;
-        //if (this.radiusDegrees > 30) {
-            this.radius = Number.NEGATIVE_INFINITY;
-            
-            // Project 4 points lying on the circle and take the minimal dist with the center as radius
-            [[-1, 0], [1, 0], [0, -1], [0, 1]].forEach(([cardDirRa, cardDirDec]) => {
-                ra = this.centerRaDec[0] + cardDirRa * this.radiusDegrees;
-                dec = this.centerRaDec[1] + cardDirDec * this.radiusDegrees;
+        this.radius = Number.NEGATIVE_INFINITY;
+        
+        // Project 4 points lying on the circle and take the minimal dist with the center as radius
+        [[-1, 0], [1, 0], [0, -1], [0, 1]].forEach(([cardDirRa, cardDirDec]) => {
+            ra = this.centerRaDec[0] + cardDirRa * this.radiusDegrees;
+            dec = this.centerRaDec[1] + cardDirDec * this.radiusDegrees;

-                vertOnCircle = AladinUtils.radecToViewXy(ra, dec, view.aladin);
-
-                if (vertOnCircle) {
-                    dx = vertOnCircle[0] - this.center.x;
-                    dy = vertOnCircle[1] - this.center.y;
-
-                    this.radius = Math.max(Math.sqrt(dx*dx + dy*dy), this.radius);
-
-                    hidden = false;
-                }            
-            });
-        /*} else {
-            ra = this.centerRaDec[0] + this.radiusDegrees;
-            dec = this.centerRaDec[1];
-
-            vertOnCircle = AladinUtils.radecToViewXy(ra, dec, view);
+            vertOnCircle = view.aladin.world2pix(ra, dec);

            if (vertOnCircle) {
                dx = vertOnCircle[0] - this.center.x;
                dy = vertOnCircle[1] - this.center.y;

-                this.radius = Math.sqrt(dx*dx + dy*dy);
+                this.radius = Math.max(Math.sqrt(dx*dx + dy*dy), this.radius);
+
                hidden = false;
-            }
-        }*/
+            }            
+        });

        if (hidden) {
-            return;
+            return false;
        }
        // Then we can draw

@@ -224,8 +255,9 @@ export let Circle = (function() {
            } else {
                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
            }
-        }
-        else {
+        } else if (this.isHovered) {
+            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+        } else {
            ctx.strokeStyle = baseColor;
        }

@@ -239,6 +271,8 @@ export let Circle = (function() {
            }
            ctx.stroke();
        }
+
+        return true;
    };

    Circle.prototype.isInStroke = function(ctx, view, x, y) {
--- a/src/js/ColorCfg.js
+++ b/src/js/ColorCfg.js
@@ -222,7 +222,31 @@
        return [this.minCut, this.maxCut];
    };

-    ColorCfg.COLORMAPS = [];
+    ColorCfg.COLORMAPS = [
+        "blues",
+        "cividis",
+        "cubehelix",
+        "eosb",
+        "grayscale",
+        "inferno",
+        "magma",
+        "native",
+        "parula",
+        "plasma",
+        "rainbow",
+        "rdbu",
+        "rdylbu",
+        "redtemperature",
+        "sinebow",
+        "spectral",
+        "summer",
+        "viridis",
+        "ylgnbu",
+        "ylorbr",
+        "red",
+        "green",
+        "blue"
+    ];

    return ColorCfg;
 })();
--- a/src/js/ColorMap.js
+++ b/src/js/ColorMap.js
@@ -1,275 +0,0 @@
-// Copyright 2013 - UDS/CNRS
-// The Aladin Lite program is distributed under the terms
-// of the GNU General Public License version 3.
-//
-// This file is part of Aladin Lite.
-//
-//    Aladin Lite is free software: you can redistribute it and/or modify
-//    it under the terms of the GNU General Public License as published by
-//    the Free Software Foundation, version 3 of the License.
-//
-//    Aladin Lite is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-//    GNU General Public License for more details.
-//
-//    The GNU General Public License is available in COPYING file
-//    along with Aladin Lite.
-//
-
-
-
-/******************************************************************************
- * Aladin Lite project
- * 
- * File ColorMap.js
- * 
- * Author: Thomas Boch[CDS]
- * 
- *****************************************************************************/
-
-import { AladinUtils } from "./AladinUtils.js";
-
-/**
- * @deprecated since version 3.0
- */
-export let ColorMap = (function() {
-    
-    
-    // constructor
-    let ColorMap = function(view) {
-        this.view = view;
-        this.reversed = false;
-        this.mapName = 'native';
-        this.sig = this.signature();
-    };
-    
-ColorMap.MAPS = {};
-    
-    ColorMap.MAPS['eosb'] = {
-            name: 'Eos B',
-            r: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,9,18,27,36,45,49,57,72,81,91,100,109,118,127,
-                136,131,139,163,173,182,191,200,209,218,227,213,221,255,255,255,255,255,
-                255,255,255,229,229,255,255,255,255,255,255,255,255,229,229,255,255,255,
-                255,255,255,255,255,229,229,255,255,255,255,255,255,255,255,229,229,255,
-                255,255,255,255,255,255,255,229,229,255,255,255,255,255,255,255,255,229,
-                229,255,255,255,255,255,255,255,255,229,229,255,255,255,255,255,255,255,
-                255,229,229,255,255,255,255,255,255,255,255,229,229,255,253,251,249,247,
-                245,243,241,215,214,235,234,232,230,228,226,224,222,198,196,216,215,213,
-                211,209,207,205,203,181,179,197,196,194,192,190,188,186,184,164,162,178,
-                176,175,173,171,169,167,165,147,145,159,157,156,154,152,150,148,146,130,
-                128,140,138,137,135,133,131,129,127,113,111,121,119,117,117],
-            g: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,15,23,31,39,47,55,57,64,79,87,95,
-                103,111,119,127,135,129,136,159,167,175,183,191,199,207,215,200,207,239,
-                247,255,255,255,255,255,255,229,229,255,255,255,255,255,255,255,255,229,
-                229,255,255,255,255,255,255,255,255,229,229,255,250,246,242,238,233,229,
-                225,198,195,212,208,204,199,195,191,187,182,160,156,169,165,161,157,153,
-                148,144,140,122,118,127,125,123,121,119,116,114,112,99,97,106,104,102,
-                99,97,95,93,91,80,78,84,82,80,78,76,74,72,70,61,59,63,61,59,57,55,53,50,
-                48,42,40,42,40,38,36,33,31,29,27,22,21,21,19,16,14,12,13,8,6,3,1,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
-            b: [116,121,127,131,136,140,144,148,153,
-                157,145,149,170,174,178,182,187,191,195,199,183,187,212,216,221,225,229,
-                233,238,242,221,225,255,247,239,231,223,215,207,199,172,164,175,167,159,
-                151,143,135,127,119,100,93,95,87,79,71,63,55,47,39,28,21,15,7,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0]
-    };
-    ColorMap.MAPS['rainbow'] = {
-            name: 'Rainbow',
-            r: [0,4,9,13,18,22,27,31,36,40,45,50,54,
-                58,61,64,68,69,72,74,77,79,80,82,83,85,84,86,87,88,86,87,87,87,85,84,84,
-                84,83,79,78,77,76,71,70,68,66,60,58,55,53,46,43,40,36,33,25,21,16,12,4,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,8,12,21,25,29,33,42,
-                46,51,55,63,67,72,76,80,89,93,97,101,110,114,119,123,131,135,140,144,153,
-                157,161,165,169,178,182,187,191,199,203,208,212,221,225,229,233,242,246,
-                250,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255],
-            g: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,4,8,16,21,25,29,38,42,46,51,55,63,67,72,76,84,89,93,97,
-                106,110,114,119,127,131,135,140,144,152,157,161,165,174,178,182,187,195,
-                199,203,208,216,220,225,229,233,242,246,250,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,250,242,238,233,229,221,216,212,208,199,195,191,187,178,174,170,165,
-                161,153,148,144,140,131,127,123,119,110,106,102,97,89,85,80,76,72,63,59,
-                55,51,42,38,34,29,21,17,12,8,0],
-            b: [0,3,7,10,14,19,23,28,32,38,43,48,53,
-                59,63,68,72,77,81,86,91,95,100,104,109,113,118,122,127,132,136,141,145,
-                150,154,159,163,168,173,177,182,186,191,195,200,204,209,214,218,223,227,
-                232,236,241,245,250,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
-                255,255,255,255,255,255,246,242,238,233,225,220,216,212,203,199,195,191,
-                187,178,174,170,165,157,152,148,144,135,131,127,123,114,110,106,102,97,
-                89,84,80,76,67,63,59,55,46,42,38,34,25,21,16,12,8,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-    };
-    ColorMap.MAPS['cubehelix'] = {
-            name: 'Cubehelix',
-            r: [0,1,3,4,6,8,9,10,12,13,14,15,17,18,
-                19,20,20,21,22,23,23,24,24,25,25,25,26,26,26,26,26,26,26,26,26,26,26,25,
-                25,25,25,24,24,24,23,23,23,23,22,22,22,21,21,21,21,21,21,20,20,20,21,21,
-                21,21,21,22,22,22,23,23,24,25,26,27,27,28,30,31,32,33,35,36,38,39,41,43,
-                45,47,49,51,53,55,57,60,62,65,67,70,72,75,78,81,83,86,89,92,95,98,101,104,
-                107,110,113,116,120,123,126,129,132,135,138,141,144,147,150,153,155,158,
-                161,164,166,169,171,174,176,178,181,183,185,187,189,191,193,194,196,198,
-                199,201,202,203,204,205,206,207,208,209,209,210,211,211,211,212,212,212,
-                212,212,212,212,212,211,211,211,210,210,210,209,208,208,207,207,206,205,
-                205,204,203,203,202,201,201,200,199,199,198,197,197,196,196,195,195,194,
-                194,194,193,193,193,193,193,193,193,193,193,193,194,194,195,195,196,196,
-                197,198,199,200,200,202,203,204,205,206,208,209,210,212,213,215,217,218,
-                220,222,223,225,227,229,231,232,234,236,238,240,242,244,245,247,249,251,
-                253,255],
-            g: [0,0,1,1,2,2,3,4,4,5,6,6,7,8,9,10,
-                11,11,12,13,14,15,17,18,19,20,21,22,24,25,26,28,29,31,32,34,35,37,38,40,
-                41,43,45,46,48,50,52,53,55,57,58,60,62,64,66,67,69,71,73,74,76,78,79,81,
-                83,84,86,88,89,91,92,94,95,97,98,99,101,102,103,104,106,107,108,109,110,
-                111,112,113,114,114,115,116,116,117,118,118,119,119,120,120,120,121,121,
-                121,121,122,122,122,122,122,122,122,122,122,122,122,122,122,122,122,121,
-                121,121,121,121,121,121,121,121,120,120,120,120,120,120,120,120,120,120,
-                121,121,121,121,121,122,122,122,123,123,124,124,125,125,126,127,127,128,
-                129,130,131,131,132,133,135,136,137,138,139,140,142,143,144,146,147,149,
-                150,152,154,155,157,158,160,162,164,165,167,169,171,172,174,176,178,180,
-                182,183,185,187,189,191,193,194,196,198,200,202,203,205,207,208,210,212,
-                213,215,216,218,219,221,222,224,225,226,228,229,230,231,232,233,235,236,
-                237,238,239,240,240,241,242,243,244,244,245,246,247,247,248,248,249,250,
-                250,251,251,252,252,253,253,254,255],
-            b: [0,1,3,4,6,8,9,11,13,15,17,19,21,23,
-                25,27,29,31,33,35,37,39,41,43,45,47,48,50,52,54,56,57,59,60,62,63,65,66,
-                67,69,70,71,72,73,74,74,75,76,76,77,77,77,78,78,78,78,78,78,78,77,77,77,
-                76,76,75,75,74,73,73,72,71,70,69,68,67,66,66,65,64,63,61,60,59,58,58,57,
-                56,55,54,53,52,51,51,50,49,49,48,48,47,47,47,46,46,46,46,46,47,47,47,48,
-                48,49,50,50,51,52,53,55,56,57,59,60,62,64,65,67,69,71,74,76,78,81,83,86,
-                88,91,94,96,99,102,105,108,111,114,117,120,124,127,130,133,136,140,143,
-                146,149,153,156,159,162,165,169,172,175,178,181,184,186,189,192,195,197,
-                200,203,205,207,210,212,214,216,218,220,222,224,226,227,229,230,231,233,
-                234,235,236,237,238,239,239,240,241,241,242,242,242,243,243,243,243,243,
-                243,243,243,243,243,242,242,242,242,241,241,241,241,240,240,240,239,239,
-                239,239,239,238,238,238,238,238,238,238,238,239,239,239,240,240,240,241,
-                242,242,243,244,245,246,247,248,249,250,252,253,255]
-    };
-
-
-    
-    ColorMap.MAPS_CUSTOM = ['cubehelix', 'eosb', 'rainbow'];
-    ColorMap.MAPS_NAMES = ['native', 'grayscale'].concat(ColorMap.MAPS_CUSTOM);
-    
-    ColorMap.prototype.reverse = function(val) {
-        if (val) {
-            this.reversed = val;
-        }
-        else {
-            this.reversed = ! this.reversed;
-        }
-        this.sig = this.signature();
-        this.view.requestRedraw();
-    };
-    
-    
-    ColorMap.prototype.signature = function() {
-        var s = this.mapName;
-        
-        if (this.reversed) {
-            s += ' reversed';
-        }
-        
-        return s;
-    };
-    
-    ColorMap.prototype.update = function(mapName) {
-        this.mapName = mapName;
-        this.sig = this.signature();
-        this.view.requestRedraw();
-    };
-    
-    ColorMap.prototype.apply = function(img) {
-        if ( this.sig=='native' ) {
-            return img;
-        }
-        
-        if (img.cmSig==this.sig) {
-            return img.cmImg; // return cached pixels
-        }
-        
-        var canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        var ctx = canvas.getContext("2d");
-        ctx.drawImage(img, 0, 0);
-        
-        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        var pixelData = imageData.data;
-        var length = pixelData.length;
-        var a, b, c;
-        var switchCase = 3;
-        if (this.mapName=='grayscale') {
-            switchCase = 1;
-        }
-        else if (ColorMap.MAPS_CUSTOM.indexOf(this.mapName)>=0) {
-            switchCase = 2;
-        }
-        for (var i = 0; i < length; i+= 4) {
-            switch(switchCase) {
-                case 1:
-                    a = b = c = AladinUtils.myRound((pixelData[i]+pixelData[i+1]+pixelData[i+2])/3);
-                    break;
-                case 2:
-                    if (this.reversed) {
-                        a = ColorMap.MAPS[this.mapName].r[255-pixelData[i]];
-                        b = ColorMap.MAPS[this.mapName].g[255-pixelData[i+1]];
-                        c = ColorMap.MAPS[this.mapName].b[255-pixelData[i+2]];
-                    }
-                    else {
-                        a = ColorMap.MAPS[this.mapName].r[pixelData[i]];
-                        b = ColorMap.MAPS[this.mapName].g[pixelData[i+1]];
-                        c = ColorMap.MAPS[this.mapName].b[pixelData[i+2]];
-                    }
-                    break;
-                default:
-                    a = pixelData[i];
-                    b = pixelData[i + 1];
-                    c = pixelData[i + 2];
-                    
-            }
-            if (switchCase!=2 && this.reversed) {
-                a = 255-a;
-                b = 255-b;
-                c = 255-c;
-              
-            }
-            pixelData[i]     = a;
-            pixelData[i + 1] = b;
-            pixelData[i + 2] = c;
-            
-        }
-        //imageData.data = pixelData;  // not needed, and create an error in strict mode !
-        ctx.putImageData(imageData, 0, 0);
-        
-        // cache image with color map applied
-        img.cmSig = this.sig;
-        img.cmImg = canvas;
-
-        return img.cmImg;
-    };
-    
-    return ColorMap;
-})();
-    
--- a/src/js/DefaultActionsForContextMenu.js
+++ b/src/js/DefaultActionsForContextMenu.js
@@ -31,6 +31,9 @@
 import { GenericPointer } from "./GenericPointer.js";
 import A from "./A.js";
 import { CatalogQueryBox } from "./gui/Box/CatalogQueryBox.js";
+import cameraIconUrl from '../../assets/icons/camera.svg'
+import targetIconUrl from '../../assets/icons/target.svg';
+import uploadIconUrl from '../../assets/icons/upload.svg';

 export let DefaultActionsForContextMenu = (function () {

@@ -45,31 +48,43 @@ export let DefaultActionsForContextMenu = (function () {
        return [
            {
                label: "Copy position", action(o) {
-                    var r = document.createRange();
-                    r.selectNode(o.target);
-                    window.getSelection().removeAllRanges();
-                    window.getSelection().addRange(r);
-                    let statusBarMsg;
-                    try {
-                        let successful = document.execCommand('copy');
-                        statusBarMsg = successful ? 'Position copied!' : 'Position could not be copied!';
-                    } catch (err) {
-                        statusBarMsg = 'Oops, unable to copy to clipboard';
+                    let msg;
+                    let text = o.target.innerText;
+                    if (!text) {
+                        return false;
                    }

-                    if (a.statusBar) {
-                        a.statusBar.appendMessage({
-                            message: statusBarMsg,
-                            duration: 2000,
-                            type: 'info'
+                    navigator.clipboard.writeText(text)
+                        .then(() => {
+                            msg = 'successful'
+                            if (aladinInstance.statusBar) {
+                                aladinInstance.statusBar.appendMessage({
+                                    message: 'Reticle location saved!',
+                                    duration: 2000,
+                                    type: 'info'
+                                })
+                            }
+                        })
+                        .catch((e) => {
+                            msg = 'unsuccessful'
+                            console.info('Oops, unable to copy', e);
+                        })
+                        .finally(() => {
+                            console.info('Copying text command was ' + msg);
                        })
-                    }
-
-                    window.getSelection().removeAllRanges();
                }
            },
            {
-                label: "Take snapshot", action(o) { a.exportAsPNG(); }
+                label: {
+                    icon: {
+                        tooltip: {content: 'Download a PNG image file of the view', position: {direction: 'top'}},
+                        monochrome: true,
+                        url: cameraIconUrl,
+                        size: 'small',
+                    },
+                    content: 'Take a snapshot'
+                },
+                action(o) { a.exportAsPNG(); }
            },
            {
                label: "Add",
@@ -85,23 +100,30 @@ export let DefaultActionsForContextMenu = (function () {
                    {
                        label: 'New catalogue layer', action(o) {
                            let catBox = new CatalogQueryBox(a)
-                            if (catBox.isHidden) {
-                                catBox._show({
-                                    header: {
-                                        title: 'Add a new catalogue',
-                                        draggable: true
-                                    },
-                                    position: {
-                                        anchor :'center center'
-                                    },
-                                });
-                            }
+                            catBox._show({
+                                header: {
+                                    title: 'Add a new catalogue',
+                                    draggable: true
+                                },
+                                position: {
+                                    anchor :'center center'
+                                },
+                            });
                        }
                    },
                ]
            },
            {
-                label: "Load local file",
+                label: {
+                    icon: {
+                        monochrome: true,
+                        url: uploadIconUrl,
+                        cssStyle: {
+                            cursor: 'help',
+                        }
+                    },
+                    content: "Load a local file"
+                },
                subMenu: [
                    {
                        label: 'FITS image', action(o) {
@@ -169,8 +191,21 @@ export let DefaultActionsForContextMenu = (function () {
                ]
            },
            {
-                label: "What is this?", action(o) {
-                    GenericPointer(a.view, o);
+                label: {
+                    icon: {
+                        tooltip: {content: 'Use Sesame, our name resolver!', position: {direction: 'top'}},
+                        monochrome: true,
+                        url: targetIconUrl,
+                        size: 'small',
+                    },
+                    content: 'What is this?'
+                },
+                
+                action(o, ctxMenu) {
+                    GenericPointer(a.view, {
+                        x: parseInt(ctxMenu.element().style.left),
+                        y: parseInt(ctxMenu.element().style.top)
+                    });
                }
            },
            {
--- a/src/js/Ellipse.js
+++ b/src/js/Ellipse.js
@@ -29,35 +29,68 @@
 *****************************************************************************/

 import { Utils } from "./Utils";
-import { AladinUtils } from "./AladinUtils.js";
 import { Overlay } from "./Overlay.js";
+import { requestAnimFrame } from "./libs/RequestAnimationFrame";

-// TODO : Ellipse, Circle and Footprint should inherit from the same root object
+/**
+* @typedef {Object} ShapeOptions
+* @description Options for describing a shape
+*
+* @property {Object} options - Configuration options for the shape.
+* @property {string} [options.color] - The color of the shape
+* @property {string} [options.fill=false] - Fill the shape with fillColor
+* @property {string} [options.fillColor] - A filling color for the shape
+* @property {number} [options.lineWidth=2] - The line width in pixels
+* @property {number} [options.opacity=1] - The opacity, between 0 (totally transparent) and 1 (totally opaque)
+* @property {string} [options.selectionColor='#00ff00'] - A selection color
+* @property {string} [options.hoverColor] -  A hovered color
+*/
+
+/**
+ * Represents an ellipse shape
+ *
+ * @namespace
+ * @typedef {Object} Ellipse
+ */
 export let Ellipse = (function() {
-    // constructor
-    let Ellipse = function(centerRaDec, rayonXDegrees, rayonYDegrees, rotationDegrees, options) {
+    /**
+     * Constructor function for creating a new ellipse.
+     *
+     * @constructor
+     * @memberof Ellipse
+     * @param {number[]} center - right-ascension/declination 2-tuple of the ellipse's center in degrees
+     * @param {number} a - semi-major axis length in degrees
+     * @param {number} b - semi-minor axis length in degrees
+     * @param {number} theta - angle of the ellipse in degrees
+     * @param {ShapeOptions} options - Configuration options for the ellipse
+     * 
+     * @returns {Ellipse} - The ellipse shape object
+     */
+    let Ellipse = function(center, a, b, theta, options) {
        options = options || {};

        this.color = options['color'] || undefined;
        this.fillColor = options['fillColor'] || undefined;
        this.lineWidth = options["lineWidth"] || 2;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;
+        this.opacity   = options['opacity']   || 1;

        // TODO : all graphic overlays should have an id
        this.id = 'ellipse-' + Utils.uuidv4();

-        this.setCenter(centerRaDec);
-        this.setRadiuses(rayonXDegrees, rayonYDegrees);
-        this.setRotation(rotationDegrees);
+        this.setCenter(center);
+        this.setAxisLength(a, b);
+        this.setRotation(theta);
    	this.overlay = null;
    	
    	this.isShowing = true;
        this.isSelected = false;
-
-        this.selectionColor = '#00ff00';
+        this.isHovered = false;
    };

    Ellipse.prototype.setColor = function(color) {
-        if (this.color == color) {
+        if (!color || this.color == color) {
            return;
        }
        this.color = color;
@@ -67,7 +100,7 @@ export let Ellipse = (function() {
    };

    Ellipse.prototype.setSelectionColor = function(color) {
-        if (this.selectionColor == color) {
+        if (!color || this.selectionColor == color) {
            return;
        }
        this.selectionColor = color;
@@ -76,6 +109,16 @@ export let Ellipse = (function() {
        }
    };

+    Ellipse.prototype.setHoverColor = function(color) {
+        if (!color || this.hoverColor == color) {
+            return;
+        }
+        this.hoverColor = color;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
    Ellipse.prototype.setLineWidth = function(lineWidth) {
        if (this.lineWidth == lineWidth) {
            return;
@@ -135,6 +178,25 @@ export let Ellipse = (function() {
    };


+    Ellipse.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
+
+    Ellipse.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    }
    
    Ellipse.prototype.setCenter = function(centerRaDec) {
        this.centerRaDec = centerRaDec;
@@ -156,9 +218,9 @@ export let Ellipse = (function() {
        }
    };

-    Ellipse.prototype.setRadiuses = function(radiusXDegrees, radiusYDegrees) {
-        this.radiusXDegrees = radiusXDegrees;
-        this.radiusYDegrees = radiusYDegrees;
+    Ellipse.prototype.setAxisLength = function(a, b) {
+        this.a = a;
+        this.b = b;

        if (this.overlay) {
            this.overlay.reportChange();
@@ -170,69 +232,36 @@ export let Ellipse = (function() {
    }

    // TODO
-    Ellipse.prototype.draw = function(ctx, view, noStroke) {
+    Ellipse.prototype.draw = function(ctx, view, noStroke, noSmallCheck) {
        if (! this.isShowing) {
-            return;
+            return false;
        }

-        var centerXyview = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1], view.aladin);
-        if (!centerXyview) {
-            // the center goes out of the projection
-            // we do not draw it
-            return;
-        }
-
-        let circlePtXyViewRa = AladinUtils.radecToViewXy(this.centerRaDec[0] + this.radiusXDegrees, this.centerRaDec[1], view.aladin);
-        let circlePtXyViewDec = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1] + this.radiusYDegrees, view.aladin);
-
-        if (!circlePtXyViewRa || !circlePtXyViewDec) {
-            // the circle border goes out of the projection
-            // we do not draw it
-            return;
-        }
-
-        var dxRa = circlePtXyViewRa[0] - centerXyview[0];
-        var dyRa = circlePtXyViewRa[1] - centerXyview[1];
-        var radiusInPixX = Math.sqrt(dxRa*dxRa + dyRa*dyRa);
-
-        var dxDec = circlePtXyViewDec[0] - centerXyview[0];
-        var dyDec = circlePtXyViewDec[1] - centerXyview[1];
-        var radiusInPixY = Math.sqrt(dxDec*dxDec + dyDec*dyDec);
-
-        // Ellipse crossing the projection
-        if ((dxRa*dyDec - dxDec*dyRa) <= 0.0) {
-            // We do not draw it
-            return;
-        }
-        noStroke = noStroke===true || false;
-
-        // TODO : check each 4 point until show
-        var baseColor = this.color;
-        if (! baseColor && this.overlay) {
-            baseColor = this.overlay.color;
-        }
-        if (! baseColor) {
-            baseColor = '#ff0000';
-        }
-        
-        if (this.isSelected) {
-            if(this.selectionColor) {
-                ctx.strokeStyle = this.selectionColor;
-            } else {
-                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
+        const px_per_deg = view.width / view.fov;
+        noSmallCheck = noSmallCheck===true || false;
+        if (!noSmallCheck) {
+            this.isTooSmall = this.b * 2 * px_per_deg < this.lineWidth;
+            if (this.isTooSmall) {
+                return false;
            }
        }
-        else {
-            ctx.strokeStyle = baseColor;
+
+        var originScreen = view.aladin.world2pix(this.centerRaDec[0], this.centerRaDec[1]);
+        if (!originScreen) {
+            // the center goes out of the projection
+            // we do not draw it
+            return false;
        }

        // 1. Find the spherical tangent vector going to the north
-        let origin = this.centerRaDec;
        let toNorth = [this.centerRaDec[0], this.centerRaDec[1] + 1e-3];

        // 2. Project it to the screen
-        let originScreen = this.overlay.view.wasm.worldToScreen(origin[0], origin[1]);
-        let toNorthScreen = this.overlay.view.wasm.worldToScreen(toNorth[0], toNorth[1]);
+        let toNorthScreen = view.aladin.world2pix(toNorth[0], toNorth[1]);
+
+        if(!toNorthScreen) {
+            return false;
+        }

        // 3. normalize this vector
        let toNorthVec = [toNorthScreen[0] - originScreen[0], toNorthScreen[1] - originScreen[1]];
@@ -250,9 +279,62 @@ export let Ellipse = (function() {

        // 5. Get the correct ellipse angle
        let theta = -this.rotation + westToNorthAngle;
+        //let ct = Math.cos(theta);
+        //let st = Math.sin(theta);

+        /*let circlePtXyViewRa = view.aladin.world2pix(view.viewCenter.lon + 1.0, view.viewCenter.lat);
+        let circlePtXyViewDec = view.aladin.world2pix(view.viewCenter.lon, view.viewCenter.lat + 1.0);
+
+        if (!circlePtXyViewRa || !circlePtXyViewDec) {
+            // the circle border goes out of the projection
+            // we do not draw it
+            return;
+        }
+
+        var dxRa = circlePtXyViewRa[0] - centerXyview[0];
+        var dyRa = circlePtXyViewRa[1] - centerXyview[1];
+        var dRa = Math.sqrt(dxRa*dxRa + dyRa*dyRa);
+
+        var dxDec = circlePtXyViewDec[0] - centerXyview[0];
+        var dyDec = circlePtXyViewDec[1] - centerXyview[1];
+        var dDec = Math.sqrt(dxDec*dxDec + dyDec*dyDec);*/
+
+        //var radiusInPixX = Math.abs(this.a * ct * dRa) + Math.abs(this.a * st * dDec);
+        //var radiusInPixY = Math.abs(this.b * st * dRa) + Math.abs(this.b * ct * dDec);
+
+        // Ellipse crossing the projection
+        /*if ((dxRa*dyDec - dxDec*dyRa) <= 0.0) {
+            // We do not draw it
+            return;
+        }*/
+        noStroke = noStroke===true || false;
+
+        // TODO : check each 4 point until show
+        var baseColor = this.color;
+        if (! baseColor && this.overlay) {
+            baseColor = this.overlay.color;
+        }
+        if (! baseColor) {
+            baseColor = '#ff0000';
+        }
+        
+        if (this.isSelected) {
+            if(this.selectionColor) {
+                ctx.strokeStyle = this.selectionColor;
+            } else {
+                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
+            }
+        } else if (this.isHovered) {
+            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+        } else {
+            ctx.strokeStyle = baseColor;
+        }
+
+        ctx.lineWidth = this.lineWidth;
+        ctx.globalAlpha = this.opacity;
        ctx.beginPath();
-        ctx.ellipse(centerXyview[0], centerXyview[1], radiusInPixX, radiusInPixY, theta, 0, 2*Math.PI, false);
+
+        ctx.ellipse(originScreen[0], originScreen[1], px_per_deg * this.a, px_per_deg * this.b, theta, 0, 2*Math.PI, false);
        if (!noStroke) {
            if (this.fillColor) {
                ctx.fillStyle = this.fillColor;
@@ -260,10 +342,15 @@ export let Ellipse = (function() {
            }
            ctx.stroke();
        }
+
+        return true;
    };

    Ellipse.prototype.isInStroke = function(ctx, view, x, y) {
-        this.draw(ctx, view, true);
+        if (!this.draw(ctx, view, true, true)) {
+            return false;
+        }
+
        return ctx.isPointInStroke(x, y);
    };

--- a/src/js/FiniteStateMachine/CircleSelect.js
+++ b/src/js/FiniteStateMachine/CircleSelect.js
@@ -19,6 +19,7 @@

 import { FSM } from "../FiniteStateMachine";
 import { View } from "../View";
+import { Selector } from "../Selector";
 /******************************************************************************
 * Aladin Lite project
 * 
@@ -55,10 +56,6 @@ export class CircleSelect extends FSM {
        let draw = () => {
            let ctx = view.catalogCtx;

-            if (!view.catalogCanvasCleared) {
-                ctx.clearRect(0, 0, view.width, view.height);
-                view.catalogCanvasCleared = true;
-            }
            // draw the selection
            ctx.fillStyle = options.color + '7f';
            ctx.strokeStyle = options.color;
@@ -83,7 +80,8 @@ export class CircleSelect extends FSM {

            x = this.startCoo.x;
            y = this.startCoo.y;
-            (typeof this.callback === 'function') && this.callback({
+
+            let s = {
                x, y, r,
                label: 'circle',
                contains(s) {
@@ -100,21 +98,24 @@ export class CircleSelect extends FSM {
                        h: 2*r
                    }
                }
-            });
+            };
+
+            // execute general callback
+            if (view.aladin.callbacksByEventName) {
+                var callback = view.aladin.callbacksByEventName['select'];
+                if (typeof callback === "function") {
+                    let objList = Selector.getObjects(s, view);
+                    callback(objList);
+                }
+            }
+
+            // execute selection callback only
+            (typeof this.callback === 'function') && this.callback(s);

            // TODO: remove these modes in the future
            view.aladin.showReticle(true)
            view.setCursor('default');

-            // execute general callback
-            if (view.callbacksByEventName) {
-                var callback = view.callbacksByEventName['select'];
-                if (typeof callback === "function") {
-                    // !todo
-                    let selectedObjects = view.selectObjects(this);
-                    callback(selectedObjects);
-                }
-            }
            view.setMode(View.PAN)
            view.requestRedraw();
        };
--- a/src/js/FiniteStateMachine/PolySelect.js
+++ b/src/js/FiniteStateMachine/PolySelect.js
@@ -119,10 +119,6 @@ export class PolySelect extends FSM {
        let draw = () => {
            let ctx = view.catalogCtx;

-            if (!view.catalogCanvasCleared) {
-                ctx.clearRect(0, 0, view.width, view.height);
-                view.catalogCanvasCleared = true;
-            }
            // draw the selection
            ctx.save();
            ctx.fillStyle = options.color + '7f';
@@ -163,13 +159,23 @@ export class PolySelect extends FSM {
            let y = yMin;
            let w = xMax - xMin;
            let h = yMax - yMin;
-            (typeof this.callback === 'function') && this.callback({
+
+            let s = {
                vertices: this.coos,
                label: 'polygon',
                bbox() {
                    return {x, y, w, h}
                }
-            });
+            };
+            (typeof this.callback === 'function') && this.callback(s);
+
+            // execute general callback
+            if (view.aladin.callbacksByEventName) {
+                var callback = view.aladin.callbacksByEventName['select'];
+                if (typeof callback === "function") {
+                    console.warn('polygon selection is not fully implemented, PolySelect.contains is needed for finding sources inside a polygon')
+                }
+            }

            this.coos = [];

--- a/src/js/FiniteStateMachine/RectSelect.js
+++ b/src/js/FiniteStateMachine/RectSelect.js
@@ -19,6 +19,7 @@

 import { FSM } from "../FiniteStateMachine";
 import { View } from "../View";
+import { Selector } from "../Selector";
 /******************************************************************************
 * Aladin Lite project
 * 
@@ -56,10 +57,6 @@ export class RectSelect extends FSM {
        let draw = () => {
            let ctx = view.catalogCtx;

-            if (!view.catalogCanvasCleared) {
-                ctx.clearRect(0, 0, view.width, view.height);
-                view.catalogCanvasCleared = true;
-            }
            // draw the selection
            ctx.fillStyle = options.color + '7f';
            ctx.strokeStyle = options.color;
@@ -91,7 +88,7 @@ export class RectSelect extends FSM {
                h = -h;
            }

-            (typeof this.callback === 'function') && this.callback({
+            let s = {
                x, y, w, h,
                label: 'rect',
                contains(s) {
@@ -100,21 +97,20 @@ export class RectSelect extends FSM {
                bbox() {
                    return {x, y, w, h}
                }
-            });
+            };
+
+            (typeof this.callback === 'function') && this.callback(s);

            // TODO: remove these modes in the future
            view.aladin.showReticle(true)
            view.setCursor('default');

            // execute general callback
-            if (view.callbacksByEventName) {
-                var callback = view.callbacksByEventName['select'];
+            if (view.aladin.callbacksByEventName) {
+                var callback = view.aladin.callbacksByEventName['select'];
                if (typeof callback === "function") {
-                    // !todo
-                    let selectedObjects = view.selectObjects(this);
-                    console.log(selectedObjects)
-
-                    callback(selectedObjects);
+                    let objList = Selector.getObjects(s, view);
+                    callback(objList);
                }
            }
            view.setMode(View.PAN)
--- a/src/js/Footprint.js
+++ b/src/js/Footprint.js
@@ -33,7 +33,6 @@
 *
 *****************************************************************************/

-import { AladinUtils } from './AladinUtils.js';
 import { Utils } from './Utils';

 export let Footprint= (function() {
@@ -43,9 +42,14 @@ export let Footprint= (function() {
        this.id = 'footprint-' + Utils.uuidv4();

        this.source = source;
-        this.shapes = shapes;
+        if (this.source) {
+            this.source.hasFootprint = true;
+        }
+
+        this.shapes = [].concat(shapes);

        this.isShowing = true;
+        this.isHovered = false;

        this.overlay = null;
    };
@@ -53,6 +57,16 @@ export let Footprint= (function() {
    Footprint.prototype.setCatalog = function(catalog) {
        if (this.source) {
            this.source.setCatalog(catalog);
+            
+            for (var s of this.shapes) {
+                if (!s.color) {
+                    s.setColor(catalog.color);
+                }
+
+                // Selection and hover color are catalog options
+                s.setSelectionColor(catalog.selectionColor);
+                s.setHoverColor(catalog.hoverColor);
+            }
        }
    };

@@ -82,30 +96,81 @@ export let Footprint= (function() {
        this.shapes.forEach((shape) => shape.deselect())
    };

+    Footprint.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+
+        this.isHovered = true;
+        this.shapes.forEach((shape) => shape.hover())
+
+        if (this.overlay) {
+            this.overlay.reportChange();
+            return;
+        }
+
+        let catalog = this.getCatalog();
+        if (catalog) {
+            catalog.view && catalog.view.requestRedraw();
+        }
+    };
+
+    Footprint.prototype.unhover = function() {
+        if (!this.isHovered) {
+            return;
+        }
+
+        this.isHovered = false;
+        this.shapes.forEach((shape) => shape.unhover())
+
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+
+        let catalog = this.getCatalog();
+        if (catalog) {
+            catalog.view && catalog.view.requestRedraw();
+        }
+    };
+
+    Footprint.prototype.getLineWidth = function() {
+        return this.shapes && this.shapes[0].getLineWidth();
+    };
+
+
    Footprint.prototype.setLineWidth = function(lineWidth) {
        this.shapes.forEach((shape) => shape.setLineWidth(lineWidth))
    };

-    Footprint.prototype.getLineWidth = function() {
-        if (this.shapes && this.shapes.length > 0) {
-            return this.shapes[0].getLineWidth();
-        }
-    };
-
    Footprint.prototype.setColor = function(color) {
+        if(!color) {
+            return;
+        }
+
        this.shapes.forEach((shape) => shape.setColor(color))
    };

    Footprint.prototype.setSelectionColor = function(color) {
+        if (!color) {
+            return;
+        }
+
        this.shapes.forEach((shape) => shape.setSelectionColor(color))
    };

+    Footprint.prototype.setHoverColor = function(color) {
+        if (!color)
+            return;
+
+        this.shapes.forEach((shape) => shape.setHoverColor(color))
+    };
+
    Footprint.prototype.isFootprint = function() {
        return true;
    }

    Footprint.prototype.draw = function(ctx, view, noStroke) {
-        this.shapes.forEach((shape) => shape.draw(ctx, view, noStroke))
+        return this.shapes.some((shape) => {return shape.draw(ctx, view, noStroke)})
    };

    Footprint.prototype.actionClicked = function() {
@@ -127,6 +192,10 @@ export let Footprint= (function() {
        return this.shapes.some((shape) => shape.isInStroke(ctx, view, x, y));
    };

+    Footprint.prototype.isTooSmall = function(view) {
+        return this.shapes.every((shape) => shape.isTooSmall);
+    };
+
    Footprint.prototype.getCatalog = function() {
        return this.source && this.source.catalog;
    };
@@ -150,7 +219,7 @@ export let Footprint= (function() {
                    y: s.y,
                };
            } else {
-                var xy = AladinUtils.radecToViewXy(s.ra, s.dec, view.aladin);
+                var xy = view.aladin.world2pix(s.ra, s.dec);
                if (!xy) {
                    return false;
                }
--- a/src/js/GenericPointer.js
+++ b/src/js/GenericPointer.js
@@ -11,9 +11,14 @@ import { Utils } from './Utils';

 // allow to call either Simbad or Planetary features Pointers
 export let GenericPointer = function (view, e) {
-    const xymouse = Utils.relMouseCoords(e);
+    let xymouse;
+    if (e instanceof Event) {
+        xymouse = Utils.relMouseCoords(e);
+    } else {
+        xymouse = e;
+    }

-    let radec = view.aladin.pix2world(xymouse.x, xymouse.y);
+    let radec = view.aladin.pix2world(xymouse.x, xymouse.y, 'icrs');
    if (radec) {
        // sky case
        if (view.aladin.getBaseImageLayer().isPlanetaryBody() === false) {
@@ -23,7 +28,7 @@ export let GenericPointer = function (view, e) {
        // planetary body case
        else {
            // TODO: replace with actual value
-            const body = view.aladin.getBaseImageLayer().properties.hipsBody;
+            const body = view.aladin.getBaseImageLayer().hipsBody;
            PlanetaryFeaturesPointer.query(radec[0], radec[1], Math.min(80, view.fov / 20.0), body, view.aladin);
        }
    } else {
--- a/src/js/HiPSProperties.js
+++ b/src/js/HiPSProperties.js
@@ -65,7 +65,6 @@ HiPSProperties.fetchFromID = async function(ID) {
            // Exactly one matching
            result = metadata[0];
        }
-
        return result;
    }
 }
@@ -74,7 +73,7 @@ HiPSProperties.fetchFromUrl = async function(urlOrId) {
    try {
        urlOrId = new URL(urlOrId);
    } catch (e) {
-        // Relative path
+        // Relative path test
        try {
            urlOrId = Utils.getAbsoluteURL(urlOrId)

@@ -135,27 +134,36 @@ HiPSProperties.fetchFromUrl = async function(urlOrId) {
    return result;
 }

-HiPSProperties.getFasterMirrorUrl = function (metadata) {
-    const pingHiPSServiceUrl = (hipsServiceUrl) => {
-        hipsServiceUrl = Utils.fixURLForHTTPS(hipsServiceUrl);
+HiPSProperties.getFasterMirrorUrl = function (metadata, currUrl) {
+    const pingHiPSServiceUrl = async (baseUrl) => {
+        baseUrl = Utils.fixURLForHTTPS(baseUrl);

        const controller = new AbortController()

-        let startRequestTime = Date.now();
-        const maxTime = 500;
+        const maxTime = 1000;
        // 5 second timeout:
        const timeoutId = setTimeout(() => controller.abort(), maxTime)
-        const promise = fetch(hipsServiceUrl + '/properties', { cache: 'no-store', signal: controller.signal, mode: "cors" }).then(response => {
-            const duration = Date.now() - startRequestTime;//the time needed to do the request
+
+        let startRequestTime = performance.now();
+        let options = {
+            //headers: { 'Cache-Control': 'no-cache' }, // Disable caching
+            method: 'GET',
+            signal: controller.signal,
+            mode: 'cors',
+            cache: "no-cache",
+        };
+        let validRequest = await fetch(baseUrl + '/properties', options).then((resp) => {
            // completed request before timeout fired
            clearTimeout(timeoutId)
            // Resolve with the time duration of the request
-            return { duration: duration, baseUrl: hipsServiceUrl, validRequest: true };
+            return Promise.resolve(true);
        }).catch((e) => {
-            return { duration: maxTime, baseUrl: hipsServiceUrl, validRequest: false };
+            return Promise.resolve(false);
        });
+        const duration = performance.now() - startRequestTime;//the time needed to do the request

-        return promise;
+
+        return {duration, validRequest, baseUrl};
    };

    // Get all the possible hips_service_url urls
@@ -192,21 +200,39 @@ HiPSProperties.getFasterMirrorUrl = function (metadata) {
            });

            //console.log(validResponses)
+            let newUrlResp;

            if (validResponses.length >= 2) {
-                const isSecondUrlOk = ((validResponses[1].duration - validResponses[0].duration) / validResponses[0].duration) < 0.20;
+                const isSecondUrlOk = ((validResponses[1].duration - validResponses[0].duration) / validResponses[0].duration) < 0.10;

                if (isSecondUrlOk) {
-                    return validResponses[getRandomIntInclusive(0, 1)].baseUrl;
+                    newUrlResp = validResponses[getRandomIntInclusive(0, 1)];
                } else {
-                    return validResponses[0].baseUrl;
+                    newUrlResp = validResponses[0];
                }
            } else if (validResponses.length === 1) {
-                return validResponses[0].baseUrl;
+                newUrlResp = validResponses[0];
            } else {
                // no valid response => we return an error
-                return Promise.reject('Survey not found. All mirrors urls have been tested:' + urls)
+                return Promise.reject('All mirrors urls have been tested:' + urls)
            }
+
+            // check if there is a big difference from the current one
+            let currUrlResp = validResponses.find((r) => r.baseUrl === currUrl)
+            // it may happen that the url requested by the user is too slow hence discarded
+            // for these cases, we automatically switch to the new fastest url.
+            let urlChosen;
+            if (currUrlResp && Math.abs(currUrlResp.duration - newUrlResp.duration) / Math.min(currUrlResp.duration, newUrlResp.duration) < 0.10) {
+                // there is not enough difference => do not switch
+                urlChosen = currUrlResp.baseUrl;
+            } else {
+                // good difference we take the best
+                urlChosen = newUrlResp.baseUrl;
+            }
+
+            //console.log('curr url', currUrlResp, ', new ', newUrlResp)
+
+            urlChosen = Utils.fixURLForHTTPS(urlChosen)
+            return urlChosen;
        })
-        .then((url) => Utils.fixURLForHTTPS(url))
 }
--- a/src/js/ImageFITS.js
+++ b/src/js/ImageFITS.js
@@ -29,15 +29,11 @@
 *****************************************************************************/
 import { ALEvent } from "./events/ALEvent.js";
 import { ColorCfg } from "./ColorCfg.js";
-import { ImageLayer } from "./ImageLayer.js";
 import { Utils } from "./Utils";

 export let ImageFITS = (function () {

-    function ImageFITS(url, name, view, options, successCallback = undefined, errorCallback = undefined) {
-        this.view = view;
-        this.wasm = view.wasm;
-
+    function ImageFITS(url, name, options, successCallback = undefined, errorCallback = undefined) {
        // Name of the layer
        this.layer = null;
        this.added = false;
@@ -46,110 +42,102 @@ export let ImageFITS = (function () {
        this.url = url.toString();

        this.id = url.toString();
-        this.name = name;
+        this.name = name || this.url;

        this.imgFormat = "fits";
-        this.properties = {
-            formats: ["fits"]
-        }
+        this.formats = ["fits"]
        // callbacks
        this.successCallback = successCallback;
        this.errorCallback = errorCallback;
        // initialize the color meta data here
        // set a asinh stretch by default if there is none
-        if (options) {
+        /*if (options) {
            options.stretch = options.stretch || "asinh";
-        }
+        }*/
        this.colorCfg = new ColorCfg(options);

        let self = this;

-        updateMetadata(self);
-        ImageLayer.update(self);
-
        this.query = Promise.resolve(self);
    }
+    
+    // A cache storing directly the images to not query for the properties each time
+    ImageFITS.cache = {};
+
+    ImageFITS.prototype.setView = function(view) {
+        this.view = view;
+    }

    // @api
    ImageFITS.prototype.setOpacity = function (opacity) {
        let self = this;
-        updateMetadata(self, () => {
+        this._updateMetadata(() => {
            self.colorCfg.setOpacity(opacity);
        });
    };

    // @api
    ImageFITS.prototype.setBlendingConfig = function (additive = false) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setBlendingConfig(additive);
        });
    };

    // @api
    ImageFITS.prototype.setColormap = function (colormap, options) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setColormap(colormap, options);
        });
    }

    // @api
    ImageFITS.prototype.setCuts = function (lowCut, highCut) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setCuts(lowCut, highCut);
        });
    };

    // @api
    ImageFITS.prototype.setGamma = function (gamma) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setGamma(gamma);
        });
    };

-    ImageFITS.prototype.getAvailableFormats = function() {
-        return this.properties.formats;
-    }
-
    // @api
    ImageFITS.prototype.setSaturation = function (saturation) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setSaturation(saturation);
        });
    };

    ImageFITS.prototype.setBrightness = function (brightness) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setBrightness(brightness);
        });
    };

    ImageFITS.prototype.setContrast = function (contrast) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg.setContrast(contrast);
        });
    };

-    ImageFITS.prototype.metadata = function () {
-        return {
-            ...this.colorCfg.get(),
-            longitudeReversed: false,
-            imgFormat: this.imgFormat
-        };
-    }
-
    // Private method for updating the view with the new meta
-    var updateMetadata = function (self, callback = undefined) {
+    ImageFITS.prototype._updateMetadata = function (callback) {
        if (callback) {
            callback();
        }

        // Tell the view its meta have changed
        try {
-            if (self.added) {
-                const metadata = self.metadata();
-                self.wasm.setImageMetadata(self.layer, metadata);
-
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(self.view.aladinDiv, { layer: self });
+            if (this.added) {
+                this.view.wasm.setImageMetadata(this.layer, {
+                    ...this.colorCfg.get(),
+                    longitudeReversed: false,
+                    imgFormat: this.imgFormat
+                });
+                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.view.aladinDiv, { layer: this });
            }
        } catch (e) {
            // Display the error message
@@ -161,13 +149,19 @@ export let ImageFITS = (function () {
        this.layer = layer;

        let self = this;
-        const promise = self.wasm.addImageFITS({
+
+        const promise = self.view.wasm.addImageFITS({
            layer: self.layer,
            url: self.url,
-            meta: self.metadata()
+            meta: {
+                ...this.colorCfg.get(),
+                longitudeReversed: false,
+                imgFormat: this.imgFormat
+            }
        }).then((imagesParams) => {
            // There is at least one entry in imageParams
            self.added = true;
+
            self.children = [];

            let hduIdx = 0;
@@ -176,7 +170,6 @@ export let ImageFITS = (function () {
                let image = new ImageFITS(
                    imageParams.url,
                    self.name + "_ext_" + hduIdx.toString(),
-                    self.view,
                    null,
                    null,
                    null
@@ -185,6 +178,7 @@ export let ImageFITS = (function () {
                // Set the layer corresponding to the onein the backend
                image.layer = imageParams.layer;
                image.added = true;
+                image.setView(self.view);
                // deep copy of the color object of self
                image.colorCfg = Utils.deepCopy(self.colorCfg);
                // Set the automatic computed cuts
@@ -215,8 +209,6 @@ export let ImageFITS = (function () {

            return self;
        }).catch((e) => {
-            window.alert(e + ". See the javascript console for more logging details.")
-
            if (self.errorCallback) {
                self.errorCallback()
            }
@@ -259,7 +251,7 @@ export let ImageFITS = (function () {
    ImageFITS.prototype.setAlpha = ImageFITS.prototype.setOpacity;

    ImageFITS.prototype.setColorCfg = function (colorCfg) {
-        updateMetadata(this, () => {
+        this._updateMetadata(() => {
            this.colorCfg = colorCfg;
        });
    };
@@ -283,7 +275,7 @@ export let ImageFITS = (function () {

    // @api
    ImageFITS.prototype.readPixel = function (x, y) {
-        return this.wasm.readPixel(x, y, this.layer);
+        return this.view.wasm.readPixel(x, y, this.layer);
    };

    return ImageFITS;
--- a/src/js/ImageLayer.js
+++ b/src/js/ImageLayer.js
@@ -1,218 +0,0 @@
-export let ImageLayer = {};
-
-ImageLayer.update = function (layer) {
-    const foundLayer = ImageLayer.contains(layer.id)
-
-    const options = layer.metadata;
-    // The survey has not been found among the ones cached
-    if (foundLayer) {
-        foundLayer.options = options;
-    } else {
-        ImageLayer.LAYERS.push({
-            id: layer.id,
-            name: layer.name,
-            url: layer.url,
-            options,
-            subtype: layer.subtype,
-        });
-    }
-}
-
-ImageLayer.contains = function(id) {
-    return ImageLayer.LAYERS.find((layer) => layer.id.endsWith(id));
-}
-
-ImageLayer.DEFAULT_SURVEY = {
-    id: "P/DSS2/color",
-    name: "DSS colored",
-    url: "https://alasky.cds.unistra.fr/DSS/DSSColor",
-    maxOrder: 9,
-    subtype: "survey",
-    tileSize: 512,
-    formats: ['jpeg'],
-    creatorDid: "ivo://CDS/P/DSS2/color",
-    dataproductSubtype: ['color'],
-    frame: "ICRS"
-}
-
-ImageLayer.LAYERS = [
-    ImageLayer.DEFAULT_SURVEY,
-    {
-        id: "P/2MASS/color",
-        name: "2MASS colored",
-        url: "https://alasky.cds.unistra.fr/2MASS/Color",
-        maxOrder: 9,
-        subtype: "survey",
-    },
-    {
-        id: "P/DSS2/red",
-        name: "DSS2 Red (F+R)",
-        url: "https://alasky.cds.unistra.fr/DSS/DSS2Merged",
-        maxOrder: 9,
-        subtype: "survey",
-        // options
-        options: {
-            minCut: 1000.0,
-            maxCut: 10000.0,
-            colormap: "magma",
-            stretch: 'Linear',
-            imgFormat: "fits"
-        }
-    },
-    {
-        id: "P/DM/I/350/gaiaedr3",
-        name: "Density map for Gaia EDR3 (I/350/gaiaedr3)",
-        url: "https://alasky.cds.unistra.fr/ancillary/GaiaEDR3/density-map",
-        maxOrder: 7,
-        subtype: "survey",
-        // options
-        options: {
-            minCut: 0,
-            maxCut: 12000,
-            stretch: 'asinh',
-            colormap: "rdylbu",
-            imgFormat: "fits",
-        }
-    },
-    {
-        id: "P/PanSTARRS/DR1/g",
-        name: "PanSTARRS DR1 g",
-        url: "https://alasky.cds.unistra.fr/Pan-STARRS/DR1/g",
-        maxOrder: 11,
-        subtype: "survey",
-        // options
-        options: {
-            minCut: -34,
-            maxCut: 7000,
-            stretch: 'asinh',
-            colormap: "redtemperature",
-            imgFormat: "fits",
-        }
-    },
-    {
-        id: "P/PanSTARRS/DR1/color-z-zg-g",
-        name: "PanSTARRS DR1 color",
-        url: "https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-z-zg-g",
-        maxOrder: 11,
-        subtype: "survey",
-    },
-    {
-        id: "P/DECaPS/DR1/color",
-        name: "DECaPS DR1 color",
-        url: "https://alasky.cds.unistra.fr/DECaPS/DR1/color",
-        maxOrder: 11,
-        subtype: "survey",
-    },
-    {
-        id: "P/Fermi/color",
-        name: "Fermi color",
-        url: "https://alasky.cds.unistra.fr/Fermi/Color",
-        maxOrder: 3,
-        subtype: "survey",
-    },
-    {
-        id: "P/Finkbeiner",
-        name: "Halpha",
-        url: "https://alasky.cds.unistra.fr/FinkbeinerHalpha",
-        maxOrder: 3,
-        subtype: "survey",
-        // options
-        options: {
-            minCut: -10,
-            maxCut: 800,
-            colormap: "rdbu",
-            imgFormat: "fits",
-        }
-    },
-    {
-        id: "P/GALEXGR6_7/NUV",
-        name: "GALEXGR6_7 NUV",
-        url: "http://alasky.cds.unistra.fr/GALEX/GALEXGR6_7_NUV/",
-        maxOrder: 8,
-        subtype: "survey",
-    },
-    {
-        id: "P/IRIS/color",
-        name: "IRIS colored",
-        url: "https://alasky.cds.unistra.fr/IRISColor",
-        maxOrder: 3,
-        subtype: "survey",
-    },
-    {
-        id: "P/Mellinger/color",
-        name: "Mellinger colored",
-        url: "https://alasky.cds.unistra.fr/MellingerRGB",
-        maxOrder: 4,
-        subtype: "survey",
-    },
-    {
-        id: "P/SDSS9/color",
-        name: "SDSS9 colored",
-        url: "https://alasky.cds.unistra.fr/SDSS/DR9/color",
-        maxOrder: 10,
-        subtype: "survey",
-    },
-    {
-        id: "P/SDSS9/g",
-        name: "SDSS9 band-g",
-        url: "https://alasky.cds.unistra.fr/SDSS/DR9/band-g",
-        maxOrder: 10,
-        subtype: "survey",
-        options: {
-            stretch: 'asinh',
-            colormap: "redtemperature",
-            imgFormat: 'fits'
-        }
-    },
-    {
-        id: "P/SPITZER/color",
-        name: "IRAC color I1,I2,I4 - (GLIMPSE, SAGE, SAGE-SMC, SINGS)",
-        url: "http://alasky.cds.unistra.fr/Spitzer/SpitzerI1I2I4color/",
-        maxOrder: 9,
-        subtype: "survey",
-    },
-    {
-        id: "P/VTSS/Ha",
-        name: "VTSS-Ha",
-        url: "https://alasky.cds.unistra.fr/VTSS/Ha",
-        maxOrder: 3,
-        subtype: "survey",
-        options: {
-            minCut: -10.0,
-            maxCut: 100.0,
-            colormap: "grayscale",
-            imgFormat: "fits"
-        }
-    },
-    {
-        id: "xcatdb/P/XMM/PN/color",
-        name: "XMM PN colored",
-        url: "https://alasky.cds.unistra.fr/cgi/JSONProxy?url=https://saada.unistra.fr/PNColor",
-        maxOrder: 7,
-        subtype: "survey",
-    },
-    {
-        id: "P/allWISE/color",
-        name: "AllWISE color",
-        url: "https://alasky.cds.unistra.fr/AllWISE/RGB-W4-W2-W1/",
-        maxOrder: 8,
-        subtype: "survey",
-    },
-    {
-        id: "P/GLIMPSE360",
-        name: "GLIMPSE360",
-        // This domain is not giving the CORS headers
-        // We need to query by with a proxy equipped with CORS header.
-        url: "https://alasky.cds.unistra.fr/cgi/JSONProxy?url=https://www.spitzer.caltech.edu/glimpse360/aladin/data",
-        subtype: "survey",
-        options: {
-            maxOrder: 9,
-            imgFormat: "jpg",
-            minOrder: 3,
-        }
-    },
-];
-
-ImageLayer.getAvailableLayers = function () {
-    return ImageLayer.LAYERS;
-};
--- a/src/js/ImageSurvey.js
+++ b/src/js/ImageSurvey.js
@@ -30,14 +30,13 @@
 import { Utils } from "./Utils";
 import { ALEvent } from "./events/ALEvent.js";
 import { ColorCfg } from "./ColorCfg.js";
-import { ImageLayer } from "./ImageLayer.js";
 import { HiPSProperties } from "./HiPSProperties.js";

 let PropertyParser = {};
 // Utilitary functions for parsing the properties and giving default values
 /// Mandatory tileSize property
-PropertyParser.tileSize = function(options, properties = {}) {
-    let tileSize = (options && options.tileSize) || (properties.hips_tile_width && (+properties.hips_tile_width)) || 512;
+PropertyParser.tileSize = function(properties) {
+    let tileSize = (properties && properties.hips_tile_width && (+properties.hips_tile_width)) || 512;

    // Check if the tile width size is a power of 2
    if (tileSize & (tileSize - 1) !== 0) {
@@ -48,35 +47,25 @@ PropertyParser.tileSize = function(options, properties = {}) {
 }

 /// Mandatory frame property
-PropertyParser.frame = function(options, properties = {}) {
-    let frame = (options && options.cooFrame) || (properties.hips_body && "ICRSd") || properties.hips_frame;
-
-    if (frame == "ICRS" || frame == "ICRSd" || frame == "equatorial" || frame == "j2000") {
-        frame = "ICRS";
-    } else if (frame == "galactic") {
-        frame = "GAL";
-    } else {
-        frame = "ICRS";
-        console.warn('Invalid cooframe given: ' + cooFrame + '. Coordinate systems supported: "ICRS", "ICRSd", "j2000" or "galactic". ICRS is chosen by default');
-    }
-
-    return frame;
+PropertyParser.cooFrame = function(properties) {
+    let cooFrame = (properties && properties.hips_body && "ICRSd") || (properties && properties.hips_frame) || "ICRS";
+    return cooFrame;
 }

 /// Mandatory maxOrder property
-PropertyParser.maxOrder = function(options, properties = {}) {
-    let maxOrder = (options && options.maxOrder) || (properties.hips_order && (+properties.hips_order));
+PropertyParser.maxOrder = function(properties) {
+    let maxOrder = properties && properties.hips_order && (+properties.hips_order);
    return maxOrder;
 }

 /// Mandatory minOrder property
-PropertyParser.minOrder = function(options, properties = {}) {
-    const minOrder = (options && options.minOrder) || (properties.hips_order_min && (+properties.hips_order_min)) || 0;
+PropertyParser.minOrder = function(properties) {
+    const minOrder = (properties && properties.hips_order_min && (+properties.hips_order_min)) || 0;
    return minOrder;
 }

-PropertyParser.formats = function(options, properties = {}) {
-    let formats = properties.hips_tile_format || "jpeg";
+PropertyParser.formats = function(properties) {
+    let formats = properties && properties.hips_tile_format || "jpeg";

    formats = formats.split(' ')
        .map((fmt) => fmt.toLowerCase());
@@ -84,8 +73,8 @@ PropertyParser.formats = function(options, properties = {}) {
    return formats;
 }

-PropertyParser.initialFov = function(options, properties = {}) {
-    let initialFov = properties.hips_initial_fov && +properties.hips_initial_fov;
+PropertyParser.initialFov = function(properties) {
+    let initialFov = properties && properties.hips_initial_fov && (+properties.hips_initial_fov);

    if (initialFov && initialFov < 0.00002777777) {
        initialFov = 360;
@@ -94,13 +83,13 @@ PropertyParser.initialFov = function(options, properties = {}) {
    return initialFov;
 }

-PropertyParser.skyFraction = function(options, properties = {}) {
-    const skyFraction = (properties.moc_sky_fraction && (+properties.moc_sky_fraction)) || 0.0;
+PropertyParser.skyFraction = function(properties) {
+    const skyFraction = (properties && properties.moc_sky_fraction && (+properties.moc_sky_fraction)) || 0.0;
    return skyFraction;
 }

-PropertyParser.cutouts = function(options, properties = {}) {
-    let cuts = properties.hips_pixel_cut && properties.hips_pixel_cut.split(" ");
+PropertyParser.cutouts = function(properties) {
+    let cuts = properties && properties.hips_pixel_cut && properties.hips_pixel_cut.split(" ");

    const minCutout = cuts && parseFloat(cuts[0]);
    const maxCutout = cuts && parseFloat(cuts[1]);
@@ -108,25 +97,32 @@ PropertyParser.cutouts = function(options, properties = {}) {
    return [minCutout, maxCutout];
 }

-PropertyParser.bitpix = function(options, properties = {}) {
-    const bitpix = properties.hips_pixel_bitpix && (+properties.hips_pixel_bitpix);
+PropertyParser.bitpix = function(properties) {
+    const bitpix = properties && properties.hips_pixel_bitpix && (+properties.hips_pixel_bitpix);
    return bitpix;
 }

-PropertyParser.dataproductSubtype = function(options, properties = {}) {
-    let dataproductSubtype = properties.dataproduct_subtype || "color";
+PropertyParser.dataproductSubtype = function(properties) {
+    let dataproductSubtype = (properties && properties.dataproduct_subtype) || "color";
    dataproductSubtype = dataproductSubtype.split(" ")
        .map((subtype) => subtype.toLowerCase());
    return dataproductSubtype;
 }

-PropertyParser.isPlanetaryBody = function(options, properties = {}) {
-    return properties.hips_body !== undefined;
+PropertyParser.isPlanetaryBody = function(properties) {
+    return properties && properties.hips_body !== undefined;
 }

 /**
 * @typedef {Object} ImageSurveyOptions
 * 
+ * @property {string} [name] - The name of the survey to be displayed in the UI
+ * @property {string} [imgFormat] - Formats accepted 'webp', 'png', 'jpeg' or 'fits'. Will raise an error if the HiPS does not contain tiles in this format
+ * @property {CooFrame} [cooFrame="J2000"] - Coordinate frame of the survey tiles
+ * @property {number} [maxOrder] - The maximum HEALPix order of the HiPS, i.e the HEALPix order of the most refined tile images of the HiPS. 
+ * @property {number} [numBitsPerPixel] - Useful if you want to display the FITS tiles of a HiPS. It specifies the number of bits per pixel. Possible values are:
+ * -64: double, -32: float, 8: unsigned byte, 16: short, 32: integer 32 bits, 64: integer 64 bits  
+ * @property {number} [tileSize] - The width of the HEALPix tile images. Mostly 512 pixels but can be 256, 128, 64, 32
 * @property {number} [opacity=1.0] - Opacity of the survey or image (value between 0 and 1).
 * @property {string} [colormap="native"] - The colormap configuration for the survey or image.
 * @property {string} [stretch="linear"] - The stretch configuration for the survey or image.
@@ -138,12 +134,9 @@ PropertyParser.isPlanetaryBody = function(options, properties = {}) {
 * @property {number} [saturation=0.0] - The saturation value for the color configuration.
 * @property {number} [brightness=0.0] - The brightness value for the color configuration.
 * @property {number} [contrast=0.0] - The contrast value for the color configuration.
- * @property {number} [maxOrder] - If not given, retrieved from the properties of the survey.
 * @property {number} [minOrder] - If not given, retrieved from the properties of the survey.
 * @property {boolean} [longitudeReversed=false] - Set it to True for planetary survey visualization
- * @property {string} [imgFormat] - If not given, look into the properties to see the accepted format. The format is chosen from WEBP > PNG > JPEG > FITS (in this importance order).
- * @property {string} [cooFrame] - If not given, look into the properties. If it is a planet, then ICRS is chosen, otherwise its hips_frame key is read. If no value is found in the properties, ICRS is chosen by default. 
- */
+*/
 export let ImageSurvey = (function () {
    /**
     * The object describing an image survey
@@ -151,238 +144,280 @@ export let ImageSurvey = (function () {
     * @class
     * @constructs ImageSurvey
     * 
-     * @param {string} [id] - Optional, a uniq id for the survey. See {@link https://aladin.cds.unistra.fr/hips/list|here} for the list of IDs.
-     *      Keep in mind that it is better to directly provide an url as it will not request our mocserver first to get final survey tiles retrieval url.
-     * @param {string} [name] - The name of the survey to be displayed in the UI
-     * @param {string} url - The url where the survey is located. Check the hips list {@link https://aladin.cds.unistra.fr/hips/list|here} for the valid survey urls to display.
+     * @param {string} id - Mandatory unique identifier for the layer. Can be an arbitrary name
+     * @param {string} url - Can be an url to the survey or a "CDS" ID pointing towards a HiPS. One can found the list of IDs {@link https://aladin.cds.unistra.fr/hips/list| here}
     * @param {ImageSurveyOptions} [options] - The option for the survey
     * 
-     * @description Prefer provide an url better than an id. If both are given, the url will be requested first for the survey data.
+     * @description For the `url` param, prefer provide an url better than an CDS ID. Giving a CDS ID will do a query to the mocserver more but will also check for the presence of faster HiPS nodes. 
     */
-    function ImageSurvey(id, name, url, options, view) {
-        this.view = view;
+    function ImageSurvey(id, url, options) {
        this.added = false;
+        // Unique identifier for a survey
        this.id = id;
-        this.name = name;
+        this.name = options.name || id || url;
        this.subtype = "survey";

-        this.properties = options.properties || {};
+        this.url = url;
+        this.maxOrder = options.maxOrder;
+        this.minOrder = options.minOrder || 0;
+        this.cooFrame = options.cooFrame;
+        this.tileSize = options.tileSize;
+        this.longitudeReversed = options.longitudeReversed === undefined ? false : options.longitudeReversed;
+        this.imgFormat = options.imgFormat;
+        this.numBitsPerPixel = options.numBitsPerPixel;
+        this.creatorDid = options.creatorDid;
+
        this.colorCfg = new ColorCfg(options);
+    };

+    ImageSurvey.prototype.setView = function(view) {
        let self = this;
-        self.query = (async () => {
-            if (!options.properties) {
-                let obsTitle, creatorDid, maxOrder, frame, tileSize, formats, minCutout, maxCutout, bitpix, skyFraction, minOrder, initialFov, initialRa, initialDec, hipsBody, isPlanetaryBody, dataproductSubtype;

-                let properties;
-                try {
-                    properties = await HiPSProperties.fetchFromUrl(url)
-                        .catch(async (e) => {
-                            // url not valid so we try with the id
-                            try {
-                                return await HiPSProperties.fetchFromID(id);
-                            } catch(e) {
-                                throw e;
+        // do not allow to call setView multiple times otherwise
+        // the querying to the properties and the search to the best
+        // HiPS node will be done again for the same imageHiPS
+        if (self.view) {
+            return;
+        }
+
+        self.view = view;
+
+        let isMOCServerToBeQueried = true;
+        if (this.imgFormat === 'fits') {
+            // a fits is given
+            isMOCServerToBeQueried = !(this.maxOrder && this.url && this.imgFormat && this.tileSize && this.cooFrame && this.numBitsPerPixel)
+        } else {
+            isMOCServerToBeQueried = !(this.maxOrder && this.url && this.imgFormat && this.tileSize && this.cooFrame);
+        }
+
+        self.query = (async () => {
+            if (isMOCServerToBeQueried) {
+                let isCDSId = false;
+
+                let properties = await HiPSProperties.fetchFromUrl(self.url)
+                    /*.catch((e) => {
+                        // try with the proxy
+                        url = Utils.handleCORSNotSameOrigin(url).href;
+
+                        return HiPSProperties.fetchFromUrl(url);
+                    })*/
+                    .catch(async (e) => {
+                        // url not valid so we try with the id
+                        try {
+                            isCDSId = true;
+                            // the url stores a "CDS ID" we take it prioritaly
+                            // if the url is null, take the id, this is for some tests
+                            // to pass because some users might just give null as url param and a "CDS ID" as id param
+                            let id = self.url || self.id;
+                            return await HiPSProperties.fetchFromID(id);
+                        } catch(e) {
+                            throw e;
+                        }
+                    })
+
+
+                //obsTitle = properties.obs_title;
+                self.creatorDid = properties.creator_did || self.creatorDid;
+                // url
+
+                if (isCDSId) {
+                    self.url = properties.hips_service_url
+                    if (!self.url) {
+                        throw 'no valid service URL for retrieving the tiles'
+                    }
+
+                    self.url = Utils.fixURLForHTTPS(self.url);
+
+                    // Request all the properties to see which mirror is the fastest
+                    HiPSProperties.getFasterMirrorUrl(properties, self.url)
+                        .then((url) => {
+                            if (self.url !== url) {
+                                console.info("Change url of ", self.id, " from ", self.url, " to ", url)
+                    
+                                self.url = url;
+
+                                // save the new url to the cache
+                                self._saveInCache();
+
+                                // If added to the backend, then we need to tell it the url has changed
+                                if (self.added) {
+                                    self.view.wasm.setHiPSUrl(self.creatorDid, url);
+                                }
                            }
                        })
-                } catch(e) {
-                    throw e;
+                        .catch(e => {
+                            //alert(e);
+                            console.error(self)
+                            console.error(e);
+                            // the survey has been added so we remove it from the stack
+                            //self.view.removeImageLayer(self.layer)
+                            //throw e;
+                        })
                }

-                obsTitle = properties.obs_title;
-                creatorDid = properties.creator_did;
-                // Set it to a default value
-                if (!properties.hips_service_url) {
-                    throw 'no valid service URL for retrieving the tiles'
-                }
-                url = Utils.fixURLForHTTPS(properties.hips_service_url);
-
-                // Request all the properties to see which mirror is the fastest
-                HiPSProperties.getFasterMirrorUrl(properties)
-                    .then((url) => {
-                        self._setUrl(url);
-                    })
-                    .catch(e => {
-                        //alert(e);
-                        console.error(e);
-                        // the survey has been added so we remove it from the stack
-                        self.view.removeImageLayer(self.layer)
-                        //throw e;
-                    })
-
                // Max order
-                maxOrder = PropertyParser.maxOrder(options, properties);
+                self.maxOrder = PropertyParser.maxOrder(properties) || self.maxOrder;

                // Tile size
-                tileSize = PropertyParser.tileSize(options, properties);
+                self.tileSize = PropertyParser.tileSize(properties) || self.tileSize;

                // Tile formats
-                formats = PropertyParser.formats(options, properties);
+                self.formats = PropertyParser.formats(properties) || self.formats;

                // min order
-                minOrder = PropertyParser.minOrder(options, properties);
+                self.minOrder = PropertyParser.minOrder(properties) || self.minOrder;

                // Frame
-                frame = PropertyParser.frame(options, properties);
+                self.cooFrame = PropertyParser.cooFrame(properties) || self.cooFrame;

                // sky fraction
-                skyFraction = PropertyParser.skyFraction(options, properties);
+                self.skyFraction = PropertyParser.skyFraction(properties);

                // Initial fov/ra/dec
-                initialFov = PropertyParser.initialFov(options, properties);
-                initialRa = +properties.hips_initial_ra;
-                initialDec = +properties.hips_initial_dec;
+                self.initialFov = PropertyParser.initialFov(properties);
+                self.initialRa = properties && properties.hips_initial_ra && (+properties.hips_initial_ra);
+                self.initialDec = properties && properties.hips_initial_dec && (+properties.hips_initial_dec);

                // Cutouts
-                [minCutout, maxCutout] = PropertyParser.cutouts(options, properties);
+                const cutoutFromProperties = PropertyParser.cutouts(properties);
+                self.minCut = cutoutFromProperties[0];
+                self.maxCut = cutoutFromProperties[1];

                // Bitpix
-                bitpix = PropertyParser.bitpix(options, properties);
-
-                // Dataproduct subtype
-                dataproductSubtype = PropertyParser.dataproductSubtype(options, properties);
+                self.numBitsPerPixel = PropertyParser.bitpix(properties) || self.numBitsPerPixel;

                // HiPS body
-                isPlanetaryBody = PropertyParser.isPlanetaryBody(options, properties);
                if (properties.hips_body) {
-                    hipsBody = properties.hips_body;
+                    self.hipsBody = properties.hips_body;
+                    // Use the property to define and check some user given infos
+                    // Longitude reversed
+                    self.longitudeReversed = true;
                }

-                self.properties = {
-                    creatorDid,
-                    obsTitle,
-                    url,
-                    maxOrder,
-                    frame,
-                    tileSize,
-                    formats,
-                    minCutout,
-                    maxCutout,
-                    bitpix,
-                    skyFraction,
-                    minOrder,
-                    hipsInitialFov: initialFov,
-                    hipsInitialRa: initialRa,
-                    hipsInitialDec: initialDec,
-                    dataproductSubtype,
-                    isPlanetaryBody,
-                    hipsBody
-                };
+                // Give a better name if we have the HiPS metadata
+                self.name = self.name || properties.obsTitle;
+
+                self.cooFrame = properties.cooFrame || self.cooFrame;
            }

-            // Give a better name if we have the HiPS metadata
-            self.name = self.name || self.properties.obsTitle;
-
-            // Use the property to define and check some user given infos
-            // Longitude reversed
-            let longitudeReversed = false;
-            if (options && options.longitudeReversed === true) {
-                longitudeReversed = true;
-            }
-
-            if (self.properties.hipsBody) {
-                longitudeReversed = true;
-            }
-
-            self.longitudeReversed = longitudeReversed;
+            self.creatorDid = self.creatorDid || self.id || self.url;

            // Image format
-            let imgFormat = options && options.imgFormat;
-            if (imgFormat) {
+            if (self.imgFormat) {
                // transform to lower case
-                imgFormat = imgFormat.toLowerCase();
+                self.imgFormat = self.imgFormat.toLowerCase();
                // convert JPG -> JPEG
-                if (imgFormat === "jpg") {
-                    imgFormat = "jpeg";
+                if (self.imgFormat === "jpg") {
+                    self.imgFormat = "jpeg";
                }

                // user wants a fits but the properties tells this format is not available
-                if (imgFormat === "fits" && self.properties.formats && self.properties.formats.indexOf('fits') < 0) {
+                if (self.imgFormat === "fits" && self.formats && self.formats.indexOf('fits') < 0) {
                    throw self.name + " does not provide fits tiles";
                }

-                if (imgFormat === "webp" && self.properties.formats && self.properties.formats.indexOf('webp') < 0) {
+                if (self.imgFormat === "webp" && self.formats && self.formats.indexOf('webp') < 0) {
                    throw self.name + " does not provide webp tiles";
                }

-                if (imgFormat === "png" && self.properties.formats && self.properties.formats.indexOf('png') < 0) {
+                if (self.imgFormat === "png" && self.formats && self.formats.indexOf('png') < 0) {
                    throw self.name + " does not provide png tiles";
                }

-                if (imgFormat === "jpeg" && self.properties.formats && self.properties.formats.indexOf('jpeg') < 0) {
+                if (self.imgFormat === "jpeg" && self.formats && self.formats.indexOf('jpeg') < 0) {
                    throw self.name + " does not provide jpeg tiles";
                }
            } else {
                // user wants nothing then we choose one from the properties
-                if (self.properties.formats.indexOf('webp') >= 0) {
-                    imgFormat = "webp";
-                } else if (self.properties.formats.indexOf('png') >= 0) {
-                    imgFormat = "png";
-                } else if (self.properties.formats.indexOf('jpeg') >= 0) {
-                    imgFormat = "jpeg";
-                } else if (self.properties.formats.indexOf('fits') >= 0) {
-                    imgFormat = "fits";
+                if (self.formats.indexOf('webp') >= 0) {
+                    self.imgFormat = "webp";
+                } else if (self.formats.indexOf('png') >= 0) {
+                    self.imgFormat = "png";
+                } else if (self.formats.indexOf('jpeg') >= 0) {
+                    self.imgFormat = "jpeg";
+                } else if (self.formats.indexOf('fits') >= 0) {
+                    self.imgFormat = "fits";
                } else {
-                    throw "Unsupported format(s) found in the properties: " + self.properties.formats;
+                    throw "Unsupported format(s) found in the properties: " + self.formats;
                }
            }

-            self.imgFormat = imgFormat;
-
-            // Initialize the color meta data here
+            // Cutouts
            let minCut, maxCut;
-            if (imgFormat === "fits") {
+            if (self.imgFormat === "fits") {
                // Take into account the default cuts given by the property file (this is true especially for FITS HiPSes)
-                minCut = self.colorCfg.minCut || (options && options.minCut) || self.properties.minCutout || 0.0;
-                maxCut = self.colorCfg.maxCut || (options && options.maxCut) || self.properties.maxCutout || 1.0;
+                minCut = self.colorCfg.minCut || self.minCut || 0.0;
+                maxCut = self.colorCfg.maxCut || self.maxCut || 1.0;
            } else {
-                minCut = self.colorCfg.minCut || (options && options.minCut) || 0.0;
-                maxCut = self.colorCfg.maxCut || (options && options.maxCut) || 1.0;
+                minCut = self.colorCfg.minCut || 0.0;
+                maxCut = self.colorCfg.maxCut || 1.0;
            }
+
            self.colorCfg.setCuts(minCut, maxCut);

-            ImageLayer.update(self);
+            // Coo frame
+            if (self.cooFrame == "ICRS" || self.cooFrame == "ICRSd" || self.cooFrame == "equatorial" || self.cooFrame == "j2000") {
+                self.cooFrame = "ICRS";
+            } else if (self.cooFrame == "galactic") {
+                self.cooFrame = "GAL";
+            } else {
+                self.cooFrame = "ICRS";
+                console.warn('Invalid cooframe given: ' + self.cooFrame + '. Coordinate systems supported: "ICRS", "ICRSd", "j2000" or "galactic". ICRS is chosen by default');
+            }
+
+            self.formats = self.formats || [self.imgFormat];
+
+            self._saveInCache();

            return self;
        })();
-    };
-
-    ImageSurvey.fromLayerOptions = function(aladin, options) {
-        return new ImageSurvey(
-            options.id,
-            options.name,
-            options.url,
-            {
-                properties: options,
-                ...options.options
-            },
-            aladin.view
-        );
    }

-    ImageSurvey.prototype._setUrl = function (url) {
-        if (this.properties.url !== url) {
-            console.info("Change url of ", this.id, " from ", this.properties.url, " to ", url)
+    ImageSurvey.prototype._saveInCache = function() {
+        let self = this;

-            // If added to the backend, then we need to tell it the url has changed
-            if (this.added) {
-                this.view.wasm.setHiPSUrl(this.properties.url, url);
-            }
-
-            this.properties.url = url;
+        let colorOpt = Object.fromEntries(Object.entries(this.colorCfg));
+        let surveyOpt = {
+            creatorDid: self.creatorDid,
+            name: self.name,
+            url: self.url,
+            cooFrame: self.cooFrame,
+            maxOrder: self.maxOrder,
+            tileSize: self.tileSize,
+            imgFormat: self.imgFormat,
+            ...colorOpt
        }
+
+        if (self.numBitsPerPixel) {
+            surveyOpt.numBitsPerPixel = self.numBitsPerPixel;
+        }
+
+        ImageSurvey.cache[self.id] = {
+            // Erase by the cache already put values which is considered
+            // as the ground truth
+            ...ImageSurvey.cache[self.id],
+            // append new important infos from the properties queried
+            ...surveyOpt,
+        }
+
+        //console.log('new CACHE', ImageSurvey.cache, self.id, surveyOpt, ImageSurvey.cache[self.id], ImageSurvey.cache["CSIRO/P/RACS/mid/I"])
+
+        // Tell that the HiPS List has been updated
+        ALEvent.HIPS_LIST_UPDATED.dispatchedTo(this.view.aladin.aladinDiv);
+
    }
+
    /**
-     * Checks if the ImageSurvey represents a planetary body.
-     *
-     * This method returns a boolean indicating whether the ImageSurvey corresponds to a planetary body, e.g. the earth or a celestial body. 
-     *
-     * @memberof ImageSurvey
-     *
-     * @returns {boolean} Returns true if the ImageSurvey represents a planetary body; otherwise, returns false.
-     */
+         * Checks if the ImageSurvey represents a planetary body.
+         *
+         * This method returns a boolean indicating whether the ImageSurvey corresponds to a planetary body, e.g. the earth or a celestial body. 
+         *
+         * @memberof ImageSurvey
+         *
+         * @returns {boolean} Returns true if the ImageSurvey represents a planetary body; otherwise, returns false.
+         */
    ImageSurvey.prototype.isPlanetaryBody = function() {
-        return this.properties.isPlanetaryBody;
+        return this.hipsBody !== undefined;
    }

    /**
@@ -419,7 +454,7 @@ export let ImageSurvey = (function () {

                    // Check the properties to see if the given format is available among the list
                    // If the properties have not been retrieved yet, it will be tested afterwards
-                    const availableFormats = self.properties.formats;
+                    const availableFormats = self.formats;
                    // user wants a fits but the metadata tells this format is not available
                    if (imgFormat === "fits" && availableFormats.indexOf('fits') < 0) {
                        throw self.id + " does not provide fits tiles";
@@ -439,8 +474,9 @@ export let ImageSurvey = (function () {

                    // Switch from png/webp/jpeg to fits
                    if ((self.imgFormat === 'png' || self.imgFormat === "webp" || self.imgFormat === "jpeg") && imgFormat === 'fits') {
-                        if (self.properties.minCutout && self.properties.maxCutout) {
-                            self.setCuts(self.properties.minCutout, self.properties.maxCutout)
+                        if (self.minCut && self.maxCut) {
+                            // reset cuts to those given from the properties
+                            self.setCuts(self.minCut, self.maxCut)
                        }
                    // Switch from fits to png/webp/jpeg
                    } else if (self.imgFormat === "fits") {
@@ -453,7 +489,7 @@ export let ImageSurvey = (function () {
            })
    };

-     /**
+    /**
     * Sets the opacity factor when rendering the ImageSurvey
     *
     * @memberof ImageSurvey
@@ -461,7 +497,7 @@ export let ImageSurvey = (function () {
     * @returns {string[]} Returns the formats accepted for the survey, i.e. the formats of tiles that are availables. Could be PNG, WEBP, JPG and FITS.
     */
    ImageSurvey.prototype.getAvailableFormats = function() {
-        return this.properties.formats;
+        return this.formats;
    }

    /**
@@ -624,17 +660,18 @@ export let ImageSurvey = (function () {

        // Tell the view its meta have changed
        try {
-            this.metadata = {
-                ...this.colorCfg.get(),
-                longitudeReversed: this.longitudeReversed,
-                imgFormat: this.imgFormat
-            };
-
            if (this.added) {
-                this.view.wasm.setImageMetadata(this.layer, this.metadata);
+                this.view.wasm.setImageMetadata(this.layer, {
+                    ...this.colorCfg.get(),
+                    longitudeReversed: this.longitudeReversed,
+                    imgFormat: this.imgFormat
+                });
                // once the meta have been well parsed, we can set the meta
                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.view.aladinDiv, { layer: this });
            }
+
+            // save it in the JS HiPS cache
+            this._saveInCache()
        } catch (e) {
            // Display the error message
            console.error(e);
@@ -643,20 +680,34 @@ export let ImageSurvey = (function () {

    ImageSurvey.prototype.add = function (layer) {
        this.layer = layer;
-
-        this.metadata = {
-            ...this.colorCfg.get(),
-            longitudeReversed: this.longitudeReversed,
-            imgFormat: this.imgFormat
-        };
+        let self = this;

        this.view.wasm.addImageSurvey({
            layer,
-            properties: this.properties,
-            meta: this.metadata,
+            properties: {
+                creatorDid: self.creatorDid,
+                url: self.url,
+                maxOrder: self.maxOrder,
+                cooFrame: self.cooFrame,
+                tileSize: self.tileSize,
+                formats: self.formats,
+                bitpix: self.numBitsPerPixel,
+                skyFraction: self.skyFraction,
+                minOrder: self.minOrder,
+                hipsInitialFov: self.initialFov,
+                hipsInitialRa: self.initialRa,
+                hipsInitialDec: self.initialDec,
+                isPlanetaryBody: self.isPlanetaryBody(),
+                hipsBody: self.hipsBody
+            },
+            meta: {
+                ...this.colorCfg.get(),
+                longitudeReversed: this.longitudeReversed,
+                imgFormat: this.imgFormat
+            },
        });

-        this.added = true;
+        //this.added = true;

        return Promise.resolve(this);
    }
@@ -696,7 +747,273 @@ export let ImageSurvey = (function () {
        return this.view.wasm.readPixel(x, y, this.layer);
    };

-    ImageSurvey.DEFAULT_SURVEY_ID = "P/DSS2/color";
+    ImageSurvey.DEFAULT_SURVEY_ID = "CDS/P/DSS2/color";
+
+    // A cache storing directly surveys important information to not query for the properties each time
+    ImageSurvey.cache = {
+        /*DSS2_color: {
+            creatorDid: "ivo://CDS/P/DSS2/color",
+            name: "DSS colored",
+            url: "https://alasky.cds.unistra.fr/DSS/DSSColor",
+            maxOrder: 9,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: "ICRS"
+        },
+        MASS2_color: {
+            creatorDid: "ivo://CDS/P/2MASS/color",
+            name: "2MASS colored",
+            url: "https://alasky.cds.unistra.fr/2MASS/Color",
+            maxOrder: 9,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: "ICRS"
+        },
+        DSS2_red: {
+            creatorDid: "ivo://CDS/P/DSS2/red",
+            name: "DSS2 Red (F+R)",
+            url: "https://alasky.cds.unistra.fr/DSS/DSS2Merged",
+            maxOrder: 9,
+            tileSize: 512,
+            imgFormat: 'fits',
+            cooFrame: "ICRS",
+            numBitsPerPixel: 16,
+            // options
+            minCut: 1000.0,
+            maxCut: 10000.0,
+            colormap: "magma",
+            stretch: 'Linear',
+            imgFormat: "fits"
+        },
+        GAIA_EDR3: {
+            creatorDid: "ivo://CDS/P/DM/I/350/gaiaedr3",
+            name: "Density map for Gaia EDR3 (I/350/gaiaedr3)",
+            url: "https://alasky.cds.unistra.fr/ancillary/GaiaEDR3/density-map",
+            maxOrder: 7,
+            tileSize: 512,
+            numBitsPerPixel: -32,
+            cooFrame: "ICRS",
+            minCut: 0,
+            maxCut: 12000,
+            stretch: 'asinh',
+            colormap: "rdylbu",
+            imgFormat: "fits",
+        },
+        PanSTARRS_DR1_g: {
+            creatorDid: "ivo://CDS/P/PanSTARRS/DR1/g",
+            name: "PanSTARRS DR1 g",
+            url: "https://alasky.cds.unistra.fr/Pan-STARRS/DR1/g",
+            maxOrder: 11,
+            tileSize: 512,
+            imgFormat: 'fits',
+            cooFrame: "ICRS",
+            numBitsPerPixel: -32,
+            // options
+            minCut: -34,
+            maxCut: 7000,
+            stretch: 'asinh',
+            colormap: "redtemperature",
+        },
+        PanSTARRS_DR1_color: {
+            creatorDid: "ivo://CDS/P/PanSTARRS/DR1/color-z-zg-g",
+            name: "PanSTARRS DR1 color",
+            url: "https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-z-zg-g",
+            maxOrder: 11,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: "ICRS",
+        },
+        DECaPS_DR2_color: {
+            creatorDid: "ivo://CDS/P/DECaPS/DR2/color",
+            name: "DECaPS DR2 color",
+            url: "https://alasky.cds.unistra.fr/DECaPS/DR2/CDS_P_DECaPS_DR2_color/",
+            maxOrder: 11,
+            cooFrame: "equatorial",
+            tileSize: 512,
+            imgFormat: 'png',
+        },
+        Fermi_color: {
+            creatorDid: "ivo://CDS/P/Fermi/color",
+            name: "Fermi color",
+            url: "https://alasky.cds.unistra.fr/Fermi/Color",
+            maxOrder: 3,
+            imgFormat: 'jpeg',
+            tileSize: 512,
+            cooFrame: 'equatorial'
+        },
+        Galex_NUV: {
+            creatorDid: "ivo://CDS/P/GALEXGR6_7/NUV",
+            id: "P/GALEXGR6_7/NUV",
+            name: "GALEXGR6_7 NUV",
+            url: "http://alasky.cds.unistra.fr/GALEX/GALEXGR6_7_NUV/",
+            maxOrder: 8,
+            imgFormat: 'png',
+            tileSize: 512,
+            cooFrame: 'equatorial'
+        },
+        IRIS_color: {
+            creatorDid: "ivo://CDS/P/IRIS/color",
+            id: "P/IRIS/color",
+            name: "IRIS colored",
+            url: "https://alasky.cds.unistra.fr/IRISColor",
+            maxOrder: 3,
+            tileSize: 256,
+            imgFormat: 'jpeg',
+            cooFrame: 'galactic'
+        },
+        Mellinger_color: {
+            creatorDid: "ivo://CDS/P/Mellinger/color",
+            id: "P/Mellinger/color",
+            name: "Mellinger colored",
+            url: "https://alasky.cds.unistra.fr/MellingerRGB",
+            maxOrder: 4,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: 'galactic'
+        },
+        SDSS9_color: {
+            creatorDid: "ivo://CDS/P/SDSS9/color",
+            id: "P/SDSS9/color",
+            name: "SDSS9 colored",
+            url: "https://alasky.cds.unistra.fr/SDSS/DR9/color",
+            maxOrder: 10,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: 'equatorial'
+        },
+        SPITZER_color: {
+            creatorDid: "ivo://CDS/P/SPITZER/color",
+            id: "P/SPITZER/color",
+            name: "IRAC color I1,I2,I4 - (GLIMPSE, SAGE, SAGE-SMC, SINGS)",
+            url: "http://alasky.cds.unistra.fr/Spitzer/SpitzerI1I2I4color/",
+            maxOrder: 9,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: 'galactic'
+        },
+        allWISE_color: {
+            creatorDid: "ivo://CDS/P/allWISE/color",
+            id: "P/allWISE/color",
+            name: "AllWISE color",
+            url: "https://alasky.cds.unistra.fr/AllWISE/RGB-W4-W2-W1/",
+            maxOrder: 8,
+            tileSize: 512,
+            imgFormat: 'jpeg',
+            cooFrame: 'equatorial'
+        },
+        SDSS9_g: {
+            creatorDid: "ivo://CDS/P/SDSS9/g",
+            id: "P/SDSS9/g",
+            name: "SDSS9 band-g",
+            url: "https://alasky.cds.unistra.fr/SDSS/DR9/band-g",
+            maxOrder: 10,
+            tileSize: 512,
+            numBitsPerPixel: 16,
+            imgFormat: 'fits',
+            cooFrame: 'equatorial',
+            minCut: 0,
+            maxCut: 1.8,
+            stretch: 'linear',
+            colormap: "redtemperature",
+        }
+        */
+        /*
+        {
+            id: "P/Finkbeiner",
+            name: "Halpha",
+            url: "https://alasky.cds.unistra.fr/FinkbeinerHalpha",
+            maxOrder: 3,
+            subtype: "survey",
+            // options
+            options: {
+                minCut: -10,
+                maxCut: 800,
+                colormap: "rdbu",
+                imgFormat: "fits",
+            }
+        },
+        
+        {
+            id: "P/IRIS/color",
+            name: "IRIS colored",
+            url: "https://alasky.cds.unistra.fr/IRISColor",
+            maxOrder: 3,
+            subtype: "survey",
+        },
+        {
+            id: "P/Mellinger/color",
+            name: "Mellinger colored",
+            url: "https://alasky.cds.unistra.fr/MellingerRGB",
+            maxOrder: 4,
+            subtype: "survey",
+        },
+        {
+            id: "P/SDSS9/color",
+            name: "SDSS9 colored",
+            url: "https://alasky.cds.unistra.fr/SDSS/DR9/color",
+            maxOrder: 10,
+            subtype: "survey",
+        },
+        {
+            id: "P/SDSS9/g",
+            name: "SDSS9 band-g",
+            url: "https://alasky.cds.unistra.fr/SDSS/DR9/band-g",
+            maxOrder: 10,
+            subtype: "survey",
+            options: {
+                stretch: 'asinh',
+                colormap: "redtemperature",
+                imgFormat: 'fits'
+            }
+        },
+        {
+            id: "P/SPITZER/color",
+            name: "IRAC color I1,I2,I4 - (GLIMPSE, SAGE, SAGE-SMC, SINGS)",
+            url: "http://alasky.cds.unistra.fr/Spitzer/SpitzerI1I2I4color/",
+            maxOrder: 9,
+            subtype: "survey",
+        },
+        {
+            id: "P/VTSS/Ha",
+            name: "VTSS-Ha",
+            url: "https://alasky.cds.unistra.fr/VTSS/Ha",
+            maxOrder: 3,
+            subtype: "survey",
+            options: {
+                minCut: -10.0,
+                maxCut: 100.0,
+                colormap: "grayscale",
+                imgFormat: "fits"
+            }
+        },
+        {
+            id: "xcatdb/P/XMM/PN/color",
+            name: "XMM PN colored",
+            url: "https://alasky.cds.unistra.fr/cgi/JSONProxy?url=https://saada.unistra.fr/PNColor",
+            maxOrder: 7,
+            subtype: "survey",
+        },
+        {
+            id: "P/allWISE/color",
+            name: "AllWISE color",
+            url: "https://alasky.cds.unistra.fr/AllWISE/RGB-W4-W2-W1/",
+            maxOrder: 8,
+            subtype: "survey",
+        },
+        {
+            id: "P/GLIMPSE360",
+            name: "GLIMPSE360",
+            // This domain is not giving the CORS headers
+            // We need to query by with a proxy equipped with CORS header.
+            url: "https://alasky.cds.unistra.fr/cgi/JSONProxy?url=https://www.spitzer.caltech.edu/glimpse360/aladin/data",
+            subtype: "survey",
+            options: {
+                maxOrder: 9,
+                imgFormat: "jpg",
+                minOrder: 3,
+            }
+        },*/
+    };

    return ImageSurvey;
 })();
--- a/src/js/Line.js
+++ b/src/js/Line.js
@@ -29,77 +29,161 @@
 * Author: Matthieu Baumann[CDS]
 * 
 *****************************************************************************/
+import { Polyline } from "./Polyline.js";
+import { Utils } from './Utils';
+import { Overlay } from "./Overlay.js";
+import { Ellipse } from "./Ellipse.js";

+/**
+ * Represents an line shape
+ *
+ * @namespace
+ * @typedef {Object} Line
+ */
 export let Line = (function() {
-    // constructor
-    let Line = function(x1, y1, x2, y2) {
-        this.x1 = x1;
-        this.y1 = y1;
-        this.x2 = x2;
-        this.y2 = y2;
+    /**
+     * Constructor function for creating a new line.
+     *
+     * @constructor
+     * @memberof Line
+     * @param {number} ra1 - Right Ascension (RA) coordinate of the center in degrees.
+     * @param {number} dec1 - Declination (Dec) coordinate of the center in degrees.
+     * @param {number} ra2 - Right Ascension (RA) coordinate of the center in degrees.
+     * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees.
+     * @param {CooFrame} [frame] - Frame in which the coordinates are given. If none, the frame used is icrs/j2000.
+     * @param {ShapeOptions} options - Options for configuring the line. Additional properties:
+     * @param {boolean} [options.arrow=false] - Add an arrow pointing from (ra1, dec1) to (ra2, dec2)
+     * 
+     * @returns {Line} - The line shape object
+     */
+    let Line = function(ra1, dec1, ra2, dec2, frame, options) {
+        options = options || {};
+        this.color     = options['color']     || undefined;
+        this.opacity   = options['opacity']   || undefined;
+        this.lineWidth = options["lineWidth"] || undefined;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;
+        this.arrow = options["arrow"] === undefined ? false : options["arrow"];
+
+        // All graphics overlay have an id
+        this.id = 'line-' + Utils.uuidv4();
+
+        this.overlay = null;
+
+    	this.isShowing = true;
+    	this.isSelected = false;
+        this.isHovered = false;
+
+        this.ra1 = ra1;
+        this.dec1 = dec1;
+        this.ra2 = ra2;
+        this.dec2 = dec2;
+        this.frame = frame;
    };

-    // Method for testing whether a line is inside the view
-    // http://www.jeffreythompson.org/collision-detection/line-rect.php
-    Line.prototype.isInsideView = function(rw, rh) {
-        if (this.x1 >= 0 && this.x1 <= rw && this.y1 >= 0 && this.y1 <= rh) {
+    Line.prototype = {
+        setOverlay: Polyline.prototype.setOverlay,
+        isFootprint: Polyline.prototype.isFootprint,
+        show: Polyline.prototype.show,
+        hide: Polyline.prototype.hide,
+        
+        select: Polyline.prototype.select,
+        deselect: Polyline.prototype.deselect,
+        
+        hover: Polyline.prototype.hover,
+        unhover: Polyline.prototype.unhover,
+        
+        getLineWidth: Polyline.prototype.getLineWidth,
+        setLineWidth: Polyline.prototype.setLineWidth,
+
+        setColor: Polyline.prototype.setColor,
+        setSelectionColor: Polyline.prototype.setSelectionColor,
+        setHoverColor: Polyline.prototype.setHoverColor,
+
+        draw: function(ctx, view, noStroke, noSmallCheck) {
+            noStroke = noStroke===true || false;
+            noSmallCheck = noSmallCheck===true || false;
+            // project
+            const v1 = view.aladin.world2pix(this.ra1, this.dec1, this.frame);
+            if (!v1)
+                return false;
+            const v2 = view.aladin.world2pix(this.ra2, this.dec2, this.frame);
+            if (!v2)
+                return false;
+            
+            const xmin = Math.min(v1[0], v2[0]);
+            const xmax = Math.max(v1[0], v2[0]);
+            const ymin = Math.min(v1[1], v2[1]);
+            const ymax = Math.max(v1[1], v2[1]);
+
+            // out of bbox
+            if (xmax < 0 || xmin > view.width || ymax < 0 || ymin > view.height) {
+                return false;
+            }
+
+            let baseColor = this.color || (this.overlay && this.overlay.color) || '#ff0000';
+            let lineWidth = this.lineWidth || this.overlay.lineWidth || 3;
+
+            // too small
+            if(!noSmallCheck) {
+                this.isTooSmall = (xmax - xmin) < 1 && (ymax - ymin) < 1;
+                if (this.isTooSmall) {
+                    return false;
+                }
+            }
+
+            if (this.isSelected) {
+                ctx.strokeStyle = this.selectionColor || Overlay.increaseBrightness(baseColor, 50);
+            } else if (this.isHovered) {
+                ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+            } else {
+                ctx.strokeStyle = baseColor;
+            }
+
+            ctx.lineWidth = lineWidth;
+            ctx.globalAlpha = this.opacity;
+
+            ctx.beginPath();
+            ctx.moveTo(v1[0], v1[1]);
+            ctx.lineTo(v2[0], v2[1]);
+
+            if (this.arrow) {
+                // draw the arrow
+                var angle, x, y, xh, yh;
+                var arrowRad = this.lineWidth * 3;
+
+                angle = Math.atan2(v2[1] - v1[1], v2[0] - v1[0])
+                xh = v2[0];
+                yh = v2[1];
+
+                //ctx.moveTo(xh, yh);
+
+                var t = angle + Math.PI * 3 / 4;
+                x = arrowRad * Math.cos(t) + v2[0];
+                y = arrowRad * Math.sin(t) + v2[1];
+
+                ctx.moveTo(x, y);
+                ctx.lineTo(xh, yh);
+
+                var t = angle - Math.PI * 3 / 4;
+                x = arrowRad *Math.cos(t) + v2[0];
+                y = arrowRad *Math.sin(t) + v2[1];
+
+                ctx.lineTo(x, y);
+            }
+
+            if (!noStroke) {
+                ctx.stroke();
+            }
+
            return true;
-        }
-        if (this.x2 >= 0 && this.x2 <= rw && this.y2 >= 0 && this.y2 <= rh) {
-            return true;
-        }
+        },

-        // check if the line has hit any of the rectangle's sides
-        // uses the Line/Line function below
-        let left =   Line.intersectLine(this.x1, this.y1, this.x2, this.y2, 0, 0, 0, rh);
-        let right =  Line.intersectLine(this.x1, this.y1, this.x2, this.y2, rw, 0, rw, rh);
-        let top =    Line.intersectLine(this.x1, this.y1, this.x2, this.y2, 0, 0, rw, 0);
-        let bottom = Line.intersectLine(this.x1, this.y1, this.x2, this.y2, 0, rh, rw, rh);
-    
-        // if ANY of the above are true, the line
-        // has hit the rectangle
-        if (left || right || top || bottom) {
-            return true;
-        }
+        isInStroke: Ellipse.prototype.isInStroke,

-        return false;
-    };
-
-    Line.prototype.isFootprint = function() {
-        return false;
-    }
-
-    Line.prototype.draw = function(ctx, noStroke) {
-        noStroke = noStroke===true || false;
-
-        ctx.beginPath();
-        ctx.moveTo(this.x1, this.y1);
-        ctx.lineTo(this.x2, this.y2);
-
-        if (!noStroke) {
-            ctx.stroke();
-        }
-    };
-
-    Line.intersectLine = function(x1, y1, x2, y2, x3, y3, x4, y4) {
-        // Calculate the direction of the lines
-        let uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
-        let uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
-    
-        // If uA and uB are between 0-1, lines are colliding
-        if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
-            return true;
-        }
-        return false;
-    };
-
-    Line.prototype.isInStroke = function(ctx, view, x, y) {
-        this.draw(ctx, view, true);
-        return ctx.isPointInStroke(x, y);
-    };
-
-    Line.prototype.intersectsBBox = function(x, y, w, h) {
-        // todo
+        /*Line.prototype.intersectsBBox = function(x, y, w, h) {
+            // todo
+        };*/
    };

    return Line;
--- a/src/js/MOC.js
+++ b/src/js/MOC.js
@@ -15,7 +15,35 @@ import { Color } from "./Color.js";

 import { ALEvent } from "./events/ALEvent.js";

+/**
+* @typedef {Object} MOCOptions
+* @description Options for configuring a MOC (Multi-Order-Coverage).
+*
+* @property {Object} options - Configuration options for the MOC.
+* @property {string} [options.name="MOC"] - The name of the catalog.
+* @property {string} [options.color] - The color of the MOC HEALPix cell edges.
+* @property {string} [options.fillColor] - A filling color of the MOC HEALPix cells.
+* @property {string} [options.fill=false] - Fill the MOC with `options.fillColor`
+* @property {string} [options.edge=true] - Draw the edges of the HEALPix cells with `options.color`.
+* @property {number} [options.lineWidth=3] - The line width in pixels 
+* @property {Boolean} [options.perimeter=false] - A filling color of the MOC HEALPix cells.
+* @property {number} [options.opacity=1.0] - The opacity of the MOC
+*/
+
+/**
+ * Represents a Multi-Order-Coverage with configurable options for display and interaction.
+ *
+ * @namespace
+ * @typedef {Object} MOC
+ */
 export let MOC = (function() {
+    /**
+     * Constructor function for creating a new catalog instance.
+     *
+     * @constructor
+     * @memberof MOC
+     * @param {MOCOptions} options - Configuration options for the MOC.
+     */
    let MOC = function(options) {
        //this.order = undefined;

@@ -61,7 +89,7 @@ export let MOC = (function() {
        }

        this.opacity = Math.max(0, Math.min(1, this.opacity)); // 0 <= this.opacity <= 1
-        this.lineWidth = options["lineWidth"] || 1;
+        this.lineWidth = options["lineWidth"] || 3;

        //this.proxyCalled = false; // this is a flag to check whether we already tried to load the MOC through the proxy

@@ -82,7 +110,7 @@ export let MOC = (function() {
     * set MOC data by parsing a MOC serialized in JSON
     * (as defined in IVOA MOC document, section 3.1.1)
     */
-    MOC.prototype.parse = function(data, successCallback) {
+    MOC.prototype.parse = function(data, successCallback, errorCallback) {
        if (typeof data === 'string' || data instanceof String) {
            let url = data;
            this.promiseFetchData = fetch(url)
@@ -92,7 +120,7 @@ export let MOC = (function() {
        }

        this.successCallback = successCallback;
-        this.errorCallback = this.errorCallback;
+        this.errorCallback = errorCallback;
    };

    MOC.prototype.setView = function(view) {
@@ -138,7 +166,11 @@ export let MOC = (function() {

                self.view.requestRedraw();
            })
-            .catch(e => alert('MOC load error:' + e))
+            .catch(e => {
+                console.error('MOC load error:' + e)
+                if (self.errorCallback)
+                    self.errorCallback(self);
+            })
    };

    MOC.prototype.reportChange = function() {
--- a/src/js/MeasurementTable.js
+++ b/src/js/MeasurementTable.js
@@ -81,11 +81,6 @@ export let MeasurementTable = (function() {
        this.table = new Tabs({
            aladin: this.aladin,
            layout,
-            cssStyle: {
-                position: 'absolute',
-                bottom: '2.4rem',
-                maxWidth: '100%',
-            }
        }, this.aladin.aladinDiv);
    };

--- a/src/js/PlanetaryFeaturesPointer.js
+++ b/src/js/PlanetaryFeaturesPointer.js
@@ -103,12 +103,19 @@ export let PlanetaryFeaturesPointer = (function() {

                    const featureFieldIdx = fields.findIndex((element) => element.includes('feature_name'));
                    const featureName = values[featureFieldIdx];
-                    const featureId = values[fields.indexOf('feature_id')]
-                    const title = '<div class="aladin-sp-title"><a target="_blank" href="https://planetarynames.wr.usgs.gov/Feature/' + featureId + '">' + featureName + '</a></div>';
+                    const featureId = values[fields.indexOf('feature_id')];
+                    let moreInfoURL = 'https://planetarynames.wr.usgs.gov/Feature/' + featureId;
+                    if (body === 'earth') {
+                        const placeId = values[fields.indexOf('place_id')];
+                        moreInfoURL = 'https://nominatim.openstreetmap.org/ui/details.html?place_id=' + placeId;
+                    }
+
+                    const title = '<div class="aladin-sp-title"><a target="_blank" href=" ' + moreInfoURL + '">' + featureName + '</a></div>';
                    const featureType = values[fields.indexOf('feature_type')]
                    let content = '<div class="aladin-sp-content">' + ' ' + '</div>';
                    content += '<em>Type: </em>' + featureType + '<br><br>';
-                    content += '<a target="_blank" href="https://planetarynames.wr.usgs.gov/Feature/' + featureId + '">More information</a>';
+
+                    content += '<a target="_blank" href="' + moreInfoURL + '">More information</a>';

                    let lon = parseFloat(values[lonFieldIdx]);
                    const lat = parseFloat(values[latFieldIdx]);
--- a/src/js/Polyline.js
+++ b/src/js/Polyline.js
@@ -33,26 +33,43 @@
 *
 *****************************************************************************/

-import { AladinUtils } from './AladinUtils.js';
-import { Line } from './Line.js';
 import { Utils } from './Utils';
 import { Overlay } from "./Overlay.js";
 import { ProjectionEnum } from "./ProjectionEnum.js";


-export let Polyline= (function() {
-    function _calculateMag2ForNoSinProjections(line, view) {
+/**
+ * Represents a polyline shape
+ *
+ * @namespace
+ * @typedef {Object} Polyline
+ */
+export let Polyline = (function() {
+
+    function _calculateMag2ForNoSinProjections(l, view) {
        // check if the line is too big (in the clip space) to be drawn
-        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view.aladin);
-        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view.aladin);
+        const [x1, y1] = view.wasm.screenToClip(l.x1, l.y1);
+        const [x2, y2] = view.wasm.screenToClip(l.x2, l.y2);

        const mag2 = (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);
        return mag2;
    }

-    function _isAcrossCollignonZoneForHpxProjection(line, view) {
-        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view.aladin);
-        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view.aladin);
+    function _drawLine(l, ctx, noStroke) {
+        noStroke = noStroke===true || false;
+
+        ctx.beginPath();
+        ctx.moveTo(l.x1, l.y1);
+        ctx.lineTo(l.x2, l.y2);
+
+        if (!noStroke) {
+            ctx.stroke();
+        }
+    }
+
+    /*function _isAcrossCollignonZoneForHpxProjection(line, view) {
+        const [x1, y1] = view.wasm.screenToClip(line.x1, line.y1);
+        const [x2, y2] = view.wasm.screenToClip(line.x2, line.y2);

        // x, y, between -1 and 1
        let triIdxCollignionZone = function(x, y) {
@@ -73,9 +90,19 @@ export let Polyline= (function() {
        }

        return false;
-    }
+    }*/

-    // constructor
+    /**
+     * Constructor function for creating a new polyline.
+     *
+     * @constructor
+     * @memberof Polyline
+     * @param {Array.<number[]>} radecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees
+     * @param {ShapeOptions} options - Configuration options for the polyline. Additional properties:
+     * @param {boolean} [options.closed=false] - Close the polyline, default to false.
+     * 
+     * @returns {Polyline} - The polyline shape object
+     */
    let Polyline = function(radecArray, options) {
        options = options || {};
        this.color     = options['color']     || undefined;
@@ -83,12 +110,10 @@ export let Polyline= (function() {
        this.fillColor = options['fillColor'] || undefined;
        this.opacity   = options['opacity']   || undefined;
        this.lineWidth = options["lineWidth"] || undefined;
+        this.selectionColor = options["selectionColor"] || '#00ff00';
+        this.hoverColor = options["hoverColor"] || undefined;

-        if (options["closed"]) {
-            this.closed = options["closed"];
-        } else {
-            this.closed = false;
-        }
+        this.closed = (options["closed"] !== undefined) ? options["closed"] : false;

        // All graphics overlay have an id
        this.id = 'polyline-' + Utils.uuidv4();
@@ -98,8 +123,7 @@ export let Polyline= (function() {

    	this.isShowing = true;
    	this.isSelected = false;
-
-        this.selectionColor = '#00ff00';
+        this.isHovered = false;
    };

    Polyline.prototype.setOverlay = function(overlay) {
@@ -146,6 +170,26 @@ export let Polyline= (function() {
        }
    };

+    Polyline.prototype.hover = function() {
+        if (this.isHovered) {
+            return;
+        }
+        this.isHovered = true;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
+    Polyline.prototype.unhover = function() {
+        if (! this.isHovered) {
+            return;
+        }
+        this.isHovered = false;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
    Polyline.prototype.getLineWidth = function() {
        return this.lineWidth;
    };
@@ -162,9 +206,10 @@ export let Polyline= (function() {
    };

    Polyline.prototype.setColor = function(color) {
-        if (this.color == color) {
+        if (!color || this.color == color) {
            return;
        }
+
        this.color = color;
        if (this.overlay) {
            this.overlay.reportChange();
@@ -172,7 +217,7 @@ export let Polyline= (function() {
    };

    Polyline.prototype.setSelectionColor = function(color) {
-        if (this.selectionColor == color) {
+        if (!color || this.selectionColor == color) {
            return;
        }
        this.selectionColor = color;
@@ -181,6 +226,16 @@ export let Polyline= (function() {
        }
    };

+    Polyline.prototype.setHoverColor = function(color) {
+        if (!color || this.hoverColor == color) {
+            return;
+        }
+        this.hoverColor = color;
+        if (this.overlay) {
+            this.overlay.reportChange();
+        }
+    };
+
    Polyline.prototype.isFootprint = function() {
        // The polyline is a footprint if it describes a polygon (i.e. a closed polyline)
        return this.closed;
@@ -188,11 +243,11 @@ export let Polyline= (function() {

    Polyline.prototype.draw = function(ctx, view, noStroke) {
        if (! this.isShowing) {
-            return;
+            return false;
        }

        if (! this.radecArray || this.radecArray.length<2) {
-            return;
+            return false;
        }

        noStroke = noStroke===true || false;
@@ -206,7 +261,7 @@ export let Polyline= (function() {
        }

        if (!this.lineWidth) {
-            this.lineWidth = this.overlay.lineWidth || 2;
+            this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
        }

        if (this.isSelected) {
@@ -215,9 +270,10 @@ export let Polyline= (function() {
            } else {
                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
            }
-        }
-        else {
-            ctx.strokeStyle= baseColor;
+        } else if (this.isHovered) {
+            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+        } else {
+            ctx.strokeStyle = baseColor;
        }

        // 1. project the vertices into the screen
@@ -231,9 +287,9 @@ export let Polyline= (function() {
        let ymax = Number.NEGATIVE_INFINITY;

        for (var k=0; k<len; k++) {
-            var xyview = AladinUtils.radecToViewXy(this.radecArray[k][0], this.radecArray[k][1], view.aladin);
+            var xyview = view.aladin.world2pix(this.radecArray[k][0], this.radecArray[k][1]);
            if (!xyview) {
-                return;
+                return false;
            }

            xyView.push({x: xyview[0], y: xyview[1]});
@@ -244,9 +300,13 @@ export let Polyline= (function() {
            ymax = Math.max(ymax, xyview[1]);
        }

-        // 2. do not draw the polygon if it lies in less than 1 pixel
-        if ((xmax - xmin) < 1 || (ymax - ymin) < 1) {
-            return;
+        // 2. do not draw the polygon if it lies in less than linewidth pixels
+        if (xmax < 0 || xmin > view.width || ymax < 0 || ymin > view.height) {
+            return false;
+        }
+
+        if ((xmax - xmin) < this.lineWidth || (ymax - ymin) < this.lineWidth) {
+            return false;
        }

        let drawLine;
@@ -254,27 +314,28 @@ export let Polyline= (function() {

        if (view.projection === ProjectionEnum.SIN) {
            drawLine = (v0, v1) => {
-                const line = new Line(v0.x, v0.y, v1.x, v1.y);
+                const l = {x1: v0.x, y1: v0.y, x2: v1.x, y2: v1.y};

-                if (line.isInsideView(view.width, view.height)) {
-                    line.draw(ctx);
+                if (Polyline.isInsideView(l.x1, l.y1, l.x2, l.y2, view.width, view.height)) {
+                    _drawLine(l, ctx);
                }
            };

            if (this.closed && this.fill) {
                fillPoly = (v0, v1, index) => {
-                    const line = new Line(v0.x, v0.y, v1.x, v1.y);
+                    const l = {x1: v0.x, y1: v0.y, x2: v1.x, y2: v1.y};
+
                    if (index === 0) {
                        ctx.beginPath();
-                        ctx.moveTo(line.x1, line.y1);
+                        ctx.moveTo(l.x1, l.y1);
                    } else {
-                        ctx.lineTo(line.x1, line.y1);
+                        ctx.lineTo(l.x1, l.y1);
                    }

                    return true;
                };
            }
-        } else if (view.projection === ProjectionEnum.HPX) {
+        /*} else if (view.projection === ProjectionEnum.HPX) {
            drawLine = (v0, v1) => {
                const line = new Line(v0.x, v0.y, v1.x, v1.y);

@@ -314,31 +375,31 @@ export let Polyline= (function() {
                        return false;
                    }
                };
-            }
+            }*/
        } else {
            drawLine = (v0, v1) => {
-                const line = new Line(v0.x, v0.y, v1.x, v1.y);
+                const l = {x1: v0.x, y1: v0.y, x2: v1.x, y2: v1.y};

-                if (line.isInsideView(view.width, view.height)) {
-                    const mag2 = _calculateMag2ForNoSinProjections(line, view);
+                if (Polyline.isInsideView(l.x1, l.y1, l.x2, l.y2, view.width, view.height)) {
+                    const mag2 = _calculateMag2ForNoSinProjections(l, view);

                    if (mag2 < 0.1) {
-                        line.draw(ctx);
+                        _drawLine(l, ctx);
                    }
                }
            };
            if (this.closed && this.fill) {
                fillPoly = (v0, v1, index) => {
-                    const line = new Line(v0.x, v0.y, v1.x, v1.y);
+                    const l = {x1: v0.x, y1: v0.y, x2: v1.x, y2: v1.y};

-                    const mag2 = _calculateMag2ForNoSinProjections(line, view);
+                    const mag2 = _calculateMag2ForNoSinProjections(l, view);

                    if (mag2 < 0.1) {
                        if (index === 0) {
                            ctx.beginPath();
-                            ctx.moveTo(line.x1, line.y1);
+                            ctx.moveTo(l.x1, l.y1);
                        } else {
-                            ctx.lineTo(line.x1, line.y1);
+                            ctx.lineTo(l.x1, l.y1);
                        }

                        return true;
@@ -383,13 +444,15 @@ export let Polyline= (function() {
                v1 = v1 + 1;
            }

-            ctx.globalAlpha = 1;
+            //ctx.globalAlpha = 1;
            ctx.save();
            ctx.fillStyle = this.fillColor;
            ctx.globalAlpha = this.opacity;
            ctx.fill();
            ctx.restore();
        }
+
+        return true;
    };

    Polyline.prototype.isInStroke = function(ctx, view, x, y) {
@@ -397,7 +460,7 @@ export let Polyline= (function() {

        let pointXY = [];
        for (var j = 0; j < this.radecArray.length; j++) {
-            var xy = AladinUtils.radecToViewXy(this.radecArray[j][0], this.radecArray[j][1], view.aladin);
+            var xy = view.aladin.world2pix(this.radecArray[j][0], this.radecArray[j][1]);
            if (!xy) {
                return false;
            }
@@ -409,8 +472,8 @@ export let Polyline= (function() {

        const lastPointIdx = pointXY.length - 1;
        for (var l = 0; l < lastPointIdx; l++) {
-            const line = new Line(pointXY[l].x, pointXY[l].y, pointXY[l + 1].x, pointXY[l + 1].y);                                   // new segment
-            line.draw(ctx, true);
+            const line = {x1: pointXY[l].x, y1: pointXY[l].y, x2: pointXY[l + 1].x, y2: pointXY[l + 1].y};                                   // new segment
+            _drawLine(line, ctx, true);

            if (ctx.isPointInStroke(x, y)) {                    // x,y is on line?
                return true;
@@ -418,8 +481,8 @@ export let Polyline= (function() {
        }

        if(this.closed) {
-            const line = new Line(pointXY[lastPointIdx].x, pointXY[lastPointIdx].y, pointXY[0].x, pointXY[0].y);                                   // new segment
-            line.draw(ctx, true);
+            const line = {x1: pointXY[lastPointIdx].x, y1: pointXY[lastPointIdx].y, x2: pointXY[0].x, y2: pointXY[0].y};                                   // new segment
+            _drawLine(line, ctx, true);

            if (ctx.isPointInStroke(x, y)) {                    // x,y is on line?
                return true;
@@ -433,5 +496,44 @@ export let Polyline= (function() {
        // todo
    };

+    // static methods
+    // Method for testing whether a line is inside the view
+    // http://www.jeffreythompson.org/collision-detection/line-rect.php
+    Polyline.isInsideView = function(x1, y1, x2, y2, rw, rh) {
+        if (x1 >= 0 && x1 <= rw && y1 >= 0 && y1 <= rh) {
+            return true;
+        }
+        if (x2 >= 0 && x2 <= rw && y2 >= 0 && y2 <= rh) {
+            return true;
+        }
+
+        // check if the line has hit any of the rectangle's sides
+        // uses the Line/Line function below
+        let left =   Polyline._intersectLine(x1, y1, x2, y2, 0, 0, 0, rh);
+        let right =  Polyline._intersectLine(x1, y1, x2, y2, rw, 0, rw, rh);
+        let top =    Polyline._intersectLine(x1, y1, x2, y2, 0, 0, rw, 0);
+        let bottom = Polyline._intersectLine(x1, y1, x2, y2, 0, rh, rw, rh);
+    
+        // if ANY of the above are true, the line
+        // has hit the rectangle
+        if (left || right || top || bottom) {
+            return true;
+        }
+
+        return false;
+    };
+
+    Polyline._intersectLine = function(x1, y1, x2, y2, x3, y3, x4, y4) {
+        // Calculate the direction of the lines
+        let uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
+        let uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
+    
+        // If uA and uB are between 0-1, lines are colliding
+        if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
+            return true;
+        }
+        return false;
+    };
+
    return Polyline;
 })();
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matthieu Baumann	5c08833f8a	new UI StackBox	2024-04-23 00:17:07 +02:00
Matthieu Baumann	7f83ccc04e	save the imageHiPS once it has been changed so that the HiPS stack is saved. One can go back from the UI afterwards	2024-04-12 19:23:47 +02:00
Matthieu Baumann	56cb5c0dba	add zoom heuristic for mouse	2024-04-12 19:12:55 +02:00
Matthieu Baumann	53d44de229	update changelog	2024-04-12 14:33:01 +02:00
Matthieu Baumann	3dcdeeec0c	For Catalog only: plot the sources when the footprints are too small	2024-04-12 11:50:25 +02:00
Matthieu Baumann	a1434f781b	add doc for the different shapes	2024-04-05 11:52:23 +02:00
Matthieu Baumann	aa09263c04	add proper motion example	2024-04-04 17:41:11 +02:00
Matthieu Baumann	9af2d835ff	expose Line in the API and add an example with proper motions drawn from a Simbad CS around the LMC	2024-04-03 16:06:13 +02:00
Matthieu Baumann	dc51517758	first commit	2024-04-02 18:32:04 +02:00
Matthieu Baumann	8b8c1460eb	prefer drawing the hover color over the selection color	2024-03-27 23:59:42 +01:00
Matthieu Baumann	f1a1247a43	make the hoverColor work for progressiveCatalogs and also for catalogs having footprints	2024-03-27 23:59:42 +01:00
Philip Matsson	54fcfe9f2b	Fix unhover issue during transition between overlapping objects	2024-03-27 23:59:42 +01:00
Philip Matsson	dfd91d9632	Add JSDoc for new parameters in Catalog.js	2024-03-27 23:59:42 +01:00
Philip Matsson	dc027e89c4	Add hover effect to footprints and source objects	2024-03-27 23:59:42 +01:00
Matthieu Baumann	9617b233b0	add doc for Aladin.select	2024-03-27 17:34:39 +01:00
Matthieu Baumann	7b2458ac8a	v3.3.2	2024-03-27 15:30:51 +01:00
Matthieu Baumann	02d97d7eba	change codemeta version	2024-03-27 15:13:51 +01:00
Thomas Boch	28c4a6144a	Add DOI in identifier field Add zenodo DOI	2024-03-27 14:30:28 +01:00
Thomas Boch	e2e426493f	Merge pull request #66 from ManonMarchand/add-codemeta add codemeta and its validator action	2024-03-27 14:30:05 +01:00
Matthieu Baumann	f9f205f1d5	fix detecting raytracing mode	2024-03-27 11:56:54 +01:00
Matthieu Baumann	d070facc13	ability to search for a catalog by its ID	2024-03-27 10:32:04 +01:00
Matthieu Baumann	be0c84aa28	do not call setView several times on the same imageSurvey	2024-03-27 10:31:05 +01:00
Matthieu Baumann	091effc92c	deploy doc with tags and simple commits	2024-03-26 18:44:46 +01:00
Matthieu Baumann	cf26bd840c	fix multiple little things to make the examples on https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/ pass	2024-03-26 18:36:37 +01:00
Matthieu Baumann	2062d6bfeb	deploy doc and npm on tags	2024-03-26 11:36:29 +01:00
Matthieu Baumann	2a199aaf73	v3.0.1	2024-03-26 11:21:57 +01:00
Matthieu Baumann	08a9c290ee	remove resize observer throttling	2024-03-26 11:21:18 +01:00
Matthieu Baumann	5efcb20b5c	tag 3.3.0	2024-03-25 17:13:37 +01:00
Matthieu Baumann	0a6686835a	fix some ui positioning	2024-03-25 17:10:07 +01:00
Matthieu Baumann	e133f36fef	fix setImageSurvey + UI change default element position	2024-03-25 11:51:49 +01:00
Thomas Boch	a7773b4618	Fix: fix link on feature name for planetary pointer, when body is earth	2024-03-25 09:58:26 +01:00
Matthieu Baumann	a3cea97d61	fix recursive triggering of the resize observer	2024-03-22 18:58:46 +01:00
Matthieu Baumann	328923cbb2	remove some console log	2024-03-22 15:14:09 +01:00
Matthieu Baumann	856fc84025	add entry point for AladinUtils object	2024-03-22 15:12:02 +01:00
Matthieu Baumann	7ad1e56912	remove some console.log	2024-03-22 11:03:12 +01:00
Matthieu Baumann	c2bb0980af	fix planetary pointer + enhance fast display when changing the hips	2024-03-22 11:02:05 +01:00
Thomas Boch	4ea8530528	Add link to nominatim OSM when displaying result for earth "pointer"	2024-03-21 11:31:13 +01:00
MARCHAND MANON	7c27227d60	docs: edit compilation instructions avoid git clean -fd	2024-03-18 10:14:22 +01:00
Matthieu Baumann	54199ceadc	add more instructions in the readme.md for users wanting to build aladin lite from scratch	2024-03-16 15:33:25 +01:00
Matthieu Baumann	12c71624e7	set the font size to 1rem in search text boxes	2024-03-16 15:16:03 +01:00
Matthieu Baumann	2c50214a4e	enhance doc, ui (tooltip new delay time param)	2024-03-15 19:31:33 +01:00
Matthieu Baumann	a421453078	DOC: add more precision in the jsdoc for creating HiPS surveys and adding them to the view	2024-03-15 11:20:43 +01:00
Matthieu Baumann	f0c3bfc9f6	fix to make the tests pass	2024-03-15 00:05:56 +01:00
Matthieu Baumann	389654ba39	Refac and fix UI and cooFrame problems, add API doc too	2024-03-14 19:52:28 +01:00
Matthieu Baumann	2b618ff38d	Merge remote-tracking branch 'origin/develop' into develop	2024-03-14 19:51:18 +01:00
MARCHAND MANON	19fa8f3a27	docs: add labelColumn to the catalog documentation	2024-03-14 09:23:29 +01:00
Matthieu Baumann	84a4d357c0	fix settings features enabled at init	2024-03-12 14:34:53 +01:00
Matthieu Baumann	63ab255003	update building instructions, rust nightly is needed	2024-03-12 09:50:40 +01:00
Matthieu Baumann	cc97efa707	fix box apparition and fix cooFrame update UI selector	2024-03-12 09:45:26 +01:00
Matthieu Baumann	7e581db86d	restore setFovRange #138	2024-03-11 15:10:36 +01:00
Matthieu Baumann	ee43d0a786	version changed for npm	2024-03-11 13:47:40 +01:00
Matthieu Baumann	90d49dbad9	fix bug vscode jupyter on text input: suppr delete the widget	2024-03-11 13:44:55 +01:00
Matthieu Baumann	473d60608f	fix and add doc concerning UI A.button and A.box methods	2024-03-11 13:44:55 +01:00
Matthieu Baumann	56dbb6656a	add css classes for status bar, fullscreen, projection, share view button, location and FoV	2024-03-11 13:44:55 +01:00
Matthieu Baumann	d6e4e875a3	fix edit box and simplify the stack control	2024-03-11 13:44:55 +01:00