### Initialize Aladin Lite and Add Overlays

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-footprints.html

Initializes Aladin Lite with specified options and adds a graphic overlay. This is the setup for adding graphical elements like footprints.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
  // Start up Aladin Lite
  aladin = A.aladin('#aladin-lite-div', {
    target: 'M 1',
    fov: 0.2,
    showContextMenu: true,
    fullScreen: true
  });
  var overlay = A.graphicOverlay({
    color: 'purple',
    lineWidth: 3,
    lineDash: [2, 2]
  });
  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]
    ]),
    A.polygon([
      [8.62807, 220.06330],
      [83.58397, 10.02280],
      [150.62792, 87.02258]
    ])
  ]);
  overlay.add(A.circle(83.66067, 22.03081, 0.04, {
    color: 'cyan'
  })); // radius in degrees
  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);
  })
  aladin.on("objectClicked", (object, xyMouseCoords) => {
    console.log("object clicked catched: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
  })
  aladin.on("footprintHovered", (footprint, xyMouseCoords) => {
    console.log("footprint hovered catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
  })
  aladin.on("objectHoveredStop", (object, xyMouseCoords) => {
    console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
  })
  //const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
  //aladin.addCatalog(cat);
});
```

--------------------------------

### Initialize Aladin Lite and Add Event Listeners

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-event-listeners.html

Initializes Aladin Lite with specified options and sets up various event listeners for user interactions and viewer changes. This is the primary setup for an Aladin Lite instance.

```javascript
import A from '../src/js/A.js'; A.init.then(() => {
    var aladin = A.aladin('#aladin-lite-div', {
        showContextMenu: true,
        target: '05 37 58 +08 17 35',
        fov: 12,
        backgroundColor: 'rgb(120, 0, 0)'
    });

    // Event listener for stack changes
    aladin.on('stackChanged', function(state) {
        console.log(state)
    });

    // Catalog creation and adding sources
    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;
    // define function triggered when a source is hovered
    aladin.on('click', function(e) {
        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: ' + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
        } else {
            msg = 'No object hovered';
        }
        infoDiv.innerText = msg;
    });

    aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
        if (object) {
            msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: ' + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
        }
        infoDiv.innerText = msg;
    });

    // define function triggered when an object is clicked
    var objClicked;
    aladin.on('objectClicked', function(object, xyMouseCoords) {
        if (object) {
            objClicked = object;
            object.select();
            msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: ' + xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
        } else {
            objClicked.deselect();
            msg = 'You clicked in void';
        }
        infoDiv.innerText = msg;
    });

    aladin.on('resizeChanged', function() {
        console.log("resize")
    });
    aladin.on('projectionChanged', function(proj) {
        console.log(proj)
    });
    aladin.on('positionChanged', function(pos) {
        console.log(pos)
    });

    cat.sources[0].actionClicked();
});
```

--------------------------------

### Initialize Aladin Lite and Add IMCCE VOT Catalog

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-imcce-vot.html

Use this snippet to start Aladin Lite with custom settings and load a VOTable catalog. Ensure the Aladin Lite library is imported and the target div exists.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
  // Start up Aladin Lite
  aladin = A.aladin('#aladin-lite-div', {
    target: '09 55 52.4 +69 40 47',
    fov: 0.25,
    showContextMenu: true,
    fullScreen: true,
    showSimbadPointerControl: true,
  });
  aladin.addCatalog(A.catalogFromURL('./data/votable/IMCCE.with_namespace.vot', {
    onClick: 'showTable',
    limit: 1000
  }));
});
```

--------------------------------

### Building the Landing Page

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/data/hips/CFHT/index.html

Initializes Aladin Lite and sets up the main landing page with specific styling and options. This function is the entry point for the Aladin Lite interface.

