Activities

Comparing Mapbox, OpenLayers and Leaflet

Mapbox, Leaflet and OpenLayers are the three most popular open source JavaScript libraries used to build web mapping applications. In our new article, let’s have a look at features that all these libraries have in common as well as their main distinctions.

What are these platforms?

Leaflet is an open source JavaScript library for mobile-friendly interactive maps. It is small in size (only 38KB of JS) and has all the features that most developers ever need for online maps. Moreover, it supports both mobile and desktop platforms. Leaflet is very good for building web map applications.

Mapbox is provider of custom online maps for websites. Mapbox GL JS (standing for Graphics Library) is a JavaScript library that allows you to create maps that can include interactive data.

OpenLayers is an open source JavaScript library used for displaying map data in web browsers. It allows putting dynamic maps in web pages. OpenLayers can display map tiles, vector data and markers loaded from any source. Additionally, it provides API for building rich web-based geographic applications.

Things we all love about these platforms

Of course each platform has its own highlights but before that, we should mention all the great features that these platforms share:

Dynamic styling

Dynamic styling is the key factor in changing the look of your web GIS. Mapbox, Leaflet and OpenLayers all support dynamic styling. Developers can style layers depending on values of your features.

Mapbox visualizes data beautifully and vectorably. However, it is not so easy to style your layers with Mapbox since you don’t have full control. Check out the Mapbox Style Specification here for more information on how to style your layers.

OpenLayers allows users to style elements using the style function and the style class. It is not as powerful as the Mapbox Style Spec though and developers need to write more code.

Leaflet is a mix between Mapbox and OpenLayers. Users can use a style function along with its core set of featured elements.

Image Tiles

Mapbox, OpenLayers and Leaflet all support for integrating images via the tile server. For example satellite images from sentinel data.

Examples:

https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/
https://openlayers.org/en/latest/examples/xyz-retina.html

Raster data and raster styling

All three libraries support displaying single raster images. You can add many types of image, such as images in GeoTIFF format to your map.

Example: https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/

OpenLayers does let developers style raster images within the library. Leaflet lets developers style raster images via plugin while Mapbox doesn’t support in terms of styling raster images.

Option to use your own basemap

All the three libraries support default basemap for users to use right away. OpenLayers and Leaflet use OpenStreetMap as one of their default basemaps. Meanwhile, Mapbox requires users to sign up for an API token to use its default basemap. However, developers can freely use any other basemap than the default.

Custom Tooltip

Mapbox, Leaflet and OpenLayers all well support custom tooltip.

Example:

https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

User Drawing

Supported by all of three libraries.

Examples:

https://openlayers.org/en/latest/examples/draw-features.html

Geocoder

All the libraries do support a geocoder for the user to search for addresses and center on the map. OpenLayers and Leaflet support Geocoder via plugin.

Examples:

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
https://github.com/jonataswalker/ol-geocoder
https://github.com/perliedman/leaflet-control-geocoder

Projection

All the three libraries support projection. However, Mapbox only supports mercator projection.

OpenLayers support varied projections via EPGS codes.

Example: https://openlayers.org/en/latest/examples/reprojection-by-code.html

Leaflet requires users to use plugin to be able to use projections.

Example: https://kartena.github.io/Proj4Leaflet/

Main differences among three libraries

Open Source Code

OpenLayers and Leaflet are open source, provided under the BSD 2-clause “Simplified” License. Mapbox GL JS is licensed under the 3-Clause BSD license but Mapbox service is not free.

Choice of map provider

OpenLayers and Leaflet allow users to freely choose map provider while Mapbox only support Mercator map provider.

Size

Leaflet is pretty minimalist product with only 140KB in size. Leaflet library is small and possibly expand with plugins but not meant to be a fully fledged web based GIS. OpenLayers is fully ledged mapping library which contains all the required features in the core library, weighing up to 644KB (version 6). Mapbox size is 732KB (version 1.7).

OGC Services (WMS, WFS)

Mapbox supports WMS (Web Mapping Service) and WFS but only vector tiles in GeoJSON format. OpenLayers support very well both WMS and WFS. Leaflet supports integration of OGC Services via plugin.

Above are some significant features of three most popular map platforms: Mapbox, OpenLayers and Leaflet along with their main differences. Hope this article help you gain more knowledge to understand more about these map libraries. At BHSoft, we have very good expertise with all these libraries to ensure the quality of our GIS service.

Check out our portfolio for more GIS projects:

Author

Tran Thi Hai Yen