Bridge-troll theme switch

In this lab i will to add feature to change bridge-troll theme color depending on the day time. Meaning if the API is used during the day when the sun is still up the API will use regular/bright theme. Otherwise the API UI will have dark theme to make application more comfortable to be used during different times of the day.

First of all we need to clone and run the API to make sure the project gets build with no errors and functions as expected. To clone and build the API do the following.

1) Fork the parent repo

2) git clone the forked repo to the local machine

git clone https://github.com/humphd/bridge-troll.git

3) Open the project’s root folder using your preferred editor or terminal (i use VS Code)

4) Install the dependencies (run in terminal window)

npm install

5) Run the API in your browser

npm start

As a result you should see the map with your current location marked as a dot and all bridges around you. Note that the current theme is bright/white regardless if you run the API during the night or day.  Ok, now it is time to get to coding. To be honest I have read blog posts of other students prior to getting my hands on the API. So i already have general idea of what is expected and how it could be done.

First of all i need a to choose the themes that would be used in the API. Leaflet library offers some cool themes. The one that i liked the most is called Thunderstorm. So i chose the regular/bright theme to be  thunderforest landscape theme and dark theme to be thunderforest dark theme.

Now lets find the part of the program that sets with API UI theme. I figured that this logic is located in  ./src/map/base-ui.js module. Then i created a separate module called theme.js inside the map folder to set the current theme of the UI. Once the theme module was created i linked it with the base-ui logic since base-ui is the parent class that creates the UI. Once all the coding is done i run prittier to style the code and that is it.  Let me walk you through the code logic and describe the process in more details. Here is the logic implemented in the theme.js module:

As you can see the module has a single method that returns the theme depending on current state of the sun – current time. We can get the current sun state using JavaScript library called Suncalc which calculates sun/moon positions and phases. Inside the setTime function i initialized 4 local variables:

 tileUrl – holds the theme URL

currentTime – holds the current time in hours

sunsetTime – holds the current sun set time in hours depending on the your location

sunriseTime – holds the current sun rise time in hours depending on the your location

The theme is set when the function compares the current time with the sun set and sun rise times. If the current time is between the sun rise and sun set, we use regular/bright theme. Otherwise, we use dark theme. One the theme is set we return it to the calling method.

Here are the lines that i changed inside the base-ui class to set the theme based on the current time:

The current theme depends on what the setTheme method returns. That way we can automatically set the theme based on the current time. Do not forget to the remove the original tileUrl variable that was declared in the top of the file. Also import the theme.js module by putting this line below other library imports:

const theme = require(‘./theme’);

Ok, now it is time to test this thing out. If you run the npm start command while the sun is up, you should get the following regular day theme:

 

When you run the app at night, this dark theme is displayed:

To conclude, this lab once again let me learn something new open source features and tool like Suncals. It is has been another day working with open source which allowed me to test my skills and continue to explore.