Create AUTHORS file

* rename J2000 to ICRS as HiPSes are built in ICRS
* update the ancient J2000 conversion matrices to ICRS ones.

.github/workflows/api_doc.yml

@@ -37,7 +37,7 @@ jobs:
         uses: actions/configure-pages@v4
       - name: Build docs
         run: |
-          npm install -g jsdoc
+          npm install
           npm run doc
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.github/workflows/npm-publish.yml

@@ -24,8 +24,6 @@ jobs:
         run: |
           curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
           source "$HOME/.cargo/env"
-          rustup default nightly
-          rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
       - name: "Install wasm-pack"
         run: |
           curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y

.github/workflows/test.yml

@@ -22,8 +22,6 @@ jobs:
         run: |
           curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
           source "$HOME/.cargo/env"
-          rustup default nightly
-          rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
       - name: "Install wasm-pack"
         run: |
           curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
@@ -32,8 +30,7 @@ jobs:
           npm install
       - name: "Build Aladin Lite"
         run: |
-          npm run build
-      - name: "Run some tests"
+          npm run build:dbg
+      - name: "Run the rust tests"
         run: |
           npm run test:build
-          npm run test:unit

.gitignore

@@ -0,0 +1,43 @@
+# vscode files
+.vscode/
+# for mac os users
+.DS_Store
+
+out/
+# deployment scripts
+deploy/
+# node dependencies
+node_modules/
+
+package-lock.json
+
+# rust tmp files for useful for the compilation phase
+src/core/Cargo.lock
+src/core/target/
+
+# this rust file is generated when compiling the code, so it is not
+# useful to put it on git
+src/core/src/shaders.rs
+
+## python related
+# python environment
+aladin-lite-venv
+# python cached files
+__pycache__/
+
+## API doc related
+# folder containing the generated HTML API documentation files
+docs/
+# style jsdoc files generated with npm run doc
+jsdoc-custom-styledocs
+# responsive jsdoc files generated with npm run doc
+jsdoc-make-responsivedocs
+
+## playwright testing framework related
+test-results/
+playwright-report/
+
+## packaged tar obtained from the cmd: npm run predeploy or npm run deploy
+aladin-lite*.tgz
+# folder where the generated bundle lies 
+dist/

.zenodo.json

@@ -0,0 +1,33 @@
+{
+    "license": "GPL-3.0",
+    "access_right": "open",
+    "description": "An astronomical HiPS visualizer in the browser ",
+    "keywords": ["astronomy", "visualizer", "images"],
+    "language": "eng",
+    "title": "Aladin Lite",
+    "grants": [
+        {
+            "id": "824064"
+        }
+    ],
+    "creators": [
+        {
+            "type": "ProjectLeader",
+            "orcid": "0000-0002-7123-773X",
+            "name": "Baumann, Matthieu",
+            "affiliation": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+        },
+        {
+            "type": "ProjectLeader",
+            "orcid": "0000-0001-5818-2781",
+            "name": "Boch, Thomas",
+            "affiliation": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+        },
+        {
+            "type": "ProjectMember",
+            "orcid": "0000-0001-5713-0998",
+            "name": "Marchand, Manon",
+            "affiliation": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+        }
+    ]
+}

AUTHORS

@@ -0,0 +1,25 @@
+AUTHORS
+=======
+
+This file lists the main developers and contributors to this project.
+For a full list of commit authors, see: https://github.com/cds-astro/aladin-lite/graphs/contributors
+
+Institutional Affiliation
+--------------------------
+Centre de Données astronomiques de Strasbourg (CDS)
+https://cds.unistra.fr/
+
+Main Developers
+---------------
+Thomas Boch (@tboch)
+Matthieu Baumann (@bmatthieu3)
+
+
+
+Acknowledgments
+---------------
+We also acknowledge all contributors who have submitted bug reports, feature requests,
+documentation improvements, and patches through GitHub issues and pull requests.
+
+This project is hosted on GitHub:
+https://github.com/cds-astro/aladin-lite

CHANGELOG.md

@@ -1,14 +1,29 @@
 # Changelogs
 
