set to production

change the deploy
npm pack
2025-12-26 12:52:22 -08:00 · 2023-05-26 18:43:50 +02:00 · 2023-05-26 18:43:40 +02:00 · 2023-05-26 18:35:21 +02:00 · 2023-05-26 18:16:02 +02:00 · 2023-05-26 18:16:02 +02:00
132 changed files with 895 additions and 894 deletions
--- a/.github/workflows/npm-publish.yml
+++ b/.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}}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -0,0 +1,35 @@
+name: Run tests
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+  # Allows to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout branch ${{ github.head_ref }}"
+        uses: actions/checkout@v3
+      - name: "Setup node"
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: "Install the rust compiler"
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          source "$HOME/.cargo/env"
+      - name: "Install wasm-pack"
+        run: |
+          curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+      - name: "Install dependencies"
+        run: |
+          npm install
+      - name: "Build Aladin Lite"
+        run: |
+          npm run build
+      - name: "Run some tests"
+        run: npm test
--- a/README.md
+++ b/README.md
@@ -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
--- a/deploy-dbg.sh
+++ b/deploy-dbg.sh
@@ -1,12 +1,15 @@
 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/*"'
+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/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 && 
+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/21-02-2023d /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'"
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,11 +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 "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/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 && 
+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/22-12-2022 /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'"
--- a/examples/al-ESO-outreach.html
+++ b/examples/al-ESO-outreach.html
--- a/examples/al-HST-outreach.html
+++ b/examples/al-HST-outreach.html
--- a/examples/al-aas225.html
+++ b/examples/al-aas225.html
@@ -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';
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });
--- a/examples/al-adass2022.html
+++ b/examples/al-adass2022.html
@@ -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});
--- a/examples/al-additive-blend.html
+++ b/examples/al-additive-blend.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', {projection: "TAN", survey: "P/HSC/DR2/deep/g", target: '02 21 36.529 -05 31 20.16', fov: 0.1});

--- a/examples/al-animation-CS-CDS-2022.html
+++ b/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})
--- a/examples/al-animation.html
+++ b/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});
--- a/examples/al-artifact.html
+++ b/examples/al-artifact.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(
--- a/examples/al-badbaselayer.html
+++ b/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"});
--- a/examples/al-cat-custom-draw-function.html
+++ b/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
--- a/examples/al-cat-custom-shape.html
+++ b/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});
--- a/examples/al-catalog-hips-filter.html
+++ b/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;
--- a/examples/al-catalog-hips-shape.html
+++ b/examples/al-catalog-hips-shape.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: 'LMC', fov: 55, showContextMenu: true});
--- a/examples/al-catalog-hips.html
+++ b/examples/al-catalog-hips.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: 'LMC', fov: 55, showContextMenu: true});
--- a/examples/al-cfht.html
+++ b/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"});
--- a/examples/al-chinavo.html
+++ b/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
--- a/examples/al-coronelli.html
+++ b/examples/al-coronelli.html
@@ -221,13 +221,11 @@
    .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';

-<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
--- a/examples/al-displayFITS.html
+++ b/examples/al-displayFITS.html
@@ -7,9 +7,8 @@

 <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});
--- a/examples/al-displayJPG.html
+++ b/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"});
--- a/examples/al-distortion.html
+++ b/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'});
--- a/examples/al-easy-access-simbad-ned.html
+++ b/examples/al-easy-access-simbad-ned.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
--- a/examples/al-easy-access-vizier.html
+++ b/examples/al-easy-access-vizier.html
@@ -5,11 +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>
 <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});
--- a/examples/al-ellipse.html
+++ b/examples/al-ellipse.html
@@ -6,10 +6,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';
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-event-listeners.html
+++ b/examples/al-event-listeners.html
@@ -7,10 +7,8 @@
 <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, backgroundColor: 'rgb(120, 0, 0)'});
        var cat = A.catalog({sourceSize: 20});
--- a/examples/al-footprints.html
+++ b/examples/al-footprints.html
@@ -6,10 +6,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';
    let aladin;
    A.init.then(() => {
        // Start up Aladin Lite
--- a/examples/al-gaiadr3.html
+++ b/examples/al-gaiadr3.html
@@ -36,8 +36,8 @@
  </body>

  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
-  <script type="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;
--- a/examples/al-gotoobject.html
+++ b/examples/al-gotoobject.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';
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1, showCooGridControl:true});
--- a/examples/al-gw.html
+++ b/examples/al-gw.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';
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {projection: "TAN", target: '15 16 57.636 -60 55 7.49', showCooGrid: true, fov: 90});
--- a/examples/al-hips-from-url.html
+++ b/examples/al-hips-from-url.html
@@ -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'});
--- a/examples/al-hips-local.html
+++ b/examples/al-hips-local.html
@@ -6,11 +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>
-
-<!-- Load a hips located at ./hips/gaia/ -->
-<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'});
--- a/examples/al-hips-order-list.html
+++ b/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'});
--- a/examples/al-image-layer-by-name.html
+++ b/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'});
--- a/examples/al-init-custom-options.html
+++ b/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(
--- a/examples/al-jwst.html
+++ b/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(
--- a/examples/al-load-votables-by-url.html
+++ b/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'}));        
--- a/examples/al-marker-creation.html
+++ b/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});
--- a/examples/al-mars-features.html
+++ b/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'});
--- a/examples/al-mars.html
+++ b/examples/al-mars.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';
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true, showContextMenu: true});
--- a/examples/al-moc-isophot.html
+++ b/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'});
--- a/examples/al-moc-json.html
+++ b/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});
--- a/examples/al-moc-sdss9.html
+++ b/examples/al-moc-sdss9.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/Mellinger/color'});
--- a/examples/al-moc-sky-fraction.html
+++ b/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});
--- a/examples/al-moment.html
+++ b/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(
--- a/examples/al-multi-catalog-table.html
+++ b/examples/al-multi-catalog-table.html
@@ -5,11 +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>
 <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, showContextMenu: true});
--- a/examples/al-multiple-instances.html
+++ b/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(() => {
--- a/examples/al-multiple-surveys.html
+++ b/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});
--- a/examples/al-no-cors.html
+++ b/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
--- a/examples/al-not-found.html
+++ b/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
--- a/examples/al-obscore.html
+++ b/examples/al-obscore.html
@@ -5,18 +5,18 @@
 <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: '14 18 16.868 +56 44 29.37', fov: 5, showContextMenu: true});
+        aladin = A.aladin('#aladin-lite-div', {target: '14 18 16.868 +56 44 29.37', fov: 360, projection: 'AIT', showContextMenu: true});

        const c1 = A.catalogFromURL('https://raw.githubusercontent.com/bmatthieu3/SKA-Discovery-Service-Mockup/aladin/ObsCore/ObsCore_003.xml', {onClick: 'showTable'});
        aladin.addCatalog(c1);
+
+        const c2 = A.catalogFromVizieR('B/assocdata/obscore', '14 18 16.868 +56 44 29.37', 100, {onClick: 'showTable', limit: 1000});
+        aladin.addCatalog(c2);
    });
 </script>
 </body>
--- a/examples/al-onames-labels.html
+++ b/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});
--- a/examples/al-overlay-image-layer.html
+++ b/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'});
--- a/examples/al-perseverence.html
+++ b/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
--- a/examples/al-polyline.html
+++ b/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});
--- a/examples/al-remove-source.html
+++ b/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'});
--- a/examples/al-response-div.html
+++ b/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});
--- a/examples/al-reverse-longitude.html
+++ b/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
--- a/examples/al-rightclick-fits.html
+++ b/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});
--- a/examples/al-sdc2.html
+++ b/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(
--- a/examples/al-set-colormap.html
+++ b/examples/al-set-colormap.html
@@ -6,9 +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', {cooFrame: 'galactic', target: 'galactic center', survey: 'P/Finkbeiner'});
--- a/examples/al-simbad-density.html
+++ b/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
--- a/examples/al-simbad-pointer.html
+++ b/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
--- a/examples/al-snippet.html
+++ b/examples/al-snippet.html
@@ -5,7 +5,7 @@
 </head>
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.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;
--- a/examples/al-stcs-footprints.html
+++ b/examples/al-stcs-footprints.html
@@ -5,11 +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">
-    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});
--- a/examples/al-stephan-quintet.html
+++ b/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(
--- a/examples/al-zoom-meerkat.html
+++ b/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});
--- a/examples/al-zoomchanged.html
+++ b/examples/al-zoomchanged.html
@@ -6,9 +6,9 @@
 <body>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>

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

-<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
--- a/examples/index.html
+++ b/examples/index.html
@@ -5,33 +5,12 @@
 </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" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
 <script type="text/javascript">
    var aladin;
-
    A.init.then(() => {
-        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
-        aladin.setProjection('MOL');
-
-        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {
-            imgFormat: 'fits',
-            colormap: 'redtemperature',
-            stretch: 'Asinh'
-        });*/
-
-        /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
-        aladin.setProjection('AIT');
-
-        aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {imgFormat: "fits"});
-        aladin.getBaseImageLayer().setColormap('redtemperature', {stretch: "Asinh"});*/
-
        aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", fullScreen: true, expandLayersControl: true, cooFrame: 'equatorial', showProjectionControl: true, showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, showContextMenu: true});
