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

[Andreas Hocevar]

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



-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.