Build an interactive sky map with Aladin Lite

Introduction

In this tutorial, you will learn how to build and integrate in your web page an interactive sky map of the Trifid nebula relying on Aladin Lite.

Aladin Lite is a lightweight version of Aladin desktop, running in the browser and geared towards simple visualization of a sky region. It can be easily embedded on any web page and is controllable from a Javascript API.

Pre-requisite

In order to complete this tutorial, you will need:

How this tutorial works

We will start from a blank HTML page, and embed Aladin Lite in it. Each step, built upon the previous one, will then enrich the map and highlight a particular feature of Aladin Lite.

Tutorial steps

1. Embed Aladin Lite

We will start from the following HTML page:

<!DOCTYPE>
<html>
  <body>
    <h1>Trifid interactive map</h1>
  </body>
</html>

Copy the snippet above and paste it in a new index.html file in your working directory.

From your terminal, execute python -m SimpleHTTPServer if you run Python 2.x,
or python -m http.server if you have Python 3.x
From your web browser, access http://0.0.0.0:8000/index.html. You should see a nearly-blank page with just a title.

Go to Aladin Lite embedding documentation, and generate the embedding code for a 700x400 pixels panel, centered on target Trifid nebula and with an initial field of view of 1.5 degrees.
The generated code should look like this: 


<!-- our code needs jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" charset="utf-8"></script>

<!-- Aladin Lite container at requested dimensions -->
<div id="aladin-lite-div" style="width:700px;height:400px;"></div>

<!-- Aladin Lite JS code -->
<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>

<!-- Creation of Aladin Lite instance with initial parameters -->
<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1.5, target: "trifid nebula"});
    });
</script>

Copy this code and paste it in the body element of index.html. Reload the page in your browser. Zoom in, zoom out, pan around.

You should end up with something like that:

View complete source code

2. Change image survey

Aladin Lite gives access to a large set of image surveys (called HiPS for Hierarchical Progressive Surveys, current list available here). Let's complete our map to allow for selection of a few different surveys. First, add the following code the line after the <div id="aladin-lite-div"...> element: 

<input id="DSS" type="radio" name="survey" value="P/DSS2/color"><label for="DSS">DSS color<label>
<input id="DSS-blue" type="radio" name="survey" value="P/DSS2/blue"><label for="DSS-blue">DSS blue<label>
<input id="2MASS" type="radio" name="survey" value="P/2MASS/color"><label for="2MASS">2MASS<label>
<input id="allwise" type="radio" name="survey" value="P/allWISE/color"><label for="allwise">AllWISE<label>
<input id="glimpse" type="radio" name="survey" value="P/GLIMPSE360"><label for="glimpse">GLIMPSE 360<label>
This will create the radio buttons allowing the survey selection.
Now, we need to add the javascript code which will react to changes in the selection (ie call Aladin Lite method to set the current image survey to the one identified by the value of the radio button). Add the following code at the bottom of the <script></script> section we created earlier: 
$('input[name=survey]').change(function() {
    aladin.setImageSurvey($(this).val());
});
Reload your web page, and try to change the current survey.

Our page now looks like this:

View complete source code

3. Add markers

Markers are used to pinpoint particular positions of the sky. Clicking on a marker will open a tooltip displaying some information.

Let's add some markers in our map for a few objects of interest. Add the following code inside the A.init function of our script: 

var marker1 = A.marker(270.332621, -23.078944, {popupTitle: 'PSR B1758-23', popupDesc: 'Object type: Pulsar'});
var marker2 = A.marker(270.63206, -22.905550, {popupTitle: 'HD 164514', popupDesc: 'Object type: Star in cluster'});
var marker3 = A.marker(270.598121, -23.030819, {popupTitle: 'HD 164492', popupDesc: 'Object type: Double star'});
var markerLayer = A.catalog();
aladin.addCatalog(markerLayer);
markerLayer.addSources([marker1, marker2, marker3]);
When creating the markers objects, we provide the position (ra, dec) along with the associated title and description appearing when triggering the popup.
Reload the page and click on one of the markers.
Our map should now look like this:
View complete source code

4. Display SIMBAD and VizieR data

Aladin Lite provides convenient methods to access catalogue data. Let's add two layers to visualize catalogue data from SIMBAD and from a VizieR table (J/ApJ/562/446/table13). Add the following snippet to the script: 

aladin.addCatalog(A.catalogFromSimbad('trifid nebula', 0.2, {shape: 'plus', color : '#5d5', onClick: 'showTable'}));
aladin.addCatalog(A.catalogFromVizieR('J/ApJ/562/446/table13', 'trifid nebula', 0.2, {shape: 'square', sourceSize: 8, color: 'red', onClick: 'showPopup'}));
The parameters of A.catalogFromSimbad, creating a layer with Simbad data, are: object name or position, radius in degrees. The last parameter is an object specifying various objects: shape, source size, color. Feel free to customize them to your taste :-)
A.catalogFromVizieR has a similar signature, but takes as first parameter the name of the VizieR table to load.
The onClick attribute describes what happens when we click on a source: either display the associated measurements in a table or in a popup. If you don't specify this attribute, nothing happens when clicking on a source.

Reload to test the changes. Tip: if the field gets too crowded, you can hide one or more overlay layers from the Manage layers menu at the top left of the interface.
Here is the expected result:
View complete source code

5. Display a footprint overlay

Other available overlays include polylines, circles and polygons. Let's draw the overlay of a HST observation: 

var footprintLayer = A.graphicOverlay({color: '#2345ee', lineWidth: 3});
aladin.addOverlay(footprintLayer);
footprintLayer.addFootprints([A.polygon([[270.62172, -23.04858], [270.59267, -23.08082], [270.62702, -23.10701], [270.64113, -23.09075], [270.63242, -23.08376], [270.63868, -23.07631], [270.63131, -23.07021], [270.63867, -23.06175]])]);
Polygons are simply described as an array of [ra, dec] couples.
Reload your page and you should see this:
View complete source code

6. Visualize an EPO image in context

Finally, let's overlay an outreach image (source: ESO outreach page): 

aladin.displayJPG('http://cdn.eso.org/images/screen/eso0930a.jpg');
This JPEG image can be displayed in Aladin Lite because it embeds AVM tags, describing notably the needed WCS information.
Reload your page. Here is our final map:
View complete source code

Going further

The following links will help you going further with Aladin Lite and learn more about Virtual Observatory standards used under the hood:

Aladin Lite links

HiPS

Links to IVOA standards recommendations

This tutorial was originally developped for the .Astronomy 7 Day Zero.
Thomas Boch, November 2015
(Updated on January 2023)