-## [Unreleased]
+## unreleased
+
+* [fix] request a redraw after adding an array of footprints [PR #218]
+
+## 3.5.1-beta
 
 * [feat] Add support for name removing in `removeOverlay` method
+* [test] Add support of playwright. Instructions in the readme for running the test matching snapshots [PR #176]
+* [fix] Order of overlays in the stack now matches the addMOC/addCatalog/addOverlay calls ordering
+* [doc] Expose the API of Coo class
+* [fix] Insert aladin css inside the aladin lite so that it should be compliant with the use of shadow DOMs [cds-astro/ipyaladin#113], [marimo-team/marimo#2106]
+* [feat] Add possibility of giving a local JS FileList to load a locally-stored HiPS without starting an HTTP server [cds-astro/aladin-lite#103]
+* [fix] removeOverlayByName
+
+## 3.5.0-beta
+
+* [enhancement] add `options.colnames` to A.catalogFromVizieR to tell VizieR we want absolutely want to retrieve specific columns 
+* [feat] provide a new drawAxes option to A.ellipse. This is useful for plotting error ellipsis.
 
 ## 3.4.5-beta
 
 * [feat] add `layerChanged` event when a layer is added or removed
 * [deprecate] of `select` event, use `objectsSelected` event instead
-* [ui] add the ability to switch the tile format to download 
+* [ui] add the ability to switch the tile format to download
 
 ## 3.4.3-beta
 

README.md

@@ -1,4 +1,4 @@
-# Aladin Lite v3
+# [Aladin Lite](https://aladin.u-strasbg.fr/AladinLite)
 
 **An astronomical HiPS visualizer in the browser** <img src="aladin-logo.png" alt="Aladin Lite logo" width="220">
 
@@ -12,31 +12,51 @@ More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/Alad
 A new [API technical documentation](https://cds-astro.github.io/aladin-lite/) is now available.
 
 [![Run tests](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml/badge.svg)](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml)
-[![API Documentation](https://img.shields.io/badge/docs-latest-blue.svg)](https://cds-astro.github.io/aladin-lite)
+[![API Documentation](https://img.shields.io/badge/API-documentation-blue.svg)](https://cds-astro.github.io/aladin-lite)
+[![Releases page](https://img.shields.io/badge/Releases-forge-yellow.svg)](https://aladin.cds.unistra.fr/AladinLite/doc/release/)
 
-# How to test it ?
+Aladin Lite is available [at this link](https://aladin.u-strasbg.fr/AladinLite).
 
-Aladin Lite v3 is out! Please play with [Aladin Lite v3 at this link](https://aladin.u-strasbg.fr/AladinLite).
+## Running & editable JS examples
+
+<!-- Examples -->
+<table><tbody>
+<tr><td>Basic Aladin Lite setup</td><td>Load SIMBAD & NED catalog data</td><td>Load a FITS image</td></tr>
+    <tr><td align="left"><a href="https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/AL-in-responsive-div/"><img height="200" src="https://github.com/cds-astro/aladin-lite/blob/develop/assets/vignettes/Basic%20Aladin%20Lite%20instanciation.png?raw=true"></img></a></td>
+        <td align="center"><a href="https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/easy-access-simbad-ned/"><img height="200" src="https://github.com/cds-astro/aladin-lite/blob/develop/assets/vignettes/Load%20SIMBAD%20&%20NED%20catalogs%20data.png?raw=true"></img></a></td>
+        <td align="right"><a href="https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/load-FITS-image-URL/"><img height="200" src="https://github.com/cds-astro/aladin-lite/blob/develop/assets/vignettes/Load%20a%20FITS%20image.png?raw=true"></img></a></td></tr><tr>
+        <td>American Astronomical Society 225<br/>example</td><td>Display proper motion vectors</td><td>Visualization of Mars</td></tr><tr>
+            <td align="left"><a href="https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/AAS225/"><img height="200" src="https://github.com/cds-astro/aladin-lite/blob/develop/assets/vignettes/American%20Astronomical%20Society%20225%20demonstration.png?raw=true"></img></a></td>
+            <td align="center"><a href="https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/show-proper-motions/"><img height="200" src="https://github.com/cds-astro/aladin-lite/blob/develop/assets/vignettes/Display%20proper%20motions.png?raw=true"></img></a></td>
+            <td align="right"><a href="https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/mars-visualisation/"><img height="200" src="https://github.com/cds-astro/aladin-lite/blob/develop/assets/vignettes/Visualization%20of%20Mars.png?raw=true"></img></a></td></tr></tbody></table>
+<!-- Examples -->
 
 ## Releases
 
-For integrating Aladin Lite into your personal website, please refer to this [release page](https://aladin.cds.unistra.fr/AladinLite/doc/release/).
-Always prefer using the latest version. If you want the new features without minding about the bugs coming with it, then the beta is the good way to go.
+A [release page](https://aladin.cds.unistra.fr/AladinLite/doc/release/) keeps track of all the current and previous builds.
+A ``release`` and ``beta`` versions, regularly updated are available. The ``beta`` version is usually more advanced than the ``release`` one but features more error prone and not production-ready code.
 
-## API documentation
+> [!TIP]
+> If you are working on a project that uses Aladin Lite, prefer working with a fixed version. Every build is tagged with a version number and accessible with:
+>
+> ```https://aladin.cds.unistra.fr/AladinLite/api/v3/<version>/aladin.js```
 
-There is a new in progress API documentation at [this link](https://cds-astro.github.io/aladin-lite).
+## Documentation
+
+There is a new API documentation available [here](https://cds-astro.github.io/aladin-lite).
 Editable examples showing the API can also be found [here](https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/).
 
 ## Embed it into your projects
 
+**Terms of use**: you are welcome to integrate Aladin Lite in your web pages and to customize its GUI to your needs, but **please leave the Aladin logo and link intact** at the bottom right of the view.
+
 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
+```html
 <!doctype html>
 <html>
 <head>
@@ -59,60 +79,37 @@ Please include [the javascript script of Aladin Lite v3](https://aladin.cds.unis
 </html>
 ```
 
-### Using the aladin lite NPM package
+### NPM deployment
 
-First, install it with npm:
+A [NPM package](https://www.npmjs.com/package/aladin-lite) is deployed and maintained. It is used by [ipyaladin](https://github.com/cds-astro/ipyaladin), a jupyter widget allowing to run aladin lite in a notebook.
 
 ```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>
+Aladin Lite can be imported with:
 
+```html
 <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});
-    });
+    // your code...
 </script>
-
-</body>
-</html>
 ```
 
-## Goals of v3
+## New features
 
-- Rust/WebGL new core integration
-
-- Remove jQuery dep
-
-- UI dev, better support for smartphones
-
-- FITS images support
-
-- easy sharing of current « view »
-
-- support of all VOTable serializations (using votable.js?)
-
-- support of FITS tables?
-
-- creating HiPS instance from an URL
-
-- multiple mirrors handling for HiPS tile retrival
-
-## Source code
-
-Source code is available in the ``src`` directory.
+* [X] Rust/WebGL2 new rendering engine
+* [X] Remove jQuery dep
+* [ ] UI dev, better support for smartphones
+* [X] FITS images support
+* [X] WCS parsing, displaying an (JPEG/PNG) image in aladin lite view
+* [X] Display customized shapes (e.g. proper motions) from astronomical catalog data
+* [X] AVM tags parsing support
+* [X] Easy sharing of current « view »
+* [ ] All VOTable serializations
+* [ ] FITS tables
+* [X] Creating HiPS instance from an URL
+* [X] Local HiPS loading 
+* [X] Multiple mirrors handling for HiPS tile retrival
+* [ ] HiPS cube
 
 ## Licence
 
@@ -120,7 +117,7 @@ Aladin Lite is currently licensed under GPL v3.0
 
 If you think this license might prevent you from using Aladin Lite in your pages/application/portal, please open an issue or [contact us](mailto:cds-question@unistra.fr)
 
-## Contributing
+## Contribution guidelines
 
 There are several ways to contribute to Aladin Lite:
 
@@ -131,12 +128,12 @@ There are several ways to contribute to Aladin Lite:
 - **develop new features/provide code fixing bugs**. As open development is a new thing for us, we will in a first time only take into consideration code contribution (_i.e._ Pull Requests) from our close partners.
 In any case, please get in touch before starting a major update or rewrite.
 
-### Building the application steps
+### Building steps
 
 First you need to install the dependencies from the package.json
 Please run:
 
-```bash
+```sh
 npm install
 ```
 
@@ -145,53 +142,68 @@ 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 will need to switch to the nightly rust version:
-
-```bash
-rustup default nightly
-```
-
 Then you can build the project:
 
-```bash
+```sh
 npm run build
 ```
 
-:warning: **If you are experimenting rust error compilations**:
+> [!WARNING]
+> **If you are experimenting Rust compiling issues:**
+> - Make sure you have your **wasm-pack** version updated. To do so:
+> ```sh
+> cargo install wasm-pack --version ~0.12
+> ```
+> - Remove your `src/core/Cargo.lock` file and `src/core/target` directory -- this ensures that you'd escape any bad compilation state:
+> ```sh
+> git clean -di
+> ```
+> - Then recompile
+> ```sh
+> npm run build
+> ```
 
-- Make sure you have your **wasm-pack** version updated. To do so:
+It will generate the aladin lite compiled code into a `dist/` directory located at the root of the repository. This directory contains two javascript files. `aladin.umd.cjs` follows the UMD module export convention and it is the one you need to use for your project.
 
-```bash
-cargo install wasm-pack --version ~0.12
-```
+### Testing guidelines
 
-- Make sure you are using the rust **nightly** toolchain
-- Remove your `src/core/Cargo.lock` file and `src/core/target` directory -- this ensures that you'd escape any bad compilation state:
+#### Run the examples
 
-```bash
-git clean -di
-```
- 
--  then recompile with `npm run build`.
+A bunch of examples are located into the `examples` directory.
+To run them, start a localhost server:
 
-It will generate the aladin lite compiled code into a `dist/` directory located at the root of the repository. This directory contains two javascript files. `aladin.umd.cjs` follows the UMD module export convention and it is the one you can use for your project.
-
-To run the examples, you can start a localhost server with the following command:
-
-```bash
+```sh
 npm run serve
 ```
 
-For just compiling the rust core, from the root location do:
+#### Rust tests
 
-```bash
+These can be executed separately from the JS part:
+
+* Compile the Rust code:
+
+```sh
 cd src/core
 cargo check --features webgl2
 ```
 
-and run the tests:
+* Run the tests:
 
-```bash
-cd src/core
+```sh
 cargo test --features webgl2
 ```
+
+#### Snapshot comparisons
+
+We use [playwright](https://playwright.dev/) for snapshot comparison testing. Only ground truth snapshots have been generated for MacOS/Darwin architecture.
+First install playwright:
+
+```sh
+npx playwright install
+```
+
+Run the tests, advises are given for opening the UI mode or for generating your own ground truth snapshots.
+
+```sh
+npm run test:playwright
+```

assets/icons/freq.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4.5L6 7L6 5.25H18V7L21 4.5L18 2V3.75H6L6 2L3 4.5Z" />
+<path d="M6.63935 11.9367C7.14967 10.7061 8.89138 10.7018 9.4077 11.9299L12.735 19.8442C13.9443 22.7205 18.0283 22.6965 19.2036 19.8061L21.1579 15H18.9989L17.351 19.0527C16.8472 20.2915 15.0969 20.3018 14.5787 19.0691L11.2514 11.1548C10.0466 8.28919 5.98264 8.29911 4.79189 11.1706L3.20392 15H5.36906L6.63935 11.9367Z" />
+</svg>

assets/icons/inside.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4,3H9A1,1,0,0,1,9,5H5V9A1,1,0,0,1,3,9V4A1,1,0,0,1,4,3ZM9,19H5V15a1,1,0,0,0-2,0v5a1,1,0,0,0,1,1H9a1,1,0,0,0,0-2Zm11-5a1,1,0,0,0-1,1v4H15a1,1,0,0,0,0,2h5a1,1,0,0,0,1-1V15A1,1,0,0,0,20,14ZM20,3H15a1,1,0,0,0,0,2h4V9a1,1,0,0,0,2,0V4A1,1,0,0,0,20,3ZM7,8v8a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1H8A1,1,0,0,0,7,8Z"/></svg>

codemeta.json

@@ -8,8 +8,8 @@
     "dateModified": "2023-01-31",
     "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
     "name": "Aladin Lite",
-    "version": "3.4.5",
-    "softwareVersion": "3.4.5",
+    "version": "3.6.1",
+    "softwareVersion": "3.6.1",
     "description": "An astronomical HiPS visualizer in the browser.",
     "identifier": "10.5281/zenodo.7638833",
     "applicationCategory": "Astronomy, Visualization",

examples/CDS_P_DSS2_color/properties

@@ -0,0 +1,45 @@
+hips_doi             = 10.26093/cds/aladin/ht9n-7r
+creator_did          = ivo://CDS/P/DSS2/color
+obs_collection       = DSS colored
+obs_title            = DSS colored
+obs_description      = Color composition generated by CDS. This HiPS survey is based on 2 others HiPS surveys, respectively DSS2-red and DSS2-blue HiPS, both of them directly generated from original scanned plates downloaded from STScI site. The red component has been built from POSS-II F, AAO-SES,SR and SERC-ER plates. The blue component has been build from POSS-II J and SERC-J,EJ. The green component is based on the mean of other components. Three missing plates from red survey (253, 260, 359) has been replaced by pixels from the DSSColor STScI jpeg survey. The 11 missing blue plates (mainly in galactic plane) have not been replaced (only red component).
+obs_copyright        = Digitized Sky Survey - STScI/NASA, Colored & Healpixed by CDS
+obs_copyright_url    = http://archive.stsci.edu/dss/copyright.html
+client_category      = Image/Optical/DSS
+client_sort_key      = 03-00
+hips_builder         = Aladin/HipsGen v10.123
+hips_creation_date   = 2010-05-01T19:05Z
+hips_release_date    = 2019-05-07T10:55Z
+hips_creator         = Oberto A. (CDS) , Fernique P. (CDS)
+hips_version         = 1.4
+hips_order           = 7
+hips_frame           = equatorial
+hips_tile_width      = 512
+hips_tile_format     = jpeg
+dataproduct_type     = image
+client_application   = AladinLite
+hips_status          = public partial unclonable
+hips_rgb_red         = DSS2Merged [1488.0 8488.8125 14666.0 Linear]
+hips_rgb_blue        = DSS2-blue-XJ-S [4286.0 12122.5 19959.0 Linear]
+hips_hierarchy       = median
+hips_pixel_scale     = 2.236E-4
+hips_initial_ra      = 085.30251
+hips_initial_dec     = -02.25468
+hips_initial_fov     = 2
+moc_sky_fraction     = 1.0
+hips_copyright       = CNRS/Unistra
+obs_ack              = The Digitized Sky Surveys were produced at the Space Telescope Science Institute under U.S. Government grant NAG W-2166. The images of these surveys are based on photographic data obtained using the Oschin Schmidt Telescope on Palomar Mountain and the UK Schmidt Telescope. The plates were processed into the present compressed digital form with the permission of these institutions. The National Geographic Society - Palomar Observatory Sky Atlas (POSS-I) was made by the California Institute of Technology with grants from the National Geographic Society. The Second Palomar Observatory Sky Survey (POSS-II) was made by the California Institute of Technology with funds from the National Science Foundation, the National Geographic Society, the Sloan Foundation, the Samuel Oschin Foundation, and the Eastman Kodak Corporation. The Oschin Schmidt Telescope is operated by the California Institute of Technology and Palomar Observatory. The UK Schmidt Telescope was operated by the Royal Observatory Edinburgh, with funding from the UK Science and Engineering Research Council (later the UK Particle Physics and Astronomy Research Council), until 1988 June, and thereafter by the Anglo-Australian Observatory. The blue plates of the southern Sky Atlas and its Equatorial Extension (together known as the SERC-J), as well as the Equatorial Red (ER), and the Second Epoch [red] Survey (SES) were all taken with the UK Schmidt. Supplemental funding for sky-survey work at the ST ScI is provided by the European Southern Observatory.
+prov_progenitor      = STScI
+bib_reference        = 1996ASPC..101...88L
+bib_reference_url    = http://cdsads.u-strasbg.fr/abs/1996ASPC..101...88L
+t_min                = 42413
+t_max                = 51179
+obs_regime           = Optical
+em_min               = 4e-7
+em_max               = 6e-7
+hips_order_min       = 0
+dataproduct_subtype  = color
+hipsgen_date         = 2019-05-07T10:55Z
+hipsgen_params       = out=/asd-volumes/sc1-asd-volume8/DSS/DSSColor UPDATE
+hipsgen_date_1       = 2024-09-10T16:50Z
+hipsgen_params_1     = in=https://alasky.cds.unistra.fr/DSS/DSSColor/ out=./CDS_P_DSS2_color region=3/357 order=5 MIRROR

examples/al-aas225.html

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

examples/al-adass2022.html

@@ -10,7 +10,8 @@
     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, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: true, showCooGridControl: false});
+        let startFov = 1000;
+        aladin = A.aladin('#aladin-lite-div', {showSettingsControl: true, survey: "P/PanSTARRS/DR1/color-z-zg-g", showReticle: false, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: startFov, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGridControl: false});
 
         const chft = aladin.createImageSurvey('CFHT', "CFHT deep view of NGC7331 and Stephan's quintet u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", null, null, {imgFormat: 'png'});
         const nircamJWST = aladin.createImageSurvey('Nircam', "Stephans Quintet NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI/", null, null, {imgFormat: 'png', colormap: "viridis"});
@@ -21,7 +22,7 @@
         aladin.getOverlayImageLayer("CFHT").toggle();
         aladin.getOverlayImageLayer("Nircam").toggle();
 
-        let fov = 360;
+        let fov = startFov;
         let rotation = 0;
 
         setInterval(function zoom() {

examples/al-additive-blend.html

@@ -5,7 +5,8 @@
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 <script type="module">
-    import A from '../src/js/A.js';
+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});
 
@@ -14,11 +15,12 @@ A.init.then(() => {
     hscGreenSurvey.setColormap("green", { stretch: "asinh" });
     hscGreenSurvey.setCuts(-0.2186, 5.30322);
 
-    const HSCRedSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/r', {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
-    const HSCBlueSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+    const HSCRedSurvey = aladin.newImageSurvey('P/HSC/DR2/deep/r', {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
+    const HSCBlueSurvey = aladin.newImageSurvey('P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+    HSCRedSurvey.setColormap('red', {stretch: 'linear'});
 
-    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/r', 'hsc red layer');
-    aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/z', 'hsc blue layer');
+    aladin.setOverlayImageLayer('P/HSC/DR2/deep/r', 'hsc red layer');
+    aladin.setOverlayImageLayer('P/HSC/DR2/deep/z', 'hsc blue layer');
 });
 </script>
 </body>

examples/al-artifact.html

@@ -4,7 +4,7 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 100%;"></div>
+<div id="aladin-lite-div" style="width: 1024px; height: 256px;"></div>
 
 <script type="module">
     import A from '../src/js/A.js';

examples/al-cat-proper-motion.html

@@ -25,7 +25,7 @@
 
       let pmraMean = null, pmdecMean = null;
 
-      const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
+      const pmCat = A.catalogFromURL('./data/votable/proper_motion.xml', {
         onClick: 'showTable',
         name: 'mean pm over HPX cells around LMC from GaiaDR2',
         hoverColor: 'yellow',

examples/al-cfht.html

@@ -4,17 +4,17 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
 
 <script type="module">
   import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
-      aladin = A.aladin('#aladin-lite-div', {survey: "P/PanSTARRS/DR1/color-z-zg-g", fov:1.5, target: "NGC 7318B"});
+      aladin = A.aladin('#aladin-lite-div', {samp: true, survey: "data/hips/PanSTARRS_DR1_color-z-zg-g", fov:2.0, target: "22 35 58.39 +33 57 57.8", showSettingsControl: true, log: false});
       aladin.setProjection('AIT');
-      let cfht = aladin.createImageSurvey("CFHT", "CFHT MegaCam u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", "equatorial", 10, {imgFormat: 'png'});
-      let jwst1 = aladin.createImageSurvey("CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI", "JWST NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI", null, null, {imgFormat: 'png'});
-      let jwst2 = aladin.createImageSurvey("JWST2", "JWST MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_MIRI", "equatorial", 12, {imgFormat: 'png'});
+      let cfht = aladin.createImageSurvey("CFHT", "CFHT MegaCam u+g+r", "./data/hips/CFHT", "equatorial", 10, {imgFormat: 'png'});
+      let jwst1 = aladin.createImageSurvey("CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI", "JWST NIRCam+MIRI", "data/hips/JWST_NIRCam_MIRI", null, null, {imgFormat: 'png'});
+      let jwst2 = aladin.createImageSurvey("JWST2", "JWST MIRI", "data/hips/JWST_MIRI", "equatorial", 12, {imgFormat: 'png'});
       aladin.setOverlayImageLayer('CFHT', 'overlay_CFHT');
       aladin.setOverlayImageLayer('CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI', 'overlay_JWST1');
       aladin.setOverlayImageLayer('JWST2', 'overlay_JWST2');

examples/al-change-cat-color.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    </head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px">
+    <div class="box-content" style="width:200px">
+        <div style="display:inline-flex">
+            <label for="cat-color">Color</label>
+            <input type="color" id="cat-color" value="#ff0000">
+        </div>
+       
+    </div>
+</div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+            }
+        );
+
+        // Add a catalog
+        let cat = A.catalogFromSimbad('NGC 2175', 0.1, {onClick: 'showTable'});
+        aladin.addCatalog(cat);
+
+        // Logic for changing the color of catalog sources
+        let colorPicker = document.querySelector('#cat-color');
+        colorPicker.value = cat.color;
+        colorPicker.addEventListener('input', function (e) {
+            // Change the color of the catalog
+            cat.updateShape({color: this.value});
+        })
+
+        // Define the box
+        let catalogSettingsBox = A.box({
+            header: {
+                title: "Settings",
+            },
+            content: document.querySelectorAll('.box-content')[0],
+        });
+        catalogSettingsBox._hide();
+
+        // Define the button that toggles the box
+        let catalogSettingsBtn = A.button({
+            content: 'Catalog',
+            classList: ['catalogSettingsTogglerBtn'],
+            action(o) {
+                if (catalogSettingsBox.isHidden) {
+                    catalogSettingsBox._show({
+                        position: {
+                            nextTo: catalogSettingsBtn,
+                            direction: 'right',
+                        }
+                    })
+                } else {
+                    catalogSettingsBox._hide()
+                }
+            }
+        });
+
+        aladin.addUI([catalogSettingsBtn, catalogSettingsBox])
+    });
+</script>
+<style>
+    .catalogSettingsTogglerBtn {
+        position: absolute;
+        top: 200px;
+        left: 0;
+    }
+</style>
+</body>
+</html>

examples/al-cuts-fits-hips.html

@@ -12,9 +12,11 @@
     A.init.then(() => {
     aladin = A.aladin('#aladin-lite-div', {projection: 'AIT', cooFrame: 'galactic', fov: 200, target: 'galactic center'});
         let dss = aladin.createImageSurvey("DSS blue band", "Color DSS blue HiPS", "http://alasky.cds.unistra.fr/DSS/DSS2-blue-XJ-S/", "equatorial", 9, {imgFormat: 'fits'})
+
         aladin.setBaseImageLayer(dss);
 
-        aladin.getBaseImageLayer().setCuts(2, 10000);
+        dss.setCuts(2, 10000);
+
 
     });
 </script>

examples/al-displayFITS.html

@@ -5,20 +5,17 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width:440px;height:300px"></div>
+<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
 
 <script type="module">
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {cooFrame: "icrs", log: false, backgroundColor: 'red'});
 
         aladin.displayFITS(
             //'https://fits.gsfc.nasa.gov/samples/FOCx38i0101t_c0f.fits', // url of the fits file
-            'images/panstarrs-g-m61.fits',
-            //'data/fits/neowise.fits',
-            //'data/fits/irac.fits',
-            //'data/fits/FOCx38i0101t_c0f.fits',
+            'data/fits/panstarrs-g-m61.fits',
             {
                 name: 'm61',
                 colormap: 'viridis'

examples/al-disto.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+  import A from '../src/js/A.js';
+  var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {showContextMenu: true, survey: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-i-r-g/', fov: 0.00833333333, target: '270.334079 66.730469'});
+        aladin.showHealpixGrid(true)
+    });
+</script>
+
+</body>
+</html>

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

@@ -20,6 +20,7 @@
         showSettingsControl: true,
         showStackLayerControl: true,
         samp: true,
+        showCooGrid: true,
       });
 
       aladin.addCatalog(A.catalogFromSimbad('M 82', 0.1, {onClick: 'showTable'}));

examples/al-error-ellipse.html

@@ -0,0 +1,38 @@
+<!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';
+    var aladin;
+A.init.then(() => {
+    aladin = A.aladin('#aladin-lite-div', {survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', target: 'm1', fov: 5, showContextMenu: true, showSettingsControl:true, samp:true});
+
+    var customImg = new Image();
+    customImg.onload = function() {
+        const cat = A.catalogFromVizieR('II/246/out', 'm1', 0.1, {onClick: 'showTable', hoverColor: 'purple', limit: 1000, colnames: ["errMin", "errMaj", "errPA"], shape: (s) => {
+            if (+s.data['Jmag'] > 15) {
+                return;
+            } else {
+                let a = +s.data['errMaj']/36;
+                let b = +s.data['errMin']/36;
+
+                let theta = +s.data['errPA'];
+
+                return A.ellipse(s.ra, s.dec, a, b, theta, {fillColor: 'rgba(255, 0, 255, 0.2)', drawAxes: true})
+            }
+        }});
+        aladin.addCatalog(cat);
+    };
+    customImg.src = 'https://aladin.u-strasbg.fr/AladinLite/doc/API/examples/img/star.png';
+
+   
+});
+</script>
+</body>
+</html>

examples/al-event-listeners.html

@@ -4,14 +4,13 @@
 </head>
 <body>
 
-<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
 <div id='infoDiv'>&nbsp; </div>
 <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
 <script type="module">
     import A from '../src/js/A.js';
     A.init.then(() => {
-        var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
-        var cat = A.catalog({sourceSize: 20, onClick: 'showTable'});
+        var aladin = A.aladin('#aladin-lite-div', {showContextMenu: true, target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
+        var cat = A.catalog({sourceSize: 20, onClick: (s) => {console.log("kjk", s)}});
         aladin.addCatalog(cat);
         cat.addSources([A.source(83.784490, 9.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
         var msg;
@@ -21,6 +20,7 @@
             console.log(e)
         });
 
+        let infoDiv = document.querySelector("#infoDiv");
         aladin.on('objectHovered', function(object, xyMouseCoords) {
             if (object) {
                 msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
@@ -29,7 +29,7 @@
             else {
                 msg = 'No object hovered';
             }
-            $('#infoDiv').html(msg);
+            infoDiv.innerText = msg;
         });
 
         aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
@@ -37,7 +37,7 @@
                 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);
+            infoDiv.innerText = msg;
         });
 
         // define function triggered when an object is clicked
@@ -53,7 +53,7 @@
                 objClicked.deselect();
                 msg = 'You clicked in void';
             }
-            $('#infoDiv').html(msg);
+            infoDiv.innerText = msg;
         });
 
         aladin.on('resizeChanged', function() {

examples/al-footprints.html

@@ -13,7 +13,7 @@
         // 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, lineDash: [2, 2]});
-        aladin.addOverlay(overlay);
+        /*aladin.addOverlay(overlay);
         overlay.addFootprints([
             A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
@@ -21,7 +21,7 @@
         ]);
         overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
         overlay.add(A.vector(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);
         })
@@ -35,7 +35,7 @@
             console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
 
-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', hoverColor: 'purple', limit: 10000});
+        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
         aladin.addCatalog(cat);
     });
 </script>

examples/al-gw.html

@@ -12,12 +12,12 @@
     import A from '../src/js/A.js';
     //let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {showReticle: true, showSurveyStackControl: true, showOverlayStackControl: false, projection: "TAN", target: '15 16 57.636 -60 55 7.49', showProjectionControl: true, realFullscreen: true, showZoomControl: true, showSimbadPointerControl: true, showShareControl: true, showContextMenu: true, showCooGridControl: true, fullScreen: true, showCooGrid: true, fov: 90});
-                
-        var moc_0_99 = A.MOCFromURL("./data//gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.0, lineWidth: 10, fill: false, perimeter: true});
-        var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
-        var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
-        var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
+        aladin = A.aladin('#aladin-lite-div', {survey: "data/hips/CDS_P_DSS2_color", showReticle: true, showSurveyStackControl: true, showOverlayStackControl: false, projection: "TAN", target: '15 16 57.636 -60 55 7.49', showProjectionControl: true, realFullscreen: true, showZoomControl: true, showSimbadPointerControl: true, showShareControl: true, showContextMenu: true, showCooGridControl: true, fullScreen: true, showCooGrid: true, fov: 180, log: false});
+
+        var moc_0_99 = A.MOCFromURL("./data/gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.7, lineWidth: 10, fill: false, perimeter: true});
+        var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.3, lineWidth: 3, fill: false, perimeter: true});
+        var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.2, lineWidth: 3, fill: true, perimeter: true});
+        var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.1, lineWidth: 3});
 
         aladin.addMOC(moc_0_99);
         aladin.addMOC(moc_0_95);

examples/al-hips-cube.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+    <head>
+    </head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 768px; height: 512px"></div>
+<script>let aladin; let hips;</script>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                showSimbadPointerControl: true,
+                projection: 'AIT', // set a projection
+                fov: 360, // initial field of view in degrees
+                target: '169.58868 +45.74914', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showContextMenu: true,
+                showFrame: true,
+                showZoomControl:true,
+                showSettingsControl:true,
+                showCooGrid: true,
+                fullScreen: true,
+                samp: true,
+            }
+        );
+
+        hips = aladin.newImageSurvey("https://alasky.cds.unistra.fr/GALFAHI/GALFAHI-Narrow-DR2/");
+        aladin.setImageLayer(hips)
+
+        /*let id;
+        aladin.on("zoomChanged", () => {
+            if (id)
+                clearTimeout(id);
+            id = setTimeout(() => {
+                console.log("wheel stopped, new cone search here")
+            }, 500);
+        })*/
+    });
+</script>
+<style>
+    .aladin-cat-browser-box {
+        width: 600px;
+    }
+</style>
+</body>
+</html>

examples/al-hips-local.html

@@ -4,18 +4,14 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-<!--<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>-->
+<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
 
 <script type="module">
     import A from '../src/js/A.js';
 
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: "05 40 59.12 -02 27 04.1", fov: 2});
-        
-        let survey = aladin.createImageSurvey('DSS2 local', "local hips", "./hips/CDS_P_DSS2_color");
-        aladin.setBaseImageLayer(survey);
+        aladin = A.aladin('#aladin-lite-div', {survey: "data/hips/CDS_P_DSS2_color", target: "05 40 59.12 -02 27 04.1", fov: 2, log: false});
     });
 </script>
 

examples/al-in-shadow-dom.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+    <head>
+    </head>
+<body>
+
+<div class="shadow-host"></div>
+
+<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
+<script type="text/javascript">
+    const shadowEl = document.querySelector(".shadow-host");
+    const shadow = shadowEl.attachShadow({mode: 'open'});
+
+    let aladinLiteEl = document.createElement('div');
+    aladinLiteEl.id = "aladin-lite-div"
+    aladinLiteEl.style = "width: 768px; height: 512px";
+    shadow.appendChild(aladinLiteEl)
+
+    A.init.then(() => {
+        let aladin = A.aladin(
+            aladinLiteEl,
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'orion', // initial target
+            }
+        );
+    });
+</script>
+</body>
+</html>

examples/al-init-custom-options.html

@@ -13,26 +13,34 @@
         aladin = A.aladin(
             '#aladin-lite-div',
             {
+                showSimbadPointerControl: true,
                 survey: 'P/allWISE/color', // set initial image survey
                 projection: 'AIT', // set a projection
-                fov: 1.5, // initial field of view in degrees
-                target: 'NGC 2175', // initial target
+                fov: 360, // initial field of view in degrees
+                target: 'orion', // initial target
                 cooFrame: 'icrs', // set galactic frame
                 reticleColor: '#ff89ff', // change reticle color
                 reticleSize: 64, // change reticle size
                 showContextMenu: true,
+                showShareControl: true,
                 showFrame: true,
                 showZoomControl:true,
                 showSettingsControl:true,
                 showCooGrid: true,
                 fullScreen: true,
+                samp: true,
             }
         );
 
-        aladin.removeHiPSFromFavorites('CDS/P/allWISE/color')
+        /*let id;
+        aladin.on("zoomChanged", () => {
+            if (id)
+                clearTimeout(id);
+            id = setTimeout(() => {
+                console.log("wheel stopped, new cone search here")
+            }, 500);
+        })*/
     });
 </script>
-<style>
-</style>
 </body>
 </html>

examples/al-ivoa-sydney.html

@@ -0,0 +1,135 @@
+<!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", {
+                    fullScreen: true,
+                    target: "abell 194",
+                    fov: 15,
+                    projection: "AIT",
+                    showContextMenu: true,
+                    showShareControl: true,
+                    samp: true,
+                    showSettingsControl: true,
+                    showZoomControl: true,
+                });
+
+                /*let pmraMean = null, pmdecMean = null;
+
+                const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
+                    onClick: 'showTable',
+                    name: 'mean pm over HPX cells around LMC from GaiaDR2',
+                    hoverColor: 'yellow',
+                    selectionColor: 'white',
+                    color: 'yellow',
+                    // Footprint associated to sources
+                    shape: (s) => {
+                        // discard drawing a vector for big pm
+                        let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
+                        if (totalPmSquared > 6) {
+                            return;
+                        }
+
+                        let color = rainbowColorMap((totalPmSquared - 2.5) / 2)
+
+                        // Compute the mean of pm over the catalog sources
+                        if (!pmraMean || !pmdecMean) {
+                            pmraMean = 0, pmdecMean = 0;
+                            for (var s of pmCat.getSources()) {
+                                pmraMean += +s.data.pmra;
+                                pmdecMean += +s.data.pmdec;
+                            }
+
+                            const numSources = pmCat.getSources().length;
+
+                            pmraMean /= numSources
+                            pmdecMean /= numSources
+                        }
+
+                        let dra = +s.data.pmra - pmraMean;
+                        let ddec = +s.data.pmdec - pmdecMean;
+
+                        return A.vector(
+                            s.ra,
+                            s.dec,
+                            s.ra + dra,
+                            s.dec + ddec,
+                            {lineWidth: 3, color}
+                        )
+                    }
+                });
+                aladin.addCatalog(pmCat);*/
+
+                /*aladin.addCatalog(
+                    A.catalogFromURL("./data/votable/obscore_rucio-sdc03.votable", {
+                        name: 'SKA discovery ObsCore around: SDC03',
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );
+                aladin.addCatalog(
+                    A.catalogFromURL("./data/votable/obscore_rucio-abell194.votable", {
+                        name: 'SKA discovery ObsCore around: Abell 194',
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );*/
+                aladin.addCatalog(
+                    A.catalogFromSKAORucio("abell 194", 15, {
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );
+                aladin.addCatalog(
+                    A.catalogFromSKAORucio("m51", 15, {
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );
+            });
+
+      function rainbowColorMap(value) {
+    // Ensure value is within range [0, 1]
+    value = Math.max(0, Math.min(1, value));
+
+    // Convert value to hue
+    var hue = (1 - value) * 240; // 240 is the maximum hue value for blue
+
+    // Convert HSV to RGB
+    var chroma = 1;
+    var x = chroma * (1 - Math.abs((hue / 60) % 2 - 1));
+    var r1, g1, b1;
+
+    if (hue >= 0 && hue < 60) {
+        [r1, g1, b1] = [chroma, x, 0];
+    } else if (hue >= 60 && hue < 120) {
+        [r1, g1, b1] = [x, chroma, 0];
+    } else if (hue >= 120 && hue < 180) {
+        [r1, g1, b1] = [0, chroma, x];
+    } else if (hue >= 180 && hue < 240) {
+        [r1, g1, b1] = [0, x, chroma];
+    }
+
+    var m = 1 - chroma;
+    var r = r1 + m;
+    var g = g1 + m;
+    var b = b1 + m;
+
+    // Convert RGB to HEX
+    r = Math.round(r * 255);
+    g = Math.round(g * 255);
+    b = Math.round(b * 255);
+    var colorHex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+
+    return colorHex;
+  }
+        </script>
+    </body>
+</html>

examples/al-mars-features.html

@@ -55,7 +55,7 @@
 
         aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/mars-features.xml', {name: "Mars features", raField: 'Longitude', decField: 'Latitude', shape: drawFunction, onClick: 'showTable'}));
 
-        aladin.getBaseImageLayer().setColormap('yiorbr')
+        aladin.getBaseImageLayer().setColormap('ylorbr')
         aladin.gotoRaDec(226.1433542, 18.6308694);
 
     });

examples/al-mars.html

@@ -44,6 +44,12 @@
         landingSites.addSources([A.marker(-225.71, 47.64, {popupTitle: 'Viking 2', popupDesc: 'Landing date: September 3, 1976 22:37:50'})]);
         landingSites.addSources([A.marker(175.472636, -14.5684, {popupTitle: 'Spirit', popupDesc: 'Landing date: January 4, 2004, 04:35 UTC '})]);
         landingSites.addSources([A.marker(137.4417, -4.5895, {popupTitle: 'Curiosity', popupDesc: 'Landing date: August 6, 2012, 05:17 UTC '})]) 
+    
+        var cat = A.catalog({name: "Temp", sourceSize: 18, onClick: 'showPopup'});
+        aladin.addCatalog(cat);
+        cat.addSources(A.source(105.69239256, -8.45235969, {a: 1, b: 2, c:3}));
+        cat.addSources(A.source(105.70779763, -8.31350997, {a: 4, b: 5, c:6}));
+        cat.addSources(A.source(105.74242906, -8.34776709, {a: 7, b: 8, c:9}));
     });
 </script>
 </body>

examples/al-moc-json.html

@@ -24,8 +24,14 @@
         //var json = {"3":[517],
         //"4":[2065, 2067]};        
         
-        var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1, adaptativeDisplay: false});
+        var moc = A.MOCFromJSON(json, {opacity: 0.5, color: 'magenta', lineWidth: 1, fill: true});
         aladin.addMOC(moc);
+
+        // Change the moc options after its creation
+        setTimeout(() => {
+            moc.opacity = 0.2
+            moc.fillColor = "orange"
+        }, 3000)
     });
 </script>
 </body>

