Comparison of Javascript Libraries for Web-Cartography

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 Leaflet.JS, 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, Leaflet.JS.

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 si- milarity 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 re- written 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].

Вестник ЮУрГУ. Серия «Компьютерные технологии, управление, радиоэлектроника». 147 2017. Т. 17, № 3. С. 147–152 Краткие сообщения

Fig. 1. Map Comparison Interface

Google Maps API is a cartographic library developed by Google. Unlike the previous two it is dis- tributed 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.

148 Bulletin of the South Ural State University. Ser. Computer Technologies, Automatic Control, Radio Electronics. 2017, vol. 17, no. 3, pp. 147–152 Хитрин М.О. Сравнение 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 123 Kbytes 21.9 Kbytes 44.7 Kbytes (v. 3.13.1) (v. 0.7.7) + plugins (the rest is loaded (v. 2.1, the rest is dynamically) loaded dynamically) 2 Functionality 2.1 Clasterization + + (by means + + (point objects grouping) 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 Proprietary – Proprietary – OpenStreetMap, Bing Maps, Esri scheme, satellite and scheme, satellite and Bing Maps Maps (by means of hybrid hybrid plugins) 4 External maps support 4.1 Tile Layer, TMS + + + + 4.2 WMS (Web Map + + – – Service) 4.3 WFS (Web Feature + + (plugin) – – Service) 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 realiza- + + + tion described in examples) [6, 7] 5.3 Cursor coordinates + + (plugin) – – display 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 realiza- + (plugin) + + tion described in examples) [8]

Вестник ЮУрГУ. Серия «Компьютерные технологии, управление, радиоэлектроника». 149 2017. Т. 17, № 3. С. 147–152 Краткие сообщения

№ Criteria OpenLayers Leaflet Google Maps Yandex.Maps 5.10 Area measurement +/– (the realiza- + (plugin) – – tion described in examples) [8] 6 Cartographic data + + + + reprojection support 7 Involvement in large Geoserver – is MapBox – big FlightRadar24.com – Ozon.ru – map projects used for uploaded cartographic web- service showing of issue points; layers preview; service; passenger planes Sportmaster – map Geoportal of OpenStreetMap.org – movement online; of retail network; Chelyabinsk Open maps created Airbnb.com –web- Raiffeisenbank – Region [9] by users from all site for accommo- map of departments over the world dation, search and and ATMs; Cian.ru – short-term rental real estate listings of private housing on the map [10] worldwide 8 Extensibility + + +/– (source code is +/– (source code not available) is not available) 9 Documentation + + + + 10 Support + + + + 11 Terms of distribution License BSD, License BSD, open Free, if during It can’t be applied open source source software 90 days the number only to receive and software of map downloads process data. doesn’t exceed It is inadmissible 25 000 per day; to hide or change Advertisements logos on the map, inside map; Up to and also block them 2500 free queries with other elements per day to web ser- [10, 12] vices is allowed; Using in closed systems is prohibi- ted [11]

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. Obvious- ly, 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 ex- pansion via plugins which allow developers to choose only necessary functionality and optimize web- site 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)

150 Bulletin of the South Ural State University. Ser. Computer Technologies, Automatic Control, Radio Electronics. 2017, vol. 17, no. 3, pp. 147–152 Хитрин М.О. Сравнение 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.1/examples/ 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 Chelya- binsk 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).

Вестник ЮУрГУ. Серия «Компьютерные технологии, управление, радиоэлектроника». 151 2017. Т. 17, № 3. С. 147–152 Краткие сообщения 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.13.1/examples/layer-group.html (дата обращения: 01.03.2017). 7. MapQuest – Openlayers 3 Examples. – http://openlayers.org/en/v3.13.1/examples/mapquest.html (дата обращения: 01.03.2017). 8. Measure – Openlayers 3 Examples. – http://openlayers.org/en/v3.13.1/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 Khitrin M.O. Comparison of JavaScript Libraries for Web-Cartography / M.O. Khitrin // Вестник ЮУрГУ. Web-Cartography. Bulletin of the South Ural State Uni- Серия «Компьютерные технологии, управление, ра- versity. Ser. Computer Technologies, Automatic Control, диоэлектроника». – 2017. – Т. 17, № 3. – С. 147–152. Radio Electronics, 2017, vol. 17, no. 3, pp. 147–152. DOI: 10.14529/ctcr170317 DOI: 10.14529/ctcr170317

152 Bulletin of the South Ural State University. Ser. Computer Technologies, Automatic Control, Radio Electronics. 2017, vol. 17, no. 3, pp. 147–152