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

[Olaf Görlitz]

Hi Andreas,

thanks for the hint and the advice. I'm quite new to javascript and
openlayers. So there are some (internal) things I don't understand yet.

Finally, I found a solution (in another heatmap implementation) which
draws radial gradients directly on the canvas. This works much better
than the olheatmap approach using external graphics.


var rad = 1000 / (1.1 * Math.pow(2, 16 - map.getZoom()));
var ctx = heatmapLayer.renderer.canvas.canvas.getContext('2d');
var grd = ctx.createRadialGradient(rad, rad, 0, rad, rad, rad);
grd.addColorStop(0.0, 'rgba(0, 0, 0, 0.5)');
grd.addColorStop(1.0, 'transparent');

for (i=0; i<200; i++) {
	var point = new OpenLayers.LonLat(1270000+Math.random()*30000,
6120000+Math.random()*24000);
	var pos = map.getLayerPxFromLonLat(point);

	ctx.fillStyle = grd;  // must be set anew in every loop
	ctx.translate(pos.x - rad, pos.y - rad);
	ctx.fillRect(0, 0, rad << 1, rad << 1);
	ctx.translate(rad - pos.x, rad - pos.y);
}


Cheers,
Olaf



Andreas Hocevar wrote:
> Hi,
> 
> the problem is that you're using an external graphic, which is added
> to the canvas in an onload handler. So try to render your circle just
> with pointRadius, fillColor, strokeWidth and strokeColor, and not
> externalGraphic and offsets, and you'll be fine.
> 
> Andreas.
> 
> On Sun, Jan 22, 2012 at 6:20 PM, Olaf Görlitz <goerlitz at uni-koblenz.de> wrote:
>> 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
>> _______________________________________________
>> Users mailing list
>> Users at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/openlayers-users
> 
> 
> 


-- 
-----------------------------------------------------------------------
Olaf Görlitz                                    goerlitz at uni-koblenz.de
University of Koblenz-Landau                 phone:    +49 261 287-2617
Institute for Web Science and Technologies   fax:  +49 261 287-100-2721
Universitätsstr. 1, 56070 Koblenz, Germany   http://west.uni-koblenz.de
-----------------------------------------------------------------------