Daylight on google maps

This JavaScript code shows the sunlight movement on Google maps, in real time.

Check the online demo here.

The approach I'm using consist on three steps:

  • Calculate the sunrise and sunset for a given date.
  • Transform the sunrise and sunset values to earth coordinates (latitude and longitude).
  • Draw this two points into the map for the actual time.

In order to calculate sunrise and sunset I'm using Preston Hunt's sunrise/sunset calculations based on Ed Williams algorithm.
Of course if you prefer to use your own equations, you can always take a lock to the definitions at Wikipedia and create your own code.

I will generate a list of sunrise and sunset time values for a variable set of latitudes, at longitude 0° for the selected day.

To transform our sunrise and sunset time values to latitude and longitude, we will just use the approach that the earth rotate 360° in 24 hours.
This of course, is just an approximation, but for our purposes, we will not appreciate any mayor difference.

Finally I will place the shadow pattern on the right position, for that, I get the desired UTC time and transform it again into degrees, then I will move the shadow pattern using this offset value in the east-west direction and done, I have a set of latitude and longitude values for the selected date and time.

Now I just need to follow Google Maps Api documentation to draw a polygon with my latitude and longitude array of data.

Please have in mind that this code is and approximation, and let me know if you have any ideas how about improve the code, or if you find any bug or problem.


Download: Js and HTML files