Mapping Libraries - A Comparative Analysis
All businesses are keenly aware of the importance of data. The current explosion of data applied to the right mapping framework can provide businesses, the necessary geographic context, leading to improved Location Intelligence. Maps coupled with relevant Internet of Things (#IoT) data can provide instant visualization allowing applications to monitor, interpret, troubleshoot and predict usage patterns. I recently conducted an analysis of mapping libraries to determine which library would serve the needs for our new web application. In this article, I briefly describe how the maps work, and then compare three mapping libraries : #Google Maps API, #Carto and #OpenLayers.
Modern web maps are displayed in the browser by seamlessly joining many individual image files. These images are stored in a format called ‘Slippy Map’. The URL for a slippy map source is given as : http://.../Z/X/Y.png, where Z is the zoom level, X refers to the column of the image and Y is the image within each column. Each zoom level is a directory, each column is a subdirectory, and each image referred as tile in that column is a file. Each of the ‘tile’ in the map is 256 X 256 pixel image. Zoom levels are range from 1 to 18+, ranging from full view of the world map at zoom level one to be able to zoom in to be able to see a blade of grass at zoom-level 18. A zoom-level of 14 to 15 provides sufficient details, while keeping storage requirements in check. Here is an example of the Slippy map ‘tile’ server from OpenStreetMaps https://a.tile.openstreetmap.org/${z}/${x}/${y}.png.
The web application we are building is for companies in the Utility industry. These companies manage the Electric, Gas,Water Meters and other IoT devices and sensors and own the #Smart-Grid infrastructure as part of the Advanced Metering Infrastructure (AMI) solution. As these customers are involved in managing critical infrastructure, they have specific requirements. Combining their requirement, with our expectation for developing a architecturally sound solution, I arrived at the following list :
On-Premise Support: Utility customers don’t want to open any ports to outside world and want a solution that can host the map ‘Tile-Server’ on-premise.
Scalability : The number of devices in the network can be in the order of several millions. Mapping solution needs to be able to scale to handle this.
Customization : The mapping solution should be able to support customization of different map sources and add ability to display various ‘Feature layers’.
Licensing / Cost : Licensing and hosting cost of the mapping solution should be as low as possible, so as not to increase the overall solution cost.
Feature / API support: Features such as clustering, adding layers, drawing etc. need to supported with a simple API.
I evaluated three mapping solutions - Google Maps API, Carto and OpenLayers, against the above requirements.
Google Maps API provides a simple JavaScript interface for using Google Maps. For using the Maps API an API key needs to be generated and added to the project.
Google Maps API is feature rich, with support for - adding markers, clustering, visualization and many more. Importing the Google API library with an API key brings in all the required mapping library APIs. The mapping framework scalability is limited by the client-side limitations in terms of the memory required to allocate the ‘feature set’ to display on the map. Typically this can scale to 10s of thousands of ‘markers’ that can be displayed on the map. The support for On-Premise deployment is not clear based on the documentation available. There is a ‘Premium Plan’ offered by Google Maps API, however, the cost and additional functionality this provides is not described in detail.
The Maps API is well documented and provides an excellent step-by-step guide on how to use various features.
Carto is a cloud platform for web maps. It has a JavaScript + SQL interface. The data sets are uploaded into the carto database and are rendered server-side. The JavaScript API includes SQL queries on the data that has been uploaded. This makes the interface for using Carto a bit cumbersome to use. Server side rendering and hosting data results in increased scalability.
Carto mapping platform has a free version that can be hosted on-premise. The Installation is fairly cumbersome and requires setting up many software packages - Nginx, Rails, Windshaft, Varnish, Postgres/Postgis, etc. As Carto requires uploading the dataset into its database, it doesn’t fit well with the standard three-tier architecture model of having a UI layer, Backend Server layer and a Database layer.
OpenLayers provides JavaScript library for displaying map data in web browsers as Slippy maps. It can use maps from any source, web or on premise that serves images in Slippy format.
Openlayers is implemented using latest web standards - HTML5, WebGL etc., providing good performance,
OpenLayers supports a numbers of features - adding markers, clustering, animation, freehand drawing on the map. The APIs available are fairly easy to use and several options are available for customizing and extending Maps. The Code is licensed under the BSD Licensing making it Free. The scalability of OpenLayers is primarily due to client-side limitations and OpenLayers can easily scale to 10s of thousand. Installing OpenLayers library to use with your application is as simple as ‘npm install ol’.
The documentation available for Openlayers is disorganized and information available for various features is scattered. Openlayers being open source, will have support issue as any open source project. Below I am providing the link for adding custom icon using OpenLayers.
Example: https://openlayers.org/en/latest/examples/icon-color.html.
Scalability: I tested the scalability of OpenLayers using the following example.
In my testing Openlayers performed well with 100,000 ‘features’, At 200,000 we start seeing slow down in the rendering of the points as we zoom-in and out. At 500,000 features, the points are no longer rendered and timeout errors are seen. This scalability limitation can be addressed by adding intelligence on server-side. By clustering points based on location, the server itself can collate the data and send clustered features. By combining, server side clustering, any web application can scale to several million points or more and use OpenLayers for its mapping needs.
Summary:
Web-based map provide instant visualization of data in Web-applications and have become an integral part of modern applications. In this article, I compared three mapping libraries: Google Maps API, Carto and OpenLayers. OpenLayers provides a simple javascript interface, is easy to install, feature rich, meets the performance and scalability needs of our application.