June 29, 2017 at 11:26Leaflet 1.xx vs Openlayers 4.xx Part 1. Source
I want to share my experience with these JS-mapping frameworks, I hope the materials will help to make a choice in the question: which library to use in your project. In order not to tire, I will break it into several logical parts. Let's start with the main and source code.
I always liked the Openlayers 2 code , it was as academicly written and documented as possible, it was quite easy to figure out its code and become a co-author or write a plug-in.
The 3rd version and subsequent code is also well written and documented, but there is one “but” - it is written using the Google Closure Compiler and without using ES6. This is a very interesting thing, for example, the size of the libraries themselves:
It can be seen that Сlosure Сompiler compresses source files 2+ times more efficiently than the Leaflet mechanism. It also provides a convenient mechanism for using namespaces during development, rather than “these of yours” import '../../../../src' in ES6.
This is where all the benefits of Google Closure end (my subjective opinion). Then some suffering begins, they are mainly related to the fact that in assemblies the names of all members of the class except the public are “optimized” to 1-2 letters. For example, you need to write a descendant of the ol.source.Image class under your data source, and you can only work with public properties and methods. Knocking on private members of a class, as well as on abstract classes of parents, will be problematic. There is only one distinct option - making your own Openlayers builds (OL authors suggest using this particular option), and making plug-ins “near” without getting into the main library is not very convenient. However, inside the Openlayers assembly there is almost everything you need to create a GIS, even third-party providers of vector and raster data (Esri for example),
Leaflet was originally conceived on a different principle. The library itself has the necessary minimum, for everything else - plugins. The code follows this principle. In the beginning, it was really not very documented, there were no comments at all, then titles appeared in each class, now for all public methods and properties of the class there are exemplary descriptions and examples of use. The code is written using ES6 (so far only a modular system is used). Accordingly, it is as convenient as possible to create your own Leaflet assemblies and write extensions for it, the authors recommend the latter.
In the article I wanted to show a simple example of refinement of one and the second framework using the example of creating a tile layer with a non-standard tile grid, the reference point of the tiles is not in the upper left corner, but in the middle of the grid (yes, this also occurs). For Leaflet, the plugin would look something like this:
But then I suddenly realized that for the tile source (ol.source.XYZ) in Openlayers there is a property of type ol.tilegrid.TileGrid, in which, in turn, there is a property of origin - the very coordinates of the center of the grid. In short, Openlayers has it all, and you wouldn't even have to code.
So, if you evaluate in terms of code, other things being equal, what to choose? If you understand that both in Openlayers and in Leaflet (+ plugins) there is no ready-made functionality that you need and you will have to roll up your sleeves to write add-ons or even make custom assemblies - choose Leaflet. It is simpler and easier to integrate into your project. If there is enough functionality both here and there, then in the question of choice you must be guided by other conditions.
In the next article I will analyze the developer community and the extension for these frameworks.
I always liked the Openlayers 2 code , it was as academicly written and documented as possible, it was quite easy to figure out its code and become a co-author or write a plug-in.
The 3rd version and subsequent code is also well written and documented, but there is one “but” - it is written using the Google Closure Compiler and without using ES6. This is a very interesting thing, for example, the size of the libraries themselves:
| Framework | Assembly | Source files |
|---|---|---|
| Leaflet 1.0.3 | 144 kb | 410 kb (90 files) |
| Openlayers 4.1.1 | 511 kb | 3.1 mb (300 files) |
It can be seen that Сlosure Сompiler compresses source files 2+ times more efficiently than the Leaflet mechanism. It also provides a convenient mechanism for using namespaces during development, rather than “these of yours” import '../../../../src' in ES6.
This is where all the benefits of Google Closure end (my subjective opinion). Then some suffering begins, they are mainly related to the fact that in assemblies the names of all members of the class except the public are “optimized” to 1-2 letters. For example, you need to write a descendant of the ol.source.Image class under your data source, and you can only work with public properties and methods. Knocking on private members of a class, as well as on abstract classes of parents, will be problematic. There is only one distinct option - making your own Openlayers builds (OL authors suggest using this particular option), and making plug-ins “near” without getting into the main library is not very convenient. However, inside the Openlayers assembly there is almost everything you need to create a GIS, even third-party providers of vector and raster data (Esri for example),
Leaflet was originally conceived on a different principle. The library itself has the necessary minimum, for everything else - plugins. The code follows this principle. In the beginning, it was really not very documented, there were no comments at all, then titles appeared in each class, now for all public methods and properties of the class there are exemplary descriptions and examples of use. The code is written using ES6 (so far only a modular system is used). Accordingly, it is as convenient as possible to create your own Leaflet assemblies and write extensions for it, the authors recommend the latter.
In the article I wanted to show a simple example of refinement of one and the second framework using the example of creating a tile layer with a non-standard tile grid, the reference point of the tiles is not in the upper left corner, but in the middle of the grid (yes, this also occurs). For Leaflet, the plugin would look something like this:
export var CenterOriginTileLayer = TileLayer.extend({
getTileUrl: function (coords) {
// здесь идут простые математические действия по сдвигу координат тайла в центр сетки
// и возвращание URL для данного тайла
}
});
But then I suddenly realized that for the tile source (ol.source.XYZ) in Openlayers there is a property of type ol.tilegrid.TileGrid, in which, in turn, there is a property of origin - the very coordinates of the center of the grid. In short, Openlayers has it all, and you wouldn't even have to code.
So, if you evaluate in terms of code, other things being equal, what to choose? If you understand that both in Openlayers and in Leaflet (+ plugins) there is no ready-made functionality that you need and you will have to roll up your sleeves to write add-ons or even make custom assemblies - choose Leaflet. It is simpler and easier to integrate into your project. If there is enough functionality both here and there, then in the question of choice you must be guided by other conditions.
In the next article I will analyze the developer community and the extension for these frameworks.