test: unbind the layer shaders

The setAnimationLoop is replaced by call to requestAnimationFrame on the xrSession.

.github/workflows/npm-publish.yml

@@ -0,0 +1,35 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish to NPM
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: Run tests
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+  # Allows to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout branch ${{ github.head_ref }}"
+        uses: actions/checkout@v3
+      - name: "Setup node"
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+      - name: "Run some tests"
+        run: |
+          npm run test:build
+          npm run test:unit

.gitignore

@@ -0,0 +1,16 @@
+node_modules
+
+dist
+examples/.DS_Store
+examples/fits
+.DS_Store
+package-lock.json
+src/core/target/
+src/core/Cargo.lock
+
+aladin-lite*.tgz
+
+.vscode
+
+deploy.sh
+deploy-beta.sh

README.md

@@ -1,14 +1,101 @@
-# Aladin Lite
+# Aladin Lite v3
+
 **An astronomical HiPS visualizer in the browser** <img src="aladin-logo.png" alt="Aladin Lite logo" width="220">
 
 Aladin Lite is a Web application which enables HiPS visualization from the browser. It is developed at [CDS, Strasbourg astronomical data center](http://cds.unistra.fr/).
 
 See [A&A 578, A114 (2015)](https://arxiv.org/abs/1505.02291) and [IVOA HiPS Recommendation](http://ivoa.net/documents/HiPS/index.html) for more details about the HiPS standard.
 
-Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://almascience.eso.org/asax/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
+Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://sky.esa.int/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
 
 More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/AladinLite/doc/).
 
+# How to test it ?
+
+Aladin Lite v3 is out! Please play with [Aladin Lite v3 at this link](https://aladin.u-strasbg.fr/AladinLite).
+
+## Embed it into your projects
+
+You can embed Aladin Lite it into your webpages in two ways
+
+### The vanilla way
+
+Please include [the javascript script of Aladin Lite v3](https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js) into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:
+
+```js
+<!doctype html>
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>
+```
+
+### Using the aladin lite NPM package
+
+First, install it with npm:
+
+```npm i aladin-lite```
+
+Second, you can use it that way:
+
+```js
+<!doctype html>
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from 'aladin-lite';
+
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>
+```
+
+## Goals of v3
+
+- Rust/WebGL new core integration
+
+- Remove jQuery dep
+
+- UI dev, better support for smartphones
+
+- FITS images support
+
+- easy sharing of current « view »
+
+- support of all VOTable serializations (using votable.js?)
+
+- support of FITS tables?
+
+- creating HiPS instance from an URL
+
+- multiple mirrors handling for HiPS tile retrival
+
 ## Source code
 
 Source code is available in the ``src`` directory.
@@ -19,15 +106,6 @@ Aladin Lite is currently licensed under GPL v3.0
 
 If you think this license might prevent you from using Aladin Lite in your pages/application/portal, please open an issue or [contact us](mailto:cds-question@unistra.fr)
 
-## Building the application
-
-1. Clone the repository
-2. Go to the ``scripts``directory
-3. Open the `build.sh` file and adapt paths to ``uglifyjs`` and ``lessc``
-4. Launch ``./build.sh``
-5. Go to directory ``../distrib/latest/`` , type ``python3 -m http.server 42195`` and open your browser at [http://0.0.0.0:42195/](http://0.0.0.0:42195/) to launch the built application
-
-
 ## Contributing
 
 There are several ways to contribute to Aladin Lite:
@@ -38,3 +116,48 @@ There are several ways to contribute to Aladin Lite:
 
 - **develop new features/provide code fixing bugs**. As open development is a new thing for us, we will in a first time only take into consideration code contribution (_i.e._ Pull Requests) from our close partners.
 In any case, please get in touch before starting a major update or rewrite.
+
+### Building the application steps
+
+First you need to install the dependencies from the package.json
+Please run:
+
+```bash
+npm install
+```
+
+After that you are supposed to have the Rust toolchain installed
+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:
+```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):
+```bash
+npm run serve
+```
+
+For just compiling the rust core from the root location (it is faster to do so)
+
+```bash
+cd src/core
+cargo check --features webgl2
+```
+
+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
+```

assets/target.svg

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.4163427mm"
+   height="5.4163427mm"
+   viewBox="0 0 5.4163429 5.4163429"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   inkscape:export-filename="target.png"
+   inkscape:export-xdpi="500"
+   inkscape:export-ydpi="500"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="target.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="20.70196"
+     inkscape:cx="3.7919116"
+     inkscape:cy="9.8541396"
+     inkscape:window-width="2560"
+     inkscape:window-height="1367"
+     inkscape:window-x="2560"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs2"><inkscape:path-effect
+       effect="powerclip"
+       id="path-effect4310"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false"
+       message="Utilise la règle de remplissage « fill-rule: evenodd » de la boîte de dialogue &lt;b&gt;Fond et contour&lt;/b&gt; en l'absence de résultat de mise à plat après une conversion en chemin." /><inkscape:path-effect
+       effect="powerclip"
+       id="path-effect4302"
+       is_visible="true"
+       lpeversion="1"
+       inverse="true"
+       flatten="false"
+       hide_clip="false"
+       message="Utilise la règle de remplissage « fill-rule: evenodd » de la boîte de dialogue &lt;b&gt;Fond et contour&lt;/b&gt; en l'absence de résultat de mise à plat après une conversion en chemin." /></defs><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-140.08642,-154.46187)"><circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.33835;stroke-dasharray:none;stroke-opacity:1"
+       id="path2746"
+       cx="142.79459"
+       cy="157.17004"
+       r="2.0865982" /><circle
+       style="display:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.164818;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4300"
+       cx="142.79459"
+       cy="157.17004"
+       r="0.50933534" /><circle
+       style="display:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.164818;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4308"
+       cx="142.79459"
+       cy="157.17004"
+       r="0.50933534" /><circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       id="path4262"
+       cx="142.79459"
+       cy="157.17004"
+       r="0.95304745" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.365001;stroke-dasharray:none;stroke-opacity:1"
+       d="m 143.43355,154.60018 v 2.66686"
+       id="path308"
+       clip-path="none"
+       transform="matrix(0.84492788,0,0,0.84492788,21.603582,23.835872)"
+       sodipodi:nodetypes="cc" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       d="m 145.50276,157.17004 h -2.2533"
+       id="path406"
+       clip-path="none"
+       sodipodi:nodetypes="cc" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       d="m 142.33972,157.17004 h -2.2533"
+       id="path408"
+       clip-path="none"
+       sodipodi:nodetypes="cc" /><path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.3084;stroke-dasharray:none;stroke-opacity:1"
+       d="m 142.79459,157.62491 v 2.2533"
+       id="path410"
+       clip-path="none"
+       sodipodi:nodetypes="cc" /></g></svg>

examples/al-aas225.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';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });
+        aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {colormap: "rainbow", stretch: "Linear"}));
+
+        var simbad = A.catalog({name: 'Simbad', sourceSize: 16, color: '#4050F0'});
+        aladin.addCatalog(simbad);
+        simbad.addSources([A.marker(204.97010833333336, 0.8400166666666667, {popupTitle: 'NGC 5257', popupDesc: '<em>Object type:</em> HII galaxy<br/><em>Morphological type:</em> Sbc<br/><br/>More info <a href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5257">in Simbad</a>'}), A.marker(204.9903125, 0.8309694444444445,  {popupTitle: 'NGC 5258', popupDesc: '<em>Object type:</em>  Galaxy in Pair of Galaxies <br/><em>Morphological type:</em> Sb<br/><br/>More info <a href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5258">in Simbad</a>'})]);
+
+        var overlay = A.graphicOverlay({color: '#aa2222', lineWidth: 4});
+
+        aladin.addOverlay(overlay);
+        overlay.addFootprints(A.polygon([[204.970214, 0.81206], [204.97110047, 0.80993368], [204.978723, 0.79165], [204.999152, 0.800162], [204.99482125, 0.81055582], [205.002941, 0.813851], [204.99986816, 0.82141125], [205.010312, 0.825578], [205.002112, 0.846123], [204.981546, 0.837916], [204.98157771, 0.83783654], [204.962977, 0.830202], [204.9703941, 0.81213504]]));
+
+        aladin.displayJPG('http://images.ipac.caltech.edu/esahubble/heic0810at/esahubble_heic0810at_1600.jpg');
+    });
+</script>
+</body>
+</html>

examples/al-adass2022.html

@@ -0,0 +1,55 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, gridOptions: {opacity: 0.5}, projection: "AIT", cooFrame: 'galactic', target: "93.2721132 -20.9942421", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: false, 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"});
+        
+        aladin.setOverlayImageLayer("CFHT", "CFHT");
+        aladin.setOverlayImageLayer("Nircam", "Nircam");
+
+        aladin.getOverlayImageLayer("CFHT").toggle();
+        aladin.getOverlayImageLayer("Nircam").toggle();
+
+        let fov = 1000;
+        let rotation = 0;
+
+        setInterval(function zoom() {
+            if (fov > 0.07) {
+                fov *= 0.997;
+                rotation += 0.07;
+
+                aladin.setRotation(rotation)
+                aladin.setFov(fov);
+
+                if (fov < 3 && fov > 0.5) {
+                    let opacity = 1.0 - (fov - 0.5)/(3 - 0.5); 
+                    aladin.getOverlayImageLayer("CFHT").setOpacity(opacity);
+                }
+
+                if (fov < 0.5 && fov > 0.1) {
+                    let opacity = 1.0 - (fov - 0.1)/(0.5 - 0.1); 
+                    aladin.getOverlayImageLayer("Nircam").setOpacity(opacity);
+                }
+            }
+        }, 10);
+
+        setInterval(function () {
+            const t = Date.now() / 1000;
+            let lambda = Math.sin(t) * 0.5 + 0.5;
+        })
+    });
+</script>
+
+</body>
+</html>

examples/al-additive-blend.html

@@ -0,0 +1,25 @@
+<!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', {projection: "TAN", survey: "P/HSC/DR2/deep/g", target: '02 21 36.529 -05 31 20.16', fov: 0.1});
+
+    let hscGreenSurvey = aladin.getBaseImageLayer();
+    hscGreenSurvey.setImageFormat("fits");
+    hscGreenSurvey.setColormap("green", { stretch: "asinh" });
+    hscGreenSurvey.setCuts(-0.2186, 5.30322);
+
+    const HSCRedSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/r', {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
+    const HSCBlueSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+
+    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/r', 'hsc red layer');
+    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/z', 'hsc blue layer');
+});
+</script>
+</body>
+</html>

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

