5 ms·

I've struggled to understand the relationship between Mapbox, Mapbox Studio, Mapbox GL, OpenStreetMap, and other libraries like OpenLayers or Leaflet. Could yo

I've struggled to understand the relationship between Mapbox, Mapbox Studio, Mapbox GL, OpenStreetMap, and other libraries like OpenLayers or Leaflet. Could you please explain (in brief) the mapping "ecosystem" as it were, and where Maplibre fits into the picture?

huy-nguyen 5y ago
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.
lukeqsee 5y ago
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).
- apendleton 5y ago
  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)
  - lukeqsee 5y ago
    Yes, for sure. Good expansion points.
  - la_fayette 5y ago
    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?
    - kevinventullo 5y ago
      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.
tuukkah 5y ago
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.
- kabes 5y ago
  no, openlayers supports vector tiles out-of-the-box and leaflet with a plugin
  - karussell 5y ago
    You can use vector tiles with openlayers but they draw it on the canvas and not via web GL i.e. it is slower.
  - tuukkah 5y ago
    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.
tppiotrowski 5y ago
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 https://github.com/mapbox/mapbox-gl-leaflet

huy-nguyen 5y ago

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.

lukeqsee 5y ago

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).

apendleton 5y ago
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)
- lukeqsee 5y ago
  Yes, for sure. Good expansion points.
- la_fayette 5y ago
  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?
  - kevinventullo 5y ago
    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.

tuukkah 5y ago

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.

kabes 5y ago
no, openlayers supports vector tiles out-of-the-box and leaflet with a plugin
- karussell 5y ago
  You can use vector tiles with openlayers but they draw it on the canvas and not via web GL i.e. it is slower.
- tuukkah 5y ago
  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.

tppiotrowski 5y ago

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 https://github.com/mapbox/mapbox-gl-leaflet