Drawing cluster maps using Leaflet markercluster plugin

This post will demonstrate drawing cluster maps using Leaflet marker cluster plugin.

Cluster maps are useful when the user is plotting a lot of point data. It improves visualization for the

end users.

 

Download the plugin for the local directory here https://github.com/danzel/Leaflet.markercluster

Download sample geojson here: https://www.dropbox.com/s/7ub4wbk9xhm2zwp/spots.geojson?dl=0

 

Make sure the html file is saved in the same folder as the plugin and geojson file.

 

– Insert the link to the CSS and JS library of the leaflet markercluster plugin in the head section of the

html page

 

link rel="stylesheet"  href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.Default.css"
link rel="stylesheet"  href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.css"
script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/leaflet.markercluster.js

 

– We create a variable object and load the L.markerClusterGroup inside the script section

 

var pointsCluster = L.markerClusterGroup();

 

– Use the Jquery getJSON function to fetch the file from the local directory.

 

$.getJSON(‘spots.geojson’, function(data){

 

We create a var object where the points will then be drawn using L.geojson.

Bind popup display to the features.
var spots = L.geoJson(data, {
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.COUNTRY)
}}).addTo(points);
});

 

Load the drawn layer to the variable object- points to the markerclusterGroup feature

and draw the cluster to the map.
var points = L.markerClusterGroup();

map.addLayer(pointsCluster);

 

The screenshot below illustrates the cluster map at the lowest zoom level.

m2

 

As we zoom into the map, the cluster map have less features grouped together.

m1

 

Click on link to see live map at Github:

http://mayotunde.github.io/cluster

Download the plain text version of the source code by clicking link below:

https://www.dropbox.com/s/kkajw3dlsh3mc0a/drawing%20cluster%20map%20using%20leaflet%20markercluster%20plugin.txt?dl=0

After download, save as HTML and open with a modern browser

See source code for the example below:

hh-001

 

 

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s