test: unbind the layer shaders

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

.github/workflows/codemeta_validator.yml

@@ -1,16 +0,0 @@
-name: test_codemeta
-
-on:
-  release:
-  workflow_dispatch:
-  pull_request:
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    container:
-      image: gitlab-registry.in2p3.fr/escape2020/wp3/eossr:v1.0
-    steps:
-      - uses: actions/checkout@v3
-      - name: validate codemeta
-        run: eossr-metadata-validator codemeta.json

.github/workflows/npm-publish.yml

@@ -1,25 +1,15 @@
 # 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: Node.js Package
+name: Publish to NPM
 
 on:
   release:
     types: [created]
+  workflow_dispatch:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-      - run: npm test
-
   publish-npm:
-    needs: build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -27,7 +17,19 @@ jobs:
         with:
           node-version: 16
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
+      - 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}}
+          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

@@ -8,4 +8,9 @@ package-lock.json
 src/core/target/
 src/core/Cargo.lock
 
-AladinLiteAssets.tar.gz
+aladin-lite*.tgz
+
+.vscode
+
+deploy.sh
+deploy-beta.sh

README.md

@@ -6,7 +6,7 @@ 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/).
 
@@ -14,7 +14,13 @@ More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/Alad
 
 Aladin Lite v3 is out! Please play with [Aladin Lite v3 at this link](https://aladin.u-strasbg.fr/AladinLite).
 
-If you want to embed it into your webpage, please include [the javascript script of Aladin Lite v3](https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js) into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:
+## Embed it into your projects
+
+You can embed Aladin Lite it into your webpages in two ways
+
+### The vanilla way
+
+Please include [the javascript script of Aladin Lite v3](https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js) into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:
 
 ```js
 <!doctype html>
@@ -39,6 +45,37 @@ If you want to embed it into your webpage, please include [the javascript script
 </html>
 ```
 
+### Using the aladin lite NPM package
+
+First, install it with npm:
+
+```npm i aladin-lite```
+
+Second, you can use it that way:
+
+```js
+<!doctype html>
+<html>
+<head>
+    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from 'aladin-lite';
+
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
+    });
+</script>
+
+</body>
+</html>
+```
+
 ## Goals of v3
 
 - Rust/WebGL new core integration
@@ -62,7 +99,6 @@ If you want to embed it into your webpage, please include [the javascript script
 ## 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
 
@@ -93,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
@@ -116,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>

codemeta.json

@@ -1,83 +0,0 @@
-{
-    "@context": "https://doi.org/10.5063/schema/codemeta-2.0",
-    "@type": "SoftwareSourceCode",
-    "license": "https://spdx.org/licenses/GPL-3.0",
-    "codeRepository": "https://github.com/cds-astro/aladin-lite",
-    "dateCreated": "2013-05-01",
-    "datePublished": "2013-05-01",
-    "dateModified": "2023-01-31",
-    "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
-    "name": "Aladin Lite",
-    "version": "3.1.1",
-    "softwareVersion": "3.1.1",
-    "description": "An astronomical HiPS visualizer in the browser.",
-    "identifier": "10.5281/zenodo.7638833",
-    "applicationCategory": "Astronomy, Visualization",
-    "funding": "ESCAPE 824064",
-    "referencePublication": "http://aspbooks.org/publications/532/007.pdf",
-    "readme": "https://aladin.cds.unistra.fr/AladinLite/doc/",
-    "releaseNotes": "https://aladin.cds.unistra.fr/AladinLite/doc/#release-notes",
-    "funder": {
-        "@type": "Organization",
-        "name": "European Commission Framework Programme Horizon 2020 Research and Innovation action"
-    },
-    "keywords": [
-        "IVOA",
-        "Astronomy"
-    ],
-    "programmingLanguage": [
-        "Rust",
-        "Javascript"
-    ],
-    "relatedLink": [
-        "https://aladin.cds.unistra.fr/"
-    ],
-    "author": [
-        {
-            "@type": "Person",
-            "@id": "https://orcid.org/0000-0002-7123-773X",
-            "givenName": "Matthieu",
-            "familyName": "Baumann",
-            "email": "matthieu.baumann@unistra.fr",
-            "affiliation": {
-                "@type": "Organization",
-                "name": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
-            }
-        },
-        {
-            "@type": "Person",
-            "@id": "https://orcid.org/0000-0001-5818-2781",
-            "givenName": "Thomas",
-            "familyName": "Boch",
-            "email": "thomas.boch@astro.unistra.fr",
-            "affiliation": {
-                "@type": "Organization",
-                "name": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
-            }
-        }
-    ],
-    "maintainer": [
-        {
-            "@type": "Person",
-            "@id": "https://orcid.org/0000-0002-7123-773X",
-            "givenName": "Matthieu",
-            "familyName": "Baumann",
-            "email": "matthieu.baumann@unistra.fr",
-            "affiliation": {
-                "@type": "Organization",
-                "name": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
-            }
-        }, 
-        {
-            "@type": "Person",
-            "@id": "https://orcid.org/0000-0001-5818-2781",
-            "givenName": "Thomas",
-            "familyName": "Boch",
-            "email": "thomas.boch@astro.unistra.fr",
-            "affiliation": {
-                "@type": "Organization",
-                "name": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
-            }
-        }
-    ]
-}

deploy-dbg.sh

@@ -1,12 +0,0 @@
-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/*"'
-# Copy the dist files
-scp dist/* $USER_ALADIN@aladin:~/al-tmp
-
-ssh $USER_ALADIN@aladin 'sg hips -c "rm -rf /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d && 
-cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d && 
-rm -rf /home/thomas.boch/AladinLite/www/api/v3/beta && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/21-02-2023d /home/thomas.boch/AladinLite/www/api/v3/beta"'

deploy.sh

@@ -1,11 +0,0 @@
-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/22-12-2022 && 
-mkdir -p /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
-cp $HOME/al-tmp/* /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 && 
-rm -rf /home/thomas.boch/AladinLite/www/api/v3/latest && 
-ln -s /home/thomas.boch/AladinLite/www/api/v3/22-12-2022 /home/thomas.boch/AladinLite/www/api/v3/latest"'

examples/al-aas225.html

@@ -4,14 +4,12 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });
-        aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {colormap: "sinebow", 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

@@ -6,10 +6,8 @@
 
 <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/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});

examples/al-additive-blend.html

@@ -4,24 +4,21 @@
 </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<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");
-    console.log(hscGreenSurvey)
     hscGreenSurvey.setColormap("green", { stretch: "asinh" });
     hscGreenSurvey.setCuts(-0.2186, 5.30322);
 
-    const HSCRedSurvey = aladin.createImageSurvey('HSC-r', "HSC red", "CDS/P/HSC/DR2/deep/r", null, null, {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
-    const HSCBlueSurvey = aladin.createImageSurvey('HSC-b', "HSC blue", "CDS/P/HSC/DR2/deep/z", null, null, {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+    const HSCRedSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/r', {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
+    const HSCBlueSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
 
-    aladin.setOverlayImageLayer('HSC-r', 'hsc red layer');
-    aladin.setOverlayImageLayer('HSC-b', 'hsc blue layer');
+    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/r', 'hsc red layer');
+    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/z', 'hsc blue layer');
 });
 </script>
 </body>

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

@@ -16,10 +16,8 @@
     </div>
 </div>
 
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-<!-- <script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script> -->
-
-<script type="text/javascript">
+<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})

examples/al-animation.html

@@ -7,10 +7,8 @@
 
 <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

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

examples/al-big-circle.html

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

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

@@ -7,10 +7,8 @@
 
 <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

@@ -7,10 +7,8 @@
 
 <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-cat-read-only.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M50', fov: 0.7});
+
+        var cat1 = A.catalog({readOnly: true});
+        aladin.addCatalog(cat1);
+        cat1.addSources(A.source(105.69239256, -8.45235969));
+        cat1.addSources(A.source(105.70779763, -8.31350997));
+        cat1.addSources(A.source(105.74242906, -8.34776709));
+
+        var cat2 = A.catalog({readOnly: false});
+        aladin.addCatalog(cat2);
+        cat2.addSources(A.source(105.79239256, -8.45235969));
+        cat2.addSources(A.source(105.90779763, -8.31350997));
+        cat2.addSources(A.source(105.54242906, -8.34776709));
+    });
+</script>
+
+</body>
+</html>

examples/al-catalog-filter.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+Show sources with proper motion greater than:
+<input id='slider' style='vertical-align:middle;width:60vw;' step='1' min='0' max='10' type='range' value='0'>
+<span id='pmVal'  >0 mas/yr</span><br><br><div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var pmThreshold = 0;
+
+        var slider = document.getElementById('slider');
+        slider.oninput = function() {
+            pmThreshold = this.value;
+            $('#pmVal').html(pmThreshold + ' mas/yr');
+            cat.reportChange();
+        }
+
+        var myFilterFunction = function(source) {
+            var hpmag  = parseFloat(source.data['Hpmag']);
+            if (isNaN(hpmag)) {
+                return false;
+            }
+            return hpmag>pmThreshold;
+        }
+
+        aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5});
+        var cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable', filter: myFilterFunction});
+        aladin.addCatalog(cat);
+    });
+</script>
+
+</body>
+</html>
+
+

examples/al-catalog-hips-filter.html

@@ -12,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;
@@ -37,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

@@ -6,13 +6,11 @@
 
 <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

@@ -6,10 +6,8 @@
 
 <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/PanSTARRS/DR1/color-z-zg-g", fov:1.5, target: "NGC 7318B"});

examples/al-chinavo.html

@@ -6,10 +6,8 @@
 
 <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-coronelli.html

@@ -14,14 +14,16 @@
         <!--link rel="stylesheet" href="css/grids-responsive-min.css"-->
         <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons.css">
         <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/buttons-core.css">
-    
+
         <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no"-->
         <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     </head>
 <body>
 
 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-
+<script type="text/javascript">
+    let aladin;
+</script>
 <div id="aladin-lite-div" style="width:100vw;height:100vh;">
     <div id="calibCircle" style="display: none;"></div>
     <div id="explain" class="aladin-box"></div>
@@ -79,15 +81,15 @@
 	<div id="coo_epoca">
             <a class="pure-button nav-button nav-goto" href="#">De Epoca</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 	<div id="coo_legende">
             <a class="pure-button nav-button nav-goto" href="#">Légende</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 	<div id="coo_orion">
             <a class="pure-button nav-button nav-goto" href="#">Orion</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 	<div id="coo_magellan">
             <a class="pure-button nav-button nav-goto" href="#">Magellan</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
@@ -95,7 +97,7 @@
 	<div id="coo_halley">
             <a class="pure-button nav-button nav-goto" href="#">Halley</a><br>
             &nbsp;→&nbsp;<a class="pure-button nav-button nav-flyto" href="#">Move</a>
-	</div>	
+	</div>
 </div>
 
 <style type="text/css"> .aladin-reticleColor { color: rgb(178, 50, 178); font-weight:bold;} </style>
@@ -104,27 +106,27 @@
     html, body {
         height: 100%;
     }
-    
+
     body {
         display: flex;
         flex-direction: column;
     }
-    
+
     .aladin-zoomControl {
         top: 10% !important;
         left: unset !important;
         right: 4px !important;
     }
-    
+
     .aladin-zoomControl a {
         font-size: 24px !important;
         padding: 22px !important;
     }
-    
+
     #aladin{
         flex: 1 1 0;
     }
-    
+
     #explain {
         padding: 4px;
         top: 30%;
@@ -132,51 +134,51 @@
         font-size: 11pt;
         overflow: scroll;
     }
-    
+
     #explain tbody tr:nth-child(even) {
         background-color: #ffffff;
     }
-    
+
     #explain tbody tr:nth-child(odd) {
         background-color: #ccdaeb;
     }
-    
+
     #layersControlLeft {
         padding: 10px;
         right: unset;
         left: 4px;
         top: 20vh;
     }
-    
+
     #layersCL2 {
         padding: 10px;
         right: unset;
         left: 4px;
         top: 90vh;
     }
-    
+
     #layersControlRight {
         padding: 4px;
         left: unset;
         right: 4px;
         top: 25vh;
     }
-    
+
     #layersControlLeft, #layersControlRight, #layersCL2 input {
         margin-right: 5px;
     }
-    
+
     .img-hips {
         padding: 5px;
         margin: 5px;
     }
-    
+
     #opacity-slider {
         -webkit-appearance: none !important;  /* Override default CSS styles */
         width: 220px;
         height: 25px;
     }
-    
+
     #opacity-slider::-webkit-slider-thumb {
       -webkit-appearance: none !important; /* Override default look */
       appearance: none;
@@ -185,18 +187,18 @@
       background: #4CAF50; /* Green background */
       cursor: pointer; /* Cursor on hover */
     }
