DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • How To Create Asynchronous and Retryable Methods With Failover Support
  • What's New With ActiveMQ v5.16.4
  • Mule Server, Server Group and Cluster
  • Redis-Based Tomcat Session Management

Trending

  • Best GitHub-Like Alternatives for Machine Learning Projects
  • LLMs for Bad Content Detection: Pros and Cons
  • The Emergence of Cloud-Native Integration Patterns in Modern Enterprises
  • Supercharging Productivity in Microservice Development With AI Tools
  1. DZone
  2. Data Engineering
  3. AI/ML
  4. Presenting High Level Information With PruneCluster and LeafletJS

Presenting High Level Information With PruneCluster and LeafletJS

How to express high level information using clusters in LeafletJS.

James Sugrue user avatar by
James Sugrue
CORE ·
Nov. 13, 15 · Tutorial
Like (6)
Save
Tweet
Share
6.32K Views

Join the DZone community and get the full member experience.

Join For Free

We've already done some basics with PruneCluster and LeafletJS, and then added in an area selection tool. There's one last part to this trilogy - showing information effectively using clusters and categories.

The default clustering provided by PruneCluster is really good, but if you're looking from a high level it can be difficult to see what each cluster is comprised of. For a refresher, here's the default view: 

Image title

Luckily, PruneCluster is extremely configurable - even down to the level of what icons are drawn up at the cluster level. You can see a good implementation of this in the list of project examples

First, it's a good idea to add categories to each of your markers. For performance reasons, the authors of PruneCluster recommend that you use numbers for categories.  

//define a set of categories 
var TECH_COMPANY_CATEGORY = 0; 
var FINANCIAL_COMPANY_CATEGORY = 1; 
//...

//then attach categories to markers as you go 
marker.category = TECH_COMPANY_CATEGORY; 

The index of the category will be important later, as it will determine the color to be used. Each MarkerCluster has a number of properties and functions that help you to customise the look and feel 

L.Icon.MarkerCluster = L.Icon.extend({
options: {
},
createIcon: function() {
},
createShadow: function() {
},
draw: function(canvas, width, height) {
}
});

The full listing, taken straight from the example from PruneCluster's project follows. 

Some important points: 

  • The list of colors will match the category. So, any marker with category 0 (TECH_COMPANY_CATEGORY) will get colors[0] assigned to it:

var colors = ['#ff00b4', '#ff4b00', '#00ff4b', '#00b4ff'], 
pi2 = Math.PI * 2;
L.Icon.MarkerCluster = L.Icon.extend({
options: {
iconSize: new L.Point(44, 44),
className: 'prunecluster leaflet-markercluster-icon'
},
createIcon: function() {
// based on L.Icon.Canvas from shramov/leaflet-plugins (BSD licence)
var e = document.createElement('canvas');
this._setIconStyles(e, 'icon');
var s = this.options.iconSize;
e.width = s.x;
e.height = s.y;
this.draw(e.getContext('2d'), s.x, s.y);
return e;
},
createShadow: function() {
return null;
},
draw: function(canvas, width, height) {
var lol = 0;
var start = 0;
for (var i = 0, l = colors.length; i < l; ++i) {
var size = this.stats[i] / this.population;
if (size > 0) {
canvas.beginPath();
canvas.moveTo(22, 22);
canvas.fillStyle = colors[i];
var from = start + 0.14,
to = start + size * pi2;
if (to < from) {
from = start;
}
canvas.arc(22, 22, 22, from, to);
start = start + size * pi2;
canvas.lineTo(22, 22);
canvas.fill();
canvas.closePath();
}
}
canvas.beginPath();
canvas.fillStyle = 'white';
canvas.arc(22, 22, 18, 0, Math.PI * 2);
canvas.fill();
canvas.closePath();
canvas.fillStyle = '#555';
canvas.textAlign = 'center';
canvas.textBaseline = 'middle';
canvas.font = 'bold 12px sans-serif';
canvas.fillText(this.population, 22, 22, 40);
}
});

  • With this defined, you will just need to register all clusters in a particular PruneCluster to be drawn with this specification:

cluster.BuildLeafletClusterIcon = function(cluster) {
var e = new L.Icon.MarkerCluster();
e.stats = cluster.stats;
e.population = cluster.population;
return e;
};
  • The stats and population project are provided by PruneCluster by default. Now, rather than an overview number, you also see the ratio of each category of marker to others within the cluster:

Image title

By adding in a legend on your page for each of the colors, this can be very powerful. 

clustering

Opinions expressed by DZone contributors are their own.

Related

  • How To Create Asynchronous and Retryable Methods With Failover Support
  • What's New With ActiveMQ v5.16.4
  • Mule Server, Server Group and Cluster
  • Redis-Based Tomcat Session Management

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: