Building Maps in React Applications Using Leaflet

Karn
2 min readOct 29, 2020

Building interactive Maps is a great way to show useful information about countries, locations etc. Surely many of us have seen the use of such maps in the various Covid trackers available online. Google’s Covid Tracker is an excellent example of one of the Applications of these maps.

Google’s Covid Tracker
Google’s Covid Tracker

This week I found myself wanting to build a Covid Tracker of my own. There are 100s of Map libraries available for JavaScript developers to play with. Mapbox, Google Maps, OpenLayers, D3 to name a few. I decided to go with Leaflet.js since I had some prior experience using it and was able to pick it up quickly.

What is Leaflet.js?

The Developers of Leaflet describe it as:

The leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

Well, I think the Leaflet is good at what it does, although the documentation on Leafletjs.com can definitely be better.

How to Use Leaflet with React?

Step 1: Install React-leaflet into your project.

npm install react-leaflet

Step 2: Import Leaflet properties into your Component

import { Map, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

Step 3: Displaying the Map

Github Gist

And its pretty much done. Now your Map component is ready to be exported and rendered in App.js.

Checkout out my Covid Tracker App on CodeSandbox.

--

--

Karn

My Stack — React.js, Next.js, Redux.js, JavaScript, GraphQL and Firebase. I also Make youtube videos @Karn Tech