-    
+
     #opacity-slider::-moz-range-thumb {
       width: 25px; /* Set a specific slider handle width */
       height: 25px; /* Slider handle height */
       background: #4CAF50; /* Green background */
       cursor: pointer; /* Cursor on hover */
     }
-    
+
     .aladin-box {
         font-size: 12px !important;
     }
-    
+
     #calibCircle {
         position: fixed;
         border: 8px solid red;
@@ -208,27 +210,25 @@
         z-index: 1000;
         pointer-events: none;
     }
-    
+
     .pure-table {
         font-size: small;
     }
-    
+
     .catcoro {
         display: inline;
         vertical-align: middle;
     }
-    
+
     .coro-star {
         vertical-align: middle;
     }
-    
-
 </style>
 
-<script type="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 });
@@ -360,7 +360,7 @@
         });
 
         // listen to click on objects
-        aladin.on('objectClicked', function(source) {
+        aladin.on('objectClicked', function(source, xyMouseCoords) {
             var html = '<table class="pure-table">';
 
             if (curSelectedSource != null) {
@@ -497,7 +497,7 @@
                     deleteOverlayTimeout = undefined;
                 }
                 isDrawing = true;
-                points.push([drawOverlayCanvas.relMouseCoords(e)]);
+                points.push([Utils.relMouseCoords(drawOverlayCanvas.imageCanvas, e)]);
             });
 
 
@@ -506,10 +506,10 @@
             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();
-                
+
                 for (var k=0; k<points.length; k++) {
                     drawOverlayCtx.moveTo(points[k][0].x, points[k][0].y);
                     for (var i = 1; i < points[k].length; i++) {

examples/al-displayFITS.html

@@ -7,16 +7,15 @@
 
 <div id="aladin-lite-div" style="width:440px;height:300px"></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: "icrs", fullScreen: true});
 
         aladin.displayFITS(
-            'http://data.astropy.org/tutorials/FITS-images/HorseHead.fits', // url of the fits file
-            //'fits/HorseHead.fits',
+            //'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',
@@ -24,11 +23,13 @@
                 minCut: 5000,
                 maxCut: 17000,
             }, // no optional params
-            (ra, dec, fov, image) => { // ra, dec and fov are centered around the fits image
+            (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>

examples/al-displayJPG.html

@@ -16,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

@@ -6,9 +6,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -6,14 +6,12 @@
 
 <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, showContextMenu: true});
 
       aladin.addCatalog(A.catalogFromSimbad('M 82', 0.1, {onClick: 'showTable'}));
       aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));

