Maps are everywhere nowadays, most of the people are using for instance Google Maps on a daily basis to find a place or follow a route. You consult maps to see elector distribution, covid expansion, people migration, land use, disaster impact and for many other reasons.

You probably want to make your data a bit more explicit through maps, and you don't feel comfortable being captive in the Google Map API ecosystem: welcome to the open source world.

I’m going to introduce you to the 3 best open source alternatives, they are free to use and you’ll see it is not that hard to implement your own mapping application.

Note that the article reflects my own knowledge, experience and opinion about what each library covers and provides, I am objective but humble enough to admit I don't carry the universal truth.

As a good map worth more than a long speech, let’s discover them.

Leaflet

Created in 2010 by Vladimir Agafonkin, Leaflet has been the first library to take advantage of new HTML 5 features, like the Canvas rendering, offering modernity and great performance. It’s a lightweight library that focuses on displaying fast maps on the web.

It provides a simple API, everything is made so it is easy to embed geospatial information in a website: if you want to display a map with tiled background layers (OSM, satellite), plus some custom vector data (geojson) on top of it, you’ll find the experience great and straightforward by using Leaflet, and the result will clearly respond to your need.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

The drawback of this approach is that the library does not provide the full palette of geospatial features, if you want to build more advanced user interfaces, you will have to rely on plugins very quickly. Also, it is harder to interact with OGC standards, and to use custom projections. Leaflet is based on WebMercator projection and does not provide an easy way to change the projection.

The system is built upon plugins integration, then many community extensions have shown up to expand upon the base features of the library. You can find the list here, it usually makes your life easier to display specific kinds of data, premade styles for dataviz purposes, geometries edition etc..

The library is essentially mature and mainly lives through its plugin ecosystem. The core is still maintained though not by the original author. Leaflet has an extremely large user base and is still very popular, which is an impressive feat considering that its core hasn’t received significant changes in years.

To conclude, Leaflet is a great first approach to web mapping libraries. It does not require too much API or coding knowledge and it lets you build your map quite easily. It’s worthwhile to look into what plugins are available though and whether they are still maintained before diving into implementing complex map-based applications.

Mapbox GL

Mapbox company has brought a revolution in the open geospatial world, bringings standards and libraries that literally changed the way we play with maps on the web. Everything has been made to make the user experience the smoothest and the fastest possible, with a big focus on mobile usage. Vector tiles are the pillar of their constellation, everything is optimized to display vector data with astonishing and fluid rendering.

Mapbox GL JS is the javascript library that handles the rendering into a web browser. Implemented in WebGL, it is ultra performant and optimized for Vector Tiles format. It is by far the most performant library to render vector data. Mapbox GL Native and SDKs for mobile platforms are native libraries to achieve the same goal on mobile native applications. Recently the Mapbox Mobile Android SDK started to rely on a proprietary binary, making the future uncertain about this technology.

Usually, Mapbox GL works along Mapbox hosted vector tiles, so you need to provide a token to access your data, with custom commercial plans. You can use Mapbox GL with your own vector tiles though.

The best way to use the library is to point to a Mapbox Style file, that describes the context of your map (extent, dataset, styles…)

    mapboxgl.accessToken = '<your access token here>';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
    });

The library is also great to display raster formats but it is not where it shines the most. It provides a great and simple API to display different kinds of data (vector tiles, geojson, tile servers), edit geometries, navigate etc..

Mapbox-GL was the first open source library to allow "tilting" the map and give a partial 3D view, which gives an impressive user experience when navigating the map. It is not a full-fledged 3D map rendering library, and is for example not natively able to render terrain meshes or point clouds (though this can be achieved by other means).

All the rendering architecture is built upon the Web Mercator projection, unfortunately you can’t change that. There is no complete OGC standards support so you need to check what the library supports before jumping into it for your implementation.

Note that Mapbox GL JS is open source, but it is not community based, it is developed and maintained by a private company, with their own goals and strategies.

To conclude, Mapbox GL is an awesome library to display vector data in WebGL, in a fast and smooth way, when your needs are focused on visualization of potentially complex vector data. It may not be the best choice though if you want custom projection or complex rich featured web mapping application, and remember that it comes from a private company and that the way you are allowed to use it may not last forever.

OpenLayers

OpenLayers is one of the first web mapping libraries. Way before Mapbox GL and Leaflet, OpenLayers 2 have been used worldwide to display maps on the web. It was the best open source alternative to Google Maps API.

Version 3 has been completely reworked from scratch to embrace new browser possibilities, and lives with an active community since 2013, today is version 6.

The main purpose of OpenLayers is to provide a full featured mapping library, covering most of the needs of the geospatial world:

• Many data source format support (utfgrid, WFS, WMS, GPX, KML, geojson, xyz, vector tiles and many more)
• Large support of OGC for a better interoperability
• Custom projection & on-the-fly raster reprojection
• Extensive styling possibilities
• Snapping, geometries edition
• Multiworld
• Graticule
• Color compositing and raster operations

It also supports Mapbox Specification: Style and Vector tiles so you can use Vector Tiles as well. A huge work has been done to support those specifications and to optimize the rendering of vector tiles to the limit of what 2D Canvas can support, recently prototyping Offscreen Canvas multithreading.

The API is quite easy to use, but the first dive into OpenLayers might be slightly harder than with Leaflet and Mapbox GL, especially if you are not comfortable with coding in general. The learning curve is a bit harder but might be worth the try if you want to develop a complex web mapping application.

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }) ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

There are some extensions like ol-cesium that manage the bindings between Openlayers and CesiumJs, a great virtual globe library written in WebGL, to switch from 2D to 3D maps.

It is community based and very active, it receives contributions and interest from many users and developers. You can easily participate in the codebase and add to the library the missing features you expect.

Recently, a huge crowdfunding leveraged hundreds of thousands dollars to help the community progress and enhance the library.

Many companies are providing consulting to help you to go with OpenLayers, and you’ll quickly have an answer from the community if you face some issue using the library.

To conclude, OpenLayers is not the easiest library to jump in, take advantage of the many online examples and you’ll be right away able to display beautiful maps on your web site. It is the most complete library, it is very performant and it is fully open source and based on a community that will help you along the way.

Conclusion

Geospatial world on the net is clearly approachable. Run away from costly licences, locked in ecosystems and embrace open source solutions and philosophy. You’ll discover that you can create your own web mapping application with free and powerful libraries.

Depending on your needs and requirements, you’ll have to choose what solution is the best for your use case. Consulting companies like Camptocamp are expert to help you to identify your situation and propose the best solutions and technologies that suit your needs