examples/al-moc-sdss9.html

@@ -12,7 +12,7 @@
     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', showContextMenu: true, fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {inertia: false, target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color', showContextMenu: true, fullScreen: true});
         var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3}, (moc) => {
             // moc is ready
             console.log(moc.contains(205.9019247, +2.4492764));
@@ -20,7 +20,7 @@
 
             console.log(moc.serialize("json"))
         });
-        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.3, lineWidth: 3});
+        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, fill:true, fillColor: '#aabbcc', opacity: 0.3, 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);

examples/al-multiple-surveys.html

@@ -8,7 +8,7 @@
 <script type="module">
     import A from '../src/js/A.js';
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', fullScreen: true, fov: 360, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showProjectionControl: true, showSettingsControl: true, showCooGrid: true});
+        aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', fullScreen: true, fov: 360, survey: ['P/DM/vizMine', 'P/HST/GOODS/color', 'P/MATLAS/g'], target: '0 0', showProjectionControl: false, showSettingsControl: false, showLayersControl: false, showCooGrid: false, showFrame: false, showCooLocation: false});
     });
 </script>
 

examples/al-onames-labels.html

@@ -3,13 +3,13 @@
 <head>
 </head>
 <body>
-<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
 <script type="module">
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'M1', fov: 0.3});
-        var cat = A.catalogFromURL('http://cdsxmatch.u-strasbg.fr/QueryCat/QueryCat?catName=SIMBAD&mode=cone&pos=M1&r=50arcmin&format=votable&limit=3000', {sourceSize:12, color: '#cc99bb', displayLabel: true, labelColumn: 'main_id', labelColor: '#ae4', labelFont: '9px sans-serif'});
+        aladin = A.aladin('#aladin-lite-div', {survey: 'data/hips/CDS_P_DSS2_color', target: '05 34 30.89 +22 00 52.9', fov: 0.3, log: false, showSettingsControl: true});
+        var cat = A.catalogFromURL('data/votable/labels.vot', {sourceSize:12, color: '#cc99bb', displayLabel: true, labelColumn: 'main_id', labelColor: '#ae4', labelFont: '9px sans-serif'});
         aladin.addCatalog(cat);
     });
 </script>