examples/al-easy-access-vizier.html

@@ -5,14 +5,15 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<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

@@ -6,14 +6,12 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -7,21 +7,20 @@
 <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;
+        aladin.on('objectHovered', function(object, xyMouseCoords) {
             if (object) {
-                msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
+                msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
             }
             else {
                 msg = 'No object hovered';
@@ -29,14 +28,22 @@
             $('#infoDiv').html(msg);
         });
 
+        aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
+            if (object) {
+                msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
+            }
+            $('#infoDiv').html(msg);
+        });
+
         // define function triggered when an object is clicked
         var objClicked;
-        aladin.on('objectClicked', function(object) {
-            var msg;
+        aladin.on('objectClicked', function(object, xyMouseCoords) {
             if (object) {
                 objClicked = object;
-            object.select();
-                msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec;
+                object.select();
+                msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+                    + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
             }
             else {
                 objClicked.deselect();
@@ -47,4 +54,4 @@
     });
 </script>
 </body>
-</html>
+</html>

examples/al-fill-polygon.html

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

examples/al-footprints.html

@@ -6,14 +6,12 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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([
@@ -22,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, xyMouseCoords) => {
+            console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("objectClicked", (object, xyMouseCoords) => {
+            console.log("object clicked catched: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("footprintHovered", (footprint, xyMouseCoords) => {
+            console.log("footprint hovered catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+        aladin.on("objectHoveredStop", (object, xyMouseCoords) => {
+            console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
+        })
+
+        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 100, {onClick: 'showTable', limit: 1000});
+        aladin.addCatalog(cat);
     });
 </script>
 </body>

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') {
@@ -88,7 +88,7 @@
         });
 
         // listen to click on objects
-        aladin.on('objectClicked', function (source) {
+        aladin.on('objectClicked', function (source, xyMouseCoords) {
             var html = '<table class="pure-table">';
 
             if (curSelectedSource != null) {
@@ -142,4 +142,4 @@
         });
     });
 </script>
-</html>
+</html>

examples/al-gotoobject.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1, showCooGridControl:true});
+        aladin.gotoObject('M 10');
+    });
+</script>
+</body>
+</html>

