Mapbox API Web Application

Minimum Viable Product for a startup idea called Mappa.

Image of website mockup on a desktop for a startup that allows you to view global events on a map.

Context

According to Learning Theory Research, nearly 65% of the general population are visual learners, meaning they need to see information in order to retain it.

This prompted the creation of Mappa: utilizing graphs, charts, maps, and other forms of visual stimulation to effectively illustrate current events and global news. To stand up a minimum viable product for my "million dollar idea", I deduced it would be the most efficient to use HTML, CSS, and Vanilla JavaScript to create the blog, and utilize existing JavaScript Libraries like MapBox GL JS.

"Mapbox GL JS is a client-side JavaScript library for building web maps and web applications with Mapbox's modern mapping technology. You can use Mapbox GL JS to display Mapbox maps in a web browser or client, add user interactivity, and customize the map experience in your application."

Featured Articles

Screenshot of a Mappa news article describing the Belt and Road Initiative with an interactive map.

China’s President Xi Jinping unveiled The Initiative in 2013, and it is often referred to as one of the most ambitious infrastructure projects ever conceived.. View the BRI article here.

Screenshot of a Mappa news article showcasing the 7 world wonders on an interactive map.

Given that the original Seven Wonders list was compiled in the 2nd century BCE, it seemed time for an update. View the 7 World Wonders article here.

Screenshot of a Mappa news article depicting the first 12 major cities to go underwater due to climate change on an interactive map.

There is little doubt our oceans are rising and cities will go under. It is no longer an issue of if but when. View the Underwater Cities article here.

Documentation

Although Mappa was initially built with the idea of giving visual learners more exposure to international relations and global politics, I developed a documentation page so that people could create interactive maps for other purposes–like mapping their study abroad program or travel plans.

Screenshot of the Documentation section I created for Mappa, allowing users to create these maps themselves.

Analytics

To measure the popularity of the project, I used Google Analytics to track web traffic, average time spent on the page, number of active users, as well as other key digital marketing indicators. I built a dashboard on Google Data Studio to allow for easy interpretation.

Image of a data analytics dashboard containing digital marketing insights about Mappa News.

View the live project: Mappa News

Skills

  • HTML, CSS, JavaScript
  • Mapbox Studio
  • Mapbox GL JS
  • Netlify
  • Google Analytics
Copyright © Taishi Walden.