3

I'm trying to add multiple images to OpenLayers. I have the following (some code is excluded):

var images = [image1,image2,image3] // these are url images on my server    
var image = new OpenLayers.Map($('#image'),
               {
                   units: 'pixels'
               });
// add a bunch of controls including layer switcher.
var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");

for(var i =0; i < images.length; I++)
{
  var info = getInfo(images[i]);
  var viewPort = image.getViewport();
  var viewHeight = jQuery(viewPort).height();
  var viewWidth = jQuery(viewPort).width();
  var graphic = new OpenLayers.Layer.Image(
                        info.name,
                        images[i],
                        new OpenLayers.Bounds(0, 0, info.width, info.height),
                        new OpenLayers.Size(vw * 0.9, vh * 0.9)
                    );
  image.addLayers([graphic,vectorLayer]);
  image.zoomToMaxExtent();
}

This is a fairly simple example of what I am doing and I can see the images are getting loaded. All three images are different sizes (small, medium, large).

Once everything is loaded and I can see the last image loaded perfectly:

  1. I switch to the middle image the scale and positioning are all wrong.
  2. I switch back to the last image and the scale is right.
  3. I zoom into the image (last one)
  4. I switch back to the middle image and I can't see anything any more.

I'm not too sure if what I want to do is even possible, but here goes. I want to load all images but have them all independent. So when I zoom into one image the state isn't the same on another.

Please can someone offer advice?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.