examples/al-gw.html

@@ -4,18 +4,16 @@
 </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+ <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});
+        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.5, lineWidth: 1, adaptativeDisplay: true});
-        var moc_0_95 = A.MOCFromURL("./gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 1, adaptativeDisplay: true});
-        var moc_0_5 = A.MOCFromURL("./gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 1, adaptativeDisplay: false});
-        var moc_0_2 = A.MOCFromURL("./gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 1, adaptativeDisplay: false});
+        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);

examples/al-hips-from-url.html

@@ -6,10 +6,8 @@
 
 <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

@@ -6,10 +6,8 @@
 
 <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-image-layer-by-name.html

@@ -6,10 +6,8 @@
 
 <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

@@ -6,10 +6,8 @@
 
 <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

@@ -6,10 +6,8 @@
 
 <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

@@ -5,10 +5,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -5,10 +5,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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-features.html

@@ -6,9 +6,8 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -5,13 +5,11 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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);
         

examples/al-moc-isophot.html

@@ -7,10 +7,8 @@
       <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

@@ -7,10 +7,8 @@
       <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});
@@ -23,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

@@ -7,21 +7,19 @@
       <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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -8,10 +8,8 @@
 <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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -7,10 +7,8 @@
 
 <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-not-found.html

@@ -7,10 +7,8 @@
 
 <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-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

