Currently my team is working on developing a mobile app for bike sharing for our OSU CS Capstone project. None of the team members have experience using a Map API so we spent a bit of time researching what options are out there. Although Google Maps has great maps APIs, we wanted to explore some alternative options. Here are 2 great Javascript libraries we found – each offering a range of features at an affordable price.
Tamas Tuzes-Katai – Unsplash
Mapbox GL JS
https://docs.mapbox.com/mapbox-gl-js/api/map/
Mapbox is a powerhouse for their Maps and Navigation APIs. Their Mapbox GL JS library is a standout. According to Mapbox, “Mapbox GL JS is a JavaScript library for vector maps on the Web. Its performance, real-time styling, and interactivity features set the bar for anyone building fast, immersive maps on the web.”
To get started you just need to create a Map object by specifying the map bounds and a few other options. You can then utilize a multitude of interactive features such as allowing the user to drag and pan or rotate the map. Oh, and did I mention it’s possible to use 3d maps! Here’s a full list of features to check out. Below are some examples of different maps that are possible with Mapbox GL JS.
The pricing of Mapbox GL JS is affordable, if not free for small applications with less than 50,000 monthly loads. For applications with higher demand, 1,000,000 loads or less will run $3.00. Alternatively, 3 seats for web come at no cost. For larger development teams, 20 seats runs $68/month and 100 seats is $388/month.
To get started with Mapbox GL JS check out these tutorials:
How to Build a Store Locator Using Mapbox GL JS
Getting Started with Mapbox GL JS Part I
Leaflet
According to Leaflet, “Leaflet doesn’t try to do everything for everyone. Instead it focuses on making the basic things work perfectly.” Leaflet doesn’t boast the range of styling options that Mapbox GL JS does, however, it’s a great open-source Javascript library that delivers clean vector map tiles. Leaflet works well across all mobile platforms and it has extensive examples to help you get started.
Some highlights of the its features include:
- Mobile browser support for Chrome, Firefox, Safari for iOS 7+ and IE10+ for Win8 devices.
- Interactive map features such as zooming, panning and scrolling
- Pure CSS3 popups and controls
- Allows for image overlays
- Custom map projections EPSG 3857, 4326 and 3395
Safari for iOS 7+
Chrome for mobile
Firefox for mobile
IE10+ for Win8 devices
Here are a few helpful tutorials to get started with Leaflet:
Wrap up
Mapbox GL JS and Leaflet are 2 great alternatives for developers looking to try out different Maps libraries for their applications. The affordable pricing as well as the range of different maps styling options and interactive features are worth trying. There is thorough documentation and plenty of examples to get started, so the next time you need a map for an app, make sure to checkout both Mapbox and Leaflet.
Leave a Reply