-        //aladin.setProjection('AIT');
-
-        //let survey = aladin.createImageSurvey("P/PanSTARRS/DR1/g", null, null, null, null, );
-        /*aladin.setBaseImageLayer("P/PanSTARRS/DR1/g");
-        aladin.getBaseImageLayer().setColormap('viridis', {stretch: "Asinh"});*/

        // manage URL parameters
        const searchParams = new URL(document.location).searchParams;
@@ -62,8 +41,6 @@
                enabled: b
            });
        }
-
-
    });
 </script>

--- a/examples/index_es.html
+++ b/examples/index_es.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../dist/aladin.js';
+
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", fullScreen: true, expandLayersControl: true, cooFrame: 'equatorial', showProjectionControl: true, showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, showContextMenu: true});
+
+        // manage URL parameters
+        const searchParams = new URL(document.location).searchParams;
+        if (searchParams.has('baseImageLayer')) {
+            aladin.setBaseImageLayer(searchParams.get('baseImageLayer'));
+        }
+        if (searchParams.has('overlayImageLayer')) {
+            aladin.setOverlayImageLayer(searchParams.get('overlayImageLayer'));
+        }
+        if (searchParams.has('cooFrame')) {
+            aladin.setFrame(searchParams.get('cooFrame'));
+        }
+        if (searchParams.has('fov')) {
+            aladin.setFoV(parseFloat(searchParams.get('fov')));
+        }
+        if (searchParams.has('ra') && searchParams.has('dec')) {
+            aladin.gotoRaDec(parseFloat(searchParams.get('ra')), parseFloat(searchParams.get('dec')));
+        }
+        if (searchParams.has('showReticle')) {
+            aladin.showReticle(searchParams.get('showReticle')==='true');
+        }
+        if (searchParams.has('projection')) {
+            aladin.setProjection(searchParams.get('projection'));
+        }
+        if (searchParams.has('showCooGrid')) {
+            const b = searchParams.get('showCooGrid') === 'true';
+            aladin.view.setGridConfig({
+                enabled: b
+            });
+        }
+    });
+</script>
+
+</body>
+</html>
--- a/examples/index_umd.html
+++ b/examples/index_umd.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
+
+<script type="text/javascript">
+    A.init.then(() => {
+        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", fullScreen: true, expandLayersControl: true, cooFrame: 'equatorial', showProjectionControl: true, showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: false, showContextMenu: true});
+
+        // manage URL parameters
+        const searchParams = new URL(document.location).searchParams;
+        if (searchParams.has('baseImageLayer')) {
+            aladin.setBaseImageLayer(searchParams.get('baseImageLayer'));
+        }
+        if (searchParams.has('overlayImageLayer')) {
+            aladin.setOverlayImageLayer(searchParams.get('overlayImageLayer'));
+        }
+        if (searchParams.has('cooFrame')) {
+            aladin.setFrame(searchParams.get('cooFrame'));
+        }
+        if (searchParams.has('fov')) {
+            aladin.setFoV(parseFloat(searchParams.get('fov')));
+        }
+        if (searchParams.has('ra') && searchParams.has('dec')) {
+            aladin.gotoRaDec(parseFloat(searchParams.get('ra')), parseFloat(searchParams.get('dec')));
+        }
+        if (searchParams.has('showReticle')) {
+            aladin.showReticle(searchParams.get('showReticle')==='true');
+        }
+        if (searchParams.has('projection')) {
+            aladin.setProjection(searchParams.get('projection'));
+        }
+        if (searchParams.has('showCooGrid')) {
+            const b = searchParams.get('showCooGrid') === 'true';
+            aladin.view.setGridConfig({
+                enabled: b
+            });
+        }
+    });
+</script>
+
+</body>
+</html>
--- a/examples/open_all.sh
+++ b/examples/open_all.sh
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-for filename in *.html; do
-    google-chrome http://localhost:8080/${filename}
-done
--- a/package.json
+++ b/package.json
@@ -1,18 +1,28 @@
 {
  "homepage": "https://aladin.u-strasbg.fr/",
  "name": "aladin-lite",
+  "type": "module",
  "version": "3.1.0",
  "description": "An astronomical HiPS visualizer in the browser",
  "author": "Thomas Boch and Matthieu Baumann",
  "license": "GPL-3",
-  "main": "dist/aladin.js",
+  "module": "./dist/aladin.js",
+  "main": "./dist/aladin.js",
  "files": [
-    "dist/*"
+    "dist/aladin.js",
+    "dist/aladin.umd.cjs",
+    "dist/index.html"
  ],
+  "exports": {
+    ".": {
+      "import": "./dist/aladin.js"
+    }
+  },
  "repository": {
    "type": "git",
    "url": "https://github.com/cds-astro/aladin-lite"
  },
+  "email": "cds-question@unistra.fr",
  "keywords": [
    "astronomy",
    "visualization",
@@ -21,32 +31,27 @@
    "HiPS"
  ],
  "scripts": {
-    "package-tar": "tar -zcvf AladinLiteAssets.tar.gz dist/*",
-    "predeploy": "npm run build && npm run package-tar",
-    "deploy": "./deploy-dbg.sh",
-    "build": "webpack && sed \"s/\\\\.\\\\/\\\\.\\\\.\\\\/aladin\\\\.js/https:\\\\/\\\\/aladin.cds.unistra.fr\\\\/AladinLite\\\\/api\\\\/v3\\\\/latest\\\\/aladin.js/g\" examples/index.html > dist/index.html",
-    "serve": "webpack-dev-server"
+    "wasm": "wasm-pack build ./src/core --target web --release --out-name core -- --features webgl2",
+    "predeploy": "npm run build && npm pack",
+    "deploy": "./deploy.sh",
+    "build": "npm run wasm && vite build && cp examples/index.html dist/index.html",
+    "dev": "npm run build && vite",
+    "serve": "npm run dev",
+    "preview": "vite preview",
+    "test": "cd src/core && cargo test --release --features webgl2"
  },
  "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
-    "babel-loader": "^8.2.5",
    "npm": "^8.19.2",
-    "terser-webpack-plugin": "^5.3.3",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-glsl-loader": "^1.0.1",
-    "webpack-glsl-minify": "^1.5.0"
+    "terser": "^5.17.6",
+    "vite": "^4.3.8",
+    "vite-plugin-css-injected-by-js": "^3.1.1",
+    "vite-plugin-glsl": "^1.1.2",
+    "vite-plugin-top-level-await": "^1.3.1",
+    "vite-plugin-wasm": "^3.2.2",
+    "vite-plugin-wasm-pack": "^0.1.12"
  },
  "dependencies": {
    "autocompleter": "^6.1.3",
-    "babel-preset-es2015": "^6.24.1",
-    "css-loader": "^5.0.1",
-    "file-loader": "^6.1.0",
-    "jquery": "^3.6.1",
-    "style-loader": "^3.3.1",
-    "wasm-pack": "^0.10.3"
+    "jquery": "^3.6.1"
  }
 }