```javascript
let aladin; let moc; const buildLandingPage = function(options) { // set style const style = cEl('style'); style.textContent = ` html, body { margin: 0; padding: 0; width: 100%; } body { background-color: #232323; } html { font-family: sans-serif; line-height: 1.15; } [type="checkbox"] { vertical-align: text-bottom; } a { text-decoration: none; color: #47a4eb; } h1 { font-size: 2rem; font-weight: 400; color: #eeeeee; text-align: center; } @media screen and (max-width: 700px) { h1 { font-size: 1.3rem; } #targets-selector { display: none; } } h2 { font-size: 1.4rem; overflow-wrap: anywhere; padding-left: 4rem; padding-right: 1rem; color: #eeeeee; text-align: center; } h3 { background-color: #232323; color: #eeeeee; margin: 0; padding: 0.6rem; } .dataAccess { background-color: #eee; padding: 1rem; } .doiDisplay { background-color: #eee; padding: 1rem; } .doiLink { padding-left: 1.5rem; background: url(data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20vers
```

--------------------------------

### Serve Examples Locally

Source: https://github.com/cds-astro/aladin-lite/blob/master/README.md

Start a localhost server to run the examples located in the 'examples' directory. This is useful for testing and previewing functionalities.

```sh
npm run serve
```

--------------------------------

### Initialize Aladin Lite and Add Catalogs

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-easy-access-simbad-ned.html

Initializes Aladin Lite with specified options and adds catalogs from Simbad and NED. Ensure A.init is called before initializing Aladin Lite.

```javascript
let aladin;
import A from '../src/js/A.js';
A.init.then(() => {
  // Start up Aladin Lite
  aladin = A.aladin('#aladin-lite-div', {
    target: '09 55 52.4 +69 40 47',
    fov: 0.25,
    showContextMenu: true,
    fullScreen: true,
    showSimbadPointerControl: true,
    showShareControl: true,
    showSettingsControl: true,
    showStackLayerControl: true,
    samp: true,
    showCooGrid: true,
  });
  aladin.addCatalog(A.catalogFromSimbad('M 82', 0.1, {onClick: 'showTable'}));
  aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));
});
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/cds-astro/aladin-lite/blob/master/README.md

Install the necessary dependencies for the project using npm. This is a prerequisite for building the project.

```sh
npm install
```

--------------------------------

### Install Playwright for Snapshot Testing

Source: https://github.com/cds-astro/aladin-lite/blob/master/README.md

Install Playwright, a tool for end-to-end testing and snapshot comparisons. This is a prerequisite for running snapshot tests.

```sh
npx playwright install
```

--------------------------------

### Initialize Aladin Lite and Add Multiple Catalogs

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-multi-catalog-table.html

Initializes Aladin Lite and adds two catalogs from VizieR. Configures catalogs to show a table on click. Ensure A.init is called before initializing Aladin Lite.

```javascript
var aladin;
import A from '../src/js/A.js';
A.init.then(() => {
    aladin = A.aladin('#aladin-lite-div', {target: 'M 45', fov: 5, showContextMenu: true, samp: true});
    const cat = A.catalogFromVizieR('I/311/hip2', 'M 45', 5, {onClick: 'showTable'});
    const cat2 = A.catalogFromVizieR('I/312/sample', 'M 45', 0.5, {onClick: 'showTable'});
    aladin.addCatalog(cat);
    aladin.addCatalog(cat2);
    aladin.select();
});
```

--------------------------------

### Install Aladin Lite via NPM

Source: https://github.com/cds-astro/aladin-lite/blob/master/README.md

Install the aladin-lite package using npm. This command is used to add the library to your project's dependencies.

```bash
npm i aladin-lite
```

--------------------------------

### Initialize Aladin Lite and Add Data

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-aas225.html

