[GIS] How to create a basic image layer as a base layer in OpenLayers

htmljavascriptopenlayers-2

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!

Best Answer

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.

Related Question