This week, we had a look at the Bridge Troll game. Using open data, the program imports data about bridges located across Ontario. When you first open the game, you will see your current location. If you come across a bridge, you will see a ‘lock’ icon. I am assuming that once you get to the icon, the icon will change to an ‘unlocked’ icon. The purposes of this lab is to add a feature that will allow the game to switch between light and dark themes depending on the time.
The first task was to find where in the program the themes are imported. After some digging, I found the line of code in the ‘map.js’ file.
var tileUrl = 'https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png
Next, I had to look for a theme provided by Leaflet. The themes they provided weren't that great and it didn't have a specific 'night' theme. I chose the TransportDark theme because it was the closest thing they had. The next task was to install SunCalc which is an open source geolocation app. It can be used to find sun positions as well as sunset and sunrise times. This was useful for implementing the day and night themes because now, the themes can be applied automatically depending on the time. The logic for this was pretty straight forward.
I created a function(nightTheme()) that would return true or false depending if the current time was in a certain range. If the time was greater than the sunset hours or less than the sunrise hour, then it would be true (night time). If not, then it would return false (day time). SunCalc made this task very easy.
As you can see from the screenshot above, the icons for the bridges are not user friendly, it is too dark. The next task was to change the color of the icons depending on the themes. I had trouble with this portion of the lab. I wasn't able to figure out how to code it but I came up with two possible solutions.
The first solution was to download the white version of the SVG icons. After downloading the white versions, we load the SVGs into the program. Then, depending on what nightTheme() returns, it will place that icon onto the map. The issue I ran into was that I didn't know where to insert the logic to decide which icon to place. I found the piece of code that adds the icon in index.js, but I couldn't change between the two SVGs.
The other solution was to change the SVG fill color within the code. I had a look at the SVG file and noticed that there was a <svg fill="#000000"..../> line. I wanted to see if I could create a function that could change the fill color. I created an id for the SVG so that I could reference it later on. I tried using document.getElementById("locked").setAttribute("fill", "#FFFFFF"), but it didn't seem to work. This approach would be more efficient than the previous one that I had mentioned. However, I was not able to get the SVG icon to change colours. Hopefully, another student will figure this part out because I am curious to see how they did it :).
Joseph Pham's Blogs 