examples/al-onthefly.html

@@ -77,7 +77,7 @@
         });
 
         aladin.addCatalog(
-            A.catalogFromSKAORucio("ngc 1436", 15, {
+            A.catalogFromSKAORucio("abell 196", 90, {
                 onClick: 'showTable',
                 hoverColor: "yellow",
             })

examples/al-polyline.html

@@ -16,10 +16,6 @@
         var overlay = A.graphicOverlay({lineWidth: 2});
         aladin.addOverlay(overlay);
         overlay.add(A.polyline([ [2.29452158, 59.14978110], [10.12683778, 56.53733116], [14.1772154, 60.7167403], [21.45396446, 60.23528403], [28.59885697, 63.67010079] ], {color: 'green'}));
-    
-        aladin.select('rect', (s) => {
-            console.log(s)
-        })
     });
 </script>
 </body>

examples/al-save-colormap.html

@@ -25,7 +25,10 @@
 
         aladin.setImageLayer(survey2);
 
-        aladin.removeHiPSFromFavorites(survey3);
+        setTimeout(() => {
+            aladin.removeHiPSFromFavorites(survey3)
+        }, 5000);
+
 
         aladin.addColormap('mycmap', ["lightblue", "red", "violet", "lightgreen"])
     });

examples/al-set-colormap.html

