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.
EMBEDDING IN A WEB PAGE
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="//aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
<!-- 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- include Tour navigator CSS files in the head section of your page -->
<link rel="stylesheet" href="//www.cefca.es/tour_navigator/lastest/css/navigator.min.css" />
<link rel="stylesheet" href="//www.cefca.es/tour_navigator/lastest/css/tour_navigator.min.css" />
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="//code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
<!-- include Aladin Lite javascript file -->
<script type="text/javascript" src="//aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
<!-- include Tour navigator javascript files in the head section of your page -->
<script type="text/javascript" src="//www.cefca.es/tour_navigator/lastest/js/navigator.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//www.cefca.es/tour_navigator/lastest/js/tour_navigator.min.js" 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"});
tourNavigator.startTour('tourNavigator');
});
ALADIN LITE CREATION
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.
TOUR NAVIGATOR OBJECTS LIST DEFINITION
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 |
TOUR NAVIGATOR CREATION
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
FEBRUARY 2019
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.
FEBRUARY 2018
Version 1.0: First public release
Author
Tour navigator plugin is developed and maintained by Tamara Civera (CEFCA).
Send your feedback, comments, feature requests and bug reports to this email address.