@@ -0,0 +1,400 @@
+<!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 id="notifier" style="position: absolute; left: 0px; bottom: 30px; width: 900px; height: auto; z-index: 100; font-family: Futura,Trebuchet MS,Arial,sans-serif; color: #fdfdfd; background: rgb(69,69,69); background: linear-gradient(90deg, rgba(69,69,69,0.7) 0%, rgba(69,69,69,0.6) 74%, rgba(69,69,69,0) 100%); display: hidden;">
+        <div style="margin-left: 50px;">
+            <div id="mainTitle" style="font-size: 53pt;"></div>
+            <div id="subTitle" style="font-size: 34pt;"></div>
+        </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.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) {
+            $('#mainTitle').html(title)
+            $('#subTitle').html(sub)
+            $('#notifier').fadeIn(600).delay(delay).fadeOut(600)
+        }
+
+        // show grid opacity
+        function delay(t) {
+            return new Promise(resolve => setTimeout(resolve, t))
+        }
+
+
+
+
+        async function *interval(t, nbIteration) {
+            let itNb = 0
+            while(itNb < nbIteration) {
+                let now = Date.now()
+                yield itNb
+                await delay(now - Date.now() + t)
+                itNb++;
+            }
+        }
+
+        aladin.view.setGridConfig({opacity: 0, color: {r: 51/255, g: 209/255, b: 1}})
+        aladin.view.setGridConfig({enabled: true})
+
+        async function s_1() {
+            return new Promise((resolve, reject) => {
+                aladin.animateToRaDec(266.4150089, -29.0061110, 5, () =>  resolve())
+            })
+        }
+
+        async function showcaseProjections() {
+            aladin.setProjection('SIN')
+            await delay(2000)
+
+            aladin.setProjection('MER')
+            aladin.setFoV(400)
+            await delay(2000)
+
+            aladin.setProjection('HPX')
+            aladin.setFoV(400)
+            await delay(2000)
+
+            aladin.setProjection('AIT')
+            aladin.setFoV(400)
+        }
+
+        let gaiaRadvel
+        async function s0() {
+            gaiaRadvel = aladin.createImageSurvey('CDS/P/DM/radial-velocity/I/355/gaiadr3', "Gaia radial velocity", null, null, null)
+            gaiaRadvel.setOpacity(0.0)
+            notify('New HiPS overlay', 'Gaia DR3 radial velocity map', 4000)
+        //galex.setColormap('magma', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(gaiaRadvel)
+            for await(const it of interval(50, 40)) {
+                gaiaRadvel.setOpacity((it+1) / 40)
+            }
+
+            await delay(3000)
+
+            for await(const it of interval(50, 40)) {
+                gaiaRadvel.setOpacity(1 - it / 40)
+            }
+            gaiaRadvel.setOpacity(0)
+        }
+
+        async function showGrid() {
+            for await(const it of interval(50, 40)) {
+                aladin.view.setGridConfig({opacity: it / 40})
+            }
+        }
+        
+        async function s2() {
+            return new Promise((resolve, reject) => {
+                aladin.animateToRaDec(339.2857279, 34.4199240, 5, () =>  resolve())
+            })
+        }
+
+        let galex
+        async function s3() {
+            galex = aladin.createImageSurvey('CDS/P/GALEXGR6_7/color', "GALEX", null, null, null)
+            galex.setOpacity(0.0)
+        //galex.setColormap('magma', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(galex)
+        }
+
+        async function s4() {
+            for await(const it of interval(50, 40)) {
+                galex.setOpacity((it+1) / 40)
+            }
+        }
+        
+        async function s5() {
+            let nbIt = 230
+            let fovStart = 400
+            let fovEnd = 0.5
+            const intervalMs = 25
+
+            let fov;
+            fov = fovStart
+            for await(const it of interval(intervalMs, nbIt+1)) {
+                fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
+                //fov = fovStart - (fovStart - fovEnd) * ((it+1) / nbIt)
+                //aladin.setFoV(400 - (fovStart - fovEnd) * ((it+1) / nbIt))
+                //fov = fovFakeEnd + (fovFakeStart - fovFakeEnd) * (1 - Math.pow((it) / nbIt, 0.15))
+                aladin.setFoV(fov)
+            }
+
+            aladin.setFoV(fovEnd)
+        }
+
+        async function s5_() {
+                /*
+            for await(const it of interval(50, 180)) {
+                aladin.setFoV(400 - 399.5 * ((it+1) / 180))
+            }
+   */
+            return new Promise((resolve, reject) => {
+                aladin.zoomToFoV(5, 3, () =>  resolve());
+            })
+        }
+
+
+        async function hideGrid() {
+            for await(const it of interval(50, 40)) {
+                aladin.view.setGridConfig({opacity: 1 - it / 40})
+            }
+        }
+
+        async function s7() {
+            return new Promise((resolve, reject) => {
+                aladin.animateToRaDec(339.0146901, 33.9600401, 5, () =>  resolve())
+            })
+        }
+
+        let panstarrs
+        async function s77() {
+            panstarrs = aladin.createImageSurvey('CDS/P/PanSTARRS/DR1/g', "PanSTARRS g", null, null, null)
+            panstarrs.setOpacity(0.0)
+            panstarrs.setColormap('viridis', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(panstarrs, 'panstarrs')
+
+            for await(const it of interval(50, 40)) {
+                panstarrs.setOpacity((it+1) / 40)
+            }
+        }
+
+        let stephansMIRI
+        async function s8() {
+            stephansMIRI = aladin.createImageSurvey('CDS/P/JWST/Stephans-Quintet/MIRI', "stephansMIRI", null, null, null)
+            stephansMIRI.setOpacity(0.0)
+        //galex.setColormap('magma', {stretch: "Asinh"})
+            aladin.setOverlayImageLayer(stephansMIRI, 'stephansMIRI')
+
+            for await(const it of interval(25, 100)) {
+                stephansMIRI.setOpacity((it+1) / 100)
+            }
+        }
+
+        async function s9() {
+            return new Promise((resolve, reject) => {
+                aladin.zoomToFoV(0.125, 5, () =>  resolve())
+            })
+        }
+
+        async function s10() {
+            for await(const it of interval(50, 80)) {
+                aladin.setRotation(0.5 * it)
+            }
+        }
+
+        let stephansNIRCamMIRI
+        async function s11() {
+            stephansNIRCamMIRI = aladin.createImageSurvey('CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI', "stephansMIRI", null, null, null)
+            stephansNIRCamMIRI.setOpacity(0.0)
+            aladin.setOverlayImageLayer(stephansNIRCamMIRI, 'stephansNIRCamMIRI')
+
+
+            for await(const it of interval(25, 180)) {
+                if (it==80) {
+                    aladin.animateToRaDec(339.0152849, 33.9755441, 25 * 260 / 1000)
+                    aladin.zoomToFoV(2 / 60, 25 * 260 / 1000)
+                }
+                stephansNIRCamMIRI.setOpacity((it+1) / 180)
+            }
+
+            await delay(180*25 + 500)
+        }
+
+        async function zoomoutAndgoToMeerkat() {
+            for await(const it of interval(25, 10)) {
+                panstarrs && panstarrs.setOpacity(1 - it / 10)
+            }
+            panstarrs && panstarrs.setOpacity(0)
+
+            let nbIt = 200
+            let fovStart = 2/60
+            let fovEnd = 360
+            let intervalMs = 25
+
+            let fov;
+            fov = fovStart
+            for await(const it of interval(intervalMs, nbIt+1)) {
+                fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
+                aladin.setFoV(fov)
+                galex && galex.setOpacity(Math.max(0, 1 - it / 2*nbIt))
+            }
+
+            aladin.setFoV(fovEnd)
+            galex && galex.setOpacity(0)
+
+            await delay(300)
+
+
+            aladin.animateToRaDec(266.2800147, -29.2222859, 5)
+
+            await delay(5000)
+
+            notify('New HiPS overlay', 'MeerKAT 1284MHz', 6000)
+            const meerkat = aladin.createImageSurvey('P/MeerKAT/Galactic-Centre-1284MHz-StokesI', "Galactic-Centre-1284MHz-StokesI", null, null, null, {imgFormat: 'fits'});
+            meerkat.setColormap('magma', {stretch: "Asinh"})
+
+            meerkat.setOpacity(0.0)
+            aladin.setOverlayImageLayer(meerkat, 'meerkat')
+            for await(const it of interval(25, 40)) {
+                meerkat.setOpacity((it+1) / 40)
+            }
+
+            nbIt = 300
+            fovStart = 360
+            fovEnd = 5.4
+
+            fov = fovStart
+            for await(const it of interval(intervalMs, nbIt+1)) {
+                fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
+                aladin.setFoV(fov)
+                aladin.setRotation(40 - 40 * it/nbIt)
+            }
+            aladin.setFoV(fovEnd)
+
+            await delay(500)
+
+
+            notify('', 'Color map changes and contrast adjustment from FITS tiles', 3000)
+            let cutMin = -0.0004
+            let cutMax = 0.01
+            intervalMs = 25
+            for await(const it of interval(intervalMs, 1000)) {
+                switch(it) {
+                    case 150:
+                        meerkat.setColormap('parula')
+                        break
+                    case 300:
+                        meerkat.setColormap('eosb')
+                        break
+                    case 450:
+                        meerkat.setColormap('spectral')
+                        break
+                    case 600:
+                        meerkat.setColormap('ylorbr')
+                        break
+                    case 750:
+                        meerkat.setColormap('ylorbr', {reversed: true})
+                        break
+                }
+                //const t = Date.now() / 1000;
+                const t = it / 25
+                let lambda = Math.sin(t) * 0.5 + 0.5
+
+                let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132
+                let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759
+                meerkat.setCuts(cut0, cut1)
+            }
+
+        } 
+
+
+
+        async function animation() {
+            await delay(1000)
+
+            notify('Background HiPS:', 'Gaia DR3 G flux map', 3000)
+
+            await s_1()
+
+            notify('', 'Enable coordinates grid', 2500)
+
+            await delay(1000)
+
+
+            await showGrid()
+
+            await delay(1000)
+
+            notify('Projection support:', 'Orthographic, Mercator, HEALPix, Aitoff', 6500)
+
+            await delay(1000)
+
+            await showcaseProjections()
+
+
+            await delay(1000)
+
+
+            await s0()
+
+            await delay(1000)
+
+            await s2()
+
+            notify('New HiPS overlay', 'GALEX GR6/7', 4000)
+            await delay(500)
+
+            await s3()
+
+            await s4()
+
+            await s5()
+
+            await delay(800)
+
+            await hideGrid()
+
+            await delay(300)
+            notify('', 'Center view on Stephan\'s Quintet', 3800)
+
+            await s7()
+
+            await delay(300)
+
+            notify('New HiPS overlay', 'PanSTARRS g', 3000)
+            await s77()
+
+            await delay(300)
+
+            await s9()
+
+            await delay(300)
+
+            notify('New HiPS overlay', 'JWST MIRI', 3000)
+            await s8()
+
+            await delay(300)
+
+            await s10()
+
+            await delay(300)
+
+            notify('New HiPS overlay', 'JWST NIRCam + MIRI', 4000)
+
+            await s11()
+
+            await delay(300)
+
+            await zoomoutAndgoToMeerkat()
+
+
+        };
+
+        animation();
+
+    });
+</script>
+
+</body>
+</html>

examples/al-animation.html

@@ -0,0 +1,25 @@
+<!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';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: "P/SPITZER/color", cooFrame: 'galactic', fov: 5});
+        aladin.gotoRaDec(266.41683, -29.00781);
+        // Parameters are:
+        //    <right ascension of final position>,
+        //    <declination of final position>,
+        //    <animation duration in seconds>
+        aladin.animateToRaDec(305.5, 38.5, 70);
+    });
+</script>
+
+</body>
+</html>

examples/al-artifact.html

@@ -0,0 +1,29 @@
+<!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: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-z-zg-g/', // set initial image survey
+                projection: 'SIN', // set a projection
+                fov: 114.19, // initial field of view in degrees
+                target: '19 24 51.556 +45 16 44.36', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+    });
+</script>
+
+</body>
+</html>

examples/al-badbaselayer.html

@@ -0,0 +1,17 @@
+<!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"});
+    let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});
+    aladin.setBaseImageLayer(hsc);
+
+});
+</script>
+</body>
+</html>

examples/al-big-circle.html

@@ -0,0 +1,34 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        aladin.addOverlay(overlay);
+        overlay.add(A.circle(83.66067, 22.03081, 40.0, {color: 'cyan'})); // radius in degrees
+
+        aladin.on("footprintClicked", (footprint) => {
+            console.log("footprint clicked catched", footprint)
+        })
+        aladin.on("objectClicked", (object) => {
+            console.log("object clicked catched", object)
+        })
+        aladin.on("footprintHovered", (footprint) => {
+            console.log("footprint hovered catched", footprint)
+        })
+        aladin.on("objectHoveredStop", (object) => {
+            console.log("Object hovered stopped", object)
+        })
+    });
+</script>
+</body>
+</html>

examples/al-cat-custom-draw-function.html

