Let’s face it: most modern applications and websites feature a map in some form. This could be as simple as displaying a company’s address or as complex as identifying stock levels by store location.
While simple maps don’t require a library to include in your React application (a simple iFrame or widget embed will do the trick there!), it's vital to understand what options exist for building more complex mapping applications.
This article wades through the myriad of mapping libraries out there and narrows the best options to two contenders. We break down the strengths and drawbacks of the top React map libraries, as well as highlight the types of projects each library excels at so you can determine which React mapping library is best for you and your needs.
A great place to start when considering a React library is npm trends. This site allows you to quickly compare important statistics on each library, such as the number of downloads, stars, last-updated date, and file size.
We used npm trends to compare five of the most popular React mapping libraries, and the top ones are:
- Google-map-react
- Pigeon-maps
- React-leaflet
- React-map-gl
- React-mapbox-gl
Looking at the npm trends of these five libraries, we see that google-map-react and react-leaflet have steadily had more downloads per month for the past six months than any of the other libraries.
While the number of downloads is a great initial indicator, that alone is hardly a good reason to choose a library. In fact, as we look at the rest of the information on npm trends, we see that react-map-gl actually ranks higher than react-leaflet in stars. This is a good general indicator of popularity since developers can “star” a package to show they have interest in it.
So, how did we use this information to determine that google-map-react and react-leaflet were the two best mapping libraries? The simple answer is we didn’t use this information alone.
To really know which library is going to best meet our needs, we have to go beyond a simple comparison website like npm trends and dive a bit deeper into what these libraries can do for us. We took the time to learn more about each library so we could determine which was best.
We recommend google-map-react and react-leaflet because, between the two of them, they cover a broad range of use-cases, and they are both easy to use and well-documented.
If your project allows you to use the Google Maps API, then google-map-react provides easy access to many of the common features you already know from that API while giving you the flexibility to implement custom markers with all the benefits of React. With just a few lines of code, you’re up and running!
The google-map-react documentation supplements the regular Google Maps API documentation nicely. One especially great feature of the google-map-react documentation is the included editable JSbin. This makes it easy to start experimenting with what is possible.
When you’re ready to check out a more complex example, we recommend this sample app from their documentation that covers a lot of functionality. To see the code behind that application, simply click on the “source” link at the top of the page.
Since google-map-react utilizes the Google Maps API, you will eventually need to get an API key. If you’re just looking to test out google-map-react, you’re able to get started without one. You can learn more about Google’s API as well as the pricing structure on Google Cloud. Google has a generous free tier for API usage, though if your site gets a lot of traffic, you might wind up needing to pay.
While google-map-react is good if you want to use the Google Maps API, one of the great things about react-leaflet is that you aren’t bound to any particular mapping service. If you want to use an open-source solution like OpenStreetMap it integrates seamlessly. Or if a full-featured proprietary solution like Mapbox is what you’re looking for, that works just as well.
React-leaflet is extremely versatile, which is a clear strength of the library, but it can also be a little intimidating to get started with. This is where react-leaflet’s excellent documentation comes in. It walks you step-by-step through how to get started and then provides well-organized examples of the variety of things you can do with the library. The examples come with a live editor, so you can easily start playing with code right in your browser. For example, if you want to know how to add vector layers to your map, simply check out the live vector layer example.
The possibilities of what you can build with react-leaflet are endless, and the react-leaflet documentation makes it easy to explore them. Rendering markers, adding geoJSON, and interacting with tooltips are just a few examples of what’s possible with react-leaflet!
While react-leaflet and google-map-react are by far our favorite React libraries, there are a couple of others worth mentioning:
- React-map-gl provides a library of React components that work with mapbox GL libraries. Their documentation isn’t as strong as react-leaflet’s, but if you want to use mapbox GL, it could be a great way to go.
- Pigeon-maps is a small library that caught our eye because it doesn’t have any external dependencies, which is always nice. It has a lot of stars on NPM trends, but the number of downloads was quite small, which we consider a bit of a warning sign. That said, it’s definitely a library worth keeping your eye on, and if a small dependency-free library is what you’re looking for, it might be worth trying out.
Rather than sifting through the wealth of React map library alternatives to experiment and find the best option yourself for your next project, we’ve done the legwork for you.
Leveraging quality React map libraries like react-leaflet and google-map-react makes it easier to add a wide range of mapping functionality into your React application. React map libraries make it easy to incorporate maps into React’s virtual DOM. You can’t go wrong with a robust, well-documented solution like react-leaflet. Or, if you want to take advantage of Google’s mapping expertise and excellent API google-map-react makes it easy to do so. Retool makes it easy to build apps using the map component, and you can check out an example map template here.
