Setup Your First React Leaflet Package

React Leaflet paired with Mapbox API is a powerful package which may provide for a more robust alternative to Google Maps React

Elliott Stein
Nov 12 · 4 min read

While not a seasoned pro at either, I have tried both React-Leaflet and Google-Maps-React for two React projects I have worked on.

Each of the packages come with their own pros and cons. Google Maps was pretty easy to get up and going, however, I did try a couple of tutorials and guides that didn’t really work great. My guess was that may be due to the fact that there is a Google-Maps-React package, and there is a React-Google-Maps package (and they are different packages).

Mostly all of the React-Leaflet guides were spot on. It’s also very light-weight (114kbs!). Google Maps React does have a basemap that mostly everyone on the planet knows and loves (Google Maps with Imagery and StreetView), but React-Leaflet is more customizable.

As with any project, the choice is up to the developer.

Image for post
Image for post
Follow along to create the above map! The above displays every countries’ Covid travel restrictions

To get started with React-Leaflet, create a new react app and run:

npm i react-leaflet

And

npm install -s react react-dom leaflet

You will need both of these packages in order to generate a map.

This first project I used react-leaflet on was on version 2.7.0. When I wrote this blog post, version 3.0 had just been released (like a couple of days ago). I had a little trouble getting 3.0 going, but my guess is some of the early kinks with the release have been ironed out, but you may also want to try:npm i react-leaflet@2.7.0.

After installing these two packages as dependencies, you’ll want to add MapView as a component, like this:

import React, { Component } from 'react';

This will probably work best at the App.js level of your application, but you can add it where ever the map needs to be placed. Then, in your MapView.js file:

Your MapView is now a component of your App. The two required states are the currentLocation and zoom. I’m setting my MapView to the center of the Earth, with a high-level zoom (I think 12 is the most zoomed-in you can go). I’m fetching from a backend I made that stores country data. In the render function, I’m setting the map to grab other components, including a Mapbox layer, which I think gives the package a much-needed face lift.

With only using the above code with your MapView as a component placed in App.js, you should see a plain view map on your screen after only applying the following CSS:

.leaflet-container {

Next, create the following three files:

MarkerPopup.js
VenueLocation.js
VenueMarkers.js

Below is the code for your VenueLocation AND Venue Markers files:

With the code above, I sent the countries (that I set state on from my backend) down as props and destructured. Next, I needed to loop through all the countries with a .map so that each one of them could be plotted on my map. The lat/long coordinates in my data were stored as an array ([x, y]), but I’ve also seen datasets store each x/y floats and as their separate objects. The icon ternary is one of the many beauties of React, where I’m using one of the fields in my data and using different icons based on the countries’ status. The VenueLocationIcon.js file gives a description of each of the icons, and I stored each .svg file locally in the app’s assets folder.

Finally, add the following to your MarkerPopup.js file:

The data variable was sent down as a prop from the VenueLocationIcon.js. Each window will now have a pop-up, with text displaying based on the field’s data. These windows could be customized however you’d like, based on the preference of how you want your data could be conveyed to your end-user.

And that’s it! So simple and light-weight and powerful. You could do so much with good data and easy to use lat / long coordinates. Map the world my friend.

I mentioned this earlier, but I was not a huge of the default Basemap that comes with React Leaflet (OpenStreetMap). It’s fine, but not the greatest on the eyes in my opinion (it’s a massive downgrade from Google Maps in my opinion). To customize your basemap, you can layer in a 3rd party map such as MapBox. My MapBox layer can be found embedded in lines 28 & 29 of the TileLayer (with the URL and attribution variables). To create your own MapBox layer, checkout this great blog that I followed as well:

Feel free to checkout the full Repo for this project here: https://github.com/estein1988/covid-travel-fe

There you have it — your first professional React Leaflet map. Happy coding!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store