@@ -0,0 +1,71 @@
+<!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';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {target: '12 25 41.512 +12 48 47.2', fov: 0.8});
+
+        // define custom draw function
+        var drawFunction = function(source, canvasCtx, viewParams) {
+            canvasCtx.beginPath();
+            canvasCtx.arc(source.x, source.y, source.data['size'] * 2, 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) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 0.9;
+            canvasCtx.globalAlpha = 1;
+
+            var xShift = 20;
+
+            canvasCtx.font = '15px Arial'
+            canvasCtx.fillStyle = '#eee';
+            canvasCtx.fillText(source.data['name'], source.x + xShift, source.y -4);
+
+            // object type is displayed only if fov<2°
+            if (fov>2) {
+                return;
+            }
+            canvasCtx.font = '12px Arial'
+            canvasCtx.fillStyle = '#abc';
+            canvasCtx.fillText(source.data['otype'], source.x + 2 + xShift, source.y + 10);
+        };
+
+        // create sources objects
+        var M87 = A.source(187.7059308, 12.3911233, {name: 'M 87', size: 4.5, otype: 'LINER AGN'});
+        var M49 = A.source(187.444992, 8.000411, {name: 'M 49', size: 6.28, otype: 'Seyfert 2'});
+        var M100 = A.source(185.728746, 15.822381, {name: 'M 100', size: 7.23, otype: 'AGN'});
+        var M84 = A.source(186.26559721, 12.88698314, {name: 'M 84', size: 3.91, otype: 'Seyfert 2'});
+        var M60 = A.source(190.916700, 11.552611, {name: 'M 60', size: 4.75, otype: 'Galaxy in pair of galaxies'});
+        var NGC4388 = A.source(186.445083, 12.662069 , {name: 'NGC 4388', size: 3.72, otype: 'Seyfert 2'});
+        var NGC4261 = A.source(184.84673421, 5.82491522 , {name: 'NGC 4261', size: 2.78, otype: 'LINER AGN'});
+        var M86 = A.source(186.549225, 12.945969, {name: 'M 86', size: 6.03, otype: 'Galaxy in group of galaxies'});
+        // create catalog layer with custom draw function
+        var cat = A.catalog({name: 'Virgo cluster', shape: drawFunction});
+        // add sources to the new layer
+        cat.addSources([M87, M49, M100, M84, M60, NGC4388, NGC4261, M86]);
+        aladin.addCatalog(cat);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-cat-custom-shape.html

@@ -0,0 +1,31 @@
+<!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';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.3});
+
+        var customImg = new Image();
+        customImg.onload = function() {
+            var cat = A.catalog({shape: customImg});
+            aladin.addCatalog(cat);
+            cat.addSources(A.source(105.69239256, -8.45235969));
+            cat.addSources(A.source(105.70779763, -8.31350997));
+            cat.addSources(A.source(105.74242906, -8.34776709));
+        };
+        customImg.src = 'https://aladin.u-strasbg.fr/AladinLite/doc/API/examples/img/star.png';
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-cat-read-only.html

@@ -0,0 +1,31 @@
+<!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';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.7});
+
+        var cat1 = A.catalog({readOnly: true});
+        aladin.addCatalog(cat1);
+        cat1.addSources(A.source(105.69239256, -8.45235969));
+        cat1.addSources(A.source(105.70779763, -8.31350997));
+        cat1.addSources(A.source(105.74242906, -8.34776709));
+
+        var cat2 = A.catalog({readOnly: false});
+        aladin.addCatalog(cat2);
+        cat2.addSources(A.source(105.79239256, -8.45235969));
+        cat2.addSources(A.source(105.90779763, -8.31350997));
+        cat2.addSources(A.source(105.54242906, -8.34776709));
+    });
+</script>
+
+</body>
+</html>

examples/al-catalog-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 pmThreshold = 0;
+
+        var slider = document.getElementById('slider');
+        slider.oninput = function() {
+            pmThreshold = this.value;
+            $('#pmVal').html(pmThreshold + ' mas/yr');
+            cat.reportChange();
+        }
+
+        var myFilterFunction = function(source) {
+            var hpmag  = parseFloat(source.data['Hpmag']);
+            if (isNaN(hpmag)) {
+                return false;
+            }
+            return hpmag>pmThreshold;
+        }
+
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5});
+        var cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable', filter: myFilterFunction});
+        aladin.addCatalog(cat);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips-filter.html

@@ -0,0 +1,52 @@
+<!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='500' 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 pmThreshold = 0;
+
+        var slider = document.getElementById('slider');
+        slider.oninput = function() {
+            pmThreshold = this.value;
+            $('#pmVal').html(pmThreshold + ' mas/yr');
+            hips.reportChange();
+        }
+        
+        var myFilterFunction = function(source) {
+            var pmra  = parseFloat(source.data['pmra']);
+            var pmdec = parseFloat(source.data['pmdec']);
+            if (isNaN(pmra) || isNaN(pmdec)) {
+                return false;
+            }
+            var totalPm = Math.sqrt(pmra*pmra+pmdec*pmdec);
+            return totalPm>pmThreshold;
+        }
+        
+        aladin = A.aladin('#aladin-lite-div', {target: 'gal center',fov: 150, showContextMenu: true});
+        var hips = A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/I/345/gaia2', {onClick: 'showTable', color: 'orange', name: 'Gaia', filter: myFilterFunction});
+         aladin.addCatalog(hips);
+        
+        $('input[type=radio][name=otype]').change(function() {
+            requestedOtype = this.value;
+            hips.reportChange();
+        });
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips-shape.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(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, 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) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 0.9;
+            canvasCtx.globalAlpha = 1;
+        };
+
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad', shape: drawFunction});
+        aladin.addCatalog(hips);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips.html

@@ -0,0 +1,22 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad'});
+        aladin.addCatalog(hips);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-cfht.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';
+  let aladin;
+  A.init.then(() => {
+      aladin = A.aladin('#aladin-lite-div', {survey: "P/PanSTARRS/DR1/color-z-zg-g", fov:1.5, target: "NGC 7318B"});
+      aladin.setProjection('AIT');
+      let cfht = aladin.createImageSurvey("CFHT", "CFHT MegaCam u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", "equatorial", 10, {imgFormat: 'png'});
+      let jwst1 = aladin.createImageSurvey("CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI", "JWST NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI", null, null, {imgFormat: 'png'});
+      let jwst2 = aladin.createImageSurvey("JWST2", "JWST MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_MIRI", "equatorial", 12, {imgFormat: 'png'});
+      aladin.setOverlayImageLayer('CFHT', 'overlay_CFHT');
+      aladin.setOverlayImageLayer('CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI', 'overlay_JWST1');
+      aladin.setOverlayImageLayer('JWST2', 'overlay_JWST2');
+      aladin.getOverlayImageLayer('overlay_JWST1').setAlpha(0.0);
+      aladin.getOverlayImageLayer('overlay_JWST2').setAlpha(0.0);
+  });
+</script>
+
+</body>
+</html>

examples/al-chinavo.html

@@ -0,0 +1,22 @@
+<!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(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 360, showCooGrid: true});
+      aladin.setImageSurvey(
+        aladin.newImageSurvey('https://hips.china-vo.org/change2-moon-7m-dom', {imgFormat: 'png', colormap: "redtemperature"})
+      );
+  });
+</script>
+
+</body>
+</html>

examples/al-coronelli.html

