When defining the text style with new line "\n" in text attribute, the text appears inline while zooming, both in cluster and original feature.

text: new ol.style.Text( { text: size.toString() + "\nnew line", fill: new ol.style.Fill( { color: '#fff' }) })

I tweaked this example changing just the code above.
http://viglino.github.io/OL3-AnimatedCluster/

Hi,

i tried to set style combining FontSymbols and AnimatedCulsters but when the map is first loaded the font is not shown in the marker. It is shown after a simple refresh (without emptying the cache). Using the single_style FontSymbol outside AnimatedClusters works fine.

Any advices ?

Thanks

here is the code i use (all css and js are well loaded with my page)

var styleCache = {};

var single_style = [

            new ol.style.Style(
                {	image: new ol.style.Shadow(
					    {	radius:12,
							blur: 5,
							offsetX: 0,
							offsetY: 0,
							fill: new ol.style.Fill(
							{	color: "rgba(0,0,0,0.5)"
							})
						})
				}
			),
			new ol.style.Style(
					{	image: new ol.style.FontSymbol(
						{	form: 'marker',
							gradient: false,
							glyph: 'fa-book',
							fontSize: 0.7,
							radius: 17,
							//offsetX: -15,
							rotation: 0,
							rotateWithView: false,
							offsetY: -20 ,
							color: 'red',
							fill: new ol.style.Fill(
							{	color: 'white'
							}),
							stroke: new ol.style.Stroke(
							{	color: 'red',
								width: 3
							})
						}),
						stroke: new ol.style.Stroke(
						{	width: 2,
							color: '#f80'
						}),
						fill: new ol.style.Fill(
						{	color: [255, 136, 0, 0.6]
						})
					}
			)
        ];


function getStyle (feature, resolution){
	var size = feature.get('features').length;
    var style;
	if (size == 1){
        style = single_style;
	}
	else{
        style = styleCache[size];
		if (!style){
		    var color = size>15 ? "192,0,0" : size>5 ? "255,128,0" : "0,128,0";
			var radius = Math.max(8, Math.min(size*0.75, 20));
			var dash = 2*Math.PI*radius/6;
			var dash = [ 0, dash, dash, dash, dash, dash, dash ];
			style = styleCache[size] = [ new ol.style.Style(
					{	image: new ol.style.Circle(
						{	radius: radius,
							stroke: new ol.style.Stroke(
							{	color: "rgba("+color+",0.5)",
								width: 15 ,
								lineDash: dash,
								lineCap: "butt"
							}),
							fill: new ol.style.Fill(
							{	color:"rgba("+color+",1)"
							})
						}),
						text: new ol.style.Text(
						{	text: size.toString(),
							fill: new ol.style.Fill(
							{	color: '#fff'
							})
						})
					})
				];
			}
		}
		return style;
	}

var clusterSource = new ol.source.Cluster({
             distance: 40,
             source: new ol.source.Vector({
                        url: 'http://127.0.0.1:8000/api/georeferences/?format=json',
                        format: new ol.format.GeoJSON(),
                    })
        });

var clusterLayer = new ol.layer.AnimatedCluster(
            {   name: 'Cluster',
            source: clusterSource,
            style: getStyle
         });

If you do not specify the same style function in SelectCluster and AnimatedCluster options, you can see, that after singleclick on one of the spread features, the original cluster feature shows up with the style specified in AnimatedCluster. To simulate the behaviour just remove the "style" function from options parameter in ol.interaction.SelectCluster constructor, click on cluster to spread the child features and then click on one of them.

The selectclusterinteraction.js file has an option listed that is incorrect.

'animation' {bool} option means the cluster will animate when features spread out, default is false

There does not appear to be an option for animation. I believe this should be listed as follows:

'animate' {bool} option means the cluster will animate when features spread out, default is false

I am using the code snippet below in an application to set the color of a selected cluster member based on a binary status (up or down).

var selectCluster = new ol.interaction.SelectCluster({
  animate: 'true',
  pointRadius: 9,
  spiral: 'true',
  // -- Feature Style When it Springs Apart --
  featureStyle: function (feature) {
    var s = feature.get('features');
    if (s !== undefined) {                                
      var feature = s[0];
      return [ feature.get('tStatus') == "Up" ? styleUp:styleDown ]
    }
  } 
});

I would like to attach a label to the cluster members as well. The label text is also a feature of the cluster members. I have been unable to apply a label via a styling function that is similar to the one above. I have tried the code snippet below with no success:

var styleUp = new ol.style.Style({
 image: upImg,
 text: new ol.style.Text({ 
    function (feature) {
    var s = feature.get('features');
    if (s !== undefined) {                                
      var feature = s[0];
      return feature.get('tName');
    }
  } 
 })
}),

