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

[Olaf Görlitz]

Does anybody have an idea how to solve this problem?
It is been braking my head for a couple of days already.

Cheers,
Olaf

Olaf Görlitz wrote:
> 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>
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users