Mapbox GL JS vs. Mapbox.js
I'm currently working on switching a complex Leaflet based map system over to Mapbox GL and I'd say that one notable difference I've found is in the draw tools and handling of GeoJSON layers. Leaflet has a suite of draw tools that include non-standard GeoJSON like markers, rectangles and circles. The developers of Mapbox GL made a decision to focus on native GeoJSON, which means there's no out of the box support for drawing/rendering circles and rectangles (e.g. there's nothing like L.Circle in Mapbox GL); there is a marker but styling it to look like a traditional Leaflet marker requires creating your own sprites or using an SVG. All of these things are still possible, but they take a little more set up on the part of the developer than they did in Leaflet.
Additionally, most of the Mapbox GL layers are rendered as canvas elements. This means that, unlike Leaflet, there are no HTML elements associated with your various layers. This makes it harder to target the elements with CSS if needed. One exception I've found here is markers which are rendered as separate HTML elements.
All of that being said, I've been able to almost fully replicate the existing draw tools and rendering styles with some small differences. If you need highly customized draw tools, Mapbox GL may be frustrating for you.
Browser support has been mentioned as a potential issue as well. Any browser that supports WebGL can run Mapbox GL. This includes all major browsers. The only significant browser set we saw that didn't support Mapbox GL was IE10 or older, but our analytics indicated that almost none of our users still used these browsers so we officially dropped support for them. Your mileage may vary obviously.
Overall though, I'm happy with the switch because I think Mapbox GL is easier to work with and provides a better user experience.
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!
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.