Globetrotter’s Dashboard

Globetrotter's Travel Dashboard allows travelers to visualize their travel dreams.

Role

Creator, Designer, Front-End Web Developer

Inspiration

As an avid traveller, I wanted to create a way for a traveler to visualize their wish and been list countries in various ways, including on a map and with charts.

Methodology

  1. Creating requirements: map, country counts, listing of countries from a prepopulated list that would adjust based on two inputs, charts to change upon input
  2. Designing mockups and determining look and feel
  3. Researching implementation - map, charts, interactive lists
  4. Implementation of the design using Bootstrap, Javascript, jQuery, jVectorMap, and Chart.js

Countries on a World Map

One of my key requirements was to have a map that would have country areas highlighted upon selection of a country. Multi-color sections were required, due to the two lists available (wish and been). I initially looked into mapping solutions such as Mapbox and Leaflet but quickly found that those were best when plotting a single point on a map, such as an address or city. In order to shade an entire section, a GeoJSON layer need to be applied. After attempting this, the amount of data to plot all the coordinates was massive crashed the page when using certain browsers.

Upon researching, I found jVectorMap, which matched the requirements of what I needed. Working with jVectorMap, I was able to create a map that filled out countries based on input from two lists and changed colors upon removal of countries on the two lists.

Prepopulated List

One requirement was to have a prepopulated list of all the countries appear when a user started typing in the input box. I also needed the countries entered on to the Wish and Been list to be removed from the prepopulated list itself to prevent duplications. To achive this, I leveraged jQuery UI and created the logic to do so. I later added functionality where the countries on the lists could be removed from the lists or switched from "Wish" to "Been" (or vice versa). In cases where the country was removed from a list, it would be added back onto the prepopulation list.

Interactive Wish & Been Lists

A check and times icon were added to the Wish and Been List that allows the user to remove countries from a list or switch a country from Wish to Been. Upon removal or switching of a country from the list, the map and charts would reset to have an updated count, the color of the country would update on the map, and charts would reflect the correct information.

Since the list area was limited based on space, jQuery UI was leveraged to allow the user to drag a country to the top of a list so it was listed more prominently.

Country Counts & Charts

Country counts were done using javascript. To create the charts, I utilized Chart.js. The circle and bar charts on the dashboard would change based on the country counts.

One issue I encountered with the charts was with retina screens - the charts would set perfectly fine initially, but when a new country count was added, the chart would double in size until it crashed the browser. A workaround was needed to create a new chart each time, rather than readjust the existing chart.

Implementated Travel Dashboard

The implemented travel dashboard includes a Wish and Been list, a world map highlighting the Wish and Been countries, total counts, chart comparison of the two total counts, breakdown by regions, and comparison to a user's countries compared to the total countries in the world.

Learn More