[OpenLayers-Users] How to calculate Bounds for Image Layer Example?

[Andreas Hocevar]

Hi,

the image layer was not made for displaying non-geographic images, but
for maps. It seems you want to use OpenLayers to display images in the
map pane, and for this we may have a better solution for you.

Have a look at

http://www.openlayers.org/dev/examples/georss-flickr.html

This example shows you how to display images on point locations, and in
popups (click on an image to see it).

As for calculating the image size and the aspect ratio: that's exactly
what we do for externalGraphic point symbols
(http://trac.openlayers.org/browser/trunk/openlayers/lib/OpenLayers/Renderer/VML.js#L365).
So if you want to do this, the solution is to register an
onreadystatechange listener before setting img.src.

Regards,
Andreas.

Ilya Braude wrote:
>
>
> Andreas Hocevar wrote:
>>> Problem is how to calculate OpenLayers.Bounds?
>>> Simply replacing
>>>    new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
>>> by
>>>   new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
>>> did not work.
>>> (It just blows up a single pixel to cover the whole map-div.)
>>>     
>>
>> The easiest for image layers that do not have to align with a map is
>> to set the bounds according to the image size. So let's assume you
>> have an image, like the one in the example, with is 580 pixels wide
>> and 288 pixels high, then the best approach is to set the bounds to 0,
>> 0, 580, 288.
>>   
> I have a similar use case where I do this in order to keep the proper
> aspect ratio for the image. However, is there a way to have the bounds
> be calculated automatically without me having to know the image size a
> priori?  For example, if the image URL is dynamic or user-submitted.
>
> The only way I can think to do this (and I haven't tested this) is to
> have the browser pre-load the image in a new <img/> tag, read the size
> attributes from it, and then use those values for creating the image
> layer.  In this case, how do I know that the image has been downloaded
> for me to read those attributes?
>
> Something like:
>
> var img = new Image();
>
> img.src = "http://path.to/img/url";
>
> ...
>
> var bounds = new OpenLayers.Bounds(0, 0, img.width, img.height);
>
>
>
> Is there a way that OpenLayers can handle this if I don't care about
> the extent of the image layer, just that it keeps it's aspect ratio
> without me having to specify the correct (in terms of aspect ratio)
> bounds?
>
>>  
>>> So how to calculate OpenLayers.Bounds to display the image at its
>>> original
>>> 100% size?
>>>     
>>
>> See above.
>>   
> I assume that by "above" you mean using the pixel size of the image
> for the bounds?  Would it make sense that this would be the default
> behavior for an image layer and implemented by OL directly?
> Thanks,
> Ilya


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