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:

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 -->
   <div id="ch2_image" style="width: 100%; height: 100%;"></div>

3. Next, initialize the map and add a WMS base layer, as follows:

   <!-- The magic comes here -->
   <script type="text/javascript">
       // Create the map using the specified DOM element
       var map = new OpenLayers.Map("ch2_image", {
           allOverlays: true
     ...