Good question! There's a lot of Map<thing>s and it's very unclear how they all fit together without prior experience.
OpenStreetMap (OSM) is a community-driven, fully open and usable data library. It has usable data for almost the entire world for everything from cities, roads, houses, parks, country borders, and work. It's a database of everything you need to make map. They also have a website that renders that map, but it's not commercially usable.
Mapbox is one of the first companies to take OSM's dataset and commercialize it. Along the way they created a lot of the wildly used mapping libraries, including renders, data formats, and styling tools.
Mapbox Studio is one of Mapbox's proprietary tools for working with maps in their ecosystem.
Mapbox GL is a suite of renderers, originally entirely open source, developed by Mapbox with the community to render map data (from many different sources).
MapLibre GL is a community-driven fork of the Mapbox GL suite, after Mapbox closed the licenses to require payment if you use the latest versions.
OpenLayers and Leaflet are both alternative, open source renderers with various levels of capabilities. Interestingly, the creator of Leaflet now works for Mapbox (if my facts are correct and current).
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)
Isn't it the case that pre-rendered tiles are more performant for the mobile user? Continously rendering the tiles on a smartphone is draining more battery? I would guess?
It's true that raster tiles are easier to draw, but CPU/GPU is rarely the limit for performance even on (modern) mobile devices, network access then disk access then memory usage is. And using the network is one of the largest sources of power use. Vector tiles are smaller downloads, therefore they are more performant.
Wall time CPU profiling is just not that useful anymore and yet it's the only thing most people ever think about for some reason.
Along with dynamic rendering mentioned in other comments, vector data is sparse, so bandwidth is basically zero past a certain (surprisingly low) zoom. Raster tiles are a dense data structure, so you need to bake tiles to the maximum allowed zoom and clients need to download them. High zoom tiles also have higher entropy so you end up with a huge volume of images with low cache hit rates. It’s expensive for the provider and slow for bandwidth constrained mobile users.
Yeah, pre-rendered tiles are typically more performant on any device. It’s basically downloading and displaying a png. In my experience, download times were not the bottleneck for vector tiles, but rather all the on-device rendering. This is especially true when you consider that most of the time, the tiles are already cached on your device.
I believe the reason most companies moved to vector had more to do with the other stuff gp mentioned: ability to rotate, dynamically show/hide features, etc.
If you never change what you display, that might well end up being true, but if changing display state (you want to highlight or shade or hide a feature, for example) that would likely require downloading whole new tiles for raster but could be a pretty trivial mutation of the current local state that doesn't require a full re-render from scratch. You probably also don't need to download as much on zoom; there are tiles for different zoom levels with vector tiles because tiles get really large when zoomed way out otherwise, mostly full of features or detail you can't see or wouldn't show, but you might not need as many, and can overzoom a given tile and have it still look nice with relatively few artifacts. All of which is to say: it depends.
To some degree its possible to combine bitmap tiles and client side lightweight vector overlay. If you want to work with ortofoto (basically satellite/airplane captured imagery) then you basically have to do it that way.
Definitely true. In my experience it's less to do with battery and more that the client-side rendering process is so intense. Particularly because of the single-threaded nature of JS: a GL-based map on a web page makes the whole thing drag on a low-specced phone.
These days Chrome and Firefox have the OffscreenCanvas API that would let you do all that rendering in a different thread, but last I looked MapBox GL didn't support it. Not sure if that's changed with libre.
Leaflet started because openlayers was very clunky. But since the major rewrite of openlayers v3 it's become a great choice and the author of leaflet has stated here on hackernews hat it's probably what you should use these days
Sorry, but I never stated such a thing. OpenLayers is great when you want all possible features/formats ever created baked in, and excels for certain use cases such as GIS academia, but Leaflet is still the library of choice for most raster-based maps — intentionally simple, lightweight, very easy to use, carefully designed, extremely stable, extensible and working beautifully.
I feel like I half-remember something I saw here on HN a couple of years ago, about some mapping related startup going out of business, and open sourcing some interesting tidbits. Do you (or anyone else) happen to remember that, or know what I'm talking about?
Sorry for being so vague, that's just all I remember of the whole deal. I probably bookmarked the link, but I'll probably never find it again now.
Edit: it may have been MapZen that I was thinking about.
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.
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.
True, OpenLayers and Leaflet have some support for vector tiles. However, you cannot rely on it because the performance is not there to render a normal map. Alternatively, you can use maplibre-gl-leaflet to integrate the two but it's experimental with some significant caveats.
Could you please explain (in brief) the mapping "ecosystem" as it were, and where Maplibre fits into the picture?