@@ -0,0 +1,531 @@
+<!doctype html>
+<html>
+    <head>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!--<link rel="manifest" href="manifest.json">-->
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <script type="text/javascript" defer="" async="" src="https://cdsannotations.u-strasbg.fr/piwik/piwik.js"></script><script type="text/javascript" src="js/libs/jquery-3.5.1.min.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
+        <!--link rel="stylesheet" href="css/pure-min.css"-->
+        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
+        <!--link rel="stylesheet" href="css/base-min.css"-->
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-min.css">
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
+        <!--link rel="stylesheet" href="css/grids-responsive-min.css"-->
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons.css">
+        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons-core.css">
+
+        <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no"-->
+        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    </head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+<script type="text/javascript">
+    let aladin;
+</script>
+<div id="aladin-lite-div" style="width:100vw;height:100vh;">
+    <div id="calibCircle" style="display: none;"></div>
+    <div id="explain" class="aladin-box"></div>
+
+    <div id="overlayDiv" style="position: absolute; width: 100%; height: 100%; z-index:4; display: none;"><canvas id="drawOverlay"></canvas></div>
+
+    <div id="layersControlLeft" class="aladin-box" style="display: block;">
+
+    <!-- temporaire gestion cercle -->
+    <label for="circle-checkbox">Cercle</label> <input id="circle-checkbox" type="checkbox" unchecked=""><br><br>
+    <!-- fin temporaire gestion cercle -->
+
+	<b>Orientation</b><br>
+              <button id="hips-coronelli" class="pure-button" name="ref-hips" onclick="aladin.setImageSurvey('Coronelli')">Normal</button><br>
+              <button id="hips-illenoroc" class="pure-button" name="ref-hips" onclick="aladin.setImageSurvey('illenoroC')">Inversé</button>
+	<br><br>
+
+	<b>Constellations</b>
+	<br>
+            <a id="constellations-boundaries" class="pure-button catlayer" href="#">Frontières</a><br>
+            <a id="const-outlines" class="pure-button img-hips" href="#">Tracé</a><br>
+            <a id="const-jaxa" class="pure-button img-hips" href="#">JAXA</a>
+	<br>
+
+        <b>Ciel</b>
+	<br>
+            <a id="P/Mellinger/color" class="pure-button img-hips" href="#">Mellinger</a><br>
+            <a id="dss2" class="pure-button img-hips" href="#">DSS</a><br>
+            <a id="decaps" class="pure-button img-hips" href="#">DECaPS</a><br>
+            <a id="panstarrs" class="pure-button img-hips" href="#">PanSTARRS</a><br>
+            <a id="gaiamap" class="pure-button img-hips" href="#">Gaia</a>
+	    <br><br><label for="overlay-checkbox">Dessin</label> <input id="overlay-checkbox" type="checkbox" unchecked="">
+    </div>
+    <div id="layersCL2" class="aladin-box" style="display: block;">
+            Opacité<br>
+            <input id="opacity-slider" type="range" min="0" max="1" step="0.01" value="0.0"><br>
+    </div>
+
+    <div id="layersControlRight" class="aladin-box" style="display: block;">
+       <b>Data</b><br>
+            <a id="simbad" class="pure-button catlayer" href="#">SIMBAD</a><br>
+            <a id="gaia" class="pure-button catlayer" href="#">Gaia DR2</a>
+	    <br><br>
+	    <div>Coronelli<br>
+	    <!--a id="coronelli-stars" class="pure-button catcoro" href="#">Coronelli</a-->
+	       <a href="#"><img id="coronelli-stars-white" class="catcoro coro-star" src="star_white.png"></a>
+	       <a href="#"><img id="coronelli-stars-yellow" class="catcoro coro-star" src="star_yellow.png"></a><br>
+	       <a href="#"><img id="coronelli-stars-red" class="catcoro coro-star" src="star_red.png"></a>
+	       <a href="#"><img id="coronelli-stars-blue" class="catcoro coro-star" src="star_blue.png"></a>
+	    </div>
+	<br><br>
+
+        <b>Navigation</b>&nbsp;&nbsp;<br><button id="stop">Stop</button>
+	<br>
+	<div id="coo_epoca">
+            <a class="pure-button nav-button nav-goto" href="#">De Epoca</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_legende">
+            <a class="pure-button nav-button nav-goto" href="#">Légende</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_orion">
+            <a class="pure-button nav-button nav-goto" href="#">Orion</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_magellan">
+            <a class="pure-button nav-button nav-goto" href="#">Magellan</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+	<div id="coo_halley">
+            <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
+            &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
+	</div>
+</div>
+
+<style type="text/css"> .aladin-reticleColor { color: rgb(178, 50, 178); font-weight:bold;} </style>
+
+<style type="text/css">
+    html, body {
+        height: 100%;
+    }
+
+    body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .aladin-zoomControl {
+        top: 10% !important;
+        left: unset !important;
+        right: 4px !important;
+    }
+
+    .aladin-zoomControl a {
+        font-size: 24px !important;
+        padding: 22px !important;
+    }
+
+    #aladin{
+        flex: 1 1 0;
+    }
+
+    #explain {
+        padding: 4px;
+        top: 30%;
+        max-height: 50%;
+        font-size: 11pt;
+        overflow: scroll;
+    }
+
+    #explain tbody tr:nth-child(even) {
+        background-color: #ffffff;
+    }
+
+    #explain tbody tr:nth-child(odd) {
+        background-color: #ccdaeb;
+    }
+
+    #layersControlLeft {
+        padding: 10px;
+        right: unset;
+        left: 4px;
+        top: 20vh;
+    }
+
+    #layersCL2 {
+        padding: 10px;
+        right: unset;
+        left: 4px;
+        top: 90vh;
+    }
+
+    #layersControlRight {
+        padding: 4px;
+        left: unset;
+        right: 4px;
+        top: 25vh;
+    }
+
+    #layersControlLeft, #layersControlRight, #layersCL2 input {
+        margin-right: 5px;
+    }
+
+    .img-hips {
+        padding: 5px;
+        margin: 5px;
+    }
+
+    #opacity-slider {
+        -webkit-appearance: none !important;  /* Override default CSS styles */
+        width: 220px;
+        height: 25px;
+    }
+
+    #opacity-slider::-webkit-slider-thumb {
+      -webkit-appearance: none !important; /* Override default look */
+      appearance: none;
+      width: 25px; /* Set a specific slider handle width */
+      height: 25px; /* Slider handle height */
+      background: #4CAF50; /* Green background */
+      cursor: pointer; /* Cursor on hover */
+    }
+
+    #opacity-slider::-moz-range-thumb {
+      width: 25px; /* Set a specific slider handle width */
+      height: 25px; /* Slider handle height */
+      background: #4CAF50; /* Green background */
+      cursor: pointer; /* Cursor on hover */
+    }
+
+    .aladin-box {
+        font-size: 12px !important;
+    }
+
+    #calibCircle {
+        position: fixed;
+        border: 8px solid red;
+        border-radius: min(50vw, 50vh);
+        height: min(100vw, 100vh);
+        width: min(100vw, 100vh);
+        top: -8px;
+        left: calc(max(50vw, 50vh) - min(50vw, 50vh) - 8px);
+        z-index: 1000;
+        pointer-events: none;
+    }
+
+    .pure-table {
+        font-size: small;
+    }
+
+    .catcoro {
+        display: inline;
+        vertical-align: middle;
+    }
+
+    .coro-star {
+        vertical-align: middle;
+    }
+</style>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    import {Utils} from '../src/js/Utils';
+
+    A.init.then(() => {
+        var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
+        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, 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');
+
+        $('#layersControlLeft').show();
+        $('#layersCL2').show();
+        $('#layersControlRight').show();
+
+        var hipsCats = {
+        'constellations-boundaries': A.catalogFromVizieR('VI/49/bound_20', '0 +0', 180, {color: 'red'}),
+        'simbad': A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/Simbad', {name: 'Simbad', color: '#6dbdce'}),
+        'gaia': A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/I/345/gaia2', {name: 'Gaia DR2', color: '#6666cc', shape: 'circle', sourceSize: 6})
+        };
+        hipsCats['simbad'].hide();
+        hipsCats['constellations-boundaries'].hide();
+        hipsCats['gaia'].hide();
+        aladin.addCatalog(hipsCats['simbad']);
+        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})
+        };
+        coronelliStars['coronelli-stars-white'].hide();
+        coronelliStars['coronelli-stars-yellow'].hide();
+        coronelliStars['coronelli-stars-red'].hide();
+        coronelliStars['coronelli-stars-blue'].hide();
+        aladin.addCatalog(coronelliStars['coronelli-stars-white']);
+        aladin.addCatalog(coronelliStars['coronelli-stars-yellow']);
+        aladin.addCatalog(coronelliStars['coronelli-stars-red']);
+        aladin.addCatalog(coronelliStars['coronelli-stars-blue']);
+
+        // ajout de nouveaux relevés custom ?
+        // Mellinger : P/Mellinger/color
+        // PanSTARRS couleur : CDS/P/PanSTARRS/DR1/color-i-r-g
+        // gaia flux : CDS/P/DM/flux-color-Rp-G-Bp/I/345/gaia2
+        aladin.createImageSurvey("dss2", "DSS color", "http://alasky.u-strasbg.fr/DSS/DSSColor/", "equatorial", 9, {imgFormat: 'jpg'});
+        aladin.createImageSurvey("decaps", "DECaPS DR1", "http://alasky.u-strasbg.fr/DECaPS/DR1/color/", "equatorial", 11, {imgFormat: 'png'});
+        aladin.createImageSurvey("gaiamap", "Gaia Flux", "http://alasky.u-strasbg.fr/ancillary/GaiaDR2/color-Rp-G-Bp-flux-map/", "equatorial", 4, {imgFormat: 'jpg'});
+        aladin.createImageSurvey("panstarrs", "PanSTARRS", "http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-i-r-g/", "equatorial", 11, {imgFormat: 'jpg'});
+        aladin.createImageSurvey('const-outlines', 'Constellation outlines', 'http://alaskybis.u-strasbg.fr/JAXA/JAXA_P_CONSTELLATIONS5/', 'equatorial', 6, {imgFormat: 'png'});
+        aladin.createImageSurvey('const-jaxa', 'Constellation by JAXA', 'http://alaskybis.u-strasbg.fr/JAXA/JAXA_P_CONSTELLATIONS6/', 'equatorial', 6, {imgFormat: 'png'});
+
+        var curSelectedSource = null;
+        aladin.setOverlayImageLayer('P/Mellinger/color');
+        aladin.getOverlayImageLayer().setAlpha(0.0);
+
+        // listen changes on HiPS image background selection
+        $('.img-hips').click(function() {
+        if (!$(this).hasClass("selected")) {
+            $('.img-hips').removeClass("selected pure-button-active");
+            $(this).addClass("selected pure-button-active");
+            let survey = aladin.setOverlayImageLayer(this.id);
+            survey.setAlpha(0.75);
+            $('#opacity-slider').val(0.75);
+        }
+        else {
+            $(this).removeClass("selected pure-button-active");
+            // possibilité ?     aladin.setOverlayImageLayer(null);
+            aladin.getOverlayImageLayer().setAlpha(0);
+            $('#opacity-slider').val(0);
+        }
+        });
+
+
+        $('#opacity-slider').on('input', function() {
+            aladin.getOverlayImageLayer().setAlpha($(this).val());
+        });
+
+
+        // listen changes on HiPS catalogues selection
+        $('.catlayer').click(function() {
+        var cat = hipsCats[$(this).attr('id')];
+
+        if (!$(this).hasClass("selected")) {
+            $(this).addClass("selected pure-button-active");
+            cat.show();
+        }
+        else {
+            $(this).removeClass("selected pure-button-active");
+            cat.hide();
+        }
+        });
+
+        // listen changes on Coronelli catalogues selection
+        $('.catcoro').click(function() {
+        var cat = coronelliStars[$(this).attr('id')];
+
+        if (!$(this).hasClass("selected")) {
+            $(this).addClass("selected");
+            cat.show();
+        }
+        else {
+            $(this).removeClass("selected");
+            cat.hide();
+        }
+        });
+
+        var cooNav = {
+        'coo_epoca': {ra: 4.0, dec: -30.0, time: 10},
+        'coo_legende': {ra: 33.0, dec: -32.0, time: 10},
+        'coo_orion': {ra: 85.2, dec: -2.5, time: 10},
+        'coo_magellan': {ra: 45.0, dec: -79.0, time: 10},
+        'coo_halley': {ra: 219.6, dec: 7.0, time: 10}
+        };
+
+        // listen click on navigation buttons
+        $('.nav-button').click(function() {
+        var cooTarget = $(this).parent().attr('id');
+
+        if ($(this).hasClass("nav-goto")) {
+            aladin.gotoRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec);
+        }
+        else if ($(this).hasClass("nav-flyto")) {
+            aladin.animateToRaDec(cooNav[cooTarget].ra, cooNav[cooTarget].dec, cooNav[cooTarget].time);
+        }
+        });
+
+        // stop animations
+        $('#stop').click(function() {
+            aladin.stopAnimation();
+        });
+
+        // listen to click on objects
+        aladin.on('objectClicked', function(source, xyMouseCoords) {
+            var html = '<table class="pure-table">';
+
+            if (curSelectedSource != null) {
+                curSelectedSource.deselect();
+            }
+            if (source==null) {
+                $('#explain').html('');
+                $('#explain').hide();
+                return;
+            }
+
+            source.select();
+            curSelectedSource = source;
+            html += '<tbody>';
+            if (source.catalog.name == 'Simbad') {
+                html += '<h3>Simbad object <em>' + source.data.main_id + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.ra + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>main_type</b></td><td>' + source.data.main_type + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data.pmra + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr><td><b>pmdec</b></td><td>' + source.data.pmdec + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data.plx + '</td><td><em>mas</em></td></tr>';
+                html += '<tr><td><b>B mag.</b></td><td>' + source.data.B + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>V mag.</b></td><td>' + source.data.V + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="http://simbad.u-strasbg.fr/simbad/sim-id?Ident=' + encodeURIComponent(source.data.main_id) + '">More details</a>';
+            }
+
+
+            $('#explain').html(html);
+            $('#explain').show();
+
+        });
+
+        aladin.on('fullScreenToggled', function(fullScreenFlag) {
+            setTimeout(initOverlayCanvas, 500);
+            if (fullScreenFlag) {
+                $('#calibCircle').show();
+            //temporaire gestion cercle
+            document.getElementById("circle-checkbox").checked = true;
+            }
+            else {
+                $('#calibCircle').hide();
+            //temporaire gestion cercle
+            document.getElementById("circle-checkbox").checked = false;
+            }
+        });
+
+        //temporaire gestion cercle
+        document.getElementById("circle-checkbox").addEventListener('change', (event) => {
+        if (event.target.checked) {
+                $('#calibCircle').show();
+        } else {
+                $('#calibCircle').hide();
+        }
+        })
+
+        // enable/disable overlay layer
+        document.getElementById("overlay-checkbox").addEventListener('change', (event) => {
+        if (!drawOverlayCanvas) {
+            return;
+        }
+        if (event.target.checked) {
+                $('#overlayDiv').show();
+                initOverlayCanvas();
+        } else {
+                $('#overlayDiv').hide();
+        }
+        })
+
+        /*
+        document.addEventListener('touchmove', function (event) {
+        if (event.scale !== 1) { event.preventDefault(); }
+        }, false);
+
+        var lastTouchEnd = 0;
+        document.addEventListener('touchend', function (event) {
+        var now = (new Date()).getTime();
+        if (now - lastTouchEnd <= 300) {
+            event.preventDefault();
+        }
+        lastTouchEnd = now;
+        }, false);
+        */
+
+        /*
+        document.addEventListener("touchstart", event => {
+            if(event.touches.length > 1) {
+                console.log("zoom plz stahp");
+                event.preventDefault();
+                //event.stopPropagation(); // maybe useless
+            }
+        }, {passive: false});
+        */
+
+
+        // initialize drawOverlay
+        var drawOverlayCanvas = document.getElementById('drawOverlay');
+
+        var timeBeforeDeletion = 7 * 1000; // in ms
+
+        var drawOverlayCtx;
+        var deleteOverlayTimeout;
+        var points = [];
+        function initOverlayCanvas() {
+            drawOverlayCanvas.style.width='100%';
+            drawOverlayCanvas.style.height='100%';
+
+            drawOverlayCanvas.width  = drawOverlayCanvas.offsetWidth;
+            drawOverlayCanvas.height = drawOverlayCanvas.offsetHeight;
+            drawOverlayCtx = drawOverlayCanvas.getContext('2d');
+
+            drawOverlayCtx.lineWidth = 10;
+            drawOverlayCtx.lineJoin = drawOverlayCtx.lineCap = 'round';
+            drawOverlayCtx.strokeStyle = 'rgba(240, 0, 0, 0.7)';
+
+            points = [];
+        }
+
+        function deleteOverlayCanvas() {
+            drawOverlayCtx.clearRect(0, 0, drawOverlayCtx.canvas.width, drawOverlayCtx.canvas.height);
+            points = [];
+        }
+
+        if (drawOverlayCanvas) {
+
+            var isDrawing = false;
+
+            $(drawOverlayCanvas).on('mousedown touchstart', function(e) {
+                if (deleteOverlayTimeout) {
+                    clearTimeout(deleteOverlayTimeout);
+                    deleteOverlayTimeout = undefined;
+                }
+                isDrawing = true;
+                points.push([Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e)]);
+            });
+
+
+            $(drawOverlayCanvas).on('mousemove touchmove', function(e) {
+                if (!isDrawing) return;
+            e.preventDefault();
+
+                drawOverlayCtx.clearRect(0, 0, drawOverlayCtx.canvas.width, drawOverlayCtx.canvas.height);
+                points[points.length-1].push(Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e));
+
+                drawOverlayCtx.beginPath();
+
+                for (var k=0; k<points.length; k++) {
+                    drawOverlayCtx.moveTo(points[k][0].x, points[k][0].y);
+                    for (var i = 1; i < points[k].length; i++) {
+                        drawOverlayCtx.lineTo(points[k][i].x, points[k][i].y);
+                    }
+                }
+                drawOverlayCtx.stroke();
+            });
+
+            drawOverlayCanvas.onmouseup = drawOverlayCanvas.ontouchend = function() {
+                isDrawing = false;
+                deleteOverlayTimeout = setTimeout(deleteOverlayCanvas, timeBeforeDeletion);
+            };
+        }
+    });
+</script>
+
+</body>
+</html>

