As part of a group project, with Jose Rodriguez and Patrick Czeczko in a web development course at the University of Calgary, we created a website that allowed users to upload global data sets and visualize the data on a choropleth map. From there, the website provided users with the option to customize the style of their maps, send their maps to others via a sharable url or exported image, and save all mapping data to their account for later use. Within the group I took on a front end development role, designing the UI mockups, customizing the user experience in code, and creating custom controls such as the map color picker and file dropdown menus.
Some of the initial mockups (below) included the main map view, saved map and dataset views, and a user flow for the data uploading process. The map view was originally designed to leave as much space as possible for the user to work with their maps. Controls were kept to the edges of the screen while still being only a click away to adjust. Although this original design was changed to accommodate the assignment deadline, in future versions of the project we would like to put a similar experience into practice.
A Firebase database was created for storing all user data on a user account basis. Firebase was also particularly helpful for handling account creation, login, and password resetting. From there, we used Leaflet as our mapping tool of choice. Its quick setup, many customization options, and plethora of plugins made it an easy choice when compared to other mapping alternatives. In this initial version of the site, we provided a global csv template for users to add their data to. Once the template was populated, they could upload the completed template file and the data would be mapped to each country’s corresponding GeoJSON path. This prevented the project from turning into a data parsing marathon. With that being said, in future versions of the project, we would like to provide more templates or even develop an alternative uploading solution for users. Currently all datasets must be international, meaning that comparing provinces and states is not possible.
Bootstrap was used as a quick way to get the project’s interface up and running on all devices. One impact of this was sticking with the library’s built-in side bar UI for controlling the map view. Once the basic bootstrap UI elements were in place for testing functionality, I spent time customizing the elements to give the site a unified feel, closer to the original mockups.
