Home Web Development Mobile Development Solution to: How do I modify the style of a Leaflet.markercluster cluster...

Get social!

Ask the Burger Meister Meister Burger. Just kidding.

Seriously, this post is a bit limited in scope. I mean, how many of you out there are trying to modify the style on a Leaflet cluster marker? What the hell is a leaflet cluster marker, or for that matter, what is a leaflet?

I found Leaflet when I decided to use MapQuest’s Javascript mapping API. I tried MapQuests API because although I’ve used Google’s map API for awhile, I was nervous about their 25,000 map loads limitation. Plus I liked the idea of using community developed, “open sourced” mapping data from openstreetmap.org. Bad decision, at least initially. I found the MapQuest API to be broken in parts (try creating a circle shape that covers multiple tiles, for instance), the documentation incomplete (empty or stub descriptions of functions), and the community support mediocre. My guess is there are just not that many people developing using the MapQuest API (just a guess). Maybe by the time you read this things will have changed.

At any rate, I found leaflet when I found that a bug in the MapQuest API would not allow me to create a circle that spanned multiple tiles. Somewhere in the community forum, someone briefly mentioned trying the MapQuest Leaflet plugin. I was desperate to create a freakin’ circle on my map, so I figured I’d give the plugin a try, even though it was beta.

To make a long story less long, the plugin didn’t work too well, but by then I had my grips on Leaflet proper, and decided to throw away MapQuest altogether in favor of the new API. It works quite well, I am happy to report.

Now on to the actual subject of this post…

Because the web app I am writing is expected to be visited primarily by mobile users, and since at any given time the app will display a hundred or more markers on the map (each marker = a vacation property location, by the way), I needed to find a way to cluster the markers. If you aren’t sure what marker clustering is, take a look at this demo page.

Leaflet has a nice marker cluster plugin that I quickly installed and got working with no problems. The clusters looked great while testing on my desktop, but when I gave the it the ultimate test (I let my wife check it out), I immediately discovered that the numbers inside the cluster icons (the icons represent the number of markers in the cluster) where too small.

I first tried using the iconCreateFunction() as outlined in the plugin’s documentation like so:


This worked, but the div was square and ugly. I wanted the cluster to look like the default, but with the label bolded. I tried to see what the actual default cluster object’s HTML looked like by using Chrome’s Inspector interface, but Chrome didn’t render the maps Javascript to HTML as it usually does. Maybe the script is too complex, I don’t know. Finally, I hit the plugin’s source code and found this function:


OK, I can do this. I simply modeled my code to match:


Note the <b> tag in the highlighted line. Indeed, a small change, but now I have the flexibility to do whatever I want and still keep the nifty colored circles as the markers. Plus my wife is happy.

Bad Behavior has blocked 73 access attempts in the last 7 days.