Mapbox GL JS vs. Mapbox.js

Question

From the Mapbox glossary, Mapbox.js

Mapbox.js is a JavaScript library that allows you to add an your interactive map to your website. It is a plugin for Leaflet, and it is an open source library that’s free to use.

and Mapbox GL JS

Mapbox GL JS is a JavaScript library that uses Mapbox GL to render interactive maps. It’s an open source library that’s free to use. You can add a Mapbox style or a custom style created with Mapbox Studio to your Mapbox GL JS application.

and from this answer

Mapbox Styles are for use with Mapbox GL and the native iOS and Android SDK's. You can't use them with classic Mapbox JS. Mapbox JS supports raster tiles, you can't style those. They're just images. Mapbox GL and the native SDK's (can) use vector tiles and those are stylable.

I believe I can use mapbox.js as a replacement to the leaflet css and js sources, but can I do the same with mapbox-gl.js?
What other differences exist between the two libraries?

Answer 1

As far as i know, Mapbox GL JS is going to be the replacement for the current Mapbox JS which uses Leaflet in the background. A lot of things Leaflet does, GL can do too and more. But not everything. The same goes vice versa. GL can do things Leaflet can't do. The big thing in GL is that it's built around vector tiles using WebGL. From the introduction article:

Announcing Mapbox GL JS — a fast and powerful new system for web maps. Mapbox GL JS is a client-side renderer, so it uses JavaScript and WebGL to dynamically draw data with the speed and smoothness of a video game. Instead of fixing styles and zoom levels at the server level, Mapbox GL puts power in JavaScript, allowing for dynamic styling and freeform interactivity. Vector maps are the next evolution, and we're excited to see what developers build with this framework.

If you really want a side by side comparison of the two, I'm sorry there is none as far as I know. There are too many things to mention/consider when making a comparison so it's best you do such a thing by yourself based upon your own requirements. A good start would be comparing the examples for each framework because it gives a good idea of what both can do:

• https://www.mapbox.com/mapbox-gl-js/examples/
• https://www.mapbox.com/mapbox.js/example/v1.0.0/

After that you could compare their API's:

• https://www.mapbox.com/mapbox-gl-js/api/
• https://www.mapbox.com/mapbox.js/api/v2.2.4/

One thing to keep in mind is that GL is brand spanking new and as we developers all know that comes with a price. Some kinks haven't been ironed out. As for Leaflet, it's very mature, widely used and very well tested/proven. If you'd like to take a peek at what problems there are currently with GL you could take a look at the issues over at Github, in the repository:

• https://github.com/mapbox/mapbox-gl-js/issues

Hope that helps, good luck!

Answer 2

iH8's answer is great, to add a bit more detail:

For base maps, Mapbox.js displays raster tiles (PNG & JPEG) files, and displays them using HTML & CSS. Mapbox GL JS displays vector tiles (fancy protocol buffers) and displays them using WebGL. It can also display raster tiles, but that's not the focus.

Both Mapbox.js and Mapbox GL JS support overlays like GeoJSON layers and markers. Both are open source, with similar licenses and a few shared contributors.

The styles for Mapbox.js layers are stored on servers and rendered with server technology. The styles for Mapbox GL JS are rendered dynamically in a browser, so they can be changed in realtime.

Leaflet has more broad browser support, at the cost of a few things that some browsers can't support, like map tilt and rotation. Mapbox GL supports browsers that support WebGL and performs best on newer computers. It has a native version, called Mapbox GL Native, that performs really well on all mobile phones.

Despite the names, you can use Leaflet with Mapbox and Mapbox.js and Mapbox GL with non-Mapbox styles.