Bringing paper maps to life with Mapbox GL

Traditionally, maps have been static images on paper that were only referred to when requiring specific locations. They seldom change and had large print runs in frequency cycles of three to five years. The industry changed with the advent of online mapping services and libraries from technology providers like Google, HERE Technologies, Esri, Mapbox, and CARTO, to name a few. NGIS has been helping businesses move their spatial capabilities online for decades using these mapping services and libraries. 

More recently, the NGIS team was recently engaged by a client to digitise their road maps into a solution that could easily:

1. Capture new instructions and enable simple modification of existing ones
2. Distribute the information to recipients on the road in a timely manner

To meet the client’s needs, we created an Angular frontend mapping application that incorporated the Mapbox GL mapping library, integrated with a REST API layer to communicate with the backend.

In this week’s Geotech Friday blog, we delve into why we chose the Mapbox GL mapping library to transform road network paper maps into a responsive and reactive digital asset for our client. 

Why did we decide to use Mapbox GL?

The Mapbox GL mapping library enables users to create fast, beautiful and functional maps - while also giving users the ability to draw custom objects directly on the map. These features perfectly matched the requirements outlined by our client. 

Another key requirement was the development of an admin portal that would allow users to:

• View a custom generated map 
• Dynamically draw and place polylines, polygons and points on a map
• Snap the drawn polylines to roads 
• Perform spatial analysis

After reviewing a number of mapping platforms available, we found Mapbox GL to be the most suitable due to its functionality, ease of use and setup. The licence and overall usage costs were favourable in this instance as well. 

How we did it

Integrating the Mapbox GL mapping library into an Angular solution involved:

1. Downloading and installing the mapbox-gl, mapbox-gl-draw, mapbox-gl-directions and mapbox-gl-geocoder packages from npm by running the npm install commands in the terminal. 
   
2. We then modified the solution’s angular.json file to incorporate the mapbox-gl.css and mapbox-gl-draw.css files.
   
3. The next step was to obtain an access token from Mapbox (via the Mapbox site) which would record our usage so that in the event that the free usage limits were exceeded, we would only be charged for the additional usage. 
4. With this all completed, we were then able to begin building out the mapping functionality within the application.

Version control

A complexity we faced while building the solution was that there were multiple instances where a new page would use the map object.

To keep a consistent standard throughout the entire solution while multiple developers were working on the project, we created a single map component that contained all the mapping functionality. This enabled us to keep all the map-related code in one place while enforcing a certain process for the developers to follow in terms of implementing the map on their parts of the project.

Adding functionality 

To move beyond the standard functionality of adding a basemap with zoom and layer toggle controls, we included functionality on the user interface that enabled spatial objects to be drawn directly onto the map.

This additional functionality allowed users to:

• Place Points of Interest anywhere on the map
• Draw polylines that would be snapped to the closest road
• Draw polygon points on an area of the map 
• Obtain information related to the area inside the specified polygon

The result

The process of working with paper maps can be cumbersome, costly and take a mountain of man hours to work out the logistics to deliver hard copies to colleagues. Digitising paper maps makes this process seamless for organisation and in this instance, our client. 

We were able to provide a complete solution that utilised the client’s proprietary data and displayed these data visually on a map. The client was able to perform spatial analysis and distribute this information to their clients easily and in real-time.

Do you have a mapping project you’d like help with?

If you have a mapping project that you would like to chat about, our door is always open. Reach out to our team today.

Sign up to receive our fortnightly Geotech Friday newsletter.