Creating an interactive website giving information about the time zones of the world
Overview
This assignment required that I create a website with a significant mapping component displaying the spatial distribution of a geographical phenomenon. I chose to create an interactive website showing the location of the Time Zones of the world and information about each one.
HTML and CSS were used to create the look and feel of the site with JavaScript used to add further functionality. PHP was used to obtain data from a Postgres database relating to the cities in each time zone. The mapping components were created using Leaflet.js with extra functionality being extended from the Esri Leaflet and Esri Leaflet Geocoder plugins.
The main interactive map highlighted a time zone on mouseover and displayed this areas UTC offset to the user. Clicking on any point on the map would open a label telling the user what time zone that point lies within. A search function allowed the user to find any location and automatically discover the time zone it lay within. Furthermore, dynamically generated pages were created for each individual time zone, highlighting them on the map and giving information about its current time, total area and major cities.
This project allowed me to hone my skills in web design, an area I have had prior experience in. I was also able to fully explore the Leaflet.js API, a tool I am now comfortable with and keen to work with in the future.