O'Reilly logo

OpenLayers 2.10 by Erik Hazzard

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for Action – using the image layer

Let's use the image layer to create a sort of image viewer.

  1. First we'll need to add an image layer. The image layer expects the name as the first parameter (like other layers), the URL of the image next, then an {OpenLayers.Bounds} object specifying bounds of the image, then an {OpenLayers.Size} object which contains Width, Height pixel dimensions, and finally an optional options object.
    var image_layer = new OpenLayers.Layer.Image(
      'Wallpaper',
      'http://us.starcraft2.com/images/wallpapers/wall3/wall3-1920x1200.jpg',
      new OpenLayers.Bounds(-180,-112.5,180,112.5),
      new OpenLayers.Size(1920,1200),
      {numZoomLevels:7, maxResolution:.625}
    );
  2. Let's create another image layer now. We'll set the opacity to 20 percent and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required