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?
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:
OK, I can do this. I simply modeled my code to match:[crayon-5c3737d4a4221748863720/]
<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.