examples/al-displayFITS.html

@@ -0,0 +1,37 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width:440px;height:300px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", fullScreen: true});
+
+        aladin.displayFITS(
+            //'https://fits.gsfc.nasa.gov/samples/FOCx38i0101t_c0f.fits', // url of the fits file
+            'fits/HorseHead.fits',
+            //'fits/neowise.fits',
+            //'fits/irac.fits',
+            //'fits/FOCx38i0101t_c0f.fits',
+            {
+                minCut: 5000,
+                maxCut: 17000,
+            }, // no optional params
+            (ra, dec, fov, image) => {
+                // ra, dec and fov are centered around the fits image
+                image.setColormap("magma", {stretch: "asinh"});
+
+                aladin.gotoRaDec(ra, dec);
+                aladin.setFoV(fov);
+            },
+        );
+    });
+</script>
+</body>
+</html>

examples/al-displayJPG.html

@@ -0,0 +1,58 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+
+Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.05 ; style="width:120px;height:5px;line-height:0%">
+<br/>
+<br/>
+<div id="aladin-lite-div" style="width:440px;height:300px"></div>
+
+<input id="DSS" type="radio" name="survey" value="P/DSS2/Color" checked><label for="DSS">Optical (DSS2)  <label>
+<input id="2MASS" type="radio" name="survey" value="P/2MASS/Color"><label for="2MASS">Infrared (2MASS)<label>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: "0 0", cooFrame: "gal"});
+        
+        var callback = function(ra, dec, fov) {
+            aladin.addCatalog(A.catalogFromSimbad( {ra: ra, dec: dec} , 1 , {shape: 'circle', color: '#5d5', onClick: 'showTable'}));
+            // we must return true, so that the default action (set view to center of image) is performed
+            return true;
+        }
+
+        $("#slider").on('input', function() {
+            const opacity = $(this).val();
+            aladin.getOverlayImageLayer().setOpacity(opacity);
+        });
+        aladin.setBaseImageLayer('P/Mellinger/color');
+
+        //let fits = aladin.displayFITS('http://goldmine.mib.infn.it/data//B/fits/A04_VC1316_ooooog.fits', 'overlay');
+        let jpg = aladin.displayJPG(
+            // the JPG to transform to HiPS
+            'https://noirlab.edu/public/media/archives/images/large/noirlab1912a.jpg',
+            // no options
+            {},
+            // A callback fn once the overlay is set
+            callback
+        );
+
+        $('input[name=survey]').change(function() {
+            let surveyName = $(this).val();
+            if (surveyName === "P/2MASS/Color") {
+                aladin.setBaseImageLayer("CDS/P/2MASS/color");
+            } else if (surveyName === "P/DSS2/Color") {
+                aladin.setBaseImageLayer("CDS/P/DSS2/color");
+            }
+        });
+    });
+</script>
+</body>
+</html>

examples/al-distortion.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
+        aladin.setProjection('MOL');
+
+        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {
+            imgFormat: 'fits',
+            colormap: 'redtemperature',
+            stretch: 'Asinh'
+        });*/
+
+        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
+        aladin.setProjection('AIT');
+
+        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');
+
+        //let survey = aladin.createImageSurvey("P/PanSTARRS/DR1/g", null, null, null, null, );
+        /*aladin.setBaseImageLayer("P/PanSTARRS/DR1/g");
+        aladin.getBaseImageLayer().setColormap('viridis', {stretch: "Asinh"});*/
+
+        // manage URL parameters
+        const searchParams = new URL(document.location).searchParams;
+        if (searchParams.has('baseImageLayer')) {
+            aladin.setBaseImageLayer(searchParams.get('baseImageLayer'));
+        }
+        if (searchParams.has('overlayImageLayer')) {
+            aladin.setOverlayImageLayer(searchParams.get('overlayImageLayer'));
+        }
+        if (searchParams.has('cooFrame')) {
+            aladin.setFrame(searchParams.get('cooFrame'));
+        }
+        if (searchParams.has('fov')) {
+            aladin.setFoV(parseFloat(searchParams.get('fov')));
+        }
+        if (searchParams.has('ra') && searchParams.has('dec')) {
+            aladin.gotoRaDec(parseFloat(searchParams.get('ra')), parseFloat(searchParams.get('dec')));
+        }
+
+
+    });
+</script>
+
+</body>
+</html>

examples/al-easy-access-simbad-ned.html

@@ -0,0 +1,22 @@
+<!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(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {target: 'M 82', fov: 0.25, showContextMenu: true});
+
+      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>
+
+</body>
+</html>

examples/al-easy-access-vizier.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5, showContextMenu: true});
+        const cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'});
+        aladin.addCatalog(cat);
+    });
+</script>
+</body>
+</html>

examples/al-ellipse.html

@@ -0,0 +1,30 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 31', fov: 3});
+        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.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
+            A.ellipse(10.6833, 41.2669, 3.33333/2, 1.1798333/2, 35, {color: 'cyan'}),
+            // NGC 3048
+            A.ellipse(180.470842, -18.867589, 5.2/120, 3.1/120, 80, {color: 'cyan'}),
+            // NGC 3049
+            A.ellipse(180.4742, -18.8850, 3.1/120, 1.6/120, 50, {color: 'cyan'}),
+        ]);
+        //overlay.add(); // radius in degrees
+    });
+</script>
+</body>
+</html>

examples/al-eso-catalogs.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var vmc_cepheids = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=401&FORMAT=votable&QUERY=SELECT%20*%20from%20vmc_er4_yjks_cepheidCatMetaData_fits_V3%20where%20%20CONTAINS(POINT(%27%27,RA2000,DEC2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+    var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=3&FORMAT=votable&QUERY=SELECT%20*%20from%20safcat.PESSTO_TRAN_CAT_V3%20where%20CONTAINS(POINT(%27%27,TRANSIENT_RAJ2000,TRANSIENT_DECJ2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
+
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
+        aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
+        aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
+        aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}), undefined, true);
+    });
+</script>
+</body>
+</html>

examples/al-event-listeners.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+<div id='infoDiv'>&nbsp; </div>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
+        var cat = A.catalog({sourceSize: 20});
+        aladin.addCatalog(cat);
+        cat.addSources([A.source(83.784490, 9.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
+        var msg;
+
+        // define function triggered when  a source is hovered
+        aladin.on('objectHovered', function(object, xyMouseCoords) {
+            if (object) {
+                msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            else {
+                msg = 'No object hovered';
+            }
+            $('#infoDiv').html(msg);
+        });
+
+        aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
+            if (object) {
+                msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            $('#infoDiv').html(msg);
+        });
+
+        // define function triggered when an object is clicked
+        var objClicked;
+        aladin.on('objectClicked', function(object, xyMouseCoords) {
+            if (object) {
+                objClicked = object;
+                object.select();
+                msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            else {
+                objClicked.deselect();
+                msg = 'You clicked in void';
+            }
+            $('#infoDiv').html(msg);
+        });
+    });
+</script>
+</body>
+</html>

examples/al-fill-polygon.html

@@ -0,0 +1,26 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {fov: 122, showContextMenu: true, fullScreen: true});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+
+        aladin.addOverlay(overlay);
+        overlay.addFootprints([A.polygon(
+            [[264.375,-35.68533471265207], [258.75,-30.000000000000018], [264.375,-24.624318352164085], [270,-30.000000000000018]],
+            {color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true})]);
+
+        aladin.gotoRaDec(264.375,-24.624318352164085);
+    });
+</script>
+</body>
+</html>

examples/al-footprints.html

@@ -0,0 +1,42 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
+        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.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]])
+        ]);
+        overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
+
+        aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
+            console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("objectClicked", (object, xyMouseCoords) => {
+            console.log("object clicked catched: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("footprintHovered", (footprint, xyMouseCoords) => {
+            console.log("footprint hovered catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("objectHoveredStop", (object, xyMouseCoords) => {
+            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});
+        aladin.addCatalog(cat);
+    });
+</script>
+</body>
+</html>

examples/al-gaiadr3.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="utf-8">
+    <!-- Recommendation for users smartphone/tablets users -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+    <title>Explore Gaia DR3 in Aladin Lite</title>
+  </head>
+
+  <body>
+    <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+    <form class="pure-form pure-form-stacked">
+        <fieldset>
+          <label for="option-gdr3-flux-color-map" class="pure-radio">
+            <input id="option-gdr3-flux-color-map" type="radio" name="img-hips" value="CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3">
+            Gaia DR3 flux map
+          </label>
+          <label for="option-gdr3-density-map" class="pure-radio">
+            <input id="option-gdr3-density-map" type="radio" name="img-hips" value="CDS/P/DM/I/350/gaiaedr3" checked>
+            Gaia DR3 density map
+          </label>
+          <label for="option-DSS-map" class="pure-radio">
+            <input id="option-DSS-map" type="radio" name="img-hips" value="P/DSS2/color">
+            DSS Color
+          </label>
+          <label for="option-PS1-map" class="pure-radio">
+            <input id="option-PS1-map" type="radio" name="img-hips" value="P/PanSTARRS/DR1/color-z-zg-g">
+            Pan-STARRS
+          </label>
+
+        </fieldset>
+      </form>
+
+  </body>
+
+  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+  <script type="module">
+    import A from '../src/js/A.js';
+    $('#layersControl').show();
+
+    var curSelectedSource = null;
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', { fov: 100, cooFrame: 'galactic', fullscreen: true, showSimbadPointerControl: true });
+        aladin.gotoRaDec(297.87, 25.96);
+        aladin.setProjection('MOL');
+
+        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', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/density-map', 'equatorial', 7, {imgFormat: 'fits'});
+
+        aladin.setImageSurvey(densityMap);
+
+        var hipsCats = {
+            //'gdr3': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/I/355/gaiadr3', { name: 'Gaia DR3 sources', shape: 'circle', sourceSize: 8, color: '#d66bae' }),
+            'simbad': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', { name: 'Simbad', color: '#6dbdce' })
+        };
+
+        hipsCats['simbad'].hide();
+
+        aladin.addCatalog(hipsCats['simbad']);
+        //aladin.addCatalog(hipsCats['gdr3']);
+
+        //cmDensMapChanged = false;
+        // listen changes on HiPS image background selection
+        $('input[type=radio][name=img-hips]').change(function () {
+            if (this.value == 'CDS/P/DM/I/350/gaiaedr3') {
+                aladin.setBaseImageLayer(densityMap);
+            }
+            else if (this.value == "CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3") {
+                aladin.setBaseImageLayer(fluxMap);
+            } else {
+                aladin.setBaseImageLayer(this.value)
+            }
+        });
+
+        // listen changes on HiPS catalogues selection
+        $('#overlay-form :checkbox').change(function () {
+            var cat = hipsCats[this.value];
+
+            if (this.checked) {
+                cat.show();
+            }
+            else {
+                cat.hide();
+            }
+        });
+
+        // listen to click on objects
+        aladin.on('objectClicked', function (source, xyMouseCoords) {
+            var html = '<table class="pure-table">';
+
+            if (curSelectedSource != null) {
+                curSelectedSource.deselect();
+            }
+            if (source == null) {
+                $('#explain').html('');
+                $('#explain').hide();
+                return;
+            }
+
+            source.select();
+            curSelectedSource = source;
+            html += '<tbody>';
+            if (source.catalog.name !== 'Simbad') {
+                html += '<h3>Gaia DR3 <em>' + source.data.Source + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.RAdeg + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data['parallax'] + '</td><td><em>mas</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data['pmra'] + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmdec</b></td><td>' + source.data['pmdec'] + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Gmag</b></td><td>' + source.data['phot_g_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Bpmag</b></td><td>' + source.data['phot_bp_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Rpmag</b></td><td>' + source.data['phot_rp_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="https://vizier.u-strasbg.fr/viz-bin/VizieR-5?-out.form=%2bH&-source=I/350/gaiaedr3&Source=' + source.data.source_id + '">More details</a>';
+            }
+            else {
+                console.log(source.data);
+                html += '<h3>Simbad object <em>' + source.data.main_id + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.ra + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>main_type</b></td><td>' + source.data.main_type + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data.pmra + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr><td><b>pmdec</b></td><td>' + source.data.pmdec + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data.plx + '</td><td><em>mas</em></td></tr>';
+                html += '<tr><td><b>B mag.</b></td><td>' + source.data.B + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>V mag.</b></td><td>' + source.data.V + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=' + encodeURIComponent(source.data.main_id) + '">More details</a>';
+            }
+
+
+            $('#explain').html(html);
+            $('#explain').show();
+
+        });
+    });
+</script>
+</html>

