Hacker Read top | best | new | newcomments | leaders | about | bookmarklet login

* Leaflet is based completely on the web platform. It achieves a zoomable slippy map experience by animating DOM elements - usually image tiles.

* MapLibre GL JS is a BSD licensed fork of Mapbox GL JS version 1. Instead of consuming bitmap image tiles, it consumes tiles corresponding to the same coordinate extents as the above tiles, but containing tagged geometry features. So instead of sending a PNG image you're sending what is essentially an SVG, but in binary format and with some domain-specific compression.

* The GL JS renderers also rasterize those vector tiles using WebGL, which means that all the geometry data exists in GPU memory and can be scaled, rotated, and recolored etc in realtime efficiently, and also implement their own limited text rendering so even labels can be rotated in realtime.



sort by: page size:

Yeah, the bit about the developer of Leaflet is accurate. One thing I'd expand on: the first iteration of web mapping was all built on raster maps, where the map was rendered in advance, server-side, and a simple client downloaded tiles to the client to build a slippy map. Leaflet was an open source library that did that task well.

The commercial players have mostly abandoned this approach, though, in favor of technologies that render on the client. They're more performant (tiles are smaller), and necessary if you want, say, to be able to rotate your map and still have all the labels be upright and not collide, or show/hide individual geographic features dynamically in response to user input, or apply perspective/tilt as you would for a heads-up display in a car, etc.

Mapbox GL was Mapbox building that (as already exists for Google Maps, Apple Maps, etc.). At a very high level, it and Leaflet serve a similar purpose, but are technically very different from one another.

(full disclosure: former Mapbox employee, still a shareholder)


Leaflet - developed to work with PNG image map tiles

Mapbox GL/Maplibre - works with vector tiles which are similar in format to an SVG

I believe this plugin[1] is a hybrid approach which allows Leaflet to load vector tiles on a plain 2D map with no map tilt or rotation

[1] https://github.com/mapbox/mapbox-gl-leaflet


They're just rendered PNG tiles in a Javascript slippy map library.

EDIT: Just checked, it's leaflet (http://leafletjs.com/)


A big difference moving from OpenLayers and Leaflet to MapLibre GL is that you can use vector tiles and style them in the browser as opposed to rendering PNG files on the server. Converting OpenStreetMap to vector tiles is implemented by OpenMapTiles and they also have some open map styles.

Leaflet creator here, worked on both libraries.

It makes a lot of sense because this library is vastly different from usual slippy maps — fluid continuous zoom & rotation, extremely powerful visualization and interactivity potential, no DOM constraints — fitting it into the Leaflet API which was designed for simple image tile-based maps would be very limiting.

On the other hand, Mapbox GL JS is a very complicated technology under the hood, it is much heavier, with more code, lots of algorithms, serious backend technology to support it etc. So there's a place for both libraries — Leaflet remaining the go-to super-simple, friendly and lightweight library for most maps, while GL JS being an experimental ground for maps of the future with unlimited potential.

Also, Mapbox GL JS + Leaflet integration plugin is coming soon. Stay tuned :)


Leaflet is the open source base/core version of mapbox-gl-js; they're both maintained by Mapbox people.

What is the additional functionality? I couldn't find any document comparing MapLibre GL to MapBox GL JS 1.x.

We are using MapTiler along with MapBox GL JS. It seems that MapLibre GL JS is our next logical upgrade step. For one it's great that you have a Leaflet plugin under your github org.


Disclaimer: I'm the Leaflet author and I also work on Mapbox GL.

It's true that Mapbox currently focuses its efforts on GL, but they are not "moving away from Leaflet" — Leaflet will continue to be supported as one of the first-class clients to be used with Mapbox services (and GL-based styles have a raster tiles fallback). Leaflet is very mature, has a huge community, is suited for most simple mapping needs, is very easy to learn, and doesn't require a lot of development effort from the Mapbox side to support.

Mapbox GL on the other hand represents a vector rendering technology, which is very different. It is much more powerful than conventional raster tile based clients, and enables applications never seen before in the online mapping industry, but it's also many times heavier, more complex, and much harder to learn. Rendering vector data on the client is something Mapbox bets on as the future of mapping, but it's incredibly challenging to build, so it requires a lot of focus.

I'll continue to maintain both libraries — while they have some overlap, there's a place for both.


Openlayers has web GL support but not for vector tiles and I would like to have fast vector tiles :)

They removed this support in some previous version, I think.

Or do you have a link to a pull request or issue?

