Aladin Lite API reference

Aladin Lite creation

A.aladin(<container-div-selector>, <options>?)

Creating an Aladin Lite instance is quite easy: after having inserted the embedding code in your page, just call var aladin = A.aladin('#aladin-lite-div');. The variable aladin is a reference to the Aladin lite instance.

Note that Aladin Lite view will automatically adapt if the container div is resized, as shown in this example.

Initialization options

The method takes an optional second argument which gives the initialization options as a key-value object. Possible options are:
Key nameDescriptionDefault value
targetInitial target, as a position or an object name resolved by Sesame0 +0
cooFrameCoordinate system: "ICRS" or "galactic""ICRS"
surveyIdentifier of the initial image survey. See this section for more details."P/DSS2/color"
fovInitial value of the visible field of view, in decimal degrees60
showReticleIf true, the reticle will be displayedtrue
showZoomControlIf true, the zoom control GUI is displayed (plus/minus buttons)true
showFullscreenControlIf true, the button to pass in full screen mode (at the top right of the interface) is displayedtrue
showLayersControlIf true, the icon to open the layers controls is displayedtrue
showGotoControlIf true, the icon to easily jump to a new position/object is displayedtrue
showFrameIf true, coordinate are displayed (at the top left of the interface)true
fullScreenIf true, Aladin Lite starts in "full screen" modefalse
reticleColorColor of the reticle"rgb(178, 50, 178)"
reticleSizeSize in pixels of the reticle22

Example of Aladin Lite initialization with custom options

Customizing location of GUI elements

If you want to customize the location of the GUI elements (full screen icon, zoom controller, goto controller, layers controller), the easiest way is to override the CSS properties of the corresponding class (respectively .aladin-fullscreen, .aladin-zoomControl, .aladin-gotoControl, .aladin-layersControl).

Getting information about the view

aladin.getSize() will return an array with the current dimension (width, height) of Aladin Lite view in pixels.

aladin.getFov() returns an array with the current dimension on the sky (size in X, size in Y) of the view in decimal degrees.

aladin.getFovCorners(<nbSteps?>) returns an array of [ra, dec] points along the current rectangular view. By default, the position of the 4 corners are returned. You can get more control points passing an optional nbSteps parameter. The returned format is: [[ra1, dec1], [ra2, dec2], ..., [ra_n, dec_n]] with n equals to 4*nbSteps.

Updating view properties

Setting the size of the FoV

Use aladin.setFov(<FoV-in-degrees>) Setting the current position of the center of the view

There are several methods to update the current position:

  • aladin.gotoRaDec(<ra-in-degrees>, <dec-in-degrees>)
  • aladin.gotoObject(<iobject-name-or-position>) . This method can understand both a position or an object name. Object names will be resolved by Sesame.
Example: setting the current target.

Displaying a custom HiPS image layer

