Using OpenLayers with an Image File

Fixing the Pan/Centre Bug

We now have a map, but it has some problems. To recap:

  1. It isn't possible to pan to the far North of the island.
  2. The map isn't centred in the <div> tag when it is first loaded.
  3. The zoom bar has no indication of the number of zoom levels, or how far zoomed in the view is.
  4. The zoom bar has a world icon, which may not be appropriate.
  5. Page loading is paused while the map is drawn, with the remainder of the page being displayed after the map.

Issues 1 and 2 can be fixed by adding an options array to the map constructor. The OpenLayers.Bounds object sets the boundaries of the map. This fixes issues 1 and 2. The example below also adds the numZoomLevels option to set the number of zoom levels to 4 (this defaults to 16 if not explicitly set).

//Map options. First two values passed to OpenLayers.Bounds should be zero, //third is width in pixels, fourth is height in pixels var options = { maxExtent: new OpenLayers.Bounds (0, 0, 416, 496), numZoomLevels: 4 } //Create map variable - this is the entire map, which can have multiple layers var map = new OpenLayers.Map ("map", options)

PanZoomBar

In order to fix issues 3 and 4, it is necessary to remove the default PanZoom control and replace it with a PanZoomBar. This has a zoom indication but no world icon. The following code does this, and is added before the call to the map's addLayer () function. Note that the code to add a world icon is included, but commented out:

//Remove default PanZoom control map.removeControl (map.controls [1]) //Create a PanZoomBar var navcontrol = new OpenLayers.Control.PanZoomBar () //Uncomment the following line if you want a world icon //navcontrol.zoomWorldIcon = true //Add the PanZoomBar to the map map.addControl (navcontrol)

Deferring the JavaScript Execution

The fifth issue is solved by setting the "defer" attribute of the <script> element:

<script defer = "defer" type = "text/javascript">

Code

The resulting code is shown below, with the result below the code:

<!-- div to display map --> <div id = "map" class = "map"></div> <!-- Load OpenLayers JavaScript library --> <script src = "OpenLayers.js" type = "text/javascript"></script> <!-- JavaScript to create & show the map --> <script defer = "defer" type = "text/javascript"> <!-- //Map options. First two values passed to OpenLayers.Bounds should be zero, //third is width in pixels, fourth is height in pixels var options = { maxExtent: new OpenLayers.Bounds (0, 0, 416, 496), numZoomLevels: 4 } //Create map variable - this is the entire map, which can have multiple layers var map = new OpenLayers.Map ("map", options) //Create bounds & size objects. These are part of the definition of the image layer //The simplest option is to set the first two parameters for bounds to 0, //and the second two to the width & height of the image in pixels bounds = new OpenLayers.Bounds (0, 0, 416, 496) //Simply set the size option to the width & height of the image in pixels size = new OpenLayers.Size (416, 496) //Create the image layer var img = new OpenLayers.Layer.Image ("Isle of Man", "map.png", bounds, size) //Remove default zoombar map.removeControl (map.controls [1]) //Create a PanZoomBar var navcontrol = new OpenLayers.Control.PanZoomBar () //Uncomment the following line if you want a world icon //navcontrol.zoomWorldIcon = true //Add the PanZoomBar to the map map.addControl (navcontrol) //Add the image layer to the map map.addLayer (img) //Set the initial zoom level map.zoomToMaxExtent () // --> </script>

The Map

Previous | Contents | Next

Creative Commons License This work is licensed under a Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.

Russ' OpenStreetMap pages