examples/al-gotoobject.html

@@ -0,0 +1,16 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1, showCooGridControl:true});
+        aladin.gotoObject('M 10');
+    });
+</script>
+</body>
+</html>

examples/al-gw.html

@@ -0,0 +1,25 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {projection: "TAN", target: '15 16 57.636 -60 55 7.49', showCooGrid: true, fov: 90, fullScreen: true});
+        
+        var moc_0_99 = A.MOCFromURL("./gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.7, lineWidth: 5, perimeter: true});
+        var moc_0_95 = A.MOCFromURL("./gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.8, lineWidth: 5, perimeter: true});
+        var moc_0_5 = A.MOCFromURL("./gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 1.0, lineWidth: 5, perimeter: true});
+        var moc_0_2 = A.MOCFromURL("./gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 1.0, lineWidth: 5, perimeter: true});
+
+        aladin.addMOC(moc_0_99);
+        aladin.addMOC(moc_0_95);
+        aladin.addMOC(moc_0_5);
+        aladin.addMOC(moc_0_2);
+    });
+</script>
+</body>
+</html>

examples/al-hips-from-url.html

@@ -0,0 +1,18 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', target: 'galactic center'});
+    });
+</script>
+
+</body>
+</html>

examples/al-hips-local.html

@@ -0,0 +1,21 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
+        
+        let survey = aladin.createImageSurvey('hips gaia', "hips gaia name", "./hips/gaia", undefined, undefined, {colormap:"viridis"});
+        aladin.setBaseImageLayer(survey);
+    });
+</script>
+
+</body>
+</html>

examples/al-hips-order-list.html

@@ -0,0 +1,28 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'http://alasky.cds.unistra.fr/ancillary/GaiaDR2/hips-density-map/', 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'});
+
+        aladin.setOverlayImageLayer(fluxMap)
+        aladin.setOverlayImageLayer(densityMap, "density")
+        aladin.setOverlayImageLayer(decaps, "decaps")
+        aladin.setOverlayImageLayer(panstarrs, "panstarrs")
+   });
+</script>
+
+</body>
+</html>

examples/al-image-layer-by-name.html

@@ -0,0 +1,19 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
+        aladin.setImageSurvey('P/allWISE/color');
+    });
+</script>
+
+</body>
+</html>

examples/al-init-custom-options.html

@@ -0,0 +1,31 @@
+<!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: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+    });
+</script>
+
+</body>
+</html>

examples/al-jwst.html

@@ -0,0 +1,30 @@
+<!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(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                projection: 'AIT', // set a projection
+                fov: 0.06, // initial field of view in degrees
+                target: '110.82730 -73.45471', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+
+        aladin.setOverlayImageLayer("https://alasky.cds.unistra.fr/JWST/CDS_P_JWST_deep_field_smacs0723-5mb")
+    });
+</script>
+
+</body>
+</html>

examples/al-load-votables-by-url.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        var aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
+        aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));        
+    });
+</script>
+</body>
+</html>

examples/al-marker-creation.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        let a = A.aladin('#aladin-lite-div', {target: '03 47 00.00 +24 07 00.0', survey: 'P/DSS2/color', zoom: 2, showReticle: false});
+        var cat = A.catalog({name: 'Some markers', sourceSize: 18});
+        a.addCatalog(cat);
+        cat.addSources([A.marker(56.87115, 24.10514, {popupTitle: 'Alcyone', popupDesc: '<em>Bmag:</em> 2.806<br/><em>Spectral type:</em> B7III<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME%20ALCYONE&submit=submit">in Simbad</a>'})]);
+        cat.addSources([A.marker(57.29673, 24.13671, {popupTitle: 'Pleione', popupDesc: '<em>Bmag:</em> 4.97<br/><em>Spectral type:</em> B8vne<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+PLEIONE&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.58156, 23.94836, {popupTitle: 'Merope', popupDesc: '<em>Bmag:</em> 4.113<br/><em>Spectral type:</em> BVI4e<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=V*+V971+Tau&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.45669, 24.36775, {popupTitle: 'Maia', popupDesc: '<em>Bmag:</em> 3.812<br/><em>Spectral type:</em> B8III<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+MAIA&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.21890, 24.11334, {popupTitle: 'Electra', popupDesc: '<em>Bmag:</em> 3.612<br/><em>Spectral type:</em> B6IIIe<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+ELECTRA&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(57.29059, 24.05342, {popupTitle: 'Atlas', popupDesc: '<em>Bmag:</em> 3.54<br/><em>Spectral type:</em> B8III<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+ATLAS&NbIdent=1">in Simbad</a>'})]);
+        cat.addSources([A.marker(56.30207, 24.46728, {popupTitle: 'Taygeta', popupDesc: '<em>Bmag:</em> 4.199<br/><em>Spectral type:</em> B6IV<br/>More info <a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NAME+TAYGETA&NbIdent=1">in Simbad</a>'})]);
+    });
+</script>
+</body>
+</html>

examples/al-mars-features.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fov: 180, fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, survey: 'CDS/P/Mars/THEMIS-Day-100m-v12'});
+        aladin.setProjection('SIN');
+
+
+        const drawFunction = function(source, canvasCtx, viewParams) {
+            canvasCtx.beginPath();
+            canvasCtx.arc(source.x, source.y, 4, 0, 2 * Math.PI, false);
+            canvasCtx.closePath();
+            canvasCtx.strokeStyle = '#38c';
+            canvasCtx.lineWidth = 3;
+            canvasCtx.globalAlpha = 0.7,
+            canvasCtx.stroke();
+            const fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);
+
+            // object name is displayed only if fov<15°
+            if (fov>15) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 1;
+
+            const xShift = 10;
+
+            canvasCtx.font = '15px Arial'
+            canvasCtx.fillStyle = '#eee';
+            canvasCtx.strokeStyle = '#222';
+            canvasCtx.lineWidth = 1;
+            canvasCtx.fillText(source.data['Feature Name'], source.x + xShift, source.y -4);
+            //canvasCtx.strokeText(source.data['Feature Name'], source.x + xShift, source.y -4);
+
+            // object type is displayed only if fov<5°
+            if (fov>5) {
+                return;
+            }
+            canvasCtx.font = '12px Arial'
+            canvasCtx.fillStyle = '#abc';
+            canvasCtx.strokeStyle = '#222';
+            canvasCtx.lineWidth = 1;
+            canvasCtx.fillText(source.data['Feature Type'], source.x + 2 + xShift, source.y + 10);
+            //canvasCtx.strokeText(source.data['Feature Type'], source.x + 2 + xShift, source.y + 10);
+        };
+
+        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/mars-features.xml', {raField: 'Longitude', decField: 'Latitude', shape: drawFunction, onClick: 'showTable'}));
+
+        aladin.getBaseImageLayer().setColormap('yiorbr')
+        aladin.gotoRaDec(226.1433542, 18.6308694);
+
+    });
+</script>
+
+</body>
+</html>

examples/al-mars.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true, showContextMenu: true});
+        var mars = aladin.createImageSurvey('Mars', 'Mars', 'https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21/', 'j2000', 5);
+        aladin.setImageSurvey(mars);
+        
+        var c = document.createElement('canvas'); c.width = c.height = 11; var ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(5, 5, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke();
+        
+        var geoFeatures = A.catalog({shape: c, labelColumn: 'name', displayLabel: true, labelColor: '#fff', labelFont: '14px sans-serif'});
+        aladin.addCatalog(geoFeatures);
+        
+        geoFeatures.addSources(A.source(226.2, 18.65, {name: 'Olympus Mons'}));
+        geoFeatures.addSources(A.source(70.5, -42.4, {name: 'Hellas Planitia'}));
+        geoFeatures.addSources(A.source(250.4, 40.5, {name: 'Alba Mons'}));
+        geoFeatures.addSources(A.source(-59.2, -13.9, {name: 'Valles Marineris'}));
+        geoFeatures.addSources(A.source(147.21, 25.02, {name: 'Elysium Mons'}));
+        geoFeatures.addSources(A.source(316.0, -49.7, {name: 'Argyre Basin'}));
+        geoFeatures.addSources(A.source(32.53, 70, {name: 'Vastitas Borealis'}));
+        geoFeatures.addSources(A.source(-112.58, 1.57, {name: 'Tharsis Montes'}));
+        geoFeatures.addSources(A.source(298, 25, {name: 'Outflow channels'}));
+        geoFeatures.addSources(A.source(30, 19.79, {name: 'Arabia Terra'}));
+        geoFeatures.addSources(A.source(70.5, -42.4, {name: 'Hellas Basin'}));
+        geoFeatures.addSources(A.source(280, 45, {name: 'Tempe Terra'}));
+        geoFeatures.addSources(A.source(87, 12.9, {name: 'Isidis Basin'}));
+        geoFeatures.addSources(A.source(117.5, 46.7, {name: 'Utopia Basin'}));
+        geoFeatures.addSources(A.source(350, -45, {name: 'Noachis Terra'}));
+        
+        var landingSites = A.catalog({sourceSize: 16});
+        aladin.addCatalog(landingSites);
+        
+        landingSites.addSources([A.marker(-47.95, 22.27, {popupTitle: 'Viking 1', popupDesc: 'Landing date: July 20, 1976 11:53:06'})]);
+        landingSites.addSources([A.marker(-125.7, 68.22, {popupTitle: 'Phoenix', popupDesc: 'Landing date: May 25, 2008 23:53:44 UTC'})]);
+        landingSites.addSources([A.marker(-33.22, 19.13, {popupTitle: 'Pathfinder', popupDesc: 'Landing date: July 4, 1997 16:56:55 UTC'})]);
+        landingSites.addSources([A.marker(354.4734, -1.9462, {popupTitle: 'Opportunity', popupDesc: 'Landing date: January 25, 2004, 05:05 UTC'})]);
+        landingSites.addSources([A.marker(-225.71, 47.64, {popupTitle: 'Viking 2', popupDesc: 'Landing date: September 3, 1976 22:37:50'})]);
+        landingSites.addSources([A.marker(175.472636, -14.5684, {popupTitle: 'Spirit', popupDesc: 'Landing date: January 4, 2004, 04:35 UTC '})]);
+        landingSites.addSources([A.marker(137.4417, -4.5895, {popupTitle: 'Curiosity', popupDesc: 'Landing date: August 6, 2012, 05:17 UTC '})]) 
+    });
+</script>
+</body>
+</html>

examples/al-moc-isophot.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px">
+      <div id="ui" class="ui">
+      </div>
+    </div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/ISOPHOT/170'});
+        var moc = A.MOCFromURL('https://cds.unistra.fr/~boch/MOC-ISOPHOT.fits', {color: '#84f', lineWidth: 1, opacity: 1.0}, (moc) => {
+            // moc is ready
+            console.log(moc.contains(205.9019247, +2.4492764));
+            console.log(moc.contains(-205.9019247, +2.4492764));
+
+        });
+        aladin.addMOC(moc);
+    });
+</script>
+</body>
+</html>

examples/al-moc-json.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px">
+      <div id="ui" class="ui">
+      </div>
+    </div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55});
+        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 json = {"3":[517],
+        //"4":[2065, 2067]};        
+        
+        var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1, adaptativeDisplay: false});
+        aladin.addMOC(moc);
+    });
+</script>
+</body>
+</html>

