1

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>
<html>
  <head>
    <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.addLayer(baseLayer);
            map.setCenter(new OpenLayers.LonLat(0,0),1);             
        }
    </script>

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

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!

Improve this question
2
  • 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
    Commented Apr 1, 2013 at 0:06
  • Sorry, I've edited it now. I just mean that it does not show my map on my webpage.
    – mrpopo
    Commented Apr 1, 2013 at 0:36

1 Answer 1

Reset to default
1

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 https://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.

Improve this answer
2
  • 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
    Commented Apr 1, 2013 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
    Commented Apr 1, 2013 at 20:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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