Editor’s note: This article was updated on 11 May 2022 with up-to-date information on each featured library.
Implementing an effective, efficient, and sustainable map solution in React apps 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.
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, Awesome Graphql and Awesome JavaScript. Checkout the full list of all Awesome repositories here.
I made use of the Awesome React repository for this article. 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, six 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 five 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 five as most of them are still in active development and each one has a different set of functions, modules, and components.
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, was originally developed and maintained by Uber. However, it is currently maintained under the open governance model with several other geospatial data visualization libraries centered around deck.gl.
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.
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, Ant Design, and OpenLayers.
Are you tired of waiting three 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! Pigeon Maps aims to provide a performance-first, React-centric, and 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.
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:
From the above graphic, it is clear that there is some discrepancy between the number of downloads across the five libraries, ranging between a couple of hundred to nearly three hundred 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 measure of popularity is how many times a library has been “starred” on GitHub. However, GitHub stars are similar to social media likes. Therefore, do not base your choice solely on them, or any other single metric for that matter. From the above table, react-leaflet has approximately 1.3 times as many stars as Pigeon Maps, but has about 40 times as many downloads.
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 from the above table that all of the libraries are in active development based on when they were last updated, except Google Map React, which was last updated about ten months ago. You can take a look at the latest statistics from npm trends.
React-map-gl 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.
This library was originally developed by Uber, but it is currently maintained under the open governance model. It 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.
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.
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.
Though this project has been updated within the last one year, you should be aware that there hasn’t been much activity on the project repository in the recent past.
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.
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 single 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.
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.
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.
Map solution: OpenStreetMap
Cost: free using OpenStreetMap
Documentation and demos: limited documentation and demos that can be found here
This library has all the basic functionalities 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.
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.
| react-map-gl | Google Map React | React Leaflet | react-geo | Pigeon Maps | |
|---|---|---|---|---|---|
| Size (KB) | 216.8 | 13.3 | 7.1 | ?? | 7.0 |
| Closed Issues | 821 | 784 | 717 | 121 | 61 |
| Open Issues | 13 | 70 | 5 | 12 | 29 |
| Map Solution | MapBox | Google Maps | Provider Agnostic | OpenLayers | OpenStreetMap |
| Costs | Pay per use | Pay per use | Free / Pay per use | Free | Free |
| Documentation | Great | Limited | Good | Good | Limited |
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.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
