Clustering function, similar to Google maps marker clusters

I’m working with a map, in the beginning it was based on the leaflet sample but I switched to google maps. At certain zoom level the nodes I’m displaying overlap.

Is there a way to group them or cluster them when they overlap? in a similar manner to Google maps marker clusters.

Demo of google maps marker clusters


GoJS does not provide an automatic mechanism for coalescing nodes when zooming out, or the reverse. In my experience I tried a couple algorithms that did this automatically, and I didn’t like the results for any of them.

So I recommend that you implement this yourself. You know your data better than anyone, so you can figure out when to coalesce and which ones to coalesce. There might well be times when you want to remove some nodes but not others, even though they are within the “area” that has been collapsed.

The primary mechanism is to implement a “ViewportBoundsChanged” DiagramEvent listener. Look for a scale change:

  $(go.Diagram, . . .,
          "ViewportBoundsChanged": function(e) {
            if (e.subject.scale !== e.diagram.scale) {
               . . .

Then decide if the scale has changed enough to warrant considering hiding or showing some nodes.

You can combine this with virtualization by only looking at nodes that are within the viewport bounds, or that ought to exist because they are now intersect with the viewport bounds.

Thanks for your help Walter, I’m trying the “ViewportBoundsChanged” but in the leaflet sample it is not being fired when zooming in/out or while dragging, I tried with my google maps page but it doesn’t work either.

Could I stick to the map’s zoomend events for doing so? or is there a way for enabling the “ViewportBoundsChanged” event in the leaflet sample?


Oh, I had forgotten about how the Leaflet sample was designed: Leaflet.js and GoJS.

Basically the Diagram/DIV is the same size as the map. It never shows scrollbars, while it allows infinite scrolling in any direction.

Panning (i.e. mouse-down-and-drag not on a GoJS Part) is implemented by the Leaflet map. A “move” event handler on the Leaflet map tells GoJS to update the positions of the GoJS Parts.

Dragging of GoJS Parts is handled by the DraggingTool in the normal manner for GoJS, except that it also disables Leaflet dragging.

I’m not familiar with the Google Maps API, but I had the impression that you could do similar things.

Okay, so I can use the “move” event, in this particular case I’d use the “zoomend” event, on google maps an event like that also exists. Thanks