Thanks in advance!

Hi, I've noticed some strange behavior: when zooming in, some clusters will split, but the animation and smaller clusters into which they split are misleading. I have recorded this behavior here: https://www.screencast.com/t/psP4s4bu

When zooming in, the orange cluster with 6 items seems to split into two clusters with 4 items and 1 item respectively. However, what isn't noticeable at first is that one of those 6 items actually gets redistributed into another cluster. If you look at the tooltips in the video, it's the item labeled "32 Grosvenor Gardens, London SW1W0DH".

Basically, from this:

to this:

It would be super useful if the animation showed that item splitting from the big cluster and moving into the other cluster.

I have seen this happen quite often too, with other clusters.

Using OL 3.20.0 and Firefox 50 if you use the following style for a featureStyle in your SelectCluster the cluster will not render on click and NS_ERROR_NOT_AVAILABLE appears in the console

featureStyle = new ol.style.Style({
image: new ol.style.Icon(({
new ol.style.Icon(({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: 'image.png',
size: [22, 22]
}))
});

It can be worked around by doing the following

imageObj = new Image();
imageObj.src = 'image.png'
featureStyle = new ol.style.Style({
image: new ol.style.Icon(({
new ol.style.Icon(({
img: imageObj,
imgSize: [22, 22]
}))
});

I have a map with a number of features that can appear stacked based on extent and location. The features are stored in a vector layer. When I select a cluster of features on the map, the cluster animates so I am able to see how many stacked features are present.

However, when I select one of the now unstacked features, I do not see the feature information.

When using with OL3 version 3.16.0, the error below is produced by animatedclusterlayer.js at line 156.

vectorContext.setImageStyle is not a function

This is because version 3.16.0 no longer supports using this function in this way. Instead, the code should be updated to call setStyle instead as shown below.

vectorContext.setStyle(imgs);

The spread feature geometry is the same as the original feature geometry. I cannot access new computed "spiral" generated coordinates through spreadFeature.getGeometry().getCoordinates(). It always returns the original coordinates of the hidden feature.

If the extent is changed too quickly (i.e., a user zooms in and out rapidly) when there are clusters displayed on the map, an error can sometimes be generated. There does not appear to be any code to check if the features length is undefined.

Unable to get property '0' of undefined or null reference

The error occurs at line 57 in animatedclusterlayer.js section below:

/** @private Get the cluster that contains a feature
*/
ol.layer.AnimatedCluster.prototype.getClusterForFeature = function(f, cluster)
{   for (var j=0, c; c=cluster[j]; j++)
    {   var features = cluster[j].get('features');
        //if (features.length > 1) 
        for (var k=0, f2; f2=features[k]; k++)   <== Error Here
        {   if (f===f2) 
            {   return cluster[j];
            }
        }
    }
    return false;
}

This error can be reproduced under Google Chrome and Internet Explorer.

When you set featureStyle on ol.interaction.SelectCluster as ol.style.Style(image: ol.style.Icon), an error occurs. Error string is explained here.

One thing weird is when there are clustered feature and unclustered feature(it is a feature in cluster layer but with no children), it works fine. but when there's only clustered features(all features has its children), the error happens.
and animate:false doesn't make an error.

the example's here

I would like to use png-images in place of opaque circles for the animated cluster items.
The problem is that on selection of one cluster item (cluster size > 1) the selected state icon appears behind the unselected state icon and not in place of it. So the selection is not visible when opacity is 1.0.
When the size is only 1 it works as wanted: the selected state icon appears in place of the unselected state icon.
Can somebody give a hint how I can solve this? Would be great!

Thanks and best regards, Guido

Is it possible to have the clusters spring apart without having to select individual cluster nodes? For example, when the map has completed loading and the clusters are drawn on the map, can all the clusters > 1 then spring apart without user interaction?

Hi,

I know this is not an issue, but I need to ask you.

Under what license do you share this code?

Is it Open Source?

Thanks.

Is there a way to create an AnimatedCluster instance that contains no source features initially (they are loaded in/changed later on). In our initial tests animations are not working when we do this.

/create a layer with no source defined/
var layer = new ol.layer.AnimatedCluster({
name: 'Cluster',
animationDuration: 500
});

layer.setSource(clustersource)

Thanks for such a wonderful addition to OL3!

I found this project and your other repository ol-ext.

First of all: Thank you for your awesome work. 👍

My Question is: Why is this repository not integrated in ol-ext?
It would be nice to have it in one place or at least that this repository is available on npm.