Siegfried Grimbeek Web developer, open source enthusiast, agile evangelist, and tech junkie. Currently hacking away at the frontend for Beerwulf 🙌

React map library comparison

6 min read 1880

React map comparison

Editor’s note: This article was updated on 11 May 2022 with up-to-date information on each featured library.

Introduction

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.

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

Contents

Overview of each library

react-map-gl

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

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

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.

react-geo

A set of geo-related components to use in combination with React, Ant Design, and OpenLayers.

Pigeon Maps

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:

React map

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):

stats

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.

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

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.

Takeaways

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.

Google Map React

  • Map solution: Google Maps
  • Cost: pricing is available here
  • Documentation and demos: limited 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.


More great articles from LogRocket:


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.

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 repository, 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 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.

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.

Pigeon Maps

Map solution: OpenStreetMap
Cost: free using OpenStreetMap
Documentation and demos: limited documentation and demos that can be found here

Functionality

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.

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 chart

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

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.

Cut through the noise of traditional React error reporting with LogRocket

LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Focus on the React bugs that matter — .

Siegfried Grimbeek Web developer, open source enthusiast, agile evangelist, and tech junkie. Currently hacking away at the frontend for Beerwulf 🙌

Leave a Reply