Tour navigator library

The tour navigator is an Aladin Lite extension that allows to implement easily virtual tours of objects of interest.

It has been designed to be used as interface for navigating through the sky from object to object. Allowing users to learn about each object they visit in the tour.

You can see a complete example at Virgo Cluster Tour.

The tour navigator plugin has been developed and designed at CEFCA.


Terms of use: you are welcome to integrate Aladin Lite and tour navigator plugin in your web pages and to customize its GUI to your needs, but please leave the Aladin and CEFCA logos and links intact at the bottom right of the view. If your project is using Tour Navigator, we would be happy to have it listed here. Please, send us an email.

You should include the following css files in the head section of your page:

<!-- include Aladin Lite CSS file in the head section of your page -->
<link rel="stylesheet" href="//" />

<!-- include bootstrap CSS in the head section of your page. You can skip the following line if your page already integrates bootstrap library. This library is used to display buttons. -->
<link rel="stylesheet" href="//" />

<!-- include Tour navigator CSS files in the head section of your page -->
<link rel="stylesheet" href="//" />
<link rel="stylesheet" href="//" />

You should include the following javascript files in your page:

<!-- you can skip the following line if your page already integrates the jQuery library -->
<script type="text/javascript" src="//" charset="utf-8"></script>
<!-- include Aladin Lite javascript file  -->
<script type="text/javascript" src="//" charset="utf-8"></script>
<!-- include Tour navigator javascript files in the head section of your page -->
<script type="text/javascript" src="//" charset="utf-8"></script>
<script type="text/javascript" src="//" charset="utf-8"></script>

You should place the div element in yor HTML code:

<div id="aladin-lite-div" style="width:400px;height:400px;"></div>

Finally, you should add the javascript code necessary to define the list of objects to visualize in the tour and init the aladin and the tour navigator objects.

var tourNavigator = null;
$(document).ready(function() {
    // Aladin lite creation
    var aladin = A.aladin('#aladin-lite-div');
    // Tour navigator objects list definition
    var tourObjects = [{title: "Presentation", text: "This is the presentation page.", position: null, zoom: null},
                       {title: "M87", text: "M87 is a supergiant elliptical galaxy in the constellation Virgo.", position: [187.7059304, 12.3911231], zoom: 0.2},
                       {title: "M86", text: "M86 is an elliptical or lenticular galaxy in the constellation Virgo", position: [186.5489285, 12.9462217], zoom: 0.2}];
    // Tour navigator creation
    tourNavigator =  new TourNavigator({'objects': tourObjects, 'aladin': aladin, 'aladinId': 'aladin-lite-div', 'surveyName': "P/DSS2/color"});


Creating a Aladin Lite instance is quite easy: after having inserted the embedding code in your page, just call the constructor indicating the identifier used in the html container. For see more initialization options, visit the Aladin Lite API web.


The objects list must be a javascript array with the data of the different objects. For each object, the following data must be indicated:

Key name Description Example
title Title of the slide. Normally the name of the object. "M87"
text Explanation to show in the slide. HTML is allowed to add format to the text. "M87 is a supergiant elliptical galaxy."
position Position of the object. This is the position where the tour navigator will move in the slide. If the position is null, no movement is performed. The position must be indicated in the equatorial coordinate system in degrees and must be null or an array with [RA, DEC]. [187.70, 12.39] or null
zoom Zoom used to show the object. This is the zoom that the tour navigator uses to display the object. If the zoom is -1, no zoom is made between objects movement. 0.2
functionToCall This property is optional. If it is defined, the function defined is going to be called when the object changes. This function receives as parameter the object data. functionDefined or null


Creation a tour navigator object is also quite easy. After creating the aladin lite object and the objects list, just call the constructor with the necessary parameters. Some of the parameters that it takes are compulsory, but some of them are optional. Possible parameters are:

Key name Description Compulsory Default value
objects List with the objects as defined in the previous section. YES -
aladin Aladin Lite object. YES -
aladinId Identifier of the HTML element that contains aladin lite. YES -
surveyName Name of the survey to use as image. YES -
isFullScreen True indicates that the tour will be always displayed in full screen. NO false
language Language to use in texts. Available languages are: EN (english), ES (spanish). NO "EN"
showNumberInfo True indicates that the total number of objects to visit is displayed at the bottom. NO false
isAutomatic True indicates that tour will move from object to object automatically. NO false
tourTime In automatic mode, the time between objects in milliseconds. NO 10s
exitURL In automatic mode, the URL where exit when the user clicks on the exit button. NO "/"
tourRound In automatic mode, if true indicates that when tour finishes, it starts again automatically. NO true
objectChangeDuration Movement duration when the tour goes from one object to other. NO 10

After creating the tour navigator object, just call the 'startTour' method indicating as parameter the name of the variable of the tour navigator object.

Source code

Tour navigator code is available under GPL3 license (Download Tour Navigator source code).

Release notes


Version 1.1:

  • Added new optional property to the objects list called 'functionToCall'.
  • Added new optional property to the tour called 'objectChangeDuration'.
  • If the zoom of the object has value -1, no zoom is made in the movement between objects.


Version 1.0: First public release


Tour navigator plugin is developed and maintained by Tamara Civera (CEFCA).

Send your feedback, comments, feature requests and bug reports to this email address.