Activated cluster group does not show properly

[mdominado]

Hi,

I noticed in the demo, and in my own project that when a cluster group gets activated, for certain clusters, the cluster and its associated flares do not render properly. I've been taking a look at the code personally to fix it, and I wanted to ask if you had any tips or ideas as to where in the code this issue could be, and what could be causing it?

Here's a screenshot of the issue:

Also, in the screenshot, what exactly is that invisible box (the one that is cutting off the flares of the cluster) that contains the cluster, and its flares? Is that the reason for it not rendering properly?

I do want to note that it seems browser dependent as well. I've tested it on Firefox, and IE, and the issue doesn't crop up. However, in Chrome it does.

Anyways, any help would be appreciated!

[nickcam]

Hey man, yeah that looks that a bit funky. I think it would just be the css causing that. There's this in the example css that scales the cluster up in size when it is activated.

.cluster-group.activated {
            transform-origin: center;
            transform: scale(1.2);
            transition: transform linear 0.4s;
        }

Looks like chrome isn't handling that very well in this case. The css animations are entirely optional, try removing the transform and see if it still occurs. It could also be the version of Chrome, I use it all the time (on windows) and I haven't seen this before. Even just updating may help (I know that doesn't help much for external users though).

As far as the invisible square is concerned, that would be the activated cluster elements bounding box. When a cluster is activated (moused over or clicked/tapped) an svg surface element is placed at the location of the point, it is actually this svg element that contains the flares and the cluster graphic. The non-activated cluster graphic is not visible while activated. The activated svg element is reused and moved around the page to use for depicting any activated cluster. Doing it like this made working in 2d and 3d views much more consistent.

Check out these functions to see it being created and used.

_createSurface()
_activateCluster(cluster: Cluster)

[mdominado]

Yeah, unfortunately, looking at the CSS was one of the first things I checked when I ran into this issue. Commenting the CSS out did not resolve the issue for me on my side. I also do have Chrome up to date on my machine as well.

Thanks for the info on the methods though! I did find a quick fix for the issue. In the _initSurface function I changed the height and width of the surface.rawNode to be a bigger value, and it didn't render weirdly. I think that just makes the surface of the active cluster bigger I think.

However, I don't think its the correct fix for it though honestly.

[nickcam]

Ok cool. Nice one getting it working! Perhaps it's not the ideal fix, but if it get's you going forward that's great. I'll be sure to look at that when I get around to updating the whole layer for the latest api.

[mdominado]

Thanks, yeah I think this fix will have to do for now. Just to be a little more clear, for future reference, I increased the surface.rawNode height/width where you are setting the domStyle for it in the _initSurface function.

Here's a snippet:

        domStyle.set(surface.rawNode, { zIndex: 11, overflow: "visible", width: "8px", height: "8px", left: sp.x + "px", top: sp.y + "px" });

Anyways, I'll go ahead and close the issue for ya.