[OpenLayers-Users] Find out when rendering of vector features (using externalGraphic) is completed

[Olaf Görlitz]

Hi all,

I'm trying to implement a heatmap based on olheatmap
(http://olheatmap.sourceforge.net/). First, an intensity circle is drawn
for each feature using a radial gradient image with differnt alpha
values. Afterwards, the alpha values in the layer's canvas are mapped to
the heatmap's color gradient.

The problem is that rendering the features is not finished yet before
the heatmap transformation starts and I could not find any event which
indicates that the rendering is completed.

I registered listeners for all events of the layer but all I get is
'beforefeatureadded', 'featureadded', 'featuresadded' and mouse events.
I don't observe any 'sketchcomplete' or 'loadend' event.

Is there any way to find out when rendering of the features is done?
(Interestingly, if the mouse cursor is not on the map, it seems that a
'mouseout' event is triggered just after the rendering finishes).

Below is the minimal code I use for generating the heatmap.

Thanks for your help,
Olaf

--------------------
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script
src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
function init() {

	// initialize map and heatmap layer
	var heatmapLayer = new OpenLayers.Layer.Vector("HeatMap", {renderers:
["Canvas"]});	
	var map = new OpenLayers.Map ("map", {layers : [new
OpenLayers.Layer.OSM(), heatmapLayer]});
	map.zoomToExtent(new OpenLayers.Bounds(1264600, 6116900, 1305800,
6148500));

	// register on all layer events
	for (var i=0, types=heatmapLayer.events.eventTypes, len=types.length;
i<len; i++) {
		heatmapLayer.events.register(types[i], undefined, function(e) { /*
console.log('event: ' + e.type);*/ } );
	}

	// set gradient style for heatmap features
	var size=5000 / (1.1 * Math.pow(2, 16 - map.getZoom()));
	heatmapLayer.style =
OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {
		graphicWidth   : size,
		graphicHeight  : size,
		graphicXOffset : -size/2,
		graphicYOffset : -size/2,
		externalGraphic :
'http://nullpublic.com/wp-content/uploads/2011/09/circle_gradient.png'
	});

	// generate random heatmap features
	var points = new Array();
	for (i=0; i<200; i++) {
		var point = new OpenLayers.Geometry.Point(1270000+Math.random()*30000,
6120000+Math.random()*24000);
		points.push(new OpenLayers.Feature.Vector(point));
	}
	heatmapLayer.addFeatures(points);

	// define heatmap generation
	function computeHeatmap() {
		var canvas = heatmapLayer.renderer.canvas;
		var imgData = canvas.getImageData(0, 0, map.getSize().w, map.getSize().h);
		var pix = imgData.data;

		for (var i = 0, n = pix.length; i < n; i++) {
			var alpha = pix[i+3];
			if (alpha <= 64) { pix[i++]=0; pix[i++]=alpha<<2; pix[i++]=255; }
			else if (alpha <= 128) { pix[i++]=0; pix[i++]=255;
pix[i++]=(128-alpha)<<2; }
			else if (alpha <= 192) { pix[i++]=(alpha-128)<<2; pix[i++]=255;
pix[i++]=0; }
			else if (alpha <= 255) { pix[i++]=255; pix[i++]=(255-alpha)<<2;
pix[i++]=0; }
		}
		canvas.putImageData(imgData, 0, 0);
	}

	computeHeatmap();                         // does not work: features
have not been drawn yet
//	window.setTimeout(computeHeatmap, 2000);  // works: features have
been drawn after two seconds
// the image has to be put in the same domain to avoid security
exceptions in last instruction
}
</script>