All that we had to do for this lab was to add a night theme based on the local time of day. To do this we used suncalc to get the local time of sunrise and sundown.
When completing this lab my approach was to set the current time and date and if it is later then the sundown or if it is earlier then the sunrise time. Once the time is checked the appropriate map is set.
Here is how the code looks
The map I chose was CartDB dark Matter
The map I wanted to use was Thunderfprest Transport Dark
But I needed an API key and to do that I need to sign up for an account and that ain’t going to happen today.
While I’m at it I want to change the daytime map because I found this map it looks really nice and I want to use it.
That was a lot of screenshots I guess now would be a good time to go into some of the issues I had.
The first one was me having a brain fart
if(hour >= sunCalc.getTimes(new Date(), lat, lng).sunset.getHours() && hour < sunCalc.getTimes(new Date(), lat, lng).sunrise.getHours())
Instead of having an or I had an and that was causing it to show the day map in the early hours of the morning. I really should of realized that when the clock goes past midnight it will be less then the sunset time.
Next was the order that I included suncalc was giving me errors with npm. This took much longer then it should of to fix than it should of and when I finally found it I felt like a real dummy.
Time to look at how my solution works.
Current eastern standard time is 3:00am and the map looks like this
Nice and dark and easy on the eyes now lets take a peek at the daytime map
like getting hit with a flash bang.
In summary I don’t have much experience in JavaScript and I think this is a great opportunity to dive in and see what I can learn. From the lab I have learned just how easy it can be to implement features that seem complicated from the outside. When I started I thought that checking the sunrise and sundown times for each time zone would be a complicated time consuming task but as it turns out someone else already had done it for us and all I had to do was import it and the maps have also been already made. I guess it takes a village to make a browser based geolocation game.