(IMO Leaflet is dead now that the creator is working since several years for Mapbox)


Great news, Leaflet is the standard for open source web maps. This release looks to have a lot of nice quality of life improvements.

I've been a little worried about Leaflet's future vs. Mapbox GL JS. That's also an excellent open source map library, but is based entirely on new technology (vector maps and GL) and favors using Mapbox's paid services. I think Leaflet has a long life ahead for folks who want something simpler, something that can easily composite raster data from many sources.


Rough overview:

Leaflet: fairly simple open source mapping library. Canvas-based. The original Mapbox (called MapboxJS) is based on this.

Openlayers: open source mapping library that’s more capable (e.g many different protections) but also more complex. Can render to Canvas or SVG.

Openstreetmap: public and free source of mapping data. Mapbox uses this as a default data source.

MapboxGL: completely new implementation of a mapping library written in WebGL (should perform better). MapboxGL changed its license recently, prompting the creation of the libremap fork.


I’ve used Leaflet a ton and love it. But I recently tried using it with a vector-based render method (as opposed to the rastered tiles Leaflet uses by default) and couldn’t find anything that worked anywhere near as easily and simply as Leaflet’s standard rendering.

I don’t blame the Leaflet folks for this really, rendering map data locally via WebGL is not a simple task. But it’s been depressing to see folks like MapBox close off their vector-based library (and Google’s isn’t open either). There’s an open source of Mapbox’s library but it still feels like the open source world is being left out in the cold compared to how things were just a few years ago.


Anybody using Mapbox GL JS? Basically Leaflet with WebGL and some other useful tricks.

I switched a project over from Leaflet to Mapbox GL JS for the better-integrated vector tile support and better mobile rendering performance. Raster tiles still have value, but I wouldn't call vector tiles "new"; they're mature enough that they should start phasing raster tiles out, especially for projects that need a wide range of zoom levels, tight bandwidth requirements, or a lot of flexible, overlapping, and/or dynamic layers.

Thanks to tools like Maputnik, tippecanoe, and TileServer GL, I also had no problems using Mapbox GL and vector tiles without once touching a Mapbox service.

I still use Leaflet for most raster and simple vector maps simply because it is light and modular enough that I can get what I want, but the open source tools are there to reap the good stuff from Mapbox GL while avoiding the proprietary bits of Mapbox.


Note: I didn't create Mapbox GL, I'm just a part of the core team: https://github.com/mapbox/mapbox-gl-js/graphs/contributors

Don't have any particular OpenLayers examples in mind at the moment but it's very heavily used in government, enterprise and academics — sectors that often need advanced projections, use various obscure formats / protocols and prefer all the features to be packed in one product and maintained consistently by one team.

For Mapbox, here's a showcase https://www.mapbox.com/showcase. It especially shines in apps that need to render hundreds of thousands of features at once, maximum customization in how the map looks and feels, updating map appearance dynamically in real time, or some cool animations.

In terms of features, Leaflet has a huge plugin community and there's a plugin for pretty much any feature since it has been around for 8 years, although their quality varies (the core is top-notch though). Mapbox GL will need to catch up on that front certainly, but on the other hand, there are things that are simply not possible with raster-based mapping libraries — things like making any feature you see interactive, changing the map appearance in real time, rendering millions of features (with high perf viz features like clustering, heatmaps, advanced labeling etc.), and general smoothness of user experience (smooth zoom transitions, labels adjusting to rotation and pitch, etc.).


Looks like they use either mapbox gl is or maplibre gl js to render the map

Yeah Leaflet never really made the jump to vector tiles. There are various ways to add vector drawing to it but as you've noted none of them are quite easy or simple enough.

MapLibre.org gives me hope. It's a fork of the MapBox GL JS code that intends to be fully open source and independent.

Another option for open source vector mapping was Mapzen's Tangram. Mapzen shut down, what, two years ago? But they open source released everything. I'm not sure if Tangram has a life of its own.


Did not know about Tangram, seems awesome!

I have a (dumb) question. Why do you use Leaflet? Isn't Tangram the same as Leaflet, or am I missing something here?

A fully WebGL mapping solution is better for performance, but won't using Leaflet HTML5 Canvas defeat this purpose?

It seems to me that, because of this, Mapbox GL will have a better performance than Tangram.


Neat! This is the first time I heard about MapLibre. It seems that you'd use it over Leaflet if you're looking for vector tiles as opposed to raster?
next

Legal | privacy