This project was originally completed while I was studying for my master's degree. Since then, I've taken the opportunity to update the site to feature more responsive components and interactivity.
Adjusting for different devices to ensure the application runs well on desktop and mobile devices. Switching between column and row alignments allowed the content to maximise the available space.
The first design of the application featured a sidebar for view controls and checkboxes to select map layers. In the newest design, I developed a switch component that would be used to toggle each map layer. The switch component improved the overall aesthetics of the application and utilizing tooltips and icons within the components improved the functionality for new users.
The first design featured a sidebar rather than a topbar. As most users of GIS software access sites on a laptop or desktop computer, their screens were often wider than they were tall, and I had assumed a sidebar would prevent reducing the already limited height.
However, in the comparison below, moving navigation from the side to the top actually reduced the 'wasted space' and any reduction in the height of interactive components remained minimal. The end result provided a clean, minimalist experience that was easier to navigate and interact with.
The application utilizes data from multiple sources including government agencies, academic institutions, and private organizations.
An alternate surface layer can be projected to the visualization by selecting the layer widget in the top right corner.
By clicking the '?' icon in the upper right hand corner of the application, users can open a modal for additional content. The modal dims components in the background and can be closed by clicking the exit button on the modal or by simply clicking the backdrop.
5 unique feature views allow users to visualize recent events in earthquake and tectonic plate activity, global city populations, air pollution, and cyclone activity throughout the world.
The images below display the development progress between the original and current versions of the application:
Users have additional tools at their disposal to improve their experience including zoom, compass, rotation, and legend widgets.
Additionally, users can utilize the measurement widget in the bottom left corner of the application to measure the surface area of a location or geographic landmark.
Type the following into a terminal in the local directory.
npm inpm start
If the application does not automatically open in your browser, enter http://localhost:3000 directly in the URL input box.