Leaflet as ⚛️ React components.
Setting up React AppLet’s quickly create a new React project using create-react-app.
create-react-app bubbles-mapWe get a nice project structure generated for uscd 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.
lockInstalling Leaflet aka Adding DependenciesWe can use npm or Yarn to install react-leaflet and leaflet packages.
yarn add react-leaflet leafletGetting started with React-LeafletLet’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 startWe can now see live updates in a browser whenever you make changes to the code.
We managed to generate a container that will hold our map using leaflet in React!TileLayerNext 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.
Aaand we see the map.
Hooray!Markers, Circles and PolygonsBesides 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.
Plotting Most Populous countries in AsiaLet’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 MapLet’s customise the bubbles or circles to take size according to the population size of their corresponding cities.
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.
And there you have it, a Bubbles Map using React-Leaflet, ladies and gentlemen.
Bonus: TooltipTooltip 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.
Run it yourself on CodeSandboxCheckout the code on GitHubafzalsayed96/bubbles-mapCode for "Creating a Bubbles Map using React-Leaflet" via Medium – afzalsayed96/bubbles-mapgithub.
comAlternativesReact-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.
OutroI 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 ScienceAfzal SayedFull Stack Developer + ML Engineerafzalsayed96.
github.
io.