OSD600 Lab 5 – Lucas Verbeke

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

d916dbc333b260bb5174904d2db6895f

The map I chose was CartDB dark Matter

36bed5b419c1990a2e64a450b92ac6e0

The map I wanted to use was Thunderfprest Transport Dark

f7544f11b0a8ab9749ebd55dfbe413a4

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.

99c49738628978eeaa57a4322868fc3e

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

6539fe50b342c1be218f8e7df1f84a29.png

Nice and dark and easy on the eyes now lets take a peek at the daytime map

c7df13f5cffdea6caf826c9cf252d5bc

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.

Leave a comment