Google Map for Flash with daylight layer

— 2 minute read

When I visit this site: www.daylightmap.com, I was excited how it could show the daylight on the world map in real time. Very interesting because I can visually know some friends of mine in other part of the Earth are in the light of sun or in the shadow of darkness. :)
The site is using Google Map API (javascript) for the map and its own service for the daylight layer. Although the author provides a limited free service there was no code for the Google Map API for Flash so I decided to examine the service call to get the input needed and port it to Flash-based Google Map.
I assume that you already know how to use TileLayerOverlay or extends the TileLayerBase in the API to create a new map layer above default ones.
Basically, like other tile layer, the Google map need to get the correct tile image via the tile's x and y coordinate in a certain zoom level.
Here's the service call break down:
tileURL = "http://www.daylightmap.com/tiles/cache/" + "tile_" + lightOn + zoom + "_" + tileX + "_" + tileY + "_" + secs + ".png";
Luckily, since the service is for Google Map API, there's no need to convert the zoom, tileX, tileY values forwarded from the API.
What we need to manipulate are:
- lightOn ("n_"|""): if you want to get the shadow images with city lights or not
- secs: number of seconds since 01/01/1970 00:00:00 UTC which, in AS3, can be get by:
  1. var now: Date = new Date(); //get local time
  2. var secs: int = int(now.getTime() / 1000); //convert from milliseconds to seconds
Here's the demo:
Download source code here.
Side notes:
  • There's also a service in which we can get local time as well as current position of the Sun (in lat/long). However, the site currently doesn't allow crossdomain service call. So I just left an example in the demo but commented it out. If you need those features, you might need to ask the site's author to create a crossdomain.xml file in his website.
  • Since daylight layer is a kind of real time data, obviously, we need to reload the map after an interval of time. I haven't done this in my demo. But you should understand the situation: When I wrote this demo, the API was 1.9 and it doesn't support any way to force a tile layer to reload new data. However, a work-around is hinted on its developers' group forum that we can force the map to reload completely by resizing the map (maybe just 1 or 2 pixels). By the time of this article, API v1.16 was released and it provides a new refresh() method in the TileLayerOverlay which can be used to solve our problem. I leave this to anyone who wants to improve it.