--- a/src/core/Cargo.toml
+++ b/src/core/Cargo.toml
@@ -30,7 +30,6 @@ serde = { version = "^1.0.59", features = ["derive"] }
 serde_json = "1.0"
 serde-wasm-bindgen = "0.4"
 console_error_panic_hook = "0.1.7"
-fitsrs = "0.2.7"
 enum_dispatch = "0.3.8"
 wasm-bindgen = "0.2.79"
 wasm-streams = "0.3.0"
@@ -39,7 +38,8 @@ al-core = { path = "./al-core" }
 al-task-exec = { path = "./al-task-exec" }
 al-api = { path = "./al-api" }
 mapproj = "0.3.0"
-wcs = "0.2.6"
+fitsrs = "0.2.9"
+wcs = "0.2.8"
 colorgrad = "0.6.2"
 image-decoder = { package = "image", version = "0.24.2", default-features = false, features = ["jpeg", "png"] }
 votable = "0.2.3"
@@ -119,7 +119,7 @@ codegen-units = 256
 rpath = false

 [profile.release]
-opt-level = 3
+opt-level = 'z'
 debug = false
 debug-assertions = false
 overflow-checks = false
--- a/src/core/al-api/src/color.rs
+++ b/src/core/al-api/src/color.rs
@@ -1,6 +1,6 @@
 use wasm_bindgen::prelude::*;

