Clustering Markers On Leaflet Maps

So you’re creating an interactive map using Leaflet and have diligently added your 8107 markers to the map.

Leaflet - Too Many Markers!

Leaflet – Too Many Markers!

Uh-oh. Definitely slow and pretty much doesn’t provide a user experience. What do we do now?

There’s a great plugin for Leaflet called Leaflet.markercluster by Dave Leaver which will save us.

Leaflet Clusters

Leaflet Clusters

This plugin clusters the markers and shows the number of items in each cluster, and as we zoom it adjusts the clusters based on the current view. This not only makes the map easier for the user to understand, it’s also a lot more efficient.

If you followed my previous Leaflet tutorial, adding the clustering plugin is extremely simple. Let’s take a look.

Continue reading

Creating An Interactive Map With Leaflet and OpenStreetMap

I’ve known for a while that the interactive map of the world showing some of my bloodstain pattern analysis software customers was kind of slow. I also knew that I was using a very outdated version of Google’s API for displaying the data. Yesterday I decided to take a look at it to see what I needed to do to fix it up.

Old Google Map

Old Google Map

My first stop was the Google page about moving to v3 of the API. Apparently I needed to get a new API key by signing up for something with my Google Account. Google has added usage limits and now tracks absolutely everything (yes, they probably did before, but now it’s more explicit). I also needed to consider whether or not I can use the maps on a commercial site.

I don’t like hurdles, and I like simplicity, so I decided to look around for alternatives. I remembered looking at OpenStreetMap (OSM) several years ago when I originally built my map and deciding it wasn’t quite good enough. I decided to check it out again to see how they were doing. My how things change!



Because I’m a good lazy developer (by that I mean I avoid writing things when they already exist, are well-coded, and maintainable), my first thought was to grab a WordPress plugin and to use it for my map. I tried out the OSM – OpenStreetMap plugin. While it sort-of worked for what I was trying to do, it was not as customizable as I’d like, it seemed too heavy for one map on one site, and it tied me to WordPress (which my other site hasn’t moved to yet).

My next thought was to look for a JavaScript library with a nice API to integrate and handle most of the heavy lifting. Poking around the OSM site, I ran across OpenLayers. It looked pretty powerful, and has a ton of stuff in its API. I downloaded it (10M?) and took a look but I really just wanted something simpler. Then I found Leaflet. Exactly what I needed. Small, simple, great documentation, and some really straightforward examples.



Even though I had to brush up on some JavaScript, jQuery, and JSON concepts—things I rarely use— I ended up researching possibilities and replacing my Google Map with an OpenStreetMap/Leaflet version in just a couple of hours. It’s now much faster and simpler to customize.

New OpenStreetMap/Leaflet Map

New OpenStreetMap/Leaflet Map

In this article, I’ll step through an example that shows how to:

  • set up a simple map using the Leaflet JavaScript library
  • load marker locations from a JSON file
  • change the marker icon
  • have the markers show some data when clicked

Continue reading

WP-Syntax Style Sheet Order Fix

I’m using Ryan McGeary‘s excellent WP-Syntax plugin for syntax highlighting of code in WordPress. [It is now maintained by Steve Zahm.]

Update [7 Apr 2014]: I’m, uh, no longer using Ryan’s WP-Syntax plugin… I switched to Crayon Syntax Highlighter so I could have more control over the layout. The examples below are using Crayon now.

Without the plugin, simply using the <code> tag, code looks like this:

/* Hello World program */

#include <stdio.h>

int main( int argc, char *argv[] ) { printf("Hello World");

return 0; }

With the WP-Syntax plugin, it is formatted to make it much more readable:

One problem with the plugin though is that the CSS style sheet for the plugin is being included after some external Javascript in the head element of the HTML document. This prevents some browsers from loading the CSS in parallel which can delay loading of the page. A good way to catch these kinds of things is to use Google’s Page Speed plugin.

Continue reading

Techozoic Fluid Child Theme CSS

So I’m using Jeremy Clark‘s Techozoic Fluid WordPress theme for this site. Kinda cool, eh?

Update [27 Mar 2017]: I’m now using Raam Dev‘s Independent Publisher as my base theme.

I wanted to modify and minify the style.css file and make a couple of other changes. Given these other changes, I decided the best solution was to make a WordPress child theme. So I followed the instructions and expected that the header would reflect my new style.css file.

Alas, taking a look at the page source, it did not:

So I took a look at themes/techozoic-fluid/header.php, and found the problem on line 76:

It looked like get_template_directory_uri() was returning the main theme’s directory, not the child theme. Sure enough, the docs state:

In the event a child theme is being used, the parent theme directory URI will be returned, not the child theme directory URI

The fix was simple. Changing it to the following grabs the css file from the child theme: