Connecting Communities With Bridges and Mapbox

Bridges to Prosperity is a nonprofit organization that helps build footbridges in east African communities after studying feasibility and weighing the economic impact of a proposed bridge.

The organization has been collecting data about the proposed bridges. It needed help with visualization of their data. And that is where my team comes in. My team’s task was to build on top of prior work done on an app that displays information about bridges and also shows economic impact for a given bridge on the map. Specifically the stakeholder wanted my team to help render boundaries at granular levels — such as villages, sectors and districts, and also to display names of the villages. And ability to visualize impact of a bridge on nearby villages.

Going in, some of the requirements were not clear. Computing the impact of a bridge on nearby villages seemed arduous. Mapbox API, Plotly and Ant Design are new frameworks and tools that I had no experience using.

The goal was to show the map at a granular level with names using a dropdown menu. The job was broken down into tasks as shown in the Trello card below. The stakeholder gave the required shape-data, which I uploaded to Mapbox to create tile-sets containing boundaries for villages of Rwanda. I then studied Mapbox documentation to figure out how to render the granular boundaries using Source and Layer objects, and then wrote the code to add a new layer to existing map to display village boundaries when zoomed in.

Tilesets to styles on Mapbox to bridges and villages

The app is created, built and styled with ReactJS, Mapbox, Plotly, Okta, and Material UI. Mapbox GL JS is a JavaScript library for interactive, customizable maps on the web from vector tiles and Mapbox styles. This library is written for plain JS apps. In order to use this library in React apps, Uber engineering team wrote a React Mapbox GL.

The original library from Mapbox is well documented. However, the React Mapbox GL is very poorly documented. Lack of documentation made the job very difficult. I solved this problem by using the good documentation of underlying Mapbox GL library and then making some logical guesses on how objects in mapbox may have been mapped to React elements in the React-Mapbox-GL library. Inspecting the code of React-Mapbox-GL to figure out some of the mappings between the two libraries also helped significantly.

On the left is the snippet from Mapbox documentation

Below is the snippet from my code

Reflections

The task was to build on top of prior work done on the app and some suggestions were considered to add features to the app:

• Created tilesets that show boundaries at granular level on the map.
• Added a layer in the code that displays names of villages.
• Included a dropdown menu on the app to show different levels.
• Added a feature where clicking on the pin takes to bridge’s image and graph

Future features could be creating a hover effect on polygons and filtering features when hovered on a sector or a village within the map. I worked on the feature but couldn’t finish it as the React Mapbox GL library didn’t have enough information or technical support. I wanted to include 3D graph bars using Plotly to show the impact of bridges on villages. But the graph is displayed and going through the documentation of Plotly takes time.

Mapbox is a complex platform and one needs to spend time to understand the various objects, their properties, and how all the objects come together to render a beautiful map. But after a bit of practice, it becomes a great tool to create maps. So why wait? Just jump in! I now know how to work with new frameworks and tools, and how maps are rendered in web applications.