To display a custom HiPS (previously generated by Hipsgen for instance, use the following method:
aladin.setImageSurvey(aladin.createImageSurvey(<HiPS-ID>, <HiPS-name>, <HiPS-base-URL>, <HiPS frame ('equatorial' or 'galactic', usually 'equatorial')>, <HiPS max order>, {imgFormat: <tiles format ('jpg' or 'png')>})); The URL you give can be private or even on localhost.

You can see a working example here of displaying a custom HiPS

Retrieving the base image layer

Calling aladin.getBaseImageLayer() will return an ImageLayer object corresponding to the base image layer.

Updating the color map

Call getColorMap() on an ImageLayer object to retrieve its color map.
Once retrieved, call update(<color-map-name>) to set a new color map. Recognized values are:

  • cubehelix
  • eosb
  • rainbow
  • grayscale
  • native to go back to the original image color map

Example: setting a cubehelix color map

Displaying a HiPS catalogue layer

To display a HiPS catalogue (previously generated by Hipsgen-cat for instance, use the following method:
aladin.addCatalog(A.catalogHiPS(<HiPS-base-URL>, <options?>))

You can see a working example here of displaying a HiPS dedicated to SIMBAD objects.

Creating a new catalogue layer

Catalogue layers are meant to hold list of astronomical sources. They are created using A.catalog(<options>?) and added to Aladin Lite with aladin.addCatalog(catalogInstance)

Possible options are:

Key nameDescription
nameThe label of the catalogue layer.
shapeThe shape used for each source in the catalog.
Possible values are: plus, rhomb, cross, triangle and square (default value).
An HTMLCanvasElement or an Image object can also be passed (JPEG, PNG formats are supported, even SVG in most modern browsers).
colorThe color of the shape for each source.
sourceSizeThe size of the source in pixels.
raFieldID, name or index of the field to be used as Right Ascension. If not given, Aladin Lite will try to guess on the basis of UCDs.
decFieldID, name or index of the field to be used as declination. If not given, Aladin Lite will try to guess on the basis of UCDs.
labelColumnA label can be displayed next to the source shape. The value of labelColumn is the name of the column to be used for this purpose.
If this option is used, color and font of the label can be given with labelColor and labelFont.
labelColorColor of the label
labelFontFont of the label, eg 12px sans-serif
onClickDescribes the action to be executed when a source is clicked. By default, nothing happens. Available values are showTable (displays measurements associated to the clicked source in a table at the bottom of the GUI), showPopup (display measurements in a popup)
See this property in action in this example.
limitLimit the number of sources (default value: undefined)

Adding some sources to the catalogue

Sources can be created manually using A.source(ra, dec, option) and added to an existing catalog layer

Example: Creating a catalog with a custom shape

Loading a VOTable

Catalogue layers can also be created from a VOTable URL: calling A.catalogFromURL(<votable-URL>, <options>?, <successCallback>?, <useProxy>?) will return a Catalog object which can then be added to the Aladin Lite instance.

The compulsory parameter is the URL of the VOTable we want to load. Other parameters are optional:

  • options: display options for the catalog. See above for an exhaustive list of understood keys.
  • succesCallback: function called when the parsing of the VOTable has been done. The callback function will be called with as a parameter the array of parsed Sources.
  • useProxy: true or false (default value: true). By default, Aladin Lite uses an HTTP proxy to retrieve remote resources, in order to allow for cross-domain calls. If the server providing the VOTable supports CORS or if you request a VOTable from the same domain than your Javascript code, you can set this parameter to false in order to make a direct query.

Loading a VOTable from VizieR
Using labels to display object names

Easy access to SIMBAD, VizieR, NED and SkyBot data

We provide with helper functions to easily load SIMBAD, NED or VizieR data for a given region of the sky:

  • A.catalogFromSimbad(<target>, <radius-in-degrees>, <catalog-options>?, <successCallback>?) will return a Catalog instance with Simbad data of the requested region around the target. Target can be an object name, a position or an object {ra: <ra-value>, dec: <dec-value>}.
  • A.catalogFromVizieR(<vizier-cat-id>, <target>, <radius-in-deg>, <cat-options>?, <successCallback>?) will return a Catalog instance with data of the requested VizieR catalogue.
  • A.catalogFromNED(<target>, <radius-in-degrees>, <catalog-options>?, <successCallback>?) will return a Catalog instance with NED data of the requested region.
  • A.catalogFromSkyBot(<ra>, <dec>, <radius>, <epoch>, <query-options>?, <cat-options>?, <successCallback>?) will query the SkyBot service for solar system objects and return a Catalog instance for the requested cone (right ascension, declination, radius in degrees) and epoch. Additional optional query options can be specified as a keyword/value dictionary, eg: {"-loc": 500, "-filter": 0}

Visualizing SIMBAD and NED data around M 82
Visualizing Hipparcos data in the Pleiades

Creating a marker

A marker displays a position on the sky. Clicking on a marker will open a popup with a title and text set upon creation.

Use A.marker(ra, dec, {popupTitle: <title of the popup>, popupDesc: <text (possibly HTML) for the popup>}) to create a new marker. You can then add it to an existing Catalog.

Example: Creating multiple markers

Pixel coordinates to world coordinates

pix2world(<x>, <y>) transforms pixel coordinates to world coordinates, origin (0,0) of pixel coordinates being at top left corner of Aladin Lite view. It returns a [ra, dec] array with world coordinates in degrees.

World coordinates to pixel coordinates

world2pix(<ra>, <dec>) transforms world coordinates to pixel coordinates in the view. It returns a [x, y] array with corresponding pixel coordinates in the Aladin Lite view. It returns null if the projection failed somehow.

Retrieve current view as a PNG

Calling getViewDataURL() on the aladin instance will return the current view as a base64-encoded string. This method takes an optional parameter to specify the image format, either 'image/png' or 'image/jpeg'.

Get URL of the current view

Calling getShareURL() on the aladin instance will return a permanent link showing the current field of view for the current selected image HiPS.

Get embed code

Calling getEmbedCode() on the aladin instance will return the HTML code to be inserted in a web page, and corresponding to the current field of view (target and zoom level) and to the currently displayed HiPS.

Click here to access to the full list of examples illustrating Aladin Lite API.

→ Thanks for acknowledging Aladin Sky Atlas