Aladin lite: v3.2.0

Features:
- The use of vite as a project manager
- Enhance the MOC rendering perf and add possibility to draw the perimeter
- Many fixes such as the footprints rendering for all sky projections
- A line rasterizer enabling the thickness' grid line changes

.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

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

README.md

@@ -6,25 +6,75 @@ Aladin Lite is a Web application which enables HiPS visualization from the brows
 
 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/).
 
-This repo contains the Aladin Lite v3 source code and specifically the code of its new WebGL core written in Rust.
+# How to test it ?
 
-## How to test it ?
+Aladin Lite v3 is out! Please play with [Aladin Lite v3 at this link](https://aladin.u-strasbg.fr/AladinLite).
 
-You can test it [here](https://bmatthieu3.github.io/hips_webgl_renderer/test_moc_moll.html)!
+## Embed it into your projects
 
-For Safari users only: make sure to enable WebGL2 experimental feature and refresh the page once it is done. You can find it in the Developer Menu > Experimental Features > WebGL2.
-Safari will soon [enable WebGL2 by default](https://developer.apple.com/safari/technology-preview/release-notes/).
+You can embed Aladin Lite it into your webpages in two ways
 
-Do not hesitate to give a feedback either by sending a mail to:
+### The vanilla way
 
-- matthieu.baumann@astro.unistra.fr / baumannmatthieu0@gmail.com
-- thomas.boch@astro.unistra.fr
+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:
 
-or simply by posting an issue in this repo.
+```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
 
@@ -32,9 +82,7 @@ or simply by posting an issue in this repo.
 
 - Remove jQuery dep
 
-- UI dev, using VueJS, better support for smartphones
-
-- package the core and its API as a WASM npm package
+- UI dev, better support for smartphones
 
 - FITS images support
 
@@ -51,7 +99,6 @@ or simply by posting an issue in this repo.
 ## 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
 
@@ -82,7 +129,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
@@ -105,7 +152,7 @@ and run the tests
 
 ```bash
 cd src/core
-cargo test
+cargo test --features webgl2
 ```
 
 To generate the Rust backend API documentation

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>

deploy-dbg.sh

@@ -0,0 +1,15 @@
+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
+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
+
+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 && 
+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'"

deploy.sh

@@ -1,9 +1,16 @@
 USER_ALADIN="matthieu.baumann"
+DATEUPLOAD="$(date '+%Y-%m-%d')"
 
-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/2022-10-17 && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/2022-10-17 && 
-cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/2022-10-17/ && 
-rm /home/thomas.boch/AladinLite/www/api/v3/latest && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/2022-10-17/ /home/thomas.boch/AladinLite/www/api/v3/latest"'
+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 '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 && 
+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'"

examples/al-aas225.html

@@ -1,26 +1,15 @@
 <!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="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="text/javascript">
+<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.createImageSurvey('SDSS-DR9 r', 'SDSS-DR9 r', 'https://alasky.u-strasbg.fr/SDSS/DR9/band-r', 'equatorial', 10));
-        aladin.getBaseImageLayer().setColormap('rainbow', {stretch: 'Linear'});
+        aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {colormap: "rainbow", stretch: "Linear"}));
 
         var simbad = A.catalog({name: 'Simbad', sourceSize: 16, color: '#4050F0'});
         aladin.addCatalog(simbad);

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-allskyring.html

@@ -1,25 +0,0 @@
-<!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
-<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="text/javascript">
-    let aladin;
-    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'M51', fov: 360, fullScreen: true, showAllskyRing: true, allskyRingColor: '#eee', allskyRingWidth: 2.0});
-    });
-</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

@@ -1,20 +1,14 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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});

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-cat-custom-draw-function.html

@@ -1,20 +1,14 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-cat-custom-shape.html

@@ -1,20 +1,14 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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});

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

@@ -1,9 +1,6 @@
 <!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>
 
@@ -15,10 +12,8 @@ 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>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         var pmThreshold = 0;
@@ -40,7 +35,7 @@ Show sources with proper motion greater than:
             return totalPm>pmThreshold;
         }
         
-        aladin = A.aladin('#aladin-lite-div', {target: 'gal center',fov: 150});
+        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);
         

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

@@ -1,23 +1,16 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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});
+        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);
     });

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

@@ -1,24 +1,20 @@
 <!doctype html>
 <html>
 <head>
-
-<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="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="text/javascript">
+<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.createImageSurvey('Panstarrs', 'Panstarrs', 'http://hips.china-vo.org/change2-moon-7m-dom', 'equatorial', 9, {imgFormat: 'fits', colormap: "redtemperature"}));
+      aladin.setImageSurvey(
+        aladin.newImageSurvey('https://hips.china-vo.org/change2-moon-7m-dom', {imgFormat: 'png', colormap: "redtemperature"})
+      );
   });
 </script>
 

examples/al-coronelli.html

@@ -15,14 +15,15 @@
         <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>
 <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>
@@ -222,19 +223,17 @@
     .coro-star {
         vertical-align: middle;
     }
-    
-
 </style>
 
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<script type="module">
+    import A from '../src/js/A.js';
+    import {Utils} from '../src/js/Utils';
 
-<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, minOrder: 3});
-        aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: true, minOrder: 3});
+        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();
@@ -289,8 +288,8 @@
         if (!$(this).hasClass("selected")) {
             $('.img-hips').removeClass("selected pure-button-active");
             $(this).addClass("selected pure-button-active");
-            aladin.setOverlayImageLayer(this.id);
-            aladin.getOverlayImageLayer().setAlpha(0.75);
+            let survey = aladin.setOverlayImageLayer(this.id);
+            survey.setAlpha(0.75);
             $('#opacity-slider').val(0.75);
         }
         else {
@@ -377,7 +376,6 @@
             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>';
@@ -499,7 +497,7 @@
                     deleteOverlayTimeout = undefined;
                 }
                 isDrawing = true;
-                points.push([drawOverlayCanvas.relMouseCoords(e)]);
+                points.push([Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e)]);
             });
 
 
@@ -508,7 +506,7 @@
             e.preventDefault();
 
                 drawOverlayCtx.clearRect(0, 0, drawOverlayCtx.canvas.width, drawOverlayCtx.canvas.height);
-                points[points.length-1].push(drawOverlayCanvas.relMouseCoords(e));
+                points[points.length-1].push(Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e));
 
                 drawOverlayCtx.beginPath();
                 

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

@@ -2,8 +2,6 @@
 <!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>
 
@@ -18,11 +16,8 @@ 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>
 
-<div id='aladin-statsDiv'></div>
-
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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"});

examples/al-distortion.html

@@ -5,11 +5,9 @@
 </head>
 <body>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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'});

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

@@ -1,23 +1,17 @@
 <!doctype html>
 <html>
 <head>
-
-<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="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="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
       // Start up Aladin Lite
-      var aladin = A.aladin('#aladin-lite-div', {target: 'M 82', fov: 0.25});
+      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'}));

examples/al-easy-access-vizier.html

@@ -1,24 +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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <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>
+<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
 
-<script type="text/javascript">
+<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});
-        aladin.addCatalog(A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'}));
+        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>

examples/al-ellipse.html

@@ -2,27 +2,16 @@
 <!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="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="text/javascript">
+<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: 0.2});
+        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([

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

@@ -1,30 +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>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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});
+        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, 09.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
+        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) {
-            var msg;
             if (object) {
                 msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
             }
@@ -34,10 +27,16 @@
             $('#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) {
-            var msg;
             if (object) {
                 objClicked = object;
             object.select();

examples/al-footprints.html

@@ -2,27 +2,16 @@
 <!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="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="text/javascript">
+<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});
+        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([
@@ -31,6 +20,22 @@
             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>

examples/al-gaiadr3.html

@@ -14,11 +14,11 @@
     <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" checked>
+            <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">
+            <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">
@@ -36,8 +36,8 @@
   </body>
 
   <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-  <script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-  <script type="text/javascript">
+  <script type="module">
+    import A from '../src/js/A.js';
     $('#layersControl').show();
 
     var curSelectedSource = null;
@@ -50,7 +50,7 @@
         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(fluxMap);
+        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' }),
@@ -62,7 +62,7 @@
         aladin.addCatalog(hipsCats['simbad']);
         //aladin.addCatalog(hipsCats['gdr3']);
 
-        cmDensMapChanged = false;
+        //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') {
@@ -75,7 +75,6 @@
             }
         });
 
-
         // listen changes on HiPS catalogues selection
         $('#overlay-form :checkbox').change(function () {
             var cat = hipsCats[this.value];

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

@@ -1,20 +1,13 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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'});

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

@@ -1,26 +1,19 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/density-map', 'equatorial', 7, {imgFormat: 'fits'});
+        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'});
 

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

@@ -1,20 +1,13 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});

examples/al-init-custom-options.html

@@ -1,20 +1,13 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         var aladin = A.aladin(

examples/al-jwst.html

@@ -1,20 +1,13 @@
 <!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>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

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

@@ -1,20 +1,12 @@
 <!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="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="text/javascript">
+<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'}));        

examples/al-marker-creation.html

@@ -1,20 +1,12 @@
 <!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="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="text/javascript">
+<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});

examples/al-mars-ctx.html

@@ -1,57 +0,0 @@
-<!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="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="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});
-        var mars = aladin.createImageSurvey('Mars', 'Mars', 'http://hips-calculator1.astro.unistra.fr/boch/MARS-CTX/hips', 'j2000', 11);
-        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-mars-features.html

@@ -5,11 +5,9 @@
 </head>
 <body>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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'});

examples/al-mars.html

@@ -1,23 +1,15 @@
 <!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="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="text/javascript">
+<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});
+        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);
         
@@ -42,7 +34,8 @@
         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);
+        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'})]);

examples/al-moc-isophot.html

@@ -1,26 +1,14 @@
 <!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="aladin-lite-div" style="width: 1024px; height: 768px">
       <div id="ui" class="ui">
       </div>
     </div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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'});

examples/al-moc-json.html

@@ -1,26 +1,14 @@
 <!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="aladin-lite-div" style="width: 1024px; height: 768px">
       <div id="ui" class="ui">
       </div>
     </div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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});
@@ -33,6 +21,9 @@
         "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);
     });

examples/al-moc-sdss9.html

@@ -1,37 +1,25 @@
 <!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="aladin-lite-div" style="width: 1024px; height: 768px">
       <div id="ui" class="ui">
       </div>
     </div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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: 1, opacity: 1.0}, (moc) => {
+        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: '#aabbcc', opacity: 0.1, lineWidth: 1});
-        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: 1});
+        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);

examples/al-moc-sky-fraction.html

@@ -1,19 +1,12 @@
 <!doctype html>
 <html>
 <head>
-
-<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="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="text/javascript">
+<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});

examples/al-moment.html

@@ -1,20 +1,12 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

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

@@ -1,22 +1,15 @@
 <!doctype html>
 <html>
 <head>
-
-<!-- <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="al1" style="width: 500px; height: 500px">
 </div>
 <div id="al2" style="width: 500px; height: 500px">
 </div>
   
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+  import A from '../src/js/A.js';
   let al1;
   let al2;
   A.init.then(() => {

examples/al-multiple-surveys.html

@@ -1,20 +1,12 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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});

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

@@ -1,20 +1,11 @@
 <!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="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="text/javascript">
+<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});

examples/al-overlay-image-layer.html

@@ -1,24 +1,17 @@
 <!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="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="text/javascript">
+<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('P/Mellinger/color');
+        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);
     });

examples/al-perseverence.html

@@ -1,18 +1,14 @@
 <!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>
 
-<div id='aladin-statsDiv'></div>
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-<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
@@ -22,6 +18,7 @@
             fullScreen: true,
             survey: "CDS/P/Mars/Pan-Perseverance-PIA24422",
             showCooGrid: true,
+            showCooGridControl: true,
         });
         aladin.setProjection('MER');
   });

examples/al-polyline.html

@@ -2,23 +2,13 @@
 <!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="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="text/javascript">
+<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});

examples/al-remove-source.html

@@ -1,21 +1,14 @@
 <!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="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="text/javascript">
+<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'});

examples/al-response-div.html

@@ -1,20 +1,12 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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});

examples/al-reverse-longitude.html

@@ -1,20 +1,11 @@
 <!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="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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-rightclick-fits.html

@@ -1,20 +1,12 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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});

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

@@ -1,25 +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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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', 'rdyibu', 'redtemperature', 'spectral', 'summer', 'viridis', 'yignbu' and 'yiorbr'
+        // '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'} );
     });

examples/al-simbad-density.html

@@ -1,18 +1,11 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

examples/al-simbad-pointer.html

@@ -1,20 +1,12 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         // Start up Aladin Lite

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

@@ -2,34 +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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
-
 <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="text/javascript">
-    let aladin;
+<script type="module">
+    import A from '../src/js/A.js';
+
     A.init.then(() => {
         // Start up Aladin Lite
-        aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5});
-        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'])));
-            console.log(aladin.createFootprintsFromSTCS(source.data['s_region']));
-        }));
+        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>

examples/al-stephan-quintet.html

@@ -1,27 +1,20 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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.02, // initial field of view in degrees
+                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

examples/al-zoom-meerkat.html

@@ -1,35 +1,28 @@
 <!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>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
 <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="text/javascript">
+<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.createImageSurvey('P/MeerKAT/Galactic-Centre-1284MHz-StokesI', "Galactic-Centre-1284MHz-StokesI", null, null, null, {imgFormat: 'fits'});
-        meerkat.setColormap('magma', {stretch: "Asinh"})
+        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 = 360;
-        setTimeout(function zoom() {
-            fov *= 0.995;
-            aladin.setFov(fov);
-
+        let fov = 1000;
+        setInterval(function zoom() {
             if (fov > 1) {
-                setTimeout(zoom, 10)
+                fov *= 0.995;
+                aladin.setFov(fov);
             }
         }, 10);
 
@@ -39,7 +32,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>

examples/al-zoomchanged.html

@@ -4,12 +4,11 @@
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
 </head>
 <body>
-
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="text/javascript">
+<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});
@@ -18,8 +17,12 @@
         aladin.on("zoomChanged", () => {
             console.log("zoomChanged")
         })
-        aladin.on("positionChanged", () => {
-            console.log("positionChanged")
+        aladin.on("positionChanged", ({ra, dec, dragging}) => {
+            console.log("positionChanged", ra, dec)
+        })
+
+        aladin.on('rightClickMove', (x, y) => {
+            console.log("right click move", x, y)
         })
     });
 </script>