CC BY
127
DOI: 10.14529/ctcr170317
COMPARISON OF JAVASCRIPT LIBRARIES FOR WEB-CARTOGRAPHY
M.O. Khitrin, [email protected]
South Ural State University, Chelyabinsk, Russian Federation
Due to the active development of web-cartography, the article deals with the currently relevant cartographic JavaScript libraries, namely: Yandex.Maps, Google Maps, OpenLayers and LeafletJS, which are the basis of most modern geographic information portals. For each library an overview of the main functions and benefits is provided. The author defines a number of general requirements for cartographic libraries for visualization of spatial data. Particular attention is paid to the built-in tools and support for spatial data formats "out of the box" and their participation in existing projects. Using the specified requirements, then an analysis is carried out on a number of criteria, which ultimately makes it possible to make an assumption for the solution of which problems and under what conditions it is worth to use one or another library.
Keywords: geographic information systems, web-mapping, Google Maps, Yandex.Maps, Mapbox, OpenLayers, LeafletJS.
Introduction
Today, due to the evolution and involvement of the Internet in every person's life, so-called libraries for presenting cartographic information gained much popularity, allowing you to use the web browser for displaying a map with labels, routes and other spatial data. This can be done using independent resources that allow you to store data and display information on the map. The most famous of them are Yandex.Maps, Google Maps, OpenLayers and Leaflet. This list is not exhaustive, since there are many other analogues, such as Bing maps, Maps.me, 2GIS and many others, but in this article we will limit ourselves to only those listed above.
With such a large number of products with similar functions, it is important to understand their similarity and difference, and also to decide which tasks they are able to execute. Attempts to perform the analysis are done repeatedly, there are entire websites devoted to this issue, like http://mmaps.net/ and http://mc.bbbike.org/ (Fig. 1), which on one page display data simultaneously from various sources in different versions. However such analysis tools, as well as articles [1, 2], usually examine only the coverage of the territory and the completeness of the cartographic material, rather than the functionality provided by the library, which ultimately does not allow you to unequivocally determine the choice. There are also many articles aimed at analyzing the capabilities of a particular library or service [3], there are even articles aimed at comparing "similar" libraries [4], but they do not always determine in what scenario to use one or another.
Let's give a short description of each library listed above.
OpenLayers - JavaScript library for spatial data visualization. It allows not only to display the results of the user's request in the form of map, but also to directly form such request. It has a wide range of input data formats and supports all existing spatial data protocols. There are two versions - v.2 and v.3. The second version is obsolete, but it is still supported. The third version is a new embodiment of the library, as it was rewritten using modern technologies, which ultimately increased the speed of work, extended the set of software functions and strengthened the support of mobile devices. However because of these innovations the new version has no backward compability with the previous version, which does not allow the geoportals working on the second version to upgrade to a new version without the modification of their software.
Leaflet as well as OpenLayers is a JavaScript library and have a lot in common but also has its own specifics. Particularly more often its modular structure is noted - each map tool acts as a separate module, which allows you to abandon the use of certain components (leaving only the necessary ones), thus reducing the library size, therefore increasing the page load speed, which in some cases can be decisive for making a choice. For some desktop GIS, there are third-party plug-ins that allow you to save data as an HTML document and display it on the map using Leaflet [5].
Choose map type; osmhh<»86№» » Choose map type: УаплхМар»
_lnq,lat: 61.70131, SS.30267 zoom = 10 number of maps: 1 2 2 4 6 8 share
CQ i 2016 BBBike.org & Geofabrik GmbH ■ map data (©) OpenStteetMap.org contributors ■ extracts - help ■ contact ■ console ■ fullscreen
Fig. 1. Map Comparison Interface
Google Maps API is a cartographic library developed by Google. Unlike the previous two it is distributed under more stringent conditions. It has its own audience, mainly because it is less demanding to the developer's knowledge in the field of geographic information systems (or spatial information). It allows users to display the fully functional map by following a few simple steps. Ultimately, it does not allow you to display complex structured information and information from external sources.
Yandex.Maps API is in a way an analog of Google product. In many respects it repeats its functionality and idea, but it has larger content in the Russia. Therefore this library is more often used in Russia.
1. Problem statement and requirements definition
For the system end-user, the most important component is directly the map interface. Is it the main working element of any geographic information system. It allows you to perform basic data mapping functions:
• display map layers with the possibility of switching them;
• control the scale of map;
• determine coordinates of mouse, click or object.
As well as basic functionality more special functions should be executed:
• object search (by coordinates or semantic characteristics);
• displaying information about the selected object;
• making measurements on the map (measuring length, perimeter and area);
• adding objects to the map;
• layer transparency controlling;
• layer grouping.
Thus, the choice of means for visualizing data on the client side is the key point in creating the whole system. Since in the field of geographic information systems it is customary to distinguish two types of spatial information: raster and vector data, the selected component must support displaying both of them. In addition, there should be algorithms optimizing the download of data, such as:
• partly map download using tiles;
• generalization;
• splinting the query into several parts.
Besides there should be the possibility of connecting data from external sources using OGC services -WMS, WFS, WMTS and support of modern formats for storing spatial information - KML, GML, ESRI ShapeFile.
Хитрин М.О.
Сравнение JavaScript библиотек для веб-картографии
To determine the most appropriate means of spatial data visualization on the client side, all the libraries presented above were analyzed according to the following criteria:
1) The size of the library;
2) Functionality;
3) Basic maps accessibility;
4) External layers support;
5) Built-in tools presence;
6) Cartographic data reprojection support;
7) Involvement in large projects;
8) Extensibility;
9) Documentation;
10) Support;
11) Terms of distribution.
2. Performing an Analysis
Let's analyze the available API according to the parameters indicated above:
№ Criteria OpenLayers Leaflet Google Maps Yandex.Maps
1 The size of library 170 Kbytes (v. 3.13.1) 123 Kbytes (v. 0.7.7) + plugins 21.9 Kbytes (the rest is loaded dynamically) 44.7 Kbytes (v. 2.1, the rest is loaded dynamically)
2 Functionality
2.1 Clasterization (point objects grouping) + + (by means of plugin) + +
2.2 Heat Maps + + (by means of plugin) + +
2.3 Routing and navigation - - + +
2.4 Traffic jams - - + +
2.5 Catalog of organizations - - + +
2.6 Geocoding - - + +
3 Basic maps accessibility MapQuest, OpenStreetMap, Bing Maps OpenStreetMap Bing Maps, Esri Maps (by means of plugins) Proprietary -scheme, satellite and hybrid Proprietary -scheme, satellite and hybrid
4 External maps support
4.1 Tile Layer, TMS + + + +
4.2 WMS (Web Map Service) + + - -
4.3 WFS (Web Feature Service) + + (plugin) - -
4.4 KML (GML) + + (plugin) + +
4.5 GeoJSON + + (plugin) + -
4.6 GPX + + (plugin) - +
4.7 GeoCSV - + (plugin) - -
4.8 Shapefile - + (plugin) - -
5 Built-in tools presence
5.1 Zooming + + + +
5.2 Active layer switching +/- (the realization described in examples) [6, 7] + + +
5.3 Cursor coordinates display + + (plugin) - -
5.4 Scale ruler + + + +
5.5 Full screen display + + (plugin) + +
5.6 Overview map + + (plugin) + +
5.7 Map rotation + - - +
5.8 Map print - + (plugin) + +
5.9 Length measurement +/- (the realization described in examples) [8] + (plugin) + +
№ Criteria OpenLayers Leaflet Google Maps Yandex.Maps
5.10 Area measurement +/- (the realization described in examples) [8] + (plugin)
6 Cartographic data reprojection support + + + +
7 Involvement in large projects Geoserver - is used for uploaded layers preview; Geoportal of Chelyabinsk Region [9] MapBox - big cartographic webservice; OpenStreetMap.org -Open maps created by users from all over the world FlightRadar24.com -service showing passenger planes movement online; Airbnb.com -website for accommodation, search and short-term rental of private housing worldwide Ozon.ru - map of issue points; Sportmaster - map of retail network; Raiffeisenbank -map of departments and ATMs; Cian.ru -real estate listings on the map [10]
8 Extensibility + + +/- (source code is not available) +/- (source code is not available)
9 Documentation + + + +
10 Support + + + +
11 Terms of distribution License BSD, open source software License BSD, open source software Free, if during 90 days the number of map downloads doesn't exceed 25 000 per day; Advertisements inside map; Up to 2500 free queries per day to web services is allowed; Using in closed systems is prohibited [11] It can't be applied only to receive and process data. It is inadmissible to hide or change logos on the map, and also block them with other elements [10, 12]
Conclusion
The carried analysis allows you to determine which of the libraries is suitable for using in a particular scenario. Obviously, there are two groups which elements are similar in a number of criteria. The first group includes OpenLayers and Leaflet, the second - Google Maps and Yandex.Maps. Obviously, due to their limitations, the last two can't be used in a number of projects, for example, in a closed system such as municipal geoportal. In addition to closed source code, it is not always possible to adapt the system to its own needs, which is also exacerbated by the lack of WMS and WFS services support. Without such support it is difficult to build a multifunctional monitoring system or geoportal. However, this libraries suitable for presentation of small data sets, for example, the location of stores in a network. These products act as ready-made solutions, which allows you to host a map on your web-site without attracting additional resources.
Using libraries of the first group, on the other hand, allows to solve more complex problems. Not only a broader functionality can be noted, but also higher requirements to the developer. Thus, when creating a large web-mapping service, it is worthwhile to use one of the libraries from the first group. If you choose one of them, then in general, the analysis allows you to say that there are no fundamental differences of absence among them. However OpenLayers has much faster growth speed and a wider community, so you can count on longer support. Benefits of Leaflet include module structure and expansion via plugins which allow developers to choose only necessary functionality and optimize website page loading.
References
1. Yandeks.Karty, 2GIS ili vsjo zhe Google Maps? [Yandex.Maps, 2GIS or Still Google Maps?]. Available at: https://habrahabr.ru/post/242015/ (accessed 01.03.2017)
2. Polunina V. Yandeks Karty protiv Google Kart: chto luchshe? [Yandex Maps vs. Google Maps: Which One is Better?]. Available at: http://www.androidpit.ru/yandeks-karty (accessed 01.03.2017)
Хитрин М.О.
Сравнение JavaScript библиотек для веб-картографии
3. Phipps A.G. [Three Applications of V.3 Google Maps: Just for Display of Data, or Analysis as Well?]. Journal of Geographic Information System, 2014, no. 6 pp. 548-558. DOI: 10.4236/jgis.2014.65045.
4. Lovelace R. Testing Web Map APIs - Google vs OpenLayers vs Leaflet. Available at: http://robinlovelace.net/software/2014/03/05/webmap-test.html (accessed 01.03.2017)
5. Web Mapping with Leaflet and R. Available at: http://amsantac.co/blog/en/r/2015/08/11/leaflet-R.html (accessed 01.03.2017)
6. Layer Groups - Openlayers 3 Examples. Available at: http://openlayers.org/en/v3.13.1/examples/ layer-group.html (accessed 01.03.2017)
7. MapQuest - Openlayers 3 Examples. Available at: http://openlayers.org/en/v3.13.1Zexamples/ mapquest.html (accessed 01.03.2017)
8. Measure - Openlayers 3 Example. Available at: http://openlayers.org/en/v3.13.1/examples/ measure.html (accessed 01.03.2017)
9. Khitrin M.O., Maksimova V.N. [Development of Geographic Information Portal of the Chelyabinsk Region] Humanities and Science University Journal, 2015, no. 13 (13), pp. 99-107. (in Russ.)
10. JavaScript API - Yandex Technologies. Available at: https://tech.yandex.com/maps/jsapi/ (accessed 01.03.2017)
11. Prices and plans - Google Maps API. Available at: https://developers.google.com/maps/pricing-and-plans/ (accessed 01.03.2017)
12. Terms of Use of Yandex.Maps API. Available at: https://yandex.com/legal/maps_api/ (accessed 01.03.2017)
Received 15 March 2017
УДК 258.926:004 DOI: 10.14529/ctcr170317
СРАВНЕНИЕ JAVASCRIPT БИБЛИОТЕК ДЛЯ ВЕБ-КАРТОГРАФИИ
М.О. Хитрин
Южно-Уральский государственный университет, г. Челябинск
Ввиду активного развития веб-картографии, в статье рассматриваются актуальные в данное время картографические JavaScript библиотеки, а именно: Яндекс.Карты, Google Maps, OpenLayers и Leaflet.JS, лежащие в основе большинства осовремененных геоинформационных порталов. Для каждой из библиотек дается краткий обзор и освещаются основные функции и преимущества. Автор определяет ряд общих требований к картографическим библиотекам визуализации пространственных данных. Отдельное внимание уделяется встроенным инструментам и поддержке форматов пространственных данных «из коробки» и участию в существующих проектах. Затем на основе обозначенных требований проводится анализ по ряду критериев, что в конечном итоге позволяет сделать предположение для решения каких задач и в каких условиях стоит использовать ту или иную библиотеку.
Ключевые слова: геоинформационные системы, веб-картография, Google Maps, Яндекс.Карты, Mapbox, OpenLayers, Leaflet.JS.
Литература
1. Яндекс.Карты, 2ГИС или всё же Google Maps? - https://habrahabr.ru/post/242015/ (дата обращения: 01.03.2017).
2. Полунина, В. Яндекс Карты против Google Карт: что лучше? / В. Полунина. -http://www.androidpit.ru/yandeks-karty (дата обращения: 01.03.2017).
3. Phipps, A.G. Three Applications of V.3 Google Maps: Just for Display of Data, or Analysis as Well? / A.G. Phipps // Journal of Geographic Information System. - 2014. - С. 548-558. DOI: 10.4236/jgis.2014.65045
4. Lovelace R. Testing web map APIs - Google vs OpenLayers vs Leaflet / R. Lovelace. -http://robinlovelace.net/software/2014/03/05/webmap-test.html (дата обращения: 01.03.2017).
5. Web mapping with Leaflet and R. - http://amsantac.co/blog/en/r/2015/08/11/leaflet-R.html (дата обращения: 01.03.2017).
6. Layer Groups - Openlayers 3. - http://openlayers.org/en/v3.13J/examples/layer-group.html (дата обращения: 01.03.2017).
7. MapQuest - Openlayers 3 Examples. - http://openlayers.org/en/v3.13J/examples/mapquest.html (дата обращения: 01.03.2017).
8. Measure - Openlayers 3 Examples. - http://openlayers.org/en/v3.13J/examples/measure.html (дата обращения: 01.03.2017).
9. Хитрин, М.О. Разработка геоинформационного портала региона /М.О. Хитрин, В.Н. Максимова // Университетский научный журнал. - 2015. - № 13 (13). - С. 99-107.
10. JavaScript API Яндекс.Карт. - https://tech.yandex.ru/maps/jsapi/ (дата обращения: 01.03.2017).
11. Цены и планы - Google Maps API. - https://developers.google.com/maps/pricing-and-plans/ (дата обращения: 01.03.2017).
12. Условия использования сервиса «API Яндекс.Карты». - https://yandex.ru/legal/maps_api/ (дата обращения: 01.03.2017).
Хитрин Максим Олегович, программист НОЦ «Геоинформационные системы», аспирант кафедры информационно-измерительной техники, Южно-Уральский государственный университет, г. Челябинск; [email protected].
Поступила в редакцию 15 марта 2017 г.
ОБРАЗЕЦ ЦИТИРОВАНИЯ
FOR CITATION
Khitrin, M.O. Comparison of JavaScript Libraries for Web-Cartography / M.O. Khitrin // Вестник ЮУрГУ. Серия «Компьютерные технологии, управление, радиоэлектроника». - 2017. - Т. 17, № 3. - С. 147-152. DOI: 10.14529/ctcr170317
Khitrin M.O. Comparison of JavaScript Libraries for Web-Cartography. Bulletin of the South Ural State University. Ser. Computer Technologies, Automatic Control, Radio Electronics, 2017, vol. 17, no. 3, pp. 147-152. DOI: 10.14529/ctcr170317
