Creating a Bubbles Map using React-Leaflet

Data Scientists often need to visualise data in order to derive meaningful inferences or for presenting it to stake-holders.

Recently I found myself working on a Data Science report built on ⚛️ React as a frontend with a ton of visualisations. One of which required plotting a map with bubbles as markers of varying sizes at different locations based on the data.

In this article let’s follow a step by step guide on how to plot a bubbles map chart using a popular JavaScript library Leaflet. In fact the React version of it - React-Leaflet.

This article assumes it’s readers have basic knowledge of Node, npm/Yarn, and React.

Look ma, a colourful world map!

Introduction to Leaflet

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps.

The above map and much more can be plotted using Leaflet. Since we are using React we will be using React-Leaflet instead which provides an abstraction of 🍃 Leaflet as ⚛️ React components.

Setting up React App

Let’s quickly create a new React project using create-react-app.

create-react-app bubbles-map

We get a nice project structure generated for us

cd bubbles-map && tree -I node_modules
.
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

Installing Leaflet aka Adding Dependencies

We can use npm or Yarn to install react-leaflet and leaflet packages.

yarn add react-leaflet leaflet

Getting started with React-Leaflet

Let’s edit App.js by removing unnecessary lines of code and importing modules from react-leaflet that we just installed.

Map, Circlemarker, and TitleLayer are the components that we are going to use to plot our map.

You will notably need to add its CSS to your page to render the map properly, and set the height of the <Map> container.

To see how our app looks run the following command inside project directory .

yarn start

We can now see live updates in a browser whenever you make changes to the code.

A map of Nowhere!

We managed to generate a container that will hold our map using leaflet in React!

TileLayer

Next we’ll add a TileLayer to our Map.

Creating a tile layer usually involves setting the URL template for the tile images, the attribution text and the maximum zoom level of the layer.

Gentle reminder - Earth is round!

Aaand we see the map. Hooray!

Markers, Circles and Polygons

Besides TileLayers, Leaflet allows us to easily add Markers, Polygons and CircleMarkers to our Map.

In order to plot a CircleMarker, we need to know it’s center coordinates in terms of latitude and longitude, and also optionally it’s radius, fill, color, opacity, etc.

Look at that cute little CircleMarker at London!

Plotting Most Populous countries in Asia

Let’s start by creating cities.js which will store our data.

Next we will use map function to render a CircleMarker for every city element at it’s coordinates.

Note: The center attribute of each CircleMarker takes coordinates of the city with latitude first and longitude second which is in inverse order of our coordinates that is stored in GeoJSON format which follows xyz ordering.

Anyhoo don’t think much about this for now.

Customising the Bubbles Map

Let’s customise the bubbles or circles to take size according to the population size of their corresponding cities.

Let’s make the world a better place! (visually)

Since, this map visualises data only for cities in Asia. There’s no value in showing the whole zoomed out world map. Let’s figure that out next.

We calculate an appropriate center coordinate and assign it to the center attribute of Map. Also by using bounds attribute which takes in minimum and maximum latlng coordinates, we can limit the area of Map to be shown when it is rendered. Which can be zoomed in or out and dragged or panned later of course.

Look ma, a colourful world map once again!

And there you have it, a Bubbles Map using React-Leaflet, ladies and gentlemen.

Bonus: Tooltip

Tooltip allows us to show a popup of information on a CircleMarker. You can toggle the behaviour of tooltip to be permanent or visible on hover with the help of permanent property.

Delhi is the capital of India (but Mumbai is the real deal ;)

Run it yourself on CodeSandbox

Checkout the code on GitHub

afzalsayed96/bubbles-map

Alternatives

React-Simple-Maps is also a good candidate for plotting simple maps. The sample data for this article was inspired by their Bubbles Map example. However, I chose to use React-Leaflet because of the ability to specify bounds of the map.

Outro

I guess this is where we part ways. I hope you plot beautiful maps using React-Leaflet and make this world a better place.

Have a good one. Peace ✌️

Hire me to build beautiful UIs for Data Science

Afzal Sayed - Full Stack React Developer