about contact

Stefan Liebenberg

:web-log


Javascript DeepSky StarMap Viewer



Demo

Checkout the demo here.


Introduction

The Javascript Deepsky Viewer is made for Auke from Psychohistorian.org to display complex starmaps.

The goal is to display starmap images, highlighting different layers of data to the different types of observers. Two different routines were created, the overlay and the starmap

The Overlay

Explanation:

One image is displayed over another with a slider to set the transparency. The first image and main image stays totally visible, while the second image's transparency is varied between 0 and 100%.

Example:


Usage:

Please note the use of the width and height attributes of required for the routine to work properly.

rel must be set to overlay, compulsory
src is the url to the main image, compulsory
overlay is the url to the second image, compulsory
width is the image's pixel in width, compulsory
height is the image's pixel in height, compulsory

  <img  rel='overlay' 
        src='/images/deepsky/a.jpg'
        overlay='/images/deepsky/b.jpg'
        width="350px" height="175px" />
  
  <script>
    $(function(){
      $("img[rel=overlay]").overlay()
    })
  </script> 
        


The Starmap

Explanation:

A image map is used to create hotzones on the image

Example:

mancluster mancluster in the skye above jerusalem mancluster

Usage:

  <img rel='starmap' usemap='#starmap-1' 
       src='/images/deepsky/a.jpg' 
      width="350px" height="175px" />
      
  <map name='starmap-1' >
    <area shape='rect' coords='10,10,110,110'
          href='/deepsky'  rel='image'
          alt='mancluster' />
          
    <area shape='rect' coords='120,10,220,110'
          href='/deepsky' rel='image'
          alt='mancluster in the skye above jerusalem' />
          
    <area shape='rect' coords='230,10,330,110'
          href='/deepsky'  rel='image'
          alt='mancluster' />
  </map>

  <script>
    $(function(){
      $("img[rel=starmap]").starmap()
    })
  </script> 
        

Licence

Creative Commons License
Deepsky Starmaps by Stefan Liebenberg is licensed under a Creative Commons Attribution-Noncommercial 2.5 South Africa License.
Based on a work at stefan.artspace44.com.

Testing

These routines have been tested to work on the following systems:

  • Firefox 3.6.3 ( Namaroka ), Linux
  • Google Chrome 5.0.375.70 (0), Linux
  • Opera 10.10, Linux

Download

Please Note: this script is dependant on jquery and jquery-ui

Repository of files available at Github.com