Leaflet vs OpenLayers. What to choose?

Leaflet vs OpenLayers
Leaflet vs OpenLayers

The first step you do when creating a map from scratch is choosing a client mapping library. There are many JavaScript libraries, which allows building a custom map. In this article, we would like to compare 2 widely used mapping libraries: Leaflet vs OpenLayers.

Leaflet

Leaflet holds the leading position among open-source JavaScript libraries for interactive maps. Developed originally by Vladimir Agafonkin and maintained by a big contributes of the community. Moreover, the library is completely free to use and distributed under the BSD-2 Clause license.

https://leafletjs.com

OpenLayers

OpenLayers is a powerful open-source JavaScript library for dynamic maps. It provides a rich API which allows creating simple as well as very complex map applications. The same as Leaflet, it's free to use and distributed under the BSD 2-Clause license.

https://openlayers.org/

Is quickstart possible?

Leaflet

The Leaflet is designed as easy-to-use and light-weight library. So you can start to develop a map just by copy & paste from the QuickStart tutorial.

OpenLayers

The OpenLayers offers more functionality than Leaflet and requires more time to start. For example, you need to use projections, just to create a simple map.

Moreover, it may also confuse you if you have already experience with other map libraries, that coordinates in OpenLayers not in LatLon format, but in LonLat. Which is by the way correct from GIS point of view.

Maintenance

Leaflet

More than 600 contributes. As a result, releases at least every half year.

OpenLayers

About 240 contributors. Consequently, releases every 3-4 months.

Documentation

Leaflet

The Leaflet has well-structured documentation with a lot of examples and tutorials. In addition, great API documentation allows you to quickly find the functionality required.

However, the basic documentation contains only basic examples. So you have to research on the Internet if you need to learn more.

OpenLayers

The documentation contains QuickStart's, tutorials and a lot of examples. But, unfortunately, some of them already outdated.

The API documentation is well-structured, but as it's very large, you may be lost there at begin.

Leaflet and OpenLayers community

Leaflet

The Leaflet is the most popular JavaScript library for maps. So it has a huge community. The lack of example in the official documentation website is refined by many examples from the community.

"leaflet stackoverflow" google request returns 398.000 results.

OpenLayers

As the library is used mainly for complex GIS applications development. So the OpenLayers community is smaller than Leaflet community.

"openlayers stackoverflow" google request returns 52.700 results, consequently.

Flexibility and Power

Leaflet

It contains all the features the most developers ever need by building a map. Furthermore, the additional power is added by Leaflet plugins.

OpenLayers

The power and flexibility are the two most strong characteristics of OpenLayers. The library has all the required features in the core functionality.

Supported GIS formats

Leaflet

The core functionally supports only the GeoJSON format. Nevertheless, support for other formats, like CSV, WKT, TopoJSON, GPX, provided by plugins.

OpenLayers

OpenLayers supports GeoJSON, GeoRSS, KML, GML, and map data from any source using OGC-standards as WMS or WFS.

Amount of code

Leaflet

The Leaflet is designed to be able to achieve the desired result with a minimal amount of code.

For example, a simple map with a marker uses only 3 classes:


var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map').setView(\[51, 12\], 12).addLayer(osmLayer);
L.marker(\[51, 12\]).addTo(map);
OpenLayers

More code with OpenLayers. However, the code looks more structured and provides better MVC-separation.

The same example with OpenLayers has 6 classes:

var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(12, 51).transform(fromProjection, toProjection);
 
map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(position, 12);
 
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

var marker = new OpenLayers.Marker(position);
markers.addMarker(marker);

Leaflet vs OpenLayers summary

Leaflet

Use Leaflet if you are developing just a map, but not a complicated GIS application. Similarly, if the most complex data you deal with is GeoJSON and you do not need to deal with projections.

In the other hand, if you are new in maps world and not a GIS expert, Leaflet may save you a lot of time.

Switch to OpenLayers when you have to use a lot of plugins to make it work.

OpenLayers

Using projections, different Geo data sources, developing integration with other GIS applications? Then OpenLayers will be the right choice!

Geoapify Location platform for digital maps

Geoapify offers maps and map components to create a custom map. Even if "Leaflet vs OpenLayers" is more a matter of taste, both Leaflet and OpenLayers could be used with our map tiles. Certainly, we provide different map designs for you. So you are able to setup "look&feel" for your custom map.

Our APIs, for example, Geocoding, Routing and others, will help you to build interactive and useful map!