O'Reilly logo

OpenLayers Cookbook by Antonio Santiago Perez

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

Creating an image layer

Sometimes a tiled layer, such as Google Maps, OpenStreetMap, or WMS, is not what you need. It is quite possible that you have a georeferenced image, knowing its projection and bounding box, and want to render it on the map.

In these cases, OpenLayers offers the OpenLayers.Layer.Image class that allows us to create a layer based on a simple image. A georeferenced image is shown in the following screenshot:

Creating an image layer

How to do it...

To create an image layer, perform the following steps:

  1. Let's go and create an HTML file with the OpenLayers dependencies.
  2. First, add the div element that will hold the map, as follows:
    <!-- Map DOM element --> ...

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