FERDY CHRISTANT - MAR 7, 2014 (07:36:16 PM)
I'm working on maps 2.0, a series of updates to improve JungleDragon's mapping features. During the last weeks I worked on an unexpected feature: a daylight (and darkness) planner that allows one to plan light conditions ahead of time. It started as an experiment and evolved into an increasingly useful and powerful tool.
Today I'm sharing the last update to the daylight planner for a while. I can think of several more improvements, but one has to draw a line somewhere. This update is about one thing only: mobile.
The daylight planner uses a fullscreen Google map. Google maps on mobile truly sucks, they present several usability issues. The fact that JungleDragon's daylight planner adds several visual controls to that, makes the mobile experience even worse, and frankly just not usable.
Mobile needs a different approach. There just isn't enough space and performance to do the full desktop experience. Therefore I came up with a highly simplified daylight planner, just for mobile. As a reminder, here's the desktop experience:
And here's the mobile viewing, meaning, it's the exact same web address as above, yet rendered on an iPhone:
As you can see, I got rid of the map entirely, and of most controls. It simply prints a table with the important light phases of the current day, and of the current location. Using the arrows near the header you can go back or forward a day.
The idea on mobile is that it is more of a viewer than it is a planner. In the field you can check it as a quick reminder. Another possible scenario is that you plan the photo trip on your desktop, and from there add it to your calendar. Next, you're in the field and open your calendar and click the link inside it. This will take you to the exact moment and location that you had planned. Here's a full height screenshot:
The screenshot shows that next to the daylight phases, the table ends with the moon's illumination.
This solution may be simple, but it is usable, the other one was not. That said, if you want to do advanced daylight planning on mobile, you are probably better served by dedicated apps for that.
As said, I'll leave the daylight planner as "complete" for now. This does not complete the "maps 2.0" initiative yet. I still have one awesome feature to release, yet the data I depend on has been delayed somewhat.
FERDY CHRISTANT - MAR 2, 2014 (02:16:29 PM)
Yesterday I announced some cool improvements to JungleDragon's daylight planner, notably the inclusion of the sun's angle and a light pollution toggle. Today I have one more update, one that is slightly bizarre. It is in fact based upon an idea submitted by Bas Peters:
"I can think of one useful feature for the daylight overlay. With the timestamp of a submitted photo, you could visualize the light condition at that particular moment on the given location. This gives a little more insight in the shooting conditions :)"
That's a great idea, one I did not think of yet. Think of it, we know the location, we know the time, so using the daylight planner, we will know the type of light during the moment when the photo was captured. But it gets better, since as of yesterday, we also know the sun's angle, we can actually reconstruct the total light situation.
It's like reliving the past. Allow me to give you 2 examples:
Above is a photo of a mountain range in Isola, Madagascar, taken in 2012. On JungleDragon photo pages, there's always a sidebar showing metadata about the photo. Like this:
We know who took the photo, when it was taken, when it was uploaded, where it was taken and using what camera settings. Yet, as of today, one extra nugget of information is added. Note how below the map, there is a link "View light conditions of this photo". Let's click it:
That seems to work. The daylight planner has rewinded back as far as September 10, 2012. At the time of the photo, it was close to sunset. The night map as well as the time panel indicate this, we were in the golden hour. Let us go deeper though:
We have zoomed in significantly, without changing the time or location. We were standing at the marker's position. The sun is shining from the west (it is setting). Between us and the sun is a rock formation that you can see on the map. This rock formation is the famous "Isola Window", a gapped rock where exactly at sunset, the light peaks through the holes. Several tourists come to the middle of nowhere for just that moment.
Looking at the actual photo I took though, the light is in my back. That means I took a photo in the opposing direction, stubborn as I am. Where did I point to? I've drawn that on the map, using the red line. To be clear, that line is Photoshopped, the daylight planner does not know the location of your subject. Yet from the combination of data that we have, we can reconstruct the situation. It's quite fun to reconstruct your memory from your own photos, but also great to learn from others.
Side note: I have enabled street view on the map. It will usually not work in off-road situations, but in the cases where it does work, you could even get a 3D look at the situation.
A 2nd example:
See above. This a Chameleon in Madagascar at night, found in the bushes during a night tour. The flash lits up the dew beautifully. Let's see what the conditions were when I took this photo:
It was dark, but only just dark. It was a tour by foot, one we squeezed in just before dinner. And it was on a paved road with dense bushes on each side, as the map shows.
I remember from that tour that it was the three of us, my girl and me, and the guide. We were navigating the thick bushes with our flash lights, looking for shapes slightly lighter green than the bushes, as those are the chameleons. I had the idea to check out the bushes on the other side of the road, to cover more ground, as a team.
Our guide told me that I would not find anything, as chameleons (cold-blooded as they are) will always settle for the night on the side of the road where the sun last shone, as it is warmer there.
Where did that sun really last shone on the road above? For that, all we need to do is rewind the daylight planner to the moment just before sunset:
Look at the angle of the sun, about one hour before we took the photo. It clearly shone last on the right side of the road (as seen from a top view). So I've checked the dozens of photos in this series, and what do you know, all spottings came from that side of the road. The guide was right, and the data backs it all up.
The past, only possible in the future
This new feature comes with a one-time limitation: it is only going to work on photos uploaded as of now. The reason for that is that it requires a GPSTimeStamp, which is an attribute I did not store until now. In addition, it is only going to work on photos that have all of the 4 below attributes set in EXIF date:
- GPS Latitude
- GPS Longitude
- GPS DateStamp (GMT/UTC)
- GPS TimeStamp (GMT/UTC)
FERDY CHRISTANT - MAR 1, 2014 (10:20:59 AM)
I'm still working on JungleDragon "maps 2.0", a series of updates to JungleDragon's mapping features. The progress so far:
- The main photos map has been made several times faster
- The above map has been made prettier, better integrated into the site
- A totally new feature, a daylight planner, has been introduced
This last feature, the daylight planner, started out as an experiment to visualize day and night on a map based on a timeline. It visualizes light, darkness, the sun and the moon based on any location/time combination on the planet.
As this can be useful to plan photo trips, last week's update to this new feature made it more practical. It is now possible to plan ahead as far as you like (using a date picker), and you can persist your plans, by a sharable URL or even by adding a time/location combination to your local calendar.
Today's update is the 3rd update to the daylight planner. Let's see what has changed this time....
Plan the sun direction
We all know that the sun rises in the East and sets in the West, no matter where you are in the world. This is due to the direction in which the earth spins (east). Today's update to the daylight planner visualizes the direction of the sun:
See above. Based on the location and time, the sun's direction at that time is visualized. The yellow line shows the direction as seen from the observer. As you drag the time slider, you can see the direction of the sun changing. Likewise, if you drag the marker itself, thus changing the location, you can also see the direction changing. This means that you can plan for when the sun rises or sets, but also where it rises or sets. The visualization will only show during the day, thus if you selected a night time in the slider, it will only show the marker, as the sun has not risen yet.
The term "daylight planner" is poorly chosen, as this tool is useful for astrophotography as well. For example, one can see when it is the darkest night, and also the illumination state of the moon. In today's update, we're adding one more update:
In addition to the existing "Weather" toggle, there is now a "light pollution" toggle, which brings this:
See above. This weekend is new moon (no illumination), which generally means good astrophotography conditions. In addition, we selected a time of "darkest night". Even better! However, the light pollution map shows that I live in an area of great light pollution. That's 2 out of 3. The point should be clear though: the combination of the time slider, moon condition and location (light pollution) will allow you to plan for astrophotography, to get that 3 out of 3 combination.
Side note: Actually, night photography is a 4 out of 4 equasion. Weather should be taken into account as well. Luckily, we have the weather layer for that :)
The light pollution data is static, it comes from NASA, and is from 2012. Although not real-time data, one can still consider it pretty stable and useful.
Better controls and visualizations
The third and last update of today can be found in the visualization of the controls, the sun and the moon:
See above, we're watching the sun rise on Adam's island. With these screenshots I want to demonstrate a few visual improvements:
- The sun and moon are now placed next to each other, so that their altitude's do not overlap each other
- The bottom pane has been improved:
- It makes better use of screen space and is better aligned
- Action icons are much larger now, with clearer icons
- The styling of the entire pane has been made more elegant and subtle
What would you call this?
That's it for today's update. As a 3rd update to the daylight planner, I'm seeing it as an increasingly useful tool. I have a few more improvements in mind, and after will come an entirely new map type (where I'm still waiting on the data that feeds it).
For now though, I have a question to you...what would you call this tool? So far I've been calling it a daylight planner, but that name is not descriptive enough. It also allows for the planning of night time photography. In fact, one could even argue that the scope of the tool goes beyond photography alone.
I'm looking for a brief and descriptive term, and am very open to suggestions. Any takers?
FERDY CHRISTANT - FEB 21, 2014 (09:35:45 PM)
Last week I launched a crazy JungleDragon feature, a daylight planner. This feature concerns an interactive map where by sliding time, a number of things are visualized in real-time: lightness and darkness, the sun, and the moon. The idea behind it is that one can plan ahead a photo trip for a specific location by finding the ideal light conditions ahead of time.
Next to that, it was a cool tech showcase, at the very least. After today, it is definitely more than a showcase, I've put a lot of effort into making the daylight planner more usable and practical. I'm hereby launching it as a serious feature.
New slider layout
Let's have a look at the new layout for the time slider panel:
I have moved the currently active time to the left of the slider. The daylight period, "Dawn" in this example, is to the right of the slider. Let's have a closer look:
The time is surrounded by two new buttons. The button to the left is a date picker:
Where before the daylight planner would detect your current time and allow you to look ahead a period of 24 hours only, this new version allows you to pick any date. It can be days, weeks, months ahead in time. That makes it infinitely more useful.
In the example above you see how I set the date to June 4, which is several months ahead of my current time. The location is the Netherlands. As you change a date, it will starts the daylight planner at midnight exactly, or the first minute of the picked date. In this case I have slided the time to the morning golden hour.
Side note: by being able to plan ahead to any future date, this tool can be useful to more than just photographers. For example, imagine that you want to paint your house, and you want to know how long the light will last weeks ahead. Now you can.
So we picked a far away date (June 4) for our location and found a suitable light period in that day. The cool thing about this new version is that the URL will always reflect your choices:
See above, no matter what choice you make in your date or location, the URL will always reflect it by including the position (latitude and longitude) as well as the selected date/time.
You don't have to know anything about those confusing numbers, you only have to know about the benefits it brings. You can return to your choices. You can bookmark this URL, put it in a note or share it with a friend. Whoever opens it, will see the exact same choices of location and date that you selected.
This makes planning far more useful, as you can actually fix your choices.
It gets better
But that's not all, there's an even better way to fix your choices:
It's time to talk about that 2nd button, the one that looks like a Save icon. That button will try to save your choices to your calendar. Let's click it:
See above. What happens here is that JungleDragon will generate a .ics file, which is a standard for calendar entries that most email/calendaring applications understand. What happens depends on your operating system, browser and the default email client you have assigned.
In the above example, I was in Firefox, which offers me to open this calendar entry in Outlook 2013, my default desktop email client. Let's click OK:
Check that out! JungleDragon proposes a new appointment for your calendar. The subject is "JungleDragon Daylight event". The appointment location is a reverse geocode lookup of the latitude and longitude that you selected, in order to make it human-readable. The date/time is the one you selected on the map. The "body" of the appointment consist of a message explaining the event, along with a link that returns you to the exact same planning state that you created in the first place.
If you agree with this appointment, you just save it, and there it is in your calendar. You just planned for light (or darkness).
A better moon
Another improvement is that I made the visualization of the moon illumination more accurate. It was calculated once per 24 hours before, but now it calculates in real-time. I didn't realize that the moon could change in illumination by 10-20% in a single day.
As I was testing the daylight planner, sometimes I came across some border cases where the visualization seemed strange. For example, the "dawn" period would suddenly last 3 times as long as it normally would. Or, a day would pass without the "Night" period occuring.
It took me a lot of time to figure this out, but it turns out that the planner is still correct. What I had forgotten is that in some datetime/location combinations, certain periods do not occur. For example, during a few weeks in the summer, location Norway, the sun never sets. There is no night.
I was still surprised that sometimes the same periods were missing in the summer for location the Netherlands. Having lived here for all of my life, I'm very sure that even at the peak of summer, it gets dark, so there must be a night. Wrong again. Dark does not neccessarily mean night. By astronomical definition, night never sets in for a few weeks during the summer, even in locations where it does get dark.
Summarizing, it's not a bug, yet it can look weird.
It's been quite tough building this update. I lost days in debugging, messing with date formats and the .ics format, but from my testing, it should be reasonably solid now. I believe it was very much worth the effort. Where before the daylight planner was somewhat of a "because I can" feature, it is now actually useful. Not only can you plan ahead as far as you like, you can also easily capture ideal conditions, for any location on the planet, for any date and time, simply by sharing a URL or by adding it to your calendar.
Still I'm not done though, I have more improvements in mind for this thing. I have gotten positive feedback so far, yet very low in quantity. I love to hear what you think?
FERDY CHRISTANT - FEB 17, 2014 (08:25:22 PM)
I'm working on "maps 2.0", a series of updates that takes JungleDragon's map features to a whole new level. So far I've made the maps about 10 times faster, prettier, better integrated into the site, and I solved a few bugs.
What I'm about to announce though, you did not see coming. I can be sure of this, since I did not see it coming myself. It is a feature that is kind of crazy. You can debate how useful it is to how many people, but either way I think you'll find it cool at the very least.
The thing is, I was working on a fantastic new mapping feature. However, it requires lots of data, so much in fact that I am paying somebody to collect it. Whilst I still do not have that data, I cannot continue with it. Anyway, in the meanwhile I was brainstorming what else I can do to improve maps in JungleDragon, and things took a crazy turn from there. I've been obsessed with this new feature for the last 2 weeks and today I'm sharing a first somewhat experimental release. Let's see what we got:
This little new crazy link
So here's the JungleDragon global wildlife map, which I recently made a lot faster, and visually better integrated into the site:
It shows thousands of geotagged JungleDragon photos spread out across the globe. Check out the navigation header though:
We are looking at "Photos" currently, yet a new option has arrived, called "Daylight". Let's click it:
This launches a new map, without photos. Before launching it, the system will ask you to share your location. It is up to you to decide yes or no, either decision is fine. The outcome will determine the start position of the marker.
This new screens requires some explaining, so let's name the elements I've circled:
- Current location marker. Will be detected if you allow location sharing, otherwise it will be located at geo coordinates 0,0. The marker is draggable, so you can change your location at any time.
- Night time overlay. On the map itself, you see a dark overlay that indicates where at the currently selected time, it is dark or near-dark in the world.
- Time slider (bottom left). The time slider allows you to change the time by sliding forward, it currently consists of a 24 hour period ahead of the current time, in steps of 3 minutes.
- Time and light indicator (bottom middle). Shows the current time, as well as the daylight period (more on this in a minute)
- Sun and moon (bottom right). Sun and moon visualizations.
If you're still confused, the key lies in the time slider. By moving it, all the other elements just described respond to time to show you meanginful information about light. I'm calling it a daylight planner, for lack of a better name.
In the above example, it is night in my current location. Here is a second example, with the location marker set to the Amazon region:
A lot of the visual elements just changed based on the different time/location combination. Let us describe each element in a bit more detail...
This concerns the dark overlay on the map itself. It has 2 shades: darkness and near-darkness. This overlay moves as you change the time and/or the location, thus you can see ahead of time when and where it is dark, or it becomes dark.
Time and light period
In the bottom panel (in the middle) sits the time and daylight period indicator:
The time is always as seen from the observer, meaning it is your time. In my case the time zone detected is GMT+1. The time changes as you use the time slider. You can operate the time slider by dragging it. If it has focus, you can also use your keyboard's arrow keys to move it.
Right next to the time sits an important indicator: the daylight indicator. It will show one of 14 possible values:
- Darkest night (good for astrophotography)
- Night ends
- Morning twilight
- Dawn (blue hour)
- Sunrise begins
- Morning golden hour starts
- Morning daylight
- Midday daylight
- Evening golden hour starts
- Sunset starts
- Sunset ends
- Evening twilight
This indicator really is the heart of this new feature. The idea is that you can plan ahead ideal light conditions based on time and location. It is a thing landscape photographers do in particular.
Light period backgrounds
The background color of the light indicator changes as you change the time and location. The cool thing is that it is in fact entirely calculated. Here's a few examples:
Here's how this works: we have 14 different light periods, and each represents a main color. Every time position you select is in between two of such light periods. The gradient will reflect exactly your position in between such periods. For example, if we're 30% into the sunrise period, we're 70% away from the golden hour start time, the gradient will show exactly that balance between periods and colors. Given that we have a 24 hour timeline of 3 minute increments, that means we have 480 different gradients, dynamically calculated.
Visualizing the sun
To the right, the sun is visualized:
It's a simple visualization, really. What I am really trying to visualize though is the altitude of the sun. The system will use the available map height (which is dynamic, based on your viewport height) to indicate the altitude of the sun on a relative scale. In the example above, you can see that even at peak daylight in the Netherlands, the sun doesn't seem that high. This is actually correct, given that it is winter here.
If we change the daylight planner to location Australia, where it currently is summer, you can see the sun positioned much higher:
It would be right above you head, during noon. If you're running a decent browser, the sun (and moon) are smoothly animated as you drag the time slider. It's fun to play with it.
Visualizing the moon
Like the sun, the moon's altitude is also visualized based on the chosen location and time. There's however, a 2nd visual indicator that I find quite cool: the moon's illumination, and even the angle of illumination is also visualized. Example:
See above, I've increased the size of the moon in the screenshot to explain it. At the selected time above, the moon is illuminated by about 90%. We just had our full moon, and it's illumination is decreasing. As you can see, the visualization is simple, it doesn't have the curved illumination of the real moon, yet the visualization is accurate, it shows the actual illumination.
The moon's illumination is the same from any location on the planet at a given date. The angle of illumination, however, is not. In the southern hemisphere, people see the same illumination, yet the angle is opposite:
See above. In Australia (southern hemisphere) people see the same illumination of the moon, yet it comes from an opposite angle. The system reflects that.
To make this daylight planner even more useful, there is this toggle:
Which brings this:
This effectively adds 2 layers: a cloud layer and a weather layer. The weather layer does not really respond to the time slider, however, as you click on a weather location, it does reveal a forecast. Thus, if you're looking for that sunrise on a misty morning in the swamps, you can now plan it.
Give it a try!
Why don't have play with this thing? Here's the link: www.jungledragon.com/daylight
As said, this is an experimental feature, thus the experience you get may differ. Below are a few notes:
- IE9 and older: limited support, there will be no usable time slider
- Firefox: full support, yet detecting your location can be quite slow
- Chrome: full support, and should be beautifully smooth, depending on your hardware
- Opera: full support, perhaps the best experience I tested
- Safari: full support, but a bit sluggish
Furthermore, in its current state this feature is optimized for desktop resolutions. It is a pain to use on small devices and touch devices. I'll work on that in the future.
This feature has only been possible by standing on the shoulders of giants. The following people deserve credit:
- Rossen Georgiev, for the night overlay library
- Vladimir Agafonkin, for the suncalc library
- Google, for Google Maps v3 and in particular the weather library
I've basically coded the glue between these components and visualized them. Which was hard enough, yet the main math relies on the above heroes.
I have many ideas on how to improve this planning tool further, below are some idea. No promises that I will implement all of them though:
- Date picker: be able to pick any date, not just the next 24 hours
- Sharable URLs, which include your selected time and location
- Info panel that show golden and blue hours without the need to slide the timer
- Tool tips for sun and moon that show real-time positioning info
- Visualize the direction and angle of the sun, showing you where it rises and sets
- Improve the mobile experience
I have plenty more ideas, but the above are hard enough already.
I'm still struggling to position this feature. Is it just a cool tech showcase, or something with potential? What do you think?