Written by Siegfried Grimbeek✏️
Introduction
Implementing an effective, efficient, and sustainable map solution can be a daunting task.
Rather than reinventing the wheel, it’s better to make use of existing solutions if your specific use case allows for it.
In this post we will investigate several existing React map libraries and compare them based on functionality, technology, and ease of use.
Which libraries should we compare?
Whenever I have to make a decision on what library or framework to use, my first step is to check out the Github “Awesome” repositories.
The Github “Awesome” repositories are a huge collection of “all things awesome” for a particular framework or programming language.
Some notable awesome repositories include Awesome React, Awesome Vue.js, awesome-graphql and Awesome JavaScript.
Checkout the full list of all awesome repositories here.
I made use of the Awesome React repository. Under the maps category, there are a total of eleven different React map libraries, components, and wrappers listed.
Out of the eleven libraries listed on Awesome React, five were eliminated from this comparison because they haven’t been updated in nearly a year or more. This normally indicates that a project has depreciated or been abandoned.
That leaves us with six libraries, which is still a lot for a comparison.
However, after some consideration, I’ve decided that it would not be fair to omit any of the six as they are all still in active development and each one has a different set of functions, modules, and components.
A summary of each library
react-map-gl is a suite of React components for Mapbox GL JS, a WebGL-powered vector and raster tile mapping library.
In addition to exposing MapboxGL functionality to React apps, react-map-gl also integrates seamlessly with deck.gl.
This library, as well as deck.gl, is developed and maintained by Uber.
google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map.
It is fully isomorphic and can render on a server.
Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm – every object on the map can be hovered.
Factory function that returns a React Mapbox component.
Parameters of the factory function are static. Properties of your component are dynamic and get updated if they change between rendering.
React-Leaflet provides an abstraction of Leaflet as React components.
It does not replace Leaflet, only leverages React’s lifecycle methods to call the relevant Leaflet handlers.
A set of geo-related components to use in combination with react, antd and ol.
Are you tired of waiting 3 seconds to parse 200kb of Google Maps JavaScript just to display a few tiles and a marker?
140kb of minified Leaflet too much? Welcome to the club! This project aims to provide a performance-first React-centric extendable map engine.
With the above information, one can already eliminate certain libraries based on the project requirements.
For example: if a project requirement is that the project makes use of free open source software, one can narrow down the choice of libraries to only those using OpenStreetMap.
If the project already uses many Google products and wants to remain in this ecosystem, only the libraries using Google Maps need to be considered.
Statistics and trends
Lets take a quick look at the npm trends, which will give us an indication of how popular each library is based on their number of downloads in the last six months:
It is clear that there is a big discrepancy between the number of downloads across the six libraries, ranging between a couple of hundred to nearly a hundred and twenty thousand.
The number of downloads always serves as a good indicator of a library’s popularity, but it definitely shouldn’t be the deciding factor.
Below are the statistics for each library (also from npm trends):
Another good measure of popularity is how many times a library has been “starred” on GitHub.
A strange discrepancy is the amount of downloads vs. the stars for the pigeon-maps, as it is the third most “starred” library, but it got almost no downloads in the last six months.
This reinforces the idea that one should not base one’s choice solely on a single metric.
Size is another important factor to keep in mind. Most libraries are relatively small, with the exception of react-map-gl, which is 212.6 KB. If size matters, then it’s a definite no-go.
We can also tell that all of the libraries are in active development based on when they were last updated.
Technology and functionality
react-map-gl
Map solution : MapBox
Cost : A very generous free tier, but prices can be found here.
Documentation and demos : Clear and concise documentation and great coding examples that can be found here.
Functionality : Exposes the entire Mapbox GL JS functionality to React apps. React-map-gl also integrates seamlessly with deck.gl.
This means that this library is packed with functionality. It covers everything from events, interaction handlers, user interfaces, and all geography and geometry functionality.
Takeaways : This library is developed by Uber and probably has more functionality than most projects would ever require.
Maps can be dynamically styled, waypoints can be smoothly animated with the camera transition, and everything from heat maps to clusters can be plotted out on the map.
If your application will be very map-heavy and map-focused and there’s a budget for when it breaks through the free tier, this solution is definitely worth checking out.
Google Map React
Map solution : Google Maps
Cost : Pricing is available here.
Documentation and demos : Limited (work in progress) documentation, but great examples covering most use cases can be found here.
Functionality : This library is built upon a limited set of the Google Maps API, exposing a very small set of the the functionality.
It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server, as well as on the client side. Additionally, it can render map components in the browser even if the Google Maps API is not loaded.
Takeaways : This library allows you to render React components on Google maps and that’s basically it.
So if you are building a directory listing application (think AirBnb), then this library will be a good fit.
While the functionality is limited, it does allow for click / hover interaction, custom markers, and event interaction.
Regarding the pricing options, one needs to consider whether it’s worth implementing Google Maps for such limited functionality as one could very easily achieve similar functionality with a free solution.
React-mapbox-gl
Map solution : MapBox
Cost: A very generous free tier, but prices can be found here.
Documentation and demos : Thorough documentation and demos — with the code — can be found here.
Functionality : This library covers most of the Mapbox GL JS functionality, which includes everything from events, interaction handlers, user interfaces, and all geography and geometry functionality. If any additional functionality is required, the documentation recommends accessing the original mapbox-gl-js API.
Takeaways : Just like react-map-gl, this library is also built on MapBox, meaning that it too has everything from dynamic styling to heat maps, etc.
However, it is way smaller in size than react-map-gl, and it also allows you to tap into the original mapbox-gl-js API if you need to add additional functionality.
This library would be suitable for a map-heavy application that needs loads of functionality and customizations, but you should keep in mind that the technology that it’s built on implements a pay-per-use payment structure.
React-Leaflet
Map solution : Provider-agnostic, meaning you can use any map provider as long as you conform to its terms of use.
Cost : One can use a free solution such as OpenStreetMap, or one of the commercial solutions.
Documentation and demos : The documentation covers all functionality. There are coding examples that are part of the Git repo, but I did not find any demos online. The documentation and coding examples can be found here.
Functionality : This library is built upon the Leaflet.js plugin, which in itself is packed with functionality, including events, interaction handlers, user interfaces, vector layers, and all geography and geometry functionality.
Takeaways : This is an excellent solution if your project requires free open source alternatives such as Open Street Maps, but it does not bind you to any mapping solution.
The Leaflet.js library upon which it’s built is feature-rich. It also has a great ecosystem of plugins and extensions that can easily be incorporated into a solution.
If open source — along with some serious functionality — is a project requirement, then this library is definitely a good option.
Again, I feel that this library is geared towards more serious map-focused applications and should not be implemented if all the functionality is not required.
react-geo
Map Solution : Built with OpenLayers, which can be used with OpenStreetMap-project and commercial products such as Bing Maps or Google Maps.
Cost: One can use a free solution such as OpenStreetMap or one of the commercial solutions.
Documentation and Demos: Thorough documentation of each component and great coding demos that can be found here.
Functionality : This library combines functionality available in the OpenLayers framework and the Ant Design library.
The OpenLayers framework is packed with features and functionality. As with Mapbox, the functionality includes everything from events, styling, and interactions.
Takeaways : This library feels like it is trying to do a little bit of everything, but not enough of anything. It combines map functionality with user interface functionality in the form of Ant Design.
Personally, I am a bit opposed to a library forcing a design system upon a project, but this could be a benefit if one is already using the Ant Design framework.
It is built with OpenLayers, making it free and open source, but I do not feel that this library is ready for production.
Pigeon Maps
Map solution : OpenStreetMap
Cost : Free using OpenStreetMap
Documentation and demos : Limited documentation and demo that can be found here.
Functionality : This library has all the basic functionality and more.
It is not as feature-rich as some of the other libraries we’ve reviewed, so for any more advanced scenarios, this may not be your best bet.
But don’t write it off before looking at the API, which has numerous functions including overlays, touch interactions, and event handling.
Takeaways : This library aims to provide a performance-first, React-centric extendable map engine without waiting for the large overheads of Google Maps to load.
With that in mind, the amount of functionality packed into this library is very impressive. However, I don’t think it should be used to power a fully-fledged map application.
So if your project calls for performant, free, open source software, this library fits your needs.
Comparison overview
| react-map-gl | Google Map React | React-mapbox-gl | React-Leaflet | react-geo | Pigeon Maps | |
| Issues | 85 | 54 | 113 | 12 | 16 | 21 |
| Size (KB) | 216.8 | 12.6 | 15.3 | 7.1 | ?? | 7.0 |
| Map Solution | MapBox | Google Maps | MapBox | Provider Agnostic | OpenLayers | OpenStreetMap |
| Costs | Pay per use | Pay per use | Pay per use | Free / Pay per use | Free | Free |
| Documentation | Great | Limited | Great | Good | Good | Limited |
Conclusion
Each of these libraries brings their own set of pros and cons, which you’ll need to take into consideration when choosing the right library for a specific project.
The library that you use should really be project-dependent. This could vary on budget, functionality, customizations, and licensing.
A developer working on a project with a limited budget might consider a free solution, whereas someone doing a project built upon a free solution that has reached its limits may now consider migrating to a more feature-rich commercial solution.
Full visibility into production React apps
Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
The post React map library comparison appeared first on LogRocket Blog.
Top comments (1)
Thanks for the article! Finding a good mapping library is hard so I'll keep this bookmarked for the next time I need something.
While I appreciate that it's not exactly the same type of map that you're looking at in this article, sometimes using a simple vector map is more than enough for your use case (be it simple data visualization or for a contact page etc) so a while ago I created react-vector-maps.
I thought that it would just be useful to mention that there are other alternatives out there if you don't require a full mapping library. 👍