Map clustering with Leaflet

It’s been two months since I’ve started my internship at Entgra. During those two months, I was able to learn both backend & frontend related things. From the stuff I learned, “Map clustering” was totally new to me. I never had used maps before in a web application. So this mapping thing was really exciting for me. In this blog post, I’ll share my experience on how to do the map clustering using Leaflet.

Before getting into the topic, For those who don’t know what “Leaflet” is, It’s an Open-source Javascript library which is similar to Google maps. It’s really easy to use, 100% free to use and it has almost every mapping feature. You can find instructions on how to setup Leaflet here. At the end of this tutorial, you’ll be able to cluster your map as below

If you’ve already setup Leaflet on your website/web application, You can clone the repository of Leaflet.MarkerCluster. There’ll be two CSS files & a Javascript file named as below

1. leaflet.markercluster.js
2. MarkerCluster.css
3. MarkerCluster.Default.css

Import the above three files into your project. For the tutorial, I’ll add a random map location to the map. This is how you initialize the clustering feature to your project. You can create a javascript file add the below code. You can also change it according to your requirement. Add this code and you’ve got yourself a clustered map.

I’ll include more documents I found interesting and useful for further my development.

Clustering Live Preview
How to use the MarkerCluster plugin
Add custom icons to map

Hope this was helpful and see you soon in another blog post. Keep Coding!