Interactive Skymap

A free, open source map of the sky, adaptable (see form below) and zoomable/draggable with mouse/gestures. Done with the help of the d3.js visualization library and the GeoJSON data format. Try it out below, but make sure to maximize your browser window and click/tap 'Full width' to enjoy it in its full glory!

Hint for projections: Try orthographic or stereographic for hemispheric projections, equirectangular, Hammer, Mollweide or Winkel-Tripel for all-sky projections, Bonne, Colignon or Foucaut for something fancy.

Download the sources from GitHub, or clone them if yo have git installed, or grab the archive 'celestial.tar.gz', if you just want to play locally with the app. That may require a local web server to work, depending on what browser you're using. Firefox should be fine, Chrome only loads local files if you start it with a ' --allow-file-access-from-files' command line parameter, Internet Explorer AFAIK doesn't do that at all. For a local web server try XAMPP, or if you have node.js installed (which you need anyway to compile d3-celestial), simply install the http-server module.

Since it uses HTML5 canvas, a fairly modern web browser is required, IE above version 9, Chrome/Firefox/Safari/Opera are all fine in any recent version. If the zooming and panning is a bit slow, try reducing the magnitude limits. On mobile browsers the zoom-gestures clash with the regular UI functionality, I've yet to figure out how to avoid that. Meanwhile, tapping the zoom buttons on the upper left should work just fine.

33 comments:

  1. I was desperately looking for a way to generate a *big* wall map, and your map happened to be the most convenient way to do it!

    Thanks!

    ReplyDelete
  2. This is impressive, wow! I am building an astronomical almanac web application, and I would like to include an outline of the milky way. Would you allow me to use your GeoJSON file mw.json?

    ReplyDelete
  3. Absolutely, that's what open-source is there for. Be sure to also credid the original source: http://www.skymap.com/milkyway_cat.htm

    ReplyDelete
  4. Thanks. I will do that.

    ReplyDelete
  5. Thanks for the resource.
    How can I export the map as an .svg file?

    ReplyDelete
  6. @AbdelRahman Ghanim: The map is done entirely wit HTML5 canvas, so there is no easy way to export as svg, only pixel data. Sorry!

    ReplyDelete
    Replies
    1. Hi Olaf, is there any way to get the Location and Time/Date code running in V0.4 (back when SVG's were all the rage)

      Delete
  7. I can't seem to get the Celestial.date() function to work, it says its not a function? Am I missing a particular file or something? The map shows up just fine, but when I try to change the date it will return an error

    ReplyDelete
  8. @Dante309 Have you set location = true in the configuration? Because it needs to know 'from where' before you can set 'when'. Admitted, the function could fail more gracefully, though :(

    ReplyDelete
    Replies
    1. I did that. But it still not moving. I love your work and i'm tweaking it. But can't fix the .date() function.

      Delete
  9. Hi Olaf, that´s tool is absolutely amazing but when I try some dates (i.e. 30/10, 31/10 until the beginning of November, the milky way is covering the entire map. I guess there is something behind that is making this issue, isn´t it?

    ReplyDelete
  10. Hi Olaf, that´s tool is absolutely amazing but when I try some dates (i.e. 30/10, 31/10 until the beginning of November, the milky way is covering the entire map. I guess there is something behind that is making this issue, isn´t it?

    ReplyDelete
  11. Isn't showing planets, sun, or moon.

    ReplyDelete
  12. 35.4526, -97.5316
    April 17, 2018 @ 21:02:42 -5:00
    8.5 H / 30deg / 90 deg

    Both the Moon and Venus should be located between Aldebaran and Hamal, but are not showing no matter what I try.

    ReplyDelete
  13. Hello Olaf,

    I freaking love this repo. I'm tweaking it for a project. But i have a problem with de Celestial.Date(). It doesn't rotate or respond. I'm sure that i'm passing the right format. location = true.

    Thank you

    ReplyDelete
  14. Can you please tell me how to set "Center" value? I have implemented like below but not working.
    Celestial.rotate({center:[4.3,0,0]});

    Also how to stop starting animation so map load instantly without any animation.

    ReplyDelete
  15. Can you please tell me how to set "Center" value? I have implemented like below but not working.
    Celestial.rotate({center:[4.3,0,0]});

    Also how to stop starting animation so map load instantly without any animation.

    ReplyDelete
  16. Thanks for resource.
    I want to stop map animation when change location and second is set center:[4.3,0,0]

    Thanks

    ReplyDelete
  17. LOVE THIS. Is there a way to get dates before 2009?

    ReplyDelete
  18. Is there any way to adjust the line width? I'm looking to do a print with this at 300dpi, and that would help make it look crisp

    ReplyDelete
  19. Hello, is there a wordpress plugin available because i saw many poster shops using your library? https://bit.ly/2u0PU7y

    ReplyDelete
  20. Cannot read property 'raw' of undefined

    raw = d3.geo[projection].raw;

    ReplyDelete
  21. raw = d3.geo[projection].raw;


    Cannot read property 'raw' of undefined




    ReplyDelete
  22. amazing excellent tool, thanx!!!
    Please could you add full azimuthal equidistant full projection where the south pole is fully projected into the circular edge of the projection and the whole sky is visible?

    ReplyDelete
  23. bug report: when I change "down to magnitude" the "Planets, Sun & Moon" dissappear

    ReplyDelete
  24. hello olaf frohn,is it posssible to find transverse mercator projection for celestial map?
    best regards

    ReplyDelete
  25. This is very cool stuff. I seem to be having trouble toggling the "Show Constellation Lines" feature. They appear as small circle icons instead. Any suggestions on how to make that work?

    ReplyDelete
  26. This is very cool stuff. Though I seem to be having trouble toggling the "Show Constellation Lines" feature, they only show as small circle icons. Any suggestions on how to make that work?

    ReplyDelete
  27. How to downlaod the SVG? I tried using the repository, but always get an error "Data file could not be loaded or doesn't exist. See readme.md"

    ReplyDelete
    Replies
    1. That's the error you get when you try to run it with the local file:// protocol. Modern browsers don't load external data files that way anymore :(
      Install a local http-server with node.js, like https://github.com/http-party/http-server, or use the online version.

      Delete
  28. Thank you for the great work! One maybe stupid question: are the maps Hipparcos based?

    ReplyDelete
  29. Very impressive! I have a question about the data format for the Milky Way outline polygons. The coordinates are of the form [X,Y] with X ranging from near 0 to 24, and Y from -74.9 to 66.95. So I assumed that X = Right Ascension in hour angles and Y = Declination in degrees. But this does not seem to be consistent with other known coordinates, such as galactic center being at RA 17.76 h Dec -29 degrees.

    So what is the definition of the coordinates?

    ReplyDelete
  30. Hi Olaf, Sorry I could't find a better way to contact you other than this... I'm really impressed with your work on D3-Celestial, and wanted to thank you for all the time and effort you have put into it! I have implemented it in my Astro-Logger site (https://www.astro-logger.com) and I would love it if you would be willing to add my site as a link with your other examples. The link would be https://www.astro-logger.com/ui/astronomy/search. Let me know what you think. Thanks! David Vanfleet

    ReplyDelete