"The Difference is like Day and Night!"



OSD600's Lab 5 featured an interesting concept. We were tasked with forking and working on a project made by David Humphrey himself.

This application, called "Bridge-Trolls", uses geo-location in order to track your location. By doing this, you can walk around your neighborhood in search of.. well.. Bridge Trolls! This is done by finding bridges and collecting 'Troll Cards'.

The Task:
The task set for this project was to implement this feature: https://github.com/humphd/bridge-troll/issues/6 (Ie: Add a night mode to the application)
This is understandable, as seeing this:

screen shot 2018-03-14 at 11 47 29 am
In the middle of the night may be a bit.. blinding. 
To go about this, I started sniffing around the code to see what could possibly render the map.
I came across this interesting line in base-ui,js (Yes, the name gives it away):
leaflet.tileLayer(tileUrl, { attribution }).addTo(map);

I looked for the source of tileUrl and found:
const tileUrl = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
The answer became more and more apparent. I visited this site to find a darker, more night suited ui. I decided on 'CartoDB.DarkMatterNoLabels'.
I found that if I edited tileUrl from a const, the application would not load properly. To get around this, I created a second const named 'tileUrlNight' (Clever, right?) and copied the tileLayer command with one to use tileUrlNight.
So now I could have a night version. Great! Perfect! One problem though - how was I going to activate it?



...damn. I was so sure I had finished.

Luckily for me, sunCalc exists! sunCalc takes a date, latitude and longitude value and returns which hours of the day are sunrise, sunset, etc. This is perfect! 
After understanding how to use sunCalc properly, I produced this little if statement:
if (dayHours > times.sunset || dayHours <= times.sunrise){
    leaflet.tileLayer(tileUrl, { attribution }).addTo(map);
                                 else {
  leaflet.tileLayer(tileUrl, { attribution }).addTo(map);
                                       }
It worked exactly as intended!
https://i.gyazo.com/12e9f673ea33b6f3758cd66d2f710401.png
What a beautiful sight..

A layout that is much easier on night eyes, in my opinion. Although straightforward, this lab brought some interesting problems to the table. The installation was a bit difficult, as there were certain modules that kept failing to install. This was fixed through entering enough "npm install" commands for the terminal to pick up the slack. It was also curious that the application wouldn't load unless tileUrl was constant. I did not think it would make much of a difference, and perhaps it is just my machine, but it was entertaining to find another way around it. 

This lab was very fun to carry out and complete, and I'm happy with what I have learned throughout the process.

Comments

Popular Posts