This quarter, one of my favorite technologies is a client-side JavaScript library called Mapbox GL JS. This library is used to display an interactive map on the web application and can be customized to show additional data points on the map. I have signed an NDA for my capstone project so I cannot go into specific details about how we are using this library. I will instead talk about some of the features I found interesting and how they can be used in other projects.
Before starting my capstone project, I had not heard of or used Mapbox before. Many of the previous projects I’ve worked on have used the Google Maps API instead. As such, one of the first steps I had to do was to read the Mapbox documentation to gain a better understanding of all the features available in the library. It quickly became apparent that Mapbox allows a high degree of customization depending on the needs of your application. Mapbox’s map utilizes a layering system to render visual elements of the base map. Each layer contains its own set of rules so that groups of visual elements can be toggled on and off by the developer or user. My favorite example shown on the Mapbox website is using layers to render weather radar information on the map. The example defined the source as a gif of moving radar information and the rendering looks exactly like the weather visuals you would see on the news.
Mapbox also allows developers to customize their maps using their style or one of Mapbox Standard. From different colors to 2D vs 3D views, there are a lot of options to choose from to match your application’s UI design. If you are using a style from Mapbox Standard, it is super easy to switch styles because the style setting is within the map instant itself. Mapbox library also includes a function that allows you to update the style at runtime due to its layering system.
One of the cons is that the Mapbox documentation is very technical. I can imagine a UI designer with limited coding experience or a developer who has not worked with Javascript having a difficult time learning and understanding all the nuances in the library. The documentation also has very few visual examples. I think including more code snippet examples and videos will make Mapbox more accessible to all types of developers. Another con is that Mapbox full-service pricing can be expensive, especially if the application you are designing is for a small business.
Overall, Mapbox GL JS is a very interesting library that includes a lot of features that allow for a wide range of customization. There are many aspects that can be improved on to make Mapbox more accessible, especially when many competitors are providing similar services. I have enjoyed working with Mapbox so far and am excited to see future products from this company.
For those who are interested, here is the link to Mapbox’s documentation: https://docs.mapbox.com/mapbox-gl-js/guides/
Leave a Reply