examples/al-moc-sdss9.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px">
+      <div id="ui" class="ui">
+      </div>
+    </div>
+<script type="module">
+    import A from '../src/js/A.js';
+    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, opacity: 1.0}, (moc) => {
+            // moc is ready
+            console.log(moc.contains(205.9019247, +2.4492764));
+            console.log(moc.contains(-205.9019247, +2.4492764));
+
+        });
+        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fillColor: '#aabbcc', opacity: 0.1, fill: true, lineWidth: 3});
+        var moc9 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=4&fmt=fits', {color: '#00ff00', opacity: 0.5, lineWidth: 3, perimeter: true});
+
+        aladin.addMOC(moc11);
+        aladin.addMOC(moc10);
+        aladin.addMOC(moc9);
+    });
+</script>
+</body>
+</html>

examples/al-moc-sky-fraction.html

@@ -0,0 +1,83 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M51', fov: 180, fullScreen: true});
+
+        var json = {
+            "3": [13, 24],
+            "4": [36, 37, 48, 49, 51, 87, 91, 93, 94, 100, 101, 112, 430, 1553, 1555, 
+              1556, 1558, 1564, 2576, 2577, 2579, 2585, 2587, 2618, 2704, 2706, 2712, 
+              2714, 2736, 2738, 2745, 2747, 2848],
+            "5": [156, 157, 200, 201, 203, 241, 244, 319, 341, 343, 359, 361, 362, 363, 
+              369, 370, 371, 380, 381, 382, 408, 409, 412, 413, 452, 453, 454, 456, 457, 
+              458, 464, 465, 468, 1710, 1711, 1724, 1725, 1726, 4463, 4474, 4475, 6209, 
+              6245, 10261, 10263, 10312, 10313, 10315, 10337, 10339, 10345, 10347, 
+              10433, 10435, 10436, 10437, 10438, 10441, 10443, 10444, 10446, 10465, 
+              10466, 10467, 10468, 10470, 10476, 10478, 10820, 10822, 10828, 10830, 
+              10852, 10854, 10860, 10862, 10948, 10950, 10956, 10958, 10959, 10977, 
+              10979, 10985, 10987, 10994, 11000, 11002, 11003, 11305, 11306, 11307, 
+              11400, 11401, 11402],
+            "6": [238, 239, 250, 251, 254, 255, 506, 535, 541, 612, 613, 615, 633, 636, 
+              637, 808, 809, 811, 916, 917, 960, 961, 963, 980, 981, 982, 1199, 1211, 
+              1213, 1214, 1215, 1256, 1258, 1259, 1262, 1263, 1274, 1275, 1363, 1369, 
+              1371, 1389, 1390, 1391, 1423, 1431, 1433, 1434, 1435, 1441, 1442, 1443, 
+              1473, 1474, 1475, 1532, 1533, 1534, 1640, 1641, 1642, 1656, 1657, 1660, 
+              1661, 1663, 1664, 1665, 1668, 1669, 1680, 1820, 1821, 1822, 1836, 1837, 
+              1838, 1840, 1842, 1876, 1880, 6826, 6827, 6829, 6830, 6831, 6838, 6839, 
+              6862, 6874, 6875, 6878, 6908, 6909, 6910, 7072, 17829, 17831, 17840, 
+              17842, 17843, 17846, 17847, 17848, 17849, 17890, 17914, 17915, 18241, 
+              18244, 18245, 18256, 18257, 18260, 24844, 24845, 24847, 24869, 24871, 
+              24877, 24912, 24944, 24946, 24954, 24976, 24977, 24988, 24989, 24991, 
+              25056, 25057, 25059, 25060, 41041, 41043, 41049, 41051, 41076, 41077, 
+              41257, 41280, 41281, 41282, 41288, 41314, 41315, 41320, 41321, 41322, 
+              41345, 41347, 41353, 41355, 41377, 41379, 41385, 41387, 41408, 41410, 
+              41416, 41418, 41448, 41450, 41727, 41729, 41731, 41737, 41756, 41757, 
+              41758, 41761, 41763, 41769, 41771, 41780, 41788, 41790, 41792, 41856, 
+              41857, 41859, 41886, 41908, 41910, 41916, 41918, 43101, 43103, 43125, 
+              43127, 43133, 43135, 43221, 43223, 43229, 43231, 43253, 43255, 43261, 
+              43262, 43263, 43284, 43286, 43292, 43294, 43316, 43318, 43324, 43326, 
+              43422, 43444, 43446, 43452, 43454, 43605, 43607, 43612, 43613, 43615, 
+              43637, 43639, 43645, 43796, 43798, 43804, 43806, 43828, 43829, 43830, 
+              43904, 43905, 43907, 43912, 43913, 43915, 43937, 43939, 43947, 43968, 
+              43970, 43971, 44004, 44006, 45217, 45219, 45242, 45584, 45586, 45592, 
+              45612, 45613, 45696],
+            "7": [1706, 1707, 1786, 1787, 1790, 1791, 1962, 1963, 1966, 1967, 1978, 1979, 
+              1982, 1983, 3240, 3241, 3243, 3652, 3653, 3655, 3848, 3849, 3932, 3933, 
+              3934, 4841, 4842, 4843, 5085, 5086, 5087, 5481, 5482, 5483, 5533, 5534, 
+              5535, 5689, 5690, 5691, 6140, 6141, 6142, 6576, 6577, 6578, 6648, 6649, 
+              6651, 6664, 6665, 6724, 6725, 7364, 7365, 7366, 7456, 7457, 7458, 7476, 
+              7477, 7479, 7680, 7681, 27314, 27315, 27341, 27342, 27343, 27350, 27351, 
+              27453, 27454, 27455, 27516, 27518, 27519, 27644, 27645, 27646, 98302, 
+              98303, 99384, 99385, 99387, 99656, 99658, 99680, 99682, 99688, 99690, 
+              99691, 99808, 99809, 99810, 99916, 99917, 99919, 165036, 165037, 165039, 
+              165248, 165250, 165251, 165292, 165293, 165294, 165768, 165770, 165771, 
+              166920, 166956, 166957, 166959, 167433, 167434, 167435, 167504, 167506, 
+              167512, 167514, 167536, 167538, 167539, 172373, 172375, 172381, 172383, 
+              173648, 173650, 173656, 173658, 173680, 173682, 173683, 174417, 174419, 
+              174425, 174427, 175324, 175326, 175327, 175624, 175625, 175627, 175780, 
+              175781, 175783, 175928, 175930, 175931, 176028, 176030, 176031, 180873, 
+              180874, 180875, 180960, 180962, 180963, 182376, 182377, 182378, 182456, 
+              182457, 182458, 182788, 182789, 182790, 182792, 182793, 182794],
+            "8": [667684, 667685, 667686],
+            "9": [2670748, 2670749],
+            "10": [10683000, 10683001]
+          };
+          var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1});
+
+          aladin.addMOC(moc);
+
+          const skyFraction = moc.skyFraction();
+          console.assert(0.027083873748779297==skyFraction, "Sky fraction ", skyFraction, "not equal to", 0.02708387374877929);
+    });
+</script>
+
+</body>
+</html>

examples/al-moment.html

@@ -0,0 +1,28 @@
+<!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(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                survey: 'https://alasky.cds.unistra.fr/hips-cube-services/moment/hips:httpsalasky.cds.unistra.fr;MaNGA_DR13_Ncube%7Cmoment_order:0',
+                projection: 'AIT', // set a projection
+                fov: 0.1, // initial field of view in degrees
+                target: '135.0668750000, 40.2981666667', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+    });
+</script>
+
+</body>
+</html>

examples/al-multi-catalog-table.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5, showContextMenu: true});
+
+        const cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'});
+        const cat2 = A.catalogFromVizieR('I/312/sample', 'M 45', 0.5, {onClick: 'showTable'});
+
+        aladin.addCatalog(cat);
+        aladin.addCatalog(cat2);
+
+        aladin.select();
+    });
+</script>
+</body>
+</html>

examples/al-multiple-instances.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="al1" style="width: 500px; height: 500px">
+</div>
+<div id="al2" style="width: 500px; height: 500px">
+</div>
+  
+<script type="module">
+  import A from '../src/js/A.js';
+  let al1;
+  let al2;
+  A.init.then(() => {
+      // Start up Aladin Lite
+      al1 = A.aladin('#al1', {target: 'M51', fov: 0.3, survey: 'P/DSS2/color', fullScreen: false});
+      al2 = A.aladin('#al2', {target: 'M51', fov: 180, survey: 'P/PanSTARRS/DR1/z', fullScreen: false});
+  });
+</script>
+
+</body>
+</html>

examples/al-multiple-surveys.html

@@ -0,0 +1,17 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showCooGrid: true, fov: 180});
+    });
+</script>
+
+</body>
+</html>

examples/al-no-cors.html

@@ -0,0 +1,26 @@
+<!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(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {
+            fov: 360,
+            target: '0 0',
+            fullScreen: true,
+            survey: "P/GLIMPSE360",
+            showCooGrid: true,
+        });
+    });
+</script>
+
+</body>
+</html>

examples/al-not-found.html

@@ -0,0 +1,26 @@
+<!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(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {
+            fov: 360,
+            target: '0 0',
+            fullScreen: true,
+            survey: ["fsdfsd", "jfjfj", "jfj", "P/allWISE/color"],
+            showCooGrid: true,
+        });
+    });
+</script>
+
+</body>
+</html>

examples/al-obscore.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: '14 18 16.868 +56 44 29.37', fov: 360, projection: 'AIT', showContextMenu: true});
+
+        const c1 = A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable'});
+        aladin.addCatalog(c1);
+
+        const c2 = A.catalogFromVizieR('B/assocdata/obscore', '14 18 16.868 +56 44 29.37', 100, {onClick: 'showTable', limit: 1000});
+        aladin.addCatalog(c2);
+    });
+</script>
+</body>
+</html>

examples/al-onames-labels.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M1', fov: 0.3});
+        var cat = A.catalogFromURL('http://cdsxmatch.u-strasbg.fr/QueryCat/QueryCat?catName=SIMBAD&mode=cone&pos=M1&r=50arcmin&format=votable&limit=3000', {sourceSize:12, color: '#cc99bb', displayLabel: true, labelColumn: 'main_id', labelColor: '#ae4', labelFont: '9px sans-serif'});
+        aladin.addCatalog(cat);
+    });
+</script>
+</body>
+</html>

examples/al-overlay-image-layer.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></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: 110, target: 'galactic center'});
+        aladin.setBaseImageLayer('https://alasky.cds.unistra.fr/MellingerRGB');
+        aladin.setOverlayImageLayer(aladin.createImageSurvey('VTSS', 'VTSS', 'https://alasky.u-strasbg.fr/VTSS/Ha', 'galactic', 3, {imgFormat: 'png'}));
+        aladin.getOverlayImageLayer().setOpacity(0.5);
+    });
+</script>
+</body>
+</html>

examples/al-perseverence.html

@@ -0,0 +1,28 @@
+<!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(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {
+            fov: 360,
+            target: '0 0',
+            fullScreen: true,
+            survey: "CDS/P/Mars/Pan-Perseverance-PIA24422",
+            showCooGrid: true,
+            showCooGridControl: true,
+        });
+        aladin.setProjection('MER');
+  });
+</script>
+
+</body>
+</html>

examples/al-polyline.html

@@ -0,0 +1,22 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'Gamma Cas', fov: 10});
+
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 2});
+        aladin.addOverlay(overlay);
+        overlay.add(A.polyline([ [2.29452158, 59.14978110], [10.12683778, 56.53733116], [14.1772154, 60.7167403], [21.45396446, 60.23528403], [28.59885697, 63.67010079] ]));
+    });
+</script>
+</body>
+</html>

