Mapbox: Next-Level Mapping

Maps have evolved over the last 25 years

In 1996, MapQuest started offering digital maps, becoming the go-to site for maps. In 2004, Google purchased a start-up map company called Where 2 Technologies. One year later, Google released Google Maps API, allowing web developers to build custom maps onto websites.

Google Maps became the go-to for front-end developers partly because it provided a range of options, but primarily because it was free to use. It was an easy decision to make over asking a client to pay for a map API. Then, in 2018, Google Maps changed its structure to pay-as-you-go. This caused a lot of developers (including me) to start looking into other options.

I heard of Mapbox around the time Google Maps changed its pay structure. I continued to use Google Maps since I was familiar with it and it worked great for the projects I was working on. Recently, however, I built two complex maps using Google Maps and ran into challenges both times. I found it difficult to work with the API and hard to display the stylized map data.

Exploring Mapbox

So, I decided to research and explore Mapbox's API. To my surprise, I found it very easy to work with. First of all, Mapbox's exceptional documentation includes simple how-to’s and in-depth API reference pages, enabling me to quickly get started as well as easily look up specific parameter variables.

Motion

A common request I have gotten over the years is, “Can you adjust the zoom and pan motion?” With Google, the answer was, “Not really.” But Mapbox has built-in options for both zoom and pan motion. They also have options to set easing, duration, and speed. This allows designers and developers to style and design a map to match the brand or website. 

You can use FreeCamera to animate the map camera (viewpoint) to move along a path or around a 3D point. You can add animated overlays using Canvas, video, or images. For example, you could add a pulsing dot for a location or show the current weather system.

Map Design

When using Google Maps, I have spent hours adjusting the map style to match the designs. Even still, a lot of the styling was simply not achievable. Mapbox, on the other hand, makes it easy.

You can change the fonts, icons, and global colors; add terrain; and set zoom level colors. All these options can be set and adjusted in your code, but the real powers come from Mapbox Studio. It's like Photoshop or Figma, allowing you to design and customize every part of your map. Mapbox Studio will also enable you to share the design with the client —send the link for development and download the map style when you are ready for production.

When I started testing Mapbox Studio, I was so excited about all the options I could change and edit. Clients can now have designed maps that look beautiful and are easy for developers to update and change.

Ease of Development

If you have worked with map APIs before, you know that doing anything custom or complex can be a nightmare. With Mapbox GL JS, I’ve been surprised by how easy it is to customize.

The well-written documents and many examples made it easy for me to build a map that showed all the National Park Service locations. I was then able to pull from the NPS API and show the park information when a user clicks a location.

I added the geocoder so that users could search for a location, which would then show them the closest park to them. Within a couple of hours, I had all the search functionality set up and working as I wanted. While my NPS map demo is pretty simple, it has the core functionality of a standard store locator.

Plugins and frameworks

You can add a wide variety of features to Mapbox, ranging from map directions to localizing the map to a user's language. These allow a developer to pull in additional functionality without having to build it out from scratch. They also have a wide range of framework integrations like React, Vue, and Typescript, making it simple to pull in your preferred JS framework or the framework your application/site is using.

Price

With all these amazing features, Mapbox has to cost more than other map APIs, right? Actually, right now, Google Maps is more than double the cost of Mapbox for the basic map API. When I realized this, I was shocked. You can pay less per month and get a better product.

A Powerful Developer Tool

After exploring and using Mapbox in the last couple of months, I can say, I am a big fan. It offers an easy API to work with, options for motion, and an amazing online studio to style the map. 

This makes it easy for developers to build custom map functionality and for designers to create beautiful maps.

You may be wondering how to build a map integration into your site. Or, maybe you want to change your current map over to Mapbox. The good news is: you are not locked into Google Maps or another map API. You can always change the map API that your map uses.

Conclusion

So far, I have only explored the maps product for web and mobile apps, which is one of many products they offer. (You can go to their website and see the full list of products.) 

Whether you are thinking of rebuilding your map integration or you want to add a map feature to your existing application, I'd recommend Mapbox.