Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm trying to create a map using OpenLayers which uses a png image as a base layer but I'm having a bit of trouble. I'm not too familiar with OpenLayers as I have only come across it today and thought that it could prove to be a powerful tool.

So far I have just been using the code from the tutorial and changed the base layer from a WMS format to an Image format but it still does not show the map on the webpage.

<!DOCTYPE html>
    <title>OpenLayers Tutorial - Basic Map Setup</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, baseLayer;
        function init(){
            map = new OpenLayers.Map('map');            
            baseLayer = new OpenLayers.Layer.Image("College Lane", "http://getontinternet.com/fyp/college-lane.png" );
            map.setCenter(new OpenLayers.LonLat(0,0),1);             

    @media screen
        #map{width: 1300px; height:1300px; border: 2px solid black;}
  <body onload="init()">
    <h3>OpenLayers Tutorial - Basic Map Setup</h3>
    <div id="map"></div>

It's probably something really silly that needs changing but I've looked at documentation and I can't seem to find the issue.

Any help would be appreciated!

share|improve this question
Welcome to gis.SE. Can you please edit your question (just click "edit" above) to explain what you mean by "does not work"? Crash, slightly off, missing detail, black area? Please tell us what you expect to happen, what happens instead, and what debugging you have done? We can't see your screen, so you have to describe it in detail. –  BradHards Apr 1 '13 at 0:06
Sorry, I've edited it now. I just mean that it does not show my map on my webpage. –  mrpopo Apr 1 '13 at 0:36

1 Answer 1

up vote 1 down vote accepted

It looks like you didn't set the image bounds or size. Consider that OpenLayers needs to know what that image corresponds to in map space (i.e. those pixels you're providing as a map image need to match up with something in "the world" - usually a latitude and longitude for the north-west and south-east corners)

See http://stackoverflow.com/questions/813644/using-an-png-or-jpeg-for-map-with-openlayers-scale-zoom-problem and the source for http://openlayers.org/dev/examples/image-layer.html

Also, that map centre makes no sense - you should be setting it to somewhere (as a longitude / latitude, or whatever makes sense for the coordinate system you are using) on the area covered by your map.

share|improve this answer
If I just want to have the map have no zoom at all and for it to centre on its actual centre should I just leave the bounds and map centre as 0? –  mrpopo Apr 1 '13 at 15:02
I edited my answer to explain the idea of bounds. The question about zoom is a different issue (and so should be asked as a new question) - just get the map display first. Also, before asking a new question, read the documentation and examples about the classes you're trying to use. You can't just guess 0 and expect it to work! –  BradHards Apr 1 '13 at 20:05

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.