Create npm-publish.yml

2026-04-29 12:19:03 -07:00 · 2023-02-01 09:04:50 +01:00
2057 changed files with 6783 additions and 10698 deletions
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -1,15 +1,25 @@
 # 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
+name: Node.js Package

 on:
  release:
    types: [created]
-  workflow_dispatch:

 jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
  publish-npm:
+    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
@@ -17,19 +27,7 @@ jobs:
        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
+      - run: npm ci
+      - run: npm publish
        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,35 +0,0 @@
-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 test
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,4 @@ package-lock.json
 src/core/target/
 src/core/Cargo.lock

-AladinLiteAssets.tar.gz
+AladinLiteSrc.tar.gz
--- a/README.md
+++ b/README.md
@@ -14,13 +14,7 @@ More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/Alad

 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:
+If you want to embed it into your webpage, 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>
@@ -45,37 +39,6 @@ Please include [the javascript script of Aladin Lite v3](https://aladin.cds.unis
 </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
@@ -99,6 +62,7 @@ Second, you can use it that way:
 ## Source code

 Source code is available in the ``src`` directory.
+Precisely, the core is implemented in Rust and can be found in ``src/core``.

 ## Licence

@@ -129,7 +93,7 @@ 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
@@ -152,7 +116,7 @@ and run the tests

 ```bash
 cd src/core
-cargo test --features webgl2
+cargo test
 ```

 To generate the Rust backend API documentation
--- a/deploy-dbg.sh
+++ b/deploy-dbg.sh
@@ -1,15 +1,14 @@
 USER_ALADIN="matthieu.baumann"
 DATEUPLOAD="$(date '+%Y-%m-%d')"

-ssh $USER_ALADIN@aladin 'sg hips -c "mkdir -p /home/matthieu.baumann/al-tmp && rm -rf /home/matthieu.baumann/al-tmp/*"'
+ssh $USER_ALADIN@aladin 'sg hips -c "mkdir -p $HOME/al-tmp && rm -rf $HOME/al-tmp/*"'
 # Copy the dist files
 scp dist/* $USER_ALADIN@aladin:~/al-tmp
-# Copy the tgz
-cp aladin-l*.tgz aladin-lite.tgz
-scp aladin-lite.tgz $USER_ALADIN@aladin:~/al-tmp
+# Copy the tar.gz
+scp AladinLiteSrc.tar.gz $USER_ALADIN@aladin:~/al-tmp

-ssh $USER_ALADIN@aladin "sg hips -c 'rm -rf /home/thomas.boch/AladinLite/www/api/v3/d$DATEUPLOAD && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/d$DATEUPLOAD && 
-cp /home/matthieu.baumann/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/d$DATEUPLOAD && 
+ssh $USER_ALADIN@aladin 'sg hips -c "rm -rf /home/thomas.boch/AladinLite/www/api/v3/8-12-2022d && 
+mkdir -p /home/thomas.boch/AladinLite/www/api/v3/8-12-2022d && 
+cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/8-12-2022d && 
 rm -rf /home/thomas.boch/AladinLite/www/api/v3/beta && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/d$DATEUPLOAD /home/thomas.boch/AladinLite/www/api/v3/beta'"
+ln -s /home/thomas.boch/AladinLite/www/api/v3/8-12-2022d /home/thomas.boch/AladinLite/www/api/v3/beta"'
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,16 +1,11 @@
 USER_ALADIN="matthieu.baumann"
 DATEUPLOAD="$(date '+%Y-%m-%d')"

-ssh $USER_ALADIN@aladin 'sg hips -c "mkdir -p /home/matthieu.baumann/al-tmp && rm -rf /home/matthieu.baumann/al-tmp/*"'
-# Copy the dist files
-# For compatibility with the docs, rename the UMD file into aladin.js
-scp dist/aladin.umd.cjs $USER_ALADIN@aladin:~/al-tmp/aladin.js
-# Copy the tgz
-cp aladin-l*.tgz aladin-lite.tgz
-scp aladin-lite.tgz $USER_ALADIN@aladin:~/al-tmp
+ssh $USER_ALADIN@aladin 'sg hips -c "mkdir -p $HOME/al-tmp && rm -rf $HOME/al-tmp/*"'
+scp dist/* $USER_ALADIN@aladin:~/al-tmp

-ssh $USER_ALADIN@aladin "sg hips -c 'rm -rf /home/thomas.boch/AladinLite/www/api/v3/$DATEUPLOAD && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/$DATEUPLOAD && 
-cp /home/matthieu.baumann/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/$DATEUPLOAD && 
+ssh $USER_ALADIN@aladin 'sg hips -c "rm -rf /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
+mkdir -p /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
+cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
 rm -rf /home/thomas.boch/AladinLite/www/api/v3/latest && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/$DATEUPLOAD /home/thomas.boch/AladinLite/www/api/v3/latest'"
+ln -s /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 /home/thomas.boch/AladinLite/www/api/v3/latest"'
--- a/examples/al-ESO-outreach.html
+++ b/examples/al-ESO-outreach.html
--- a/examples/al-HST-outreach.html
+++ b/examples/al-HST-outreach.html
--- a/examples/al-aas225.html
+++ b/examples/al-aas225.html
@@ -1,11 +1,19 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });
--- a/examples/al-adass2022.html
+++ b/examples/al-adass2022.html
@@ -1,19 +1,24 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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});
+        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: false, 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"});
+        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'});
        
        aladin.setOverlayImageLayer("CFHT", "CFHT");
        aladin.setOverlayImageLayer("Nircam", "Nircam");
--- a/examples/al-additive-blend.html
+++ b/examples/al-additive-blend.html
@@ -4,21 +4,22 @@
 </head>
 <body>
    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
 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.changeImageFormat("fits");
+    HSCGreenSurvey.setColor([0, 1.0, 0, 1.0], { stretch: "asinh" });

-    let hscGreenSurvey = aladin.getBaseImageLayer();
-    hscGreenSurvey.setImageFormat("fits");
-    hscGreenSurvey.setColormap("green", { stretch: "asinh" });
-    hscGreenSurvey.setCuts(-0.2186, 5.30322);
+    const HSCRedSurvey = aladin.createImageSurvey('HSC-r', "HSC red", "CDS/P/HSC/DR2/deep/r", null, null, {imgFormat: 'fits', color: [1.0, 0.0, 0.0, 1.0], additive: true, stretch: "asinh"});
+    const HSCBlueSurvey = aladin.createImageSurvey('HSC-b', "HSC blue", "CDS/P/HSC/DR2/deep/z", null, null, {imgFormat: 'fits', color: [0.0, 0.0, 1.0, 1.0], additive: true, stretch: "asinh"});

-    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');
+    aladin.setOverlayImageLayer('HSC-r', 'hsc red layer');
+    aladin.setOverlayImageLayer('HSC-b', 'hsc blue layer');
 });
 </script>
 </body>
--- a/examples/al-animation-CS-CDS-2022.html
+++ b/examples/al-animation-CS-CDS-2022.html
@@ -16,16 +16,19 @@
    </div>
 </div>

-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<!-- <script type="text/javascript" src="https://aladin.u-strasbg.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', {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'})
+        const gaiaFlux = aladin.createImageSurvey('P/DM/flux-G/I/355/gaiadr3', "GaiaDR3GFlux", null, null, null)
        aladin.setBaseImageLayer(gaiaFlux)
-        gaiaFlux.setCuts(3e5, 1e8)
-
+        gaiaFlux.setOptions({'imgFormat': 'fits', 'stretch': 'log'})
+        gaiaFlux.setCuts([3e5, 1e8])
+            
        aladin.setProjection('MOL')


@@ -303,7 +306,7 @@

                let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132
                let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759
-                meerkat.setCuts(cut0, cut1)
+                meerkat.setCuts([cut0, cut1])
            }

        } 
--- a/examples/al-animation.html
+++ b/examples/al-animation.html
@@ -1,14 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 <!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: "P/SPITZER/color", cooFrame: 'galactic', fov: 5});
--- a/examples/al-artifact.html
+++ b/examples/al-artifact.html
@@ -1,29 +0,0 @@
-<!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>
--- a/examples/al-badbaselayer.html
+++ b/examples/al-badbaselayer.html
@@ -4,10 +4,12 @@
 </head>
 <body>
    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-    <script type="module">
-        import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
 A.init.then(() => {
-    let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
+    let aladin = A.aladin('#aladin-lite-div', {projection: "AIT"});
    let hsc = aladin.newImageSurvey("P/HSC/DR2/deep/g", {colormap:"Purples", imgFormat: "fits"});
    aladin.setBaseImageLayer(hsc);

--- a/examples/al-cat-custom-draw-function.html
+++ b/examples/al-cat-custom-draw-function.html
@@ -1,14 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 <!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-cat-custom-shape.html
+++ b/examples/al-cat-custom-shape.html
@@ -1,14 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 <!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.3});
--- a/examples/al-catalog-hips-filter.html
+++ b/examples/al-catalog-hips-filter.html
@@ -1,6 +1,9 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<link rel="stylesheet" href="./layers.css" />-->
 </head>
 <body>

@@ -12,8 +15,10 @@ 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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        var pmThreshold = 0;
@@ -35,7 +40,7 @@ Show sources with proper motion greater than:
            return totalPm>pmThreshold;
        }
        
-        aladin = A.aladin('#aladin-lite-div', {target: 'gal center',fov: 150, showContextMenu: true});
+        aladin = A.aladin('#aladin-lite-div', {target: 'gal center',fov: 150});
        var hips = A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/I/345/gaia2', {onClick: 'showTable', color: 'orange', name: 'Gaia', filter: myFilterFunction});
         aladin.addCatalog(hips);
        
--- a/examples/al-catalog-hips-shape.html
+++ b/examples/al-catalog-hips-shape.html
@@ -1,42 +0,0 @@
-<!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>
-
-
--- a/examples/al-catalog-hips.html
+++ b/examples/al-catalog-hips.html
@@ -1,16 +1,21 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55});
        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad'});
        aladin.addCatalog(hips);
    });
--- a/examples/al-cfht.html
+++ b/examples/al-cfht.html
@@ -1,27 +0,0 @@
-<!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>
--- a/examples/al-chinavo.html
+++ b/examples/al-chinavo.html
@@ -1,19 +1,23 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 </head>
 <body>

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

-<script type="module">
-  import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
  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"})
+        aladin.newImageSurvey('https://hips.china-vo.org/change2-moon-7m-dom', {imgFormat: 'fits', colormap: "redtemperature"})
      );
  });
 </script>
--- a/examples/al-coronelli.html
+++ b/examples/al-coronelli.html
@@ -15,6 +15,7 @@
        <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">
    
+        <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.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>
@@ -221,17 +222,19 @@
    .coro-star {
        vertical-align: middle;
    }
+    
+
 </style>

-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

+<script type="text/javascript">
    let aladin;
    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.createImageSurvey('illenoroC', 'illenoroC', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: false, minOrder: 3});
+        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: true, minOrder: 3});
        aladin.setImageSurvey('Coronelli');

        $('#layersControlLeft').show();
@@ -286,8 +289,8 @@
        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);
+            aladin.setOverlayImageLayer(this.id);
+            aladin.getOverlayImageLayer().setAlpha(0.75);
            $('#opacity-slider').val(0.75);
        }
        else {
@@ -374,6 +377,7 @@
            curSelectedSource = source;
            html += '<tbody>';
            if (source.catalog.name == 'Simbad') {
+                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>';
--- a/examples/al-displayFITS.html
+++ b/examples/al-displayFITS.html
@@ -2,34 +2,29 @@
 <!doctype html>
 <html>
 <head>
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+<!--<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" /> -->
 </head>
 <body>

 <div id="aladin-lite-div" style="width:440px;height:300px"></div>

-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {target: "m51", cooFrame: "icrs"});

        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);
-            },
+            './fits/HorseHead.fits'
+            //'./fits/neowise.fits'
+            //'./fits/M81_Ha_GaiaHduImg1.fits'
+            //'./fits/irac.fits'
+            //'./fits/cutout-CDS_P_HST_PHAT_F475W.fits',
+            //'./fits/FOCx38i0101t_c0f.fits'
+            //'./fits/ngc1316o.fits'
+            //'./fits/panstarrs-rotated-around-orion.fits'
        );
    });
 </script>
--- a/examples/al-displayJPG.html
+++ b/examples/al-displayJPG.html
@@ -2,6 +2,8 @@
 <!doctype html>
 <html>
 <head>
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+<!--<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" /> -->
 </head>
 <body>

@@ -16,8 +18,11 @@ Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.
 <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';
+<div id='aladin-statsDiv'></div>
+
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: "0 0", cooFrame: "gal"});
--- a/examples/al-distortion.html
+++ b/examples/al-distortion.html
@@ -6,8 +6,9 @@
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
--- a/examples/al-easy-access-simbad-ned.html
+++ b/examples/al-easy-access-simbad-ned.html
@@ -1,17 +1,21 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 </head>
 <body>

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

-<script type="module">
-  import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
  let aladin;
  A.init.then(() => {
      // Start up Aladin Lite
-      aladin = A.aladin('#aladin-lite-div', {target: 'M 82', fov: 0.25});
+      var aladin = A.aladin('#aladin-lite-div', {target: 'M 82', fov: 0.25});

      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'}));
--- a/examples/al-easy-access-vizier.html
+++ b/examples/al-easy-access-vizier.html
@@ -1,19 +1,23 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </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">
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5});
-        const cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'});
-        aladin.addCatalog(cat);
+        aladin.addCatalog(A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'}));
    });
 </script>
 </body>
--- a/examples/al-ellipse.html
+++ b/examples/al-ellipse.html
@@ -2,12 +2,20 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </head>
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-event-listeners.html
+++ b/examples/al-event-listeners.html
@@ -1,16 +1,23 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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 aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12});
        var cat = A.catalog({sourceSize: 20});
        aladin.addCatalog(cat);
        cat.addSources([A.source(83.784490, 09.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
@@ -27,13 +34,6 @@
            $('#infoDiv').html(msg);
        });

-        aladin.on('objectHoveredStop', function(object) {
-            if (object) {
-                msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
-            }
-            $('#infoDiv').html(msg);
-        });
-
        // define function triggered when an object is clicked
        var objClicked;
        aladin.on('objectClicked', function(object) {
--- a/examples/al-footprints.html
+++ b/examples/al-footprints.html
@@ -2,16 +2,24 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </head>
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
-        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2});
        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
        aladin.addOverlay(overlay);
        overlay.addFootprints([
@@ -20,22 +28,6 @@
            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) => {
-            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)
-        })
-
-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 100, {onClick: 'showTable', limit: 1000});
-        aladin.addCatalog(cat);
    });
 </script>
 </body>
--- a/examples/al-gaiadr3.html
+++ b/examples/al-gaiadr3.html
@@ -36,8 +36,8 @@
  </body>

  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-  <script type="module">
-    import A from '../src/js/A.js';
+  <script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+  <script type="text/javascript">
    $('#layersControl').show();

    var curSelectedSource = null;
@@ -75,6 +75,7 @@
            }
        });

+
        // listen changes on HiPS catalogues selection
        $('#overlay-form :checkbox').change(function () {
            var cat = hipsCats[this.value];
--- a/examples/al-gotoobject.html
+++ b/examples/al-gotoobject.html
@@ -1,16 +0,0 @@
-<!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>
--- a/examples/al-gw.html
+++ b/examples/al-gw.html
@@ -4,8 +4,10 @@
 </head>
 <body>
    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
- <script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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});
--- a/examples/al-hips-from-url.html
+++ b/examples/al-hips-from-url.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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'});
--- a/examples/al-hips-local.html
+++ b/examples/al-hips-local.html
@@ -1,21 +0,0 @@
-<!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 hsc = aladin.createImageSurvey('hips gaia', "hips gaia name", "./hips/gaia/", undefined, undefined, {colormap:"viridis"});
-        aladin.setBaseImageLayer(hsc);
-    });
-</script>
-
-</body>
-</html>
--- a/examples/al-hips-order-list.html
+++ b/examples/al-hips-order-list.html
@@ -1,19 +1,24 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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 densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/density-map', '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'});

--- a/examples/al-image-layer-by-name.html
+++ b/examples/al-image-layer-by-name.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
--- a/examples/al-init-custom-options.html
+++ b/examples/al-init-custom-options.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        var aladin = A.aladin(
--- a/examples/al-jwst.html
+++ b/examples/al-jwst.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin(
--- a/examples/al-load-votables-by-url.html
+++ b/examples/al-load-votables-by-url.html
@@ -1,12 +1,19 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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'}));        
--- a/examples/al-marker-creation.html
+++ b/examples/al-marker-creation.html
@@ -1,12 +1,19 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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/examples/al-mars-features.html
+++ b/examples/al-mars-features.html
@@ -6,8 +6,9 @@
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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'});
--- a/examples/al-mars.html
+++ b/examples/al-mars.html
@@ -1,15 +1,22 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>

 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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});
+        aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true});
        var mars = aladin.createImageSurvey('Mars', 'Mars', 'https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21/', 'j2000', 5);
        aladin.setImageSurvey(mars);
        
--- a/examples/al-moc-isophot.html
+++ b/examples/al-moc-isophot.html
@@ -1,14 +1,22 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/ISOPHOT/170'});
--- a/examples/al-moc-json.html
+++ b/examples/al-moc-json.html
@@ -1,14 +1,22 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55});
--- a/examples/al-moc-sdss9.html
+++ b/examples/al-moc-sdss9.html
@@ -1,14 +1,22 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color'});
--- a/examples/al-moc-sky-fraction.html
+++ b/examples/al-moc-sky-fraction.html
@@ -1,12 +1,16 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>

-<script type="module">
-  import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M51', fov: 180, fullScreen: true});
--- a/examples/al-moment.html
+++ b/examples/al-moment.html
@@ -1,12 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin(
--- a/examples/al-multi-catalog-table.html
+++ b/examples/al-multi-catalog-table.html
@@ -1,26 +0,0 @@
-<!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>
--- a/examples/al-multiple-instances.html
+++ b/examples/al-multiple-instances.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" /> -->
 </head>
 <body>
 <div id="al1" style="width: 500px; height: 500px">
@@ -8,8 +10,10 @@
 <div id="al2" style="width: 500px; height: 500px">
 </div>
  
-<script type="module">
-  import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
  let al1;
  let al2;
  A.init.then(() => {
--- a/examples/al-multiple-surveys.html
+++ b/examples/al-multiple-surveys.html
@@ -1,12 +1,15 @@
 <!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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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});
--- a/examples/al-no-cors.html
+++ b/examples/al-no-cors.html
@@ -1,26 +0,0 @@
-<!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>
--- a/examples/al-not-found.html
+++ b/examples/al-not-found.html
@@ -7,8 +7,10 @@

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

-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-obscore.html
+++ b/examples/al-obscore.html
@@ -1,23 +0,0 @@
-<!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/bmatthieu3/SKA-Discovery-Service-Mockup/aladin/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>
--- a/examples/al-onames-labels.html
+++ b/examples/al-onames-labels.html
@@ -1,11 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M1', fov: 0.3});
--- a/examples/al-overlay-image-layer.html
+++ b/examples/al-overlay-image-layer.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

-<script type="module">
-    import A from '../src/js/A.js';
-
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', fov: 110, target: 'galactic center'});
--- a/examples/al-perseverence.html
+++ b/examples/al-perseverence.html
@@ -1,14 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 </head>
 <body>

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

-<script type="module">
-  import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

+<script type="text/javascript">
  let aladin;
  A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-polyline.html
+++ b/examples/al-polyline.html
@@ -2,13 +2,19 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

-<script type="module">
-    import A from '../src/js/A.js';
-
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'Gamma Cas', fov: 10});
--- a/examples/al-remove-source.html
+++ b/examples/al-remove-source.html
@@ -1,14 +1,19 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
 <div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 <div id='buttons'></div>

-<script type="module">
-    import A from '../src/js/A.js';
+<script type="text/javascript">
    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'});
--- a/examples/al-response-div.html
+++ b/examples/al-response-div.html
@@ -1,12 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 1});
--- a/examples/al-reverse-longitude.html
+++ b/examples/al-reverse-longitude.html
@@ -1,11 +1,18 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="module">
-    import A from '../src/js/A.js';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-rightclick-fits.html
+++ b/examples/al-rightclick-fits.html
@@ -1,12 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 1});
--- a/examples/al-sdc2.html
+++ b/examples/al-sdc2.html
@@ -1,12 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin(
--- a/examples/al-set-colormap.html
+++ b/examples/al-set-colormap.html
@@ -1,18 +1,22 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<link rel="stylesheet" href="./layers.css" />-->
 </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';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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'
+        // 'rdbu', 'rdyibu', 'redtemperature', 'spectral', 'summer', 'viridis', 'yignbu' and 'yiorbr'
        aladin.getBaseImageLayer().setColormap("cubehelix");
        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
    });
--- a/examples/al-simbad-density.html
+++ b/examples/al-simbad-density.html
@@ -1,11 +1,15 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-simbad-pointer.html
+++ b/examples/al-simbad-pointer.html
@@ -1,12 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-snippet.html
+++ b/examples/al-snippet.html
@@ -5,7 +5,7 @@
 </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" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>

 <script type="text/javascript">
    let aladin;
--- a/examples/al-stcs-footprints.html
+++ b/examples/al-stcs-footprints.html
@@ -2,19 +2,31 @@
 <!doctype html>
 <html>
 <head>
+
+<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

-<script type="module">
-    import A from '../src/js/A.js';
-
+<script type="text/javascript">
+    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
        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'}));
+        const overlay = A.graphicOverlay({color: '#2345ee', lineWidth: 2});
+        aladin.addOverlay(overlay);
+
+        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {}, function(sources) {
+            sources.forEach(source => {
+                overlay.addFootprints(A.footprintsFromSTCS(source.data['s_region']))
+            });
+        }));
    });
 </script>
 </body>
--- a/examples/al-stephan-quintet.html
+++ b/examples/al-stephan-quintet.html
@@ -1,20 +1,24 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<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';
-    
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
    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
+                fov: 0.02, // initial field of view in degrees
                target: '338.98958 33.96', // initial target
                cooFrame: 'equatorial', // set galactic frame
                showCooGrid: true, // set the grid
--- a/examples/al-zoom-meerkat.html
+++ b/examples/al-zoom-meerkat.html
@@ -1,15 +1,17 @@
 <!doctype html>
 <html>
 <head>
+
+<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+<!--<link rel="stylesheet" href="./layers.css" />-->
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>

 <div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

-<script type="module">
-    import A from '../src/js/A.js';
-
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: ["P/Mellinger"], cooFrame: 'galactic', fov: 1000, fullScreen: true, showCooGrid: true});
@@ -32,7 +34,7 @@

            let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132;
            let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759;
-            meerkat.setCuts(cut0, cut1);
+            meerkat.setCuts([cut0, cut1]);
        })
    });
 </script>
--- a/examples/al-zoomchanged.html
+++ b/examples/al-zoomchanged.html
@@ -5,10 +5,9 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>

-<script type="module">
-    import A from '../src/js/A.js';
-
+<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
@@ -17,12 +16,8 @@
        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)
+        aladin.on("positionChanged", () => {
+            console.log("positionChanged")
        })
    });
 </script>
--- a/examples/hips/gaia/Moc.fits
+++ b/examples/hips/gaia/Moc.fits
--- a/examples/hips/gaia/Norder0/Dir0/Npix0.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix0.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix1.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix1.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix10.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix10.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix11.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix11.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix2.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix2.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix3.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix3.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix4.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix4.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix5.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix5.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix6.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix6.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix7.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix7.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix8.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix8.jpg
--- a/examples/hips/gaia/Norder0/Dir0/Npix9.jpg
+++ b/examples/hips/gaia/Norder0/Dir0/Npix9.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix0.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix0.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix1.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix1.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix10.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix10.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix11.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix11.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix12.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix12.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix13.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix13.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix14.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix14.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix15.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix15.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix16.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix16.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix17.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix17.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix18.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix18.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix19.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix19.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix2.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix2.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix20.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix20.jpg
--- a/examples/hips/gaia/Norder1/Dir0/Npix21.jpg
+++ b/examples/hips/gaia/Norder1/Dir0/Npix21.jpg
--- a/Show More
+++ b/Show More