Thursday, February 25, 2016

Marker Clustering

Let's continue with the new map features and look at a really cool one paid for by Miizee.

The number one response to marker clustering has been "I thought you already did that."  So I guess we were on the right track.

What is Clustering?

It's easier to show than tell, but I'll belabor the point.  Clustering is when you take a bunch of markers that would normally overlap and turn them into a single grouped marker.  It's meant to make your map more readable.

Clustering works both on the map and the globe.  It's easy to access and to modify.

Cluster Specifics

If you're already making MaplyScreenMarker objects and letting the layout engine handle them, then it's easy to cluster.  Just add the attribute kMaplyClusterGroup and set it to 0.

Already know I'm going to be tired of orange

Cluster Group 0 is set up by default and will make orange clusters with a number in the center.  Since clustering is a function of the layout engine it'll fire off on a regular schedule and clusters will interact with other markers and labels.

Let's look at a simple example.

That sets up a few markers, then asks the system to cluster using the default cluster group.

Selection works too.  If the user taps on a cluster group, you get all the individual markers back.  They're tagged as part of a group too.

Rolling Your Own

We've set up the default clustering mechanism with an instance of MaplyBasicClusterGenerator.  You can set one of those up yourself and add it to the MaplyBaseViewController.  You can even overwrite the kMaplyClusterGroup for 0 and change the defaults.

The MaplyBasicClusterGenerator gives you access to a variety of attributes, such as:
  • The image used for a cluster background.
  • The animation time for markers joining and leaving a cluster
  • The shader to use for movement.
If that's not enough control, you can just subclass MaplyClusterGenerator and control it all.  When asked, you'll return a UIImage and the size of the marker you're creating.  The system will handle the rest, including texture atlases, animation and cleanup.

Behind The Scenes

There's obviously some cool stuff going on here.  Not only are clusters very flexible, they're fast.

Clustering is hilarious around the edges
Several versions ago we started using OpenGL ES shaders for the markers and labels.  This let us draw a lot of them, but also start treating them as normal geometry.  Animation and clustering are two of the more interesting results.

Wrapup and Commercial Plug

Enjoy the most popular feature you thought WhirlyGlobe-Maply already had!  Hopefully it's cooler than you already thought it was.  Let us know what other features we obviously do but may not have implemented yet.

Thanks again to Miizee who paid for this development.

Coming up, more map features!