-#[wasm_bindgen(raw_module = "../src/js/Color")]
+#[wasm_bindgen(raw_module = "../../js/Color")]
 extern "C" {
    pub type Color;

--- a/src/core/src/app.rs
+++ b/src/core/src/app.rs
@@ -135,7 +135,6 @@ impl App {
            WebGl2RenderingContext::ONE,
            WebGl2RenderingContext::ONE,
        );
-
        // TODO: https://caniuse.com/?search=scissor is not supported for safari <= 14.1
        // When it will be supported nearly everywhere, we will need to uncomment this line to
        // enable it
--- a/src/glsl/webgl2/catalogs/aitoff.vert
+++ b/src/glsl/webgl2/catalogs/aitoff.vert
@@ -15,7 +15,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/catalogs/arc.vert
+++ b/src/glsl/webgl2/catalogs/arc.vert
@@ -14,7 +14,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/catalogs/healpix.vert
+++ b/src/glsl/webgl2/catalogs/healpix.vert
@@ -15,7 +15,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/catalogs/mercator.vert
+++ b/src/glsl/webgl2/catalogs/mercator.vert
@@ -14,7 +14,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/catalogs/mollweide.vert
+++ b/src/glsl/webgl2/catalogs/mollweide.vert
@@ -14,7 +14,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/catalogs/ortho.vert
+++ b/src/glsl/webgl2/catalogs/ortho.vert
@@ -14,7 +14,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/catalogs/tan.vert
+++ b/src/glsl/webgl2/catalogs/tan.vert
@@ -15,7 +15,7 @@ uniform vec2 kernel_size;
 out vec2 out_uv;
 out vec3 out_p;

-@include "../hips/projection.glsl"
+#include ../hips/projection.glsl;

 void main() {
    vec3 p = vec3(inv_model * vec4(center, 1.0f));
--- a/src/glsl/webgl2/colormaps/colormap.frag
+++ b/src/glsl/webgl2/colormaps/colormap.frag
@@ -8,7 +8,7 @@ out vec4 color;
 uniform sampler2D texture_fbo;
 uniform float alpha;

-@include "./colormap.glsl"
+#include ./colormap.glsl;

 void main() {
    float opacity = texture(texture_fbo, out_uv).r;
--- a/src/glsl/webgl2/fits/frag_isampler.glsl
+++ b/src/glsl/webgl2/fits/frag_isampler.glsl
@@ -11,7 +11,7 @@ in vec2 frag_uv;
 uniform isampler2D tex;
 uniform float opacity;

-@include "../hips/color.glsl"
+#include ../hips/color.glsl;

 void main() {
    ivec4 color = texture(tex, frag_uv);
--- a/src/glsl/webgl2/fits/frag_sampler.glsl
+++ b/src/glsl/webgl2/fits/frag_sampler.glsl
@@ -11,7 +11,7 @@ in vec2 frag_uv;
 uniform sampler2D tex;
 uniform float opacity;

-@include "../hips/color.glsl"
+#include ../hips/color.glsl;

 void main() {
    vec4 color = texture(tex, frag_uv);
--- a/src/glsl/webgl2/fits/frag_usampler.glsl
+++ b/src/glsl/webgl2/fits/frag_usampler.glsl
@@ -11,7 +11,7 @@ in vec2 frag_uv;
 uniform usampler2D tex;
 uniform float opacity;

-@include "../hips/color.glsl"
+#include ../hips/color.glsl;

 void main() {
    uvec4 color = texture(tex, frag_uv);
--- a/src/glsl/webgl2/hips/color.glsl
+++ b/src/glsl/webgl2/hips/color.glsl
@@ -17,10 +17,10 @@ uniform float size_tile_uv;

 uniform int tex_storing_fits;

-@include "../colormaps/colormap.glsl"
-@include "./transfer_funcs.glsl"
-@include "./tonal_corrections.glsl"
-@include "./hsv.glsl"
+#include ../colormaps/colormap.glsl;
+#include ./transfer_funcs.glsl;
+#include ./tonal_corrections.glsl;
+#include ./hsv.glsl;

 vec4 get_pixels(vec3 uv) {
    int idx_texture = int(uv.z);
--- a/src/glsl/webgl2/hips/color_i.glsl
+++ b/src/glsl/webgl2/hips/color_i.glsl
@@ -17,9 +17,9 @@ uniform float size_tile_uv;

 uniform int tex_storing_fits;

-@include "../colormaps/colormap.glsl"
-@include "./transfer_funcs.glsl"
-@include "./tonal_corrections.glsl"
+#include ../colormaps/colormap.glsl;
+#include ./transfer_funcs.glsl;
+#include ./tonal_corrections.glsl;

 ivec4 get_pixels(vec3 uv) {
    int idx_texture = int(uv.z);
--- a/src/glsl/webgl2/hips/color_u.glsl
+++ b/src/glsl/webgl2/hips/color_u.glsl
@@ -17,9 +17,9 @@ uniform float size_tile_uv;

 uniform int tex_storing_fits;

-@include "../colormaps/colormap.glsl"
-@include "./transfer_funcs.glsl"
-@include "./tonal_corrections.glsl"
+#include ../colormaps/colormap.glsl;
+#include ./transfer_funcs.glsl;
+#include ./tonal_corrections.glsl;

 uvec4 get_pixels(vec3 uv) {
    int idx_texture = int(uv.z);
--- a/src/glsl/webgl2/hips/rasterizer/color.frag
+++ b/src/glsl/webgl2/hips/rasterizer/color.frag
@@ -13,7 +13,7 @@ in float m_end;
 out vec4 out_frag_color;
 uniform float opacity;

-@include "../color.glsl"
+#include ../color.glsl;

 void main() {
    vec4 color_start = get_color_from_texture(frag_uv_start);
--- a/src/glsl/webgl2/hips/rasterizer/grayscale_to_colormap.frag
+++ b/src/glsl/webgl2/hips/rasterizer/grayscale_to_colormap.frag
@@ -12,7 +12,7 @@ in float m_end;

 out vec4 out_frag_color;

-@include "../color.glsl"
+#include ../color.glsl;

 uniform float opacity;

--- a/src/glsl/webgl2/hips/rasterizer/grayscale_to_colormap_i.frag
+++ b/src/glsl/webgl2/hips/rasterizer/grayscale_to_colormap_i.frag
@@ -12,7 +12,7 @@ in float m_end;

 out vec4 out_frag_color;

-@include "../color_i.glsl"
+#include ../color_i.glsl;

 uniform float opacity;

--- a/src/glsl/webgl2/hips/rasterizer/grayscale_to_colormap_u.frag
+++ b/src/glsl/webgl2/hips/rasterizer/grayscale_to_colormap_u.frag
@@ -13,7 +13,7 @@ in float m_end;

 out vec4 out_frag_color;

-@include "../color_u.glsl"
+#include ../color_u.glsl;

 uniform float opacity;

--- a/src/glsl/webgl2/hips/rasterizer/raster.vert
+++ b/src/glsl/webgl2/hips/rasterizer/raster.vert
@@ -23,7 +23,7 @@ uniform float czf;
 // current time in ms
 uniform float current_time;

-@include "../projection.glsl"
+#include ../projection.glsl;

 void main() {
    gl_Position = vec4(ndc_pos, 0.0, 1.0);
--- a/src/glsl/webgl2/hips/raytracer/color.frag
+++ b/src/glsl/webgl2/hips/raytracer/color.frag
@@ -19,8 +19,8 @@ struct Tile {
 uniform Tile textures_tiles[12];
 uniform int num_tiles;

-@include "../color.glsl"
-@include "./healpix.glsl"
+#include ../color.glsl;
+#include ./healpix.glsl;

 uniform float opacity;

--- a/src/glsl/webgl2/hips/raytracer/grayscale_to_colormap.frag
+++ b/src/glsl/webgl2/hips/raytracer/grayscale_to_colormap.frag
@@ -25,8 +25,8 @@ struct TileColor {
    bool found;
 };

-@include "../color.glsl"
-@include "./healpix.glsl"
+#include ../color.glsl;
+#include ./healpix.glsl;

 vec4 get_tile_color(vec3 pos) {
    HashDxDy result = hash_with_dxdy(0, pos.zxy);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matthieu BAUMANN	c71f573a97	set to production	2023-05-26 18:43:50 +02:00
Matthieu Baumann	aa9dfe632e	change the deploy	2023-05-26 18:43:40 +02:00
Matthieu Baumann	78ff815e9b	npm pack	2023-05-26 18:35:21 +02:00
Matthieu Baumann	ead34d5944	add formats info	2023-05-26 18:16:02 +02:00
Matthieu Baumann	d363882308	update workflow	2023-05-26 18:16:02 +02:00
Matthieu Baumann	a80bff6289	use the umd version for index.html	2023-05-26 18:16:02 +02:00
Matthieu Baumann	05ddeb8f7d	include only js files into the npm package	2023-05-26 18:16:02 +02:00
bmatthieu3	6cce07cdfd	update ci [ci skip]	2023-05-26 18:16:02 +02:00
bmatthieu3	eedb5b2bdf	npm install and source rustup	2023-05-26 18:16:02 +02:00
bmatthieu3	4cf94eaf1a	add some ci (TO TEST)	2023-05-26 18:16:02 +02:00
bmatthieu3	fbb4d760a4	remove webpack config file	2023-05-26 18:16:02 +02:00
bmatthieu3	30b87b2464	update readme	2023-05-26 18:16:02 +02:00
bmatthieu3	54bb0be16e	update readme with new npm usage instructions	2023-05-26 18:16:02 +02:00
bmatthieu3	4808f84b37	fix: import A when it is necessary	2023-05-26 18:16:02 +02:00
bmatthieu3	fa52c39d7c	update readme	2023-05-26 18:16:02 +02:00
bmatthieu3	bcfe829b03	use vite producing es and umd aladin lite module types. The umd is consistent with what is being used since a long time (including manually the aladin lite script)	2023-05-26 18:16:02 +02:00
bmatthieu3	6b0f4e4b60	Commit related to PR #90 . We first check the clockwise order of the footprints in the celestial space first.	2023-05-23 11:46:01 +02:00
bmatthieu3	eaebc78cb7	update to fitsrs 0.2.9	2023-05-22 16:41:54 +02:00
bmatthieu3	9b3f4e8803	unrelated to this PR: the rust code handles the -pi -> pi to 0 -> 360deg ra remapping	2023-05-22 15:56:01 +02:00
Henrik Norman	44ac866ce6	Removed block of context menus. Also added handling of touchcancel Co-authored-by: bmatthieu3 <matthieu.baumann@astro.unistra.fr>	2023-05-22 15:56:01 +02:00
Matthieu Baumann	34aa6faa89	Merge pull request #90 from cds-astro/removeCrossingPolygonEdges check for ccw order for every 3 vertices	2023-05-20 00:10:39 +02:00
bmatthieu3	42243edf65	check for ccw order for every 3 vertices	2023-05-19 23:59:39 +02:00