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.
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!
ReplyDeleteThanks!
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?
ReplyDeleteAbsolutely, that's what open-source is there for. Be sure to also credid the original source: http://www.skymap.com/milkyway_cat.htm
ReplyDeleteThanks. I will do that.
ReplyDeleteThanks for the resource.
ReplyDeleteHow can I export the map as an .svg file?
@AbdelRahman Ghanim: The map is done entirely wit HTML5 canvas, so there is no easy way to export as svg, only pixel data. Sorry!
ReplyDeleteHi 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)
DeleteI 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@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 :(
ReplyDeleteI did that. But it still not moving. I love your work and i'm tweaking it. But can't fix the .date() function.
DeleteHi 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?
ReplyDeleteHi 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?
ReplyDeleteIsn't showing planets, sun, or moon.
ReplyDelete35.4526, -97.5316
ReplyDeleteApril 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.
Hello Olaf,
ReplyDeleteI 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
Can you please tell me how to set "Center" value? I have implemented like below but not working.
ReplyDeleteCelestial.rotate({center:[4.3,0,0]});
Also how to stop starting animation so map load instantly without any animation.
Can you please tell me how to set "Center" value? I have implemented like below but not working.
ReplyDeleteCelestial.rotate({center:[4.3,0,0]});
Also how to stop starting animation so map load instantly without any animation.
Thanks for resource.
ReplyDeleteI want to stop map animation when change location and second is set center:[4.3,0,0]
Thanks
LOVE THIS. Is there a way to get dates before 2009?
ReplyDeleteEarlier years will appear after you select an earlier date
DeleteIs 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
ReplyDeleteHello, is there a wordpress plugin available because i saw many poster shops using your library? https://bit.ly/2u0PU7y
ReplyDeleteCannot read property 'raw' of undefined
ReplyDeleteraw = d3.geo[projection].raw;
raw = d3.geo[projection].raw;
ReplyDeleteCannot read property 'raw' of undefined
amazing excellent tool, thanx!!!
ReplyDeletePlease 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?
bug report: when I change "down to magnitude" the "Planets, Sun & Moon" dissappear
ReplyDeletehello olaf frohn,is it posssible to find transverse mercator projection for celestial map?
ReplyDeletebest regards
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?
ReplyDeleteThis 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?
ReplyDeleteHow 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"
ReplyDeleteThat'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 :(
DeleteInstall a local http-server with node.js, like https://github.com/http-party/http-server, or use the online version.
Thank you for the great work! One maybe stupid question: are the maps Hipparcos based?
ReplyDeleteVery 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.
ReplyDeleteSo what is the definition of the coordinates?
I figured out the meaning of the GeoJSON data in 'mw.json' describing the Milky Way boundary.
DeleteThere are 5 groups (brightness levels, 1 darkest to 5 brightest) of coordinates describing polygons that delineate the Milky Way on the sky dome : 10 polygons for brightness level 1, 113 at level 2, 46 when level 3, 27 with level 4, and 6 polygons for level 5.
The coordinates `[longitude,latitude]` are in degrees with up to 3 decimals.
Right ascension (alpha, [0°,360°[) equals positive 'longitude', otherwise add 360° to the 'longitude' to obtain alpha.
Divide alpha (in degrees) by 15 to obtain it in hours.
Declination (delta, [+90°,-90°]) always equals the 'latitude'.
Equatorial coordinates alpha and delta are given for epoch J2000.
The plotted Milky Way should look like this : https://armchairastronautics.blogspot.com/p/skymap.html
This comment has been removed by the author.
ReplyDeleteSo, probably a stupid question, but what's the best settings for correlating with "If I look up at the sky, what do I see ?", and where on the map is 'location' relevant to ? Is it at the center co-ords ?
ReplyDeleteJust trying to use this to get an idea of when the Milky Way is passing overhead :)
@Olaf, why is the star map generator's date field only go back to 2011?
ReplyDeleteThank you for nice work
ReplyDeleteHello sir
ReplyDeleteHow are you ?
How can i draw satellite orbit from orbital element (TLE)?
Hi, I use your script.
ReplyDeleteBut i need some more advance things like adding more stars when zoom, add declination and right ascension etc