mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2026-01-09 03:43:25 -08:00
89 lines
3.4 KiB
HTML
89 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Aladin Lite - interactions</title>
|
|
|
|
<b>Hover a source to highlight the corresponding row</b>
|
|
<br/>
|
|
<b>Click on a source to get its name</b>
|
|
<br/><br/>
|
|
|
|
<link rel="stylesheet" href="../distrib/latest/aladin.min.css" />
|
|
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
|
|
<script type="text/javascript" src="../distrib/latest/aladin.js" charset="utf-8"></script>
|
|
|
|
|
|
<div id="aladin-lite-div" style="width: 300px; height: 300px;float: left;"></div>
|
|
|
|
<style>
|
|
#dataTable tr:nth-child(2n) {
|
|
background-color: #dddddd;
|
|
}
|
|
#dataTable tr:hover {
|
|
cursor: pointer;
|
|
background: #99ff99;
|
|
}
|
|
.hoverRow {
|
|
background: #99ff99 !important;
|
|
}
|
|
</style>
|
|
|
|
<table class="tiny" id="dataTable">
|
|
<tr><th>TYC</th><th>RA</th><th>Dec</th><th>BTmag</th></tr>
|
|
<tr><td>2853 2164 1</td><td>02 42 01.77</td><td>+42 44 54.0</td><td>9.864</td></tr>
|
|
<tr><td>2853 112 1</td><td>02 42 12.96</td><td>+42 44 49.6</td><td>9.917</td></tr>
|
|
<tr><td>2853 166 1</td><td>02 42 13.46</td><td>+42 46 40.7</td><td>8.884</td></tr>
|
|
<tr><td>2853 22 1</td><td>02 41 58.44</td><td>+42 47 30.7</td><td>8.348</td></tr>
|
|
<tr><td>2853 679 1</td><td>02 41 56.74</td><td>+42 47 23.3</td><td>8.388</td></tr>
|
|
<tr><td>2853 1013 1</td><td>02 42 13.16</td><td>+42 41 57.4</td><td>8.139</td></tr>
|
|
<tr><td>2853 958 1</td><td>02 42 45.75</td><td>+42 49 13.1</td><td>8.242</td></tr>
|
|
<tr><td>2853 238 1</td><td>02 42 05.78</td><td>+42 42 26.7</td><td>8.253</td></tr>
|
|
<tr><td>2853 1665 1</td><td>02 42 22.15</td><td>+42 45 36.6</td><td>8.862</td></tr>
|
|
<tr><td>2853 334 1</td><td>02 41 48.49</td><td>+42 46 14.2</td><td>9.025</td></tr>
|
|
</table>
|
|
|
|
|
|
<script>
|
|
var aladin = $.aladin('#aladin-lite-div', {target: "02 42 05.00 +42 45 42.0", survey: "P/DSS2/color", showReticle: false, zoom: 0.4, showLayersControl: false, showGotoControl: false});
|
|
|
|
// define function triggered when an object is hovered
|
|
aladin.on('objectHovered', function(object) {
|
|
if (!object) {
|
|
$('#dataTable tr').removeClass('hoverRow');
|
|
}
|
|
else if (object.data) {
|
|
$('#dataTable tr').removeClass('hoverRow');
|
|
var idx = object.data.idx;
|
|
$('#dataTable tr').eq(idx+1).addClass('hoverRow');
|
|
}
|
|
});
|
|
// define function triggered when an object is clicked
|
|
aladin.on('objectClicked', function(object) {
|
|
if (object && object.data) {
|
|
var idx = object.data.idx;
|
|
var name = 'TYC ' + $('#dataTable tr').eq(idx+1).find('td').eq(0).html();
|
|
console.log('Object clicked: ' + name);
|
|
}
|
|
else {
|
|
console.log('Object clicked is null');
|
|
}
|
|
});
|
|
|
|
// create a catalog from a list of coordinates
|
|
var catalog = aladin.createCatalog({sourceSize: 12, color: '#ff0000'});
|
|
aladin.addCatalog(catalog);
|
|
|
|
var coo = [[40.50735792, 42.74834691], [40.55401936, 42.74709823], [40.55609959, 42.77795938], [40.49350514, 42.79185380], [40.48641903, 42.78979825], [40.55484661, 42.69927481], [40.69061298, 42.82031462], [40.52406911, 42.70742692], [40.59227609, 42.76016897], [40.45202138, 42.77061771]];
|
|
var mySrc = [];
|
|
for (var k=0; k<coo.length; k++) {
|
|
mySrc.push(aladin.createSource(coo[k][0], coo[k][1], {idx: k}));
|
|
}
|
|
catalog.addSources(mySrc);
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html> |