@@ -15,10 +15,6 @@
         // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
         hips = aladin.getBaseImageLayer()
         hips.setColormap("cubehelix");
-
-        aladin.setImageSurvey('astron.nl/P/lotss_dr2_high')
-
-        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
     });
 </script>
 

examples/al-soda-eso.html

@@ -12,7 +12,7 @@
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {fullScreen: true, target: "orion", fov: 10, projection: 'SIN', showContextMenu: true});
 
-        const c1 = A.catalogFromURL('./data/eso.xml', {onClick: 'showTable'});
+        const c1 = A.catalogFromURL('./data/votable/eso.xml', {onClick: 'showTable'});
         aladin.addCatalog(c1);
     });
 </script>

examples/al-ui-off.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    </head>
+<body>
+<div id="aladin-lite-div" style="width: 512px; height: 512px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div',
+            {
+                cooFrame: "ICRSd",
+                survey: "data/hips/CDS_P_DSS2_color",
+                target: "05 40 59.12 -02 27 04.1",
+                fov: 2,
+                showSimbadPointerControl: false,
+                showShareControl: false,
+                showContextMenu: false,
+                showCatalog: false,
+                showFov: false,
+                showCooGrid: false,
+                showFrame: false,
+                showCooGridControl: false,
+                showCooLocation: false,
+                showFullscreenControl: false,
+                showLayersControl: false,
+                showProjectionControl: false,
+                showReticle: false,
+                showSettingsControl: false,
+                showStatusBar: false,
+                showZoomControl: false,
+                log: false, // disable the log for the test
+            }
+        );
+    });
+</script>
+
+</body>
+</html>