Using OpenLayers with an Image File

Disclaimer

These notes are based partly on the OpenLayers documentation, but mainly on trial-and-error experimentation. There may be better and/or easier ways than those presented here.

Introduction

These notes assume that you wish to create an OpenLayers map, using a single image file. The image file is not necessarily an actual geographic region - this could be useful for maps of fantasy worlds, etc. The examples will use a sample map image from OpenStreetMap.

The examples use OpenLayers 2.6 (the latest version at the time of writing). Download OpenLayers and extract the files. Put the following in the same location as the file that is to have the map:

• The map image (named map.png in this example)
• The OpenLayers.js JavaScript file from OpenLayers.
• The img/ directory from OpenLayers.
• The theme/ directory from OpenLayers.

Contents

• Making an Initial map
• Fixing the Pan/Centre Bug
• Adding Markers & Selectable Layers

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

Russ' OpenStreetMap pages