Lab 5 Add feature in existing object

In lab 5, we are going to add feature in existing object. It's a map web application provide bridge and troll data.
Here's Github of project: https://github.com/humphd/bridge-troll


We are asked to add feature so that the colour of the map can change base on different time in day. Bright theme will be used in day time, while dark theme will be used in night time. 
See more description here: https://github.com/humphd/bridge-troll/issues/6

So I fork the project to my github, git clone it to local laptop, use npm to install it and run it. The project run fine in my laptop without errors. 

Then I start to change codes to make new feature.

At the beginning, I need to find themes for map. One is bright and one is dark. I Google 'leaflet theme'. The first of the result is "Leaflet provider demo". I click inside the website, it provides many themes for us. It also provide the code for every theme. Amazing!

Then I need to work in the codes.

Here's my codes:
In the head of map.js, I import 'suncalc' module:
const SunCalc = require('suncalc');

In middle of map.js, before the theme part, I add codes:
//Get sunlight time
var times = SunCalc.getTimes(new Date(), lat, lng);
//get sunrise and sunset hours
var sunriseHr = times.sunrise.getHours();
var sunsetHr = times.sunset.getHours();
//get current time
var date = new Date();
var currentHour = date.getHours();
var tileUrl;

//if current time is between sunrise time and sunset time, means it's day time
//then sen light theme
//othervise set dark theme
if(currentHour>sunriseHr && currentHour<sunsetHr){
tileUrl = 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png';
}else{
tileUrl = 'https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png';
}

Here I use "suncalc" module. I first get the sunrise hour and sunset hour. Then I get current system time. I compare current time to sunrise and sunset time. If current time is between sunrise and sunset, means it's day time. I set a bright theme to map. Otherwise I set dark theme.

Let's run and try it:

Day time:


Night time:


Get it!

In this lab, I learn to use two technology. One is the map api. I use existed api developed by other developers to change the map theme. Another technology I used is "suncalc" module. It's a amazing module for sunlight timing calculation. It's easy to use since there's clear documentation.

Anyway, this is a funny lab. i really enjoyed it.





Comments

Popular posts from this blog

OSD - Release 03

Studying for open standard