This snippet shows how to initialize Aladin Lite with specific view parameters, set a base image layer from a survey, add a Simbad catalog with custom markers and popups, and draw a polygon overlay. It requires the A.js module.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
    aladin = A.init.aladin('#aladin-lite-div', {
        fov: 0.15,
        target: 'Arp 240',
        showContextMenu: true,
        showReticle: false,
        fullScreen: true
    });
    aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {
        url: 'https://alasky.cds.unistra.fr/SDSS/DR9/band-g/',
        maxOrder: 10,
        cooFrame: 'icrs',
        imgFormat: 'png',
        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);
    aladin.displayJPG('http://images.ipac.caltech.edu/esahubble/heic0810at/esahubble_heic0810at_1600.jpg');
});
```

--------------------------------

### Initialize Aladin Lite and Add Catalogs

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-easy-access-vizier.html

Initializes Aladin Lite with specified options and adds multiple catalogs from different sources. Ensure Aladin Lite is loaded before executing this code.

```javascript
import A from '../src/js/A.js';
var aladin;
var vmc_cepheids = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=401&FORMAT=votable&QUERY=SELECT%20*%20from%20vmc_er4_yjks_cepheidCatMetaData_fits_V3%20where%20%20CONTAINS(POINT(%27%27,RA2000,DEC2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=3&FORMAT=votable&QUERY=SELECT%20*%20from%20safcat.PESSTO_TRAN_CAT_V3%20where%20CONTAINS(POINT(%27%27,TRANSIENT_RAJ2000,TRANSIENT_DECJ2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
A.init.then(() => {
 aladin = A.aladin('#aladin-lite-div', {
  survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/',
  target: 'LMC',
  fov: 5,
  showContextMenu: true,
  showSettingsControl:true,
  samp:true
 });
 aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
 aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
 aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}));
 aladin.on('select', (objs) => { console.log(objs, "are selected"); })
 aladin.select('circle');
});
```

--------------------------------

### Build the Aladin Lite Project

Source: https://github.com/cds-astro/aladin-lite/blob/master/README.md

Build the Aladin Lite project after installing dependencies. This command compiles the core project into WebAssembly.

```sh
npm run build
```

--------------------------------

### Create and Populate Tables for Other Properties

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/data/hips/CDS_P_DSS2_color/index.html

Dynamically creates and populates HTML tables for remaining properties in propDic, excluding those starting with 'hipsgen_param' or 'hipsgen_date'.

```javascript
const greyTable = cEl('table');
const greyTBody = cEl('tbody');
greyTable.appendChild(greyTBody);
greyTable.classList.add('styled-table', 'grey-table');
for (const [key, value] of Object.entries(propDic)) {
  if (key.startsWith('hipsgen_param') || key.startsWith('hipsgen_date')) {
    continue;
  }
  const tr = cEl('tr');
  const td1 = cEl('td');
  td1.appendChild(formatKey(key));
  tr.appendChild(td1);
  const td2 = cEl('td');
  td2.appendChild(formatValue(value, key));
  tr.appendChild(td2);
  greyTBody.append(tr);
  delete propDic[key];
}
linkEl.appendChild(greyTable);
```

--------------------------------

### Initialize Aladin Lite and Add GW MOCs

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-gw.html

Initializes Aladin Lite with specific survey and control options, then loads and adds several MOC FITS files to visualize gravitational wave event probabilities.

```javascript
var aladin;
import A from '../src/js/A.js';
//let aladin;
A.init.then(() => {
 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);
 aladin.addMOC(moc_0_5);
 aladin.addMOC(moc_0_2);
});
```

--------------------------------

### Initialize Aladin Lite and Meerkat Survey

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-zoom-meerkat.html

Initializes Aladin Lite, loads the Meerkat survey, sets colormap, and configures the projection. Use this to set up the Aladin Lite viewer with specific survey data.

```javascript
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
    });
    const meerkat = aladin.newImageSurvey('P/MeerKAT/Galactic-Centre-1284MHz-StokesI', {
        imgFormat: 'fits'
    });
    meerkat.setColormap('magma', {
        stretch: "asinh"
    });
    aladin.setOverlayImageLayer(meerkat);
    aladin.setProjection("AIT");
});
```

--------------------------------

### Parse HiPS Properties String

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-landing-page.html

Parses a string containing HiPS properties, handling comments, key-value pairs, and multi-line values. Ignores lines starting with '#'.

```javascript
const parseHiPSProperties = function (propertiesStr) {
  if (propertiesStr == null) {
    return null;
  }
  const propertiesDict = {};
  // remove CR characters
  propertiesStr = propertiesStr.replace(/[
]/g, '');
  // split on LF
  const lines = propertiesStr.split('\n');
  let lastKey;
  for (let k = 0; k < lines.length; k++) {
    const l = lines[k].trim();
    // ignore comments lines
    if (l.slice(0, 1) === '#') {
      continue;
    }
    var idx = l.indexOf('=');
    if (idx < 0) {
      if (lastKey) {
        propertiesDict[lastKey] += l;
      }
      continue;
    }
    var key = l.slice(0, idx).trim();
    var value = l.slice(idx + 1).trim();
    propertiesDict[key] = value;
    lastKey = key;
  }
  return propertiesDict;
};
```

--------------------------------

### Initialize Aladin Lite and Add Catalogs

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-eso-catalogs.html

Initializes Aladin Lite with a survey and target, then adds multiple catalogs from URLs with different configurations for display and interaction.

```javascript
import A from '../src/js/A.js';
var vmc_cepheids = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=401&FORMAT=votable&QUERY=SELECT%20*%20from%20vmc_er4_yjks_cepheidCatMetaData_fits_V3%20where%20%20CONTAINS(POINT(%27%27,RA2000,DEC2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAXREC=3&FORMAT=votable&QUERY=SELECT%20*%20from%20safcat.PESSTO_TRAN_CAT_V3%20where%20CONTAINS(POINT(%27%27,TRANSIENT_RAJ2000,TRANSIENT_DECJ2000),%20CIRCLE(%27%27,80.894167,-69.756111,2.7))=1';
var aladin;
A.init.then(() => {
  aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});
  aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
  aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
  aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}), undefined, true);
});
```

--------------------------------

### Initialize Aladin Lite and Define Polygons

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-all-sky-polygons-projection-HPX.html

Initializes Aladin Lite and defines an array of vertices for multiple polygons. This setup is necessary before rendering any sky objects.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
    var verticesArr = [
        [ [[ 33.75, 3.508354649267438e-15 ], [ 28.124999999999982, -4.780191847199157 ], [ 33.75, -9.594068226860456 ], [ 39.374999999999986, -4.780191847199157 ] ],
        [ [[ 71.99999999999999, -60.43443884495228 ], [ 67.49999999999999, -66.44353569089876 ], [ 90, -72.38756092964961 ], [ 89.99999999999997, -66.44353569089876 ] ],
        [ [[ 22.499999999999986, -66.44353569089876 ], [ 0, -72.38756092964961 ], [ 0, -78.28414760510762 ], [ 29.99999999999998, -72.38756092964961 ] ],
        [ [[ 270, -19.471220634490695 ], [ 264.375, -24.624318352164085 ], [ 270, -30.000000000000018 ], [ 275.625, -24.624318352164085 ] ],
        [ [[ 151.87500000000003, 4.7801918471991645 ], [ 146.25, 3.508354649267438e-15 ], [ 151.87500000000003, -4.780191847199157 ], [ 157.5, 3.508354649267438e-15 ] ],
        [ [[ 264.375, -24.624318352164085 ], [ 258.75, -30.000000000000018 ], [ 264.375, -35.68533471265207 ], [ 270, -30.000000000000018 ] ],
        [ [[ 275.625, -24.624318352164085 ], [ 270, -30.000000000000018 ], [ 275.625, -35.68533471265207 ], [ 281.25, -30.000000000000018 ] ],
        [ [[ 50.625, -24.624318352164085 ], [ 45.00000000000001, -30.00000000000001 ], [ 50.624999999999986, -35.68533471265207 ], [ 56.25, -30.000000000000018 ] ],
        [ [[ 224.99999999999997, -54.34091230386125 ], [ 216, -60.43443884495228 ], [ 224.99999999999994, -66.44353569089876 ], [ 233.99999999999994, -60.43443884495228 ] ],
        [ [[ 247.49999999999994, -41.81031489577861 ], [ 244.28571428571428, -48.1412077943603 ], [ 255, -54.34091230386125 ], [ 257.1428571428571, -48.1412077943603 ] ],
        [ [[ 270, -30.000000000000018 ], [ 264.375, -35.68533471265207 ], [ 270, -41.81031489577861 ], [ 275.625, -35.68533471265207 ] ],
        [ [[ 286.875, -24.624318352164085 ], [ 281.25, -30.000000000000018 ], [ 286.875, -35.68533471265207 ], [ 292.5, -30.000000000000018 ] ],
        [ [[ 247.49999999999994, -19.471220634490695 ], [ 241.875, -24.624318352164085 ], [ 247.49999999999994, -30.000000000000018 ], [ 253.125, -24.624318352164085 ] ],
        [ [[ 331.875, 4.7801918471991645 ], [ 326.25, 3.508354649267438e-15 ], [ 331.875, -4.780191847199157 ], [ 337.49999999999994, 3.508354649267438e-15 ] ],
        [ [[ 258.75, -30.000000000000018 ], [ 253.125, -35.685334712652065 ], [ 258.75, -41.81031489577861 ], [ 264.375, -35.68533471265207 ] ],
        [ [[ 154.28571428571428, -48.1412077943603 ], [ 150, -54.34091230386125 ], [ 162.00000000000003, -60.43443884495228 ], [ 164.99999999999997, -54.34091230386125 ] ],
        [ [[ 202.49999999999997, -41.81031489577861 ], [ 192.85714285714278, -48.1412077943603 ], [ 194.99999999999994, -54.34091230386125 ], [ 205.71428571428567, -48.1412077943603 ] ],
        [ [[ 164.99999999999997, -54.34091230386125 ], [ 162.00000000000003, -60.43443884495228 ], [ 180, -66.44353569089876 ], [ 180, -60.43443884495228 ] ],
        [ [[ 253.125, -35.685334712652065 ], [ 247.49999999999994, -41.81031489577861 ], [ 257.1428571428571, -48.1412077943603 ], [ 258.75, -41.81031489577861 ] ],
        [ [[ 102.85714285714286, -48.1412077943603 ], [ 90, -54.34091230386125 ], [ 90, -60.43443884495228 ], [ 105, -54.34091230386125 ] ],
        [ [[ 275.625, -14.47751218592993 ], [ 270, -19.471220634490695 ], [ 275.625, -24.624318352164085 ], [ 281.25, -19.471220634490695 ] ],
        [ [[ 231.42857142857142, -48.1412077943603 ], [ 224.99999999999997, -54.34091230386125 ], [ 233.99999999999997, -60.43443884495228 ], [ 240, -54.34091230386125 ] ],
        [ [[ 195.00000000000003, -54.34091230386125 ], [ 180, -60.43443884495228 ], [ 180, -66.44353569089876 ], [ 197.99999999999997, -60.43443884495228 ] ],
        [ [[ 210, -54.34091230386125 ], [ 197.99999999999997, -60.43443884495228 ], [ 202.49999999999994, -66.44353569089876 ], [ 215.99999999999997, -60.43443884495228 ] ],
        [ [[ 112.5, -19.4712206344907 ], [ 106.87499999999999, -24.624318352164085 ], [ 112.5, -30.000000000000018 ], [ 118.125, -24.624318352164085 ] ],
        [ [[ 264.375, -35.68533471265207 ], [ 258.75, -41.81031489577861 ], [ 270, -48.1412077943603 ], [ 270, -41.81031489577861 ] ],
        [ [[ 264.375, -14.47751218592993 ], [ 258.75, -19.4712206344907 ], [ 264.375, -24.624318352164085 ], [ 270, -19.471220634490695 ] ],
        [ [[ 286.875, 4.7801918471991645 ], [ 281.25, 3.508354649267438e-15 ], [ 286.875, -4.780191847199157 ], [ 292.5, 3.5083546492674388e-15 ] ],
        [ [[ 67.49999999999997, -66.44353569089876 ], [ 60.00000000000001, -72.38756092964961 ], [ 90, -78.28414760510762 ], [ 90, -72.38756092964961 ] ],
        [ [[ 101.25, 3.508354649267438e-15 ], [ 95.625, -4.7801918471991565 ], [ 101.25, -9.594068226860456 ], [ 106.87499999999999, -4.780191847199157 ] ],
        [ [[ 281.25, -19.471220634490695 ], [ 275.625, -24.624318352164085 ], [ 281.25, -30.000000000000018 ], [ 286.875, -24.624318352164085 ] ],
        [ [[ 84.374999 ]]
    ];
});
```