examples/al-remove-source.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<div id='aladin-statsDiv'></div>
+<div id='buttons'></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        var a = A.aladin('#aladin-lite-div', {target: '03 47 00.00 +24 07 00.0', survey: 'P/DSS2/color', zoom: 2, showReticle: false});
+        var cat = A.catalog({color: 'red', onClick: 'showTable'});
+        var originalSources = [
+            A.source(56.87115, 24.10514, {name: 'Alcyone'}),
+            A.source(57.29673, 24.13671, {name: 'Pleione'}),
+            A.source(56.58156, 23.94836, {name: 'Merope'}),
+            A.source(56.45669, 24.36775, {name: 'Maia'}),
+            A.source(56.21890, 24.11334, {name: 'Electra'}),
+            A.source(57.29059, 24.05342, {name: 'Atlas'}),
+            A.source(56.30207, 24.46728, {name: 'Taygeta'})
+        ];
+        
+        cat.addSources(originalSources);
+        
+        a.addCatalog(cat);
+        
+        // add button to remove sources
+        var buttonsDiv = document.getElementById('buttons');
+        for (var k=0; k<originalSources.length; k++) {
+            var s = originalSources[k];
+            var btn = document.createElement('button');
+            btn.innerHTML = 'Delete ' + s.data.name;
+            btn.value = k; // we store the index in the originalSources array
+            buttonsDiv.appendChild(btn);
+        }
+        
+        document.querySelectorAll('button').forEach(function(item) {
+            item.addEventListener('click', function() {
+                cat.remove(originalSources[parseInt(this.value)]);
+            });
+        });
+    });
+</script>
+</body>
+</html>

examples/al-response-div.html

@@ -0,0 +1,17 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 1});
+    });
+</script>
+
+</body>
+</html>

examples/al-reverse-longitude.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', { target: '0 0', cooFrame: 'j2000d', showCooGrid: true, fov: 90, fullScreen: true});
+        var mars = aladin.createImageSurvey('Mars', 'Mars', 'https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21/', 'j2000', 5);
+        aladin.setImageSurvey(mars);
+
+        var c = document.createElement('canvas'); c.width = c.height = 11; var ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(5, 5, 4, 0, 2 * Math.PI, false); ctx.closePath(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.stroke();
+
+        var geoFeatures = A.catalog({shape: c, labelColumn: 'name', displayLabel: true, labelColor: '#fff', labelFont: '14px sans-serif'});
+        aladin.addCatalog(geoFeatures);
+
+        geoFeatures.addSources(A.source(226.2, 18.65, {name: 'Olympus Mons'}));
+        geoFeatures.addSources(A.source(70.5, -42.4, {name: 'Hellas Planitia'}));
+        geoFeatures.addSources(A.source(250.4, 40.5, {name: 'Alba Mons'}));
+        geoFeatures.addSources(A.source(-59.2, -13.9, {name: 'Valles Marineris'}));
+        geoFeatures.addSources(A.source(147.21, 25.02, {name: 'Elysium Mons'}));
+        geoFeatures.addSources(A.source(316.0, -49.7, {name: 'Argyre Basin'}));
+        geoFeatures.addSources(A.source(32.53, 70, {name: 'Vastitas Borealis'}));
+        geoFeatures.addSources(A.source(-112.58, 1.57, {name: 'Tharsis Montes'}));
+        geoFeatures.addSources(A.source(298, 25, {name: 'Outflow channels'}));
+        geoFeatures.addSources(A.source(30, 19.79, {name: 'Arabia Terra'}));
+        geoFeatures.addSources(A.source(70.5, -42.4, {name: 'Hellas Basin'}));
+        geoFeatures.addSources(A.source(280, 45, {name: 'Tempe Terra'}));
+        geoFeatures.addSources(A.source(87, 12.9, {name: 'Isidis Basin'}));
+        geoFeatures.addSources(A.source(117.5, 46.7, {name: 'Utopia Basin'}));
+        geoFeatures.addSources(A.source(350, -45, {name: 'Noachis Terra'}));
+
+        var landingSites = A.catalog({sourceSize: 16}); aladin.addCatalog(landingSites);
+
+        landingSites.addSources([A.marker(-47.95, 22.27, {popupTitle: 'Viking 1', popupDesc: 'Landing date: July 20, 1976 11:53:06'})]);
+        landingSites.addSources([A.marker(-125.7, 68.22, {popupTitle: 'Phoenix', popupDesc: 'Landing date: May 25, 2008 23:53:44 UTC'})]);
+        landingSites.addSources([A.marker(-33.22, 19.13, {popupTitle: 'Pathfinder', popupDesc: 'Landing date: July 4, 1997 16:56:55 UTC'})]);
+        landingSites.addSources([A.marker(354.4734, -1.9462, {popupTitle: 'Opportunity', popupDesc: 'Landing date: January 25, 2004, 05:05 UTC'})]);
+        landingSites.addSources([A.marker(-225.71, 47.64, {popupTitle: 'Viking 2', popupDesc: 'Landing date: September 3, 1976 22:37:50'})]);
+        landingSites.addSources([A.marker(175.472636, -14.5684, {popupTitle: 'Spirit', popupDesc: 'Landing date: January 4, 2004, 04:35 UTC '})]);
+        landingSites.addSources([A.marker(137.4417, -4.5895, {popupTitle: 'Curiosity', popupDesc: 'Landing date: August 6, 2012, 05:17 UTC '})]) 
+        //aladin.setOverlayImageLayer(aladin.createImageSurvey('VTSS', 'VTSS', '', 'galactic', 3, {imgFormat: 'png'}));
+    });
+</script>
+</body>
+</html>

examples/al-rightclick-fits.html

@@ -0,0 +1,18 @@
+<!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(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 1});
+        aladin.setImageSurvey(aladin.createImageSurvey('Panstarrs', 'Panstarrs', 'http://alasky.cds.unistra.fr/Pan-STARRS/DR1/g/', 'equatorial', 11, {imgFormat: 'fits', colormap: "redtemperature"}));
+    });
+</script>
+
+</body>
+</html>

examples/al-sdc2.html

@@ -0,0 +1,30 @@
+<!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(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                projection: 'AIT', // set a projection
+                fov: 360, // initial field of view in degrees
+                target: '110.82730 -73.45471', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+
+        const sdc2 = aladin.newImageSurvey('https://alasky.cds.unistra.fr/hips-cube-services/compute/hips:httpsalasky.cds.unistra.fr;SKA-demo;hips;CDS_P_SKA-DC_v2%7Cexpr:s6540_6580');
+        aladin.setOverlayImageLayer(sdc2);
+    });
+</script>
+
+</body>
+</html>

examples/al-set-colormap.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<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';
+    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");
+        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
+    });
+</script>
+
+</body>
+</html>

examples/al-simbad-density.html

@@ -0,0 +1,21 @@
+<!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(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {fov: 180.0, fullScreen: true, survey: "CDS/P/DM/simbad-biblio/allObjects", target: '12 25 41.512 +12 48 47.2', showCooGrid: true});
+        aladin.setProjection("TAN");
+        aladin.getBaseImageLayer().setColormap("redtemperature")
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-simbad-pointer.html

@@ -0,0 +1,20 @@
+<!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(() => {
+        // Start up Aladin Lite
+        aladin = A.aladin('#aladin-lite-div', {target: '12 25 41.512 +12 48 47.2', fov: 0.8, showSimbadPointerControl: true});
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-snippet.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.umd.cjs" charset="utf-8"></script>
+
+<script type="text/javascript">
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>

examples/al-stcs-footprints.html

@@ -0,0 +1,21 @@
+
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    A.init.then(() => {
+        // Start up Aladin Lite
+        let aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5});
+        // 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', {onClick: 'showTable'}));
+    });
+</script>
+</body>
+</html>

examples/al-stephan-quintet.html

@@ -0,0 +1,30 @@
+<!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(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                projection: 'AIT', // set a projection
+                fov: 0.1, // initial field of view in degrees
+                target: '338.98958 33.96', // initial target
+                cooFrame: 'equatorial', // set galactic frame
+                showCooGrid: true, // set the grid
+                fullScreen: true,
+            }
+        );
+
+        aladin.setOverlayImageLayer("https://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI")
+    });
+</script>
+
+</body>
+</html>

examples/al-vr.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/"
+      }
+    }
+</script>
+<body>
+
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+    
+    <script type="module">
+        import A from '../src/js/A.js';
+        import * as THREE from 'three';
+
+        let aladin;
+        A.init.then(() => {
+            aladin = A.aladin(
+                '#aladin-lite-div',
+                {
+                    survey: 'P/DSS2/color', // set a survey
+                    projection: 'TAN', // set a projection
+                    fov: 70, // initial field of view in degrees
+                    target: '338.98958 33.96', // initial target
+                    cooFrame: 'equatorial', // set galactic frame
+                    showCooGrid: true, // set the grid
+                    fullScreen: true,
+                    vr: {animation: animate.bind(renderer)},
+                }
+            );
+
+            //aladin.setOverlayImageLayer("https://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI")
+            initScene(aladin.view.imageCanvas);
+            aladin.setRenderer(renderer);
+        });
+
+        let renderer = null;
+        let scene = null;
+        let camera = null;
+        let cubeMesh = null;
+        // let controls = null;
+
+        /**
+         * Initializes a 3D scene, camera, and renderer for virtual reality (VR).
+         *
+         * @param {HTMLCanvasElement} canvas - The HTML canvas element to render the
+         * 3D scene
+         */
+        function initScene(canvas) {
+            scene = new THREE.Scene();
+
+            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
+            scene.add(camera);
+
+            renderer = new THREE.WebGLRenderer({canvas: canvas, context: canvas.getContext('webgl2', {xrCompatible: true})}); // NOTE Une différence ici
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.xr.enabled = true;
+            // renderer.xr.setReferenceSpaceType('local');
+            renderer.autoClear = false;
+
+            const light = new THREE.PointLight(0xffffff, 10);
+            light.position.set(0, 2, 1);
+            scene.add(light);
+
+            const planeGeometry = new THREE.PlaneGeometry(10, 10);
+            const planeMaterial = new THREE.MeshPhongMaterial({ color: 0xff00ff });
+            const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
+            planeMesh.position.set(0, -1, 0);
+            planeMesh.rotation.x = -Math.PI / 2;
+            scene.add(planeMesh);
+            
+            const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
+            const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
+            cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
+            cubeMesh.position.set(0, 0, -2);
+            scene.add(cubeMesh);
+        }
+        
+        /**
+         * Function to animate the 3D scene and rendering it.
+         */
+        function animate() {
+            cubeMesh.rotation.x += 0.001;
+            cubeMesh.rotation.y += 0.001;
+
+            renderer.render( scene, camera );
+        }
+
+        // /**
+        //  * Initializes a WebGL2 context and handles potential errors.
+        //  */
+        // function initWebGL2() {
+        //     // canvas = aladin.view.imageCanvas;
+        //     canvas = document.getElementById(aladin.view.imageCanvas);
+        //     // gl = canvas.getContext("webgl2", { alpha: true });
+        //     gl = canvas.getContext('webgl2');
+        //     if (!gl) { // If the gl didn't create properly
+        //         alert('This browser doesn\'t support WebGL2');
+        //         return;
+        //     }
+
+        // }
+
+    </script>
+
+</body>
+</html>

examples/al-zoom-meerkat.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<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';
+
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: ["P/Mellinger"], cooFrame: 'galactic', fov: 1000, fullScreen: true, showCooGrid: true});
+        const meerkat = aladin.newImageSurvey('P/MeerKAT/Galactic-Centre-1284MHz-StokesI', {imgFormat: 'fits'});
+        meerkat.setColormap('magma', {stretch: "asinh"})
+        aladin.setOverlayImageLayer(meerkat)
+        aladin.setProjection("MOL")
+
+        let fov = 1000;
+        setInterval(function zoom() {
+            if (fov > 1) {
+                fov *= 0.995;
+                aladin.setFov(fov);
+            }
+        }, 10);
+
+        setInterval(function () {
+            const t = Date.now() / 1000;
+            let lambda = Math.sin(t) * 0.5 + 0.5;
+
+            let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132;
+            let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759;
+            meerkat.setCuts(cut0, cut1);
+        })
+    });
+</script>
+
+</body>
+</html>

examples/al-zoomchanged.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+        aladin.setProjection('AIT');
+
+        aladin.on("zoomChanged", () => {
+            console.log("zoomChanged")
+        })
+        aladin.on("positionChanged", ({ra, dec, dragging}) => {
+            console.log("positionChanged", ra, dec)
+        })
+
+        aladin.on('rightClickMove', (x, y) => {
+            console.log("right click move", x, y)
+        })
+    });
+</script>
+
+</body>
+</html>