Create Interactive Maps With Mapbox
Google Maps API has long been the standard of real time location data, but this is a fantastic alternative.
I first heard about Mapbox last year from a colleague who works in municipal planning. He raved about its numerous uses, extensive functionality and cheapness. I hadn’t thought about the library until recently, when I was tasked with displaying a mobile device’s location in real time (think
Uber or Lyft), and naturally I started going through my old notes on the Google Maps API. The only issue that kept coming to mind was the price. It wasn’t until a day or two into the project that I came across an article on Mapbox, and everything suddenly clicked.
While the Google Maps API allows developers up to 2,000 requests per day, free of charge, it turns out Mapbox gives its users 50,000, and that, as they say, was all she wrote. I can’t emphasize enough that this API is not just a cheap fix, but rather a completely legitimate option for displaying data geographically.
Mapbox is essentially an open source alternative to the Google Maps API. It places emphasis on customization, with loads of support for creating interactive features. It contains functionality for hundreds if not thousands of types of maps (elevation, heat map, weather map, essentially any type of data to be displayed geographically), as well as functions for animation and real-time updates.
If your app or website needs to use a specific framework, no problem. Mapbox is fully compatible with popular frameworks like React, Angular, Ionic and Firebase.
Developers can also make use of a secondary libraries like Leaflet and CartoDB, which work in conjunction with Mapbox for added simplicity.
The file format does take some getting used to if you’re not familiar with it. Mapbox utilizes geojson files as the default data source.
// sample geojson{"type": "FeatureCollection","features":[{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [83.0458, 42.3314]
},
"properties": { "name": "Detroit" }
}]}
When starting out with geojson’s, a useful tool is GeojsonLint, an online service for validating your geojson files while providing useful feedback if errors are present.
A geojson allows for the mapping of multiple features of different types all in the same layer. Does your map need points, lines, polygons and image icons? No problem! You can pack all this data into a single geojson as a FeatureCollection, and include them all in a single layer!
So next time you’ve got some location data to display on your app/website, consider giving this library a shot. Google may be the standard, but there’s a wealth of other features out there that can really bring your visuals to life. Happy hacking!