@@ -4,10 +4,8 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -4,10 +4,10 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="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'});

examples/al-perseverence.html

@@ -6,10 +6,9 @@
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+<script type="module">
+  import A from '../src/js/A.js';
 
-<script type="text/javascript">
   let aladin;
   A.init.then(() => {
         // Start up Aladin Lite

examples/al-polyline.html

@@ -5,10 +5,10 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="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

@@ -5,10 +5,10 @@
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
 <div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 <div id='buttons'></div>
 
-<script type="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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -4,10 +4,8 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

examples/al-set-colormap.html

@@ -6,13 +6,12 @@
 <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',
+        // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
         // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
         aladin.getBaseImageLayer().setColormap("cubehelix");
         //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );

examples/al-simbad-density.html

@@ -4,9 +4,8 @@
 </head>
 <body>
 <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

@@ -5,10 +5,8 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="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

@@ -5,7 +5,7 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>
+<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;

examples/al-stcs-footprints.html

@@ -5,22 +5,16 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
-<script type="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']))
-            });
-        }));
+        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

@@ -5,10 +5,9 @@
 <body>
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id='aladin-statsDiv'></div>
-<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
-
-<script type="text/javascript">
+<script type="module">
+    import A from '../src/js/A.js';
+    
     let aladin;
     A.init.then(() => {
         aladin = A.aladin(

examples/al-vr.html

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

examples/al-zoom-meerkat.html

@@ -6,9 +6,10 @@
 <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});

examples/al-zoomchanged.html

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