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