--------------------------------

### Initialize Aladin Lite and Add Image Layers

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-overlay-image-layer.html

Initializes Aladin Lite with specific coordinates and field of view, then sets a base image layer and an overlay image layer. The overlay layer's opacity is then adjusted.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
 aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', fov: 110, target: 'galactic center'});
 aladin.setBaseImageLayer('https://alasky.cds.unistra.fr/MellingerRGB');
 aladin.setOverlayImageLayer(aladin.createImageSurvey('VTSS', 'VTSS', 'https://alasky.u-strasbg.fr/VTSS/Ha', 'galactic', 3, {imgFormat: 'png'}));
 aladin.getOverlayImageLayer().setOpacity(0.5);
});
```

--------------------------------

### Update wasm-pack Version

Source: https://github.com/cds-astro/aladin-lite/blob/master/README.md

Update the wasm-pack tool to a specific version, which can help resolve Rust compiling issues. This command uses cargo to install the Rust package.

```sh
cargo install wasm-pack --version ~0.12
```

--------------------------------

### Initialize Aladin Lite

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-read-pixel.html

Initializes Aladin Lite with specified configuration options. This setup includes setting the survey, projection, initial target, and various UI controls.

```javascript
import A from '../src/js/A.js';
A.init.then(() => {
  aladin = A.aladin( '#aladin-lite-div', {
    showSimbadPointerControl: true,
    survey: 'P/allWISE/color',
    projection: 'AIT',
    fov: 360,
    target: 'orion',
    cooFrame: 'icrs',
    reticleColor: '#ff89ff',
    reticleSize: 64,
    showContextMenu: true,
    showShareControl: true,
    showFrame: true,
    showZoomControl:true,
    showSettingsControl:true,
    showColorPickerControl: true,
    showCooGrid: true,
    fullScreen: true,
    samp: true,
    realFullscreen: true,
  } );
});
```

--------------------------------

### Initialize Aladin Lite and Add Image Layer

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-no-properties.html

Initializes Aladin Lite with specific field of view and projection, then sets an overlay image layer from a HiPS source. Ensure the target div exists and Aladin Lite is imported.

```javascript
import A from '../src/js/A.js';
A.init.then(() => {
  let aladin = A.aladin('#aladin-lite-div', {fov: 70,projection: "AIT"});
  aladin.setOverlayImageLayer(A.imageHiPS( "https://alasky.cds.unistra.fr/Fermi/Color", { name: "Fermi color", maxOrder: 3, imgFormat: 'jpeg', tileSize: 512, cooFrame: 'equatorial' } ));
});
```

--------------------------------

### Load VOTable Catalog from URL

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-load-votables-by-url.html

Initializes Aladin Lite and adds a catalog loaded from a specified VOTable URL. Ensure Aladin Lite is initialized before adding catalogs.

```javascript
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'})); });
```

--------------------------------

### Initialize Aladin Lite

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-not-found.html

Use this snippet to start Aladin Lite in a specified HTML element with custom configurations. Ensure the A.init promise resolves before initializing Aladin Lite.

```javascript
var aladin;
import A from '../src/js/A.js';
A.init.then(() => {
  // Start up Aladin Lite
  aladin = A.aladin('#aladin-lite-div', {
    fov: 360,
    target: '0 0',
    fullScreen: true,
    survey: ["azef", "jfjfj", "jfj", "P/allWISE/color"],
  });
});
```

--------------------------------

### Initialize Aladin Lite with URL Parameters

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/index_es.html

Initializes Aladin Lite with default settings and then updates its configuration based on URL query parameters. Use this to dynamically control Aladin Lite's view and layers via the URL.

```javascript
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.setCooGrid({ enabled: b }); } });
```

--------------------------------

### SAMP Client Set Callable

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/CDS_P_DSS2_color/index.html

Sets whether the SAMP client can receive reverse callbacks. If 'n' is true, it enables callbacks and starts polling for them. If 'n' is false, it disables callbacks.

```javascript
u.prototype.setCallable=function(n,r){if(this.callbackRequest)try{this.callbackRequest.abort()}catch(o){}finally{delete this.callbackRequest}if(n||this.regInfo){var i,s=new a(t+"allowReverseCallbacks");s.addParam(this.privateKey),s.addParam(n?"1":"0");var c=(i=this,function(){i.close()});n?function(o){var i,u=function(t){var e=t["samp.methodName"],r=t["samp.params"],o="receiveNotification"===e?o=n.receiveNotification:"receiveCall"===e?o=n.receiveCall:"receiveResponse"===e&&(o=n.receiveResponse),o&&o.apply(n,r)},l=function(t){var n;if(e(t)!=TYPE_LIST){p(Error("pullCallbacks result not List"));return}for(n=0;n<t.length;n++)try{u(t[n])}catch(r){}h()},p=function(t){new Date().getTime()-i<1e3?o.close():h()},h=function(){if(o.regInfo){var e=new a(t+"pullCallbacks");e.addParam(o.privateKey),e.addParam("600"),i=new Date().getTime(),o.callbackRequest=o.xClient.execute(e,l,p)}},f=function(){h(),r()};o.xClient.execute(s,f,c)}(this):this.xClient.execute(s,r,c)}}
```

--------------------------------

### Initialize Aladin Lite and Add SKA ORucio Catalogs

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-ivoa-sydney.html

Initializes Aladin Lite with specific options and adds two catalogs from SKA ORucio. Ensure the Aladin Lite library is correctly imported and the target div exists.

```javascript
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,
  });
  aladin.addCatalog(A.catalogFromSKAORucio("abell 194", 15, {
    onClick: 'showTable',
    hoverColor: "yellow",
  }));
  aladin.addCatalog(A.catalogFromSKAORucio("m51", 15, {
    onClick: 'showTable',
    hoverColor: "yellow",
  }));
});
```

--------------------------------

### Animate Field of View and View Center

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-animation-CS-CDS-2022.html

Animates the field of view to zoom in and simultaneously adjusts the view center's angle towards the North Pole. Useful for guided tours.

```javascript
nbIt = 300
fovStart = 360
fovEnd = 5.4
fov = fovStart
for await(const it of interval(intervalMs, nbIt+1)) {
  fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
  aladin.setFoV(fov)
  aladin.setViewCenter2NorthPoleAngle(40 - 40 * it/nbIt)
}
aladin.setFoV(fovEnd)
```

--------------------------------

### Initialize Aladin Lite with Density Settings

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-simbad-density.html

Initializes Aladin Lite, loads a specific survey, sets the target coordinates, and configures density visualization properties like projection and colormap. Ensure the Aladin Lite library is correctly imported.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
  // Start up Aladin Lite
  aladin = A.aladin('#aladin-lite-div', {
    fov: 180.0,
    fullScreen: true,
    survey: "https://alaskybis.cds.unistra.fr/ancillary/simbad-biblio/allObjects",
    target: '12 25 41.512 +12 48 47.2',
    showCooGrid: true
  });
  aladin.setProjection("TAN");
  aladin.getBaseImageLayer().setColormap("redtemperature")
});
```

--------------------------------

### Initialize Aladin Lite with Mars Perseverance Survey

Source: https://github.com/cds-astro/aladin-lite/blob/master/examples/al-perseverence.html

Use this snippet to start Aladin Lite and load the Mars Perseverance survey data. Ensure the Aladin Lite library is properly imported and initialized.

```javascript
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
  // Start up Aladin Lite
  aladin = A.aladin('#aladin-lite-div', {
    fov: 360,
    projection: 'MER',
    target: '0 0',
    fullScreen: true,
    survey: "CDS/P/Mars/Pan-Perseverance-PIA24422",
    showCooGrid: true,
    showCooGridControl: true,
  });
});
```