Implementing Day/Night Mode in bridge-troll

For this lab we were to contribute to the bridge-troll app and fix the issue-6.  This issue was the map didn't have a day/night feature.  This means while its dark outside the map would stay the same as it is during the day time which is very bright.

Initially while working on the app it was very hard to get it working on a Windows environment. Due to this I had to use a Linux machine to fix the issue. As I was looking at solutions on how to get started on fixing the bug, I saw that in the issue description itself there was pretty much a solution given.

This solution was to use suncalc which is an application that calculates the suns position and determines whether its dark or not.  This helped in figuring out the issue of what time the map should switch to the darker colored mode. The implementation of this code was fairly simple the below screenshots show the code added that checks the time.

After checking the time the changing of the map was very simple.  I just a different tile provided by Leaflet called CartoDB.DarkMatter.  Below is the code that I added that changed the map accordingly.


In the end, after adding all the above code, the final result was the following at different times.

Comments

Post a Comment

Popular posts from this blog

Assignment 1 - DPS909

   For this assignment, our task was to use Google's libphonenumber library and create a RESTful api web service which would get the phone numbers from a string that is provided and also from a file that is provided.  The initial task was to determine what language we want to use to achieve the final result.  For me, I went with JavaScript, as I have worked with JavaScript before and would require less effort to achieve the result.  So for this assignment I used Node.js which is a JavaScript run-time environment which allows the execution of JavaScript code on the server-side. Dependencies used with Node.js express google-libphonenumber multer body-parser mocha chai chai-http nodemon     Express is a framework that allows the creation of web applications for Node.js.  This specific framework is the most standard framework for Node.js, which helped in making the decision rather simple.  I also used the google-libphonenumber package which uses the original libphone
Read more

ECMA Script Testing

Image
For this lab we looked at the ECMAscript test suite. Setting it up and making it run was fairly simple and I didn't encounter any issues.  I just followed the steps provided in https://github.com/bterlson/test262-harness#test262-harness While running the tests not all of them pass. I thought this might have been a Windows issue. Therefore I tried it on my Linux machine and majority of it worked except 6. Then we looked at the test cases for Array.prototype.reverse().  For the task of this lab I simply just rewrote some new test cases to check the array.reverse.  This was fairly simple as looking at the other test cases it gave a general idea on how to write test cases for this. The test case I wrote can be found here. https://gist.github.com/pranoy10/10fd4bbf04a7490567d527017c8d52df
Read more

Release 0.2 - Bug fix

   The bug I decided to fix for this release was a very quick and easy one.  It was to update the show more button.  It can be found here . It is not really a bug but it was a minor change that they wanted. Using devtools in the VSCode, it was very easy to figure out which file was the one that needed the change. It was in the  src/components/SecondaryPanes/CommandBar.css . The Line was changed to: mask : url ( / mc/command-chevron .svg ) no-repeat ; Since this was a fairly simple bug to fix, I went ahead and decided to learn more about how the project structure is. This would help me tremendously since I plan on working on the same project for the next release.
Read more