[OpenLayers-Users] Map Image Layer

Anthony Masinton amasinton at gmail.com
Thu Jul 23 10:06:46 EDT 2009


 Good afternoon,

I've been beating my head against this all day so I'll ask for wisdom from
the group.

I'm trying to create a simple map of England with the outlines of all of the
counties.  I have an image which showing this, which I would like to use as
my basemap for an eventual marker overlay.

Because all of my marker coordinates are in Ordnance Survey British National
Grid format (x and y are six digit numbers), I have georeferenced this image
in ArcGIS to get the image bounds.  I have then noted these bounds in the
extents of the image.

The map is here: http://www.thomasav.com/countiesimage.html

As you can see, this is simply the image layer example but with the WMS
layer removed and the properties of the image layer altered to suit my
image.

As you can alos see, nothing happens when the page loads. The image area is
blank.  Firebug tells me that map is undefined.  I can't figure out what
this means, as the only thing I've changed is image layer itself.

The code for the page follows, as you can see, I've tried a few things to
fix this (commented out) but to no avail.

Many many thanks for your time and comments.
-- Anthony

Code:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>OpenLayers Image Layer Example</title>
    <link rel="stylesheet" href="/theme/default/style.css" type="text/css"
/>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        p.caption {
            width: 512px;
        }
    </style>
    <script src="/lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){

//   var options = {
//   maxExtent: new
OpenLayers.Bounds(125755.604,922.206,662492.41,661558.365),
//   var center = bounds.getCenterLonLat(400000, 400000),
//   maxResolution: 156543,
//   units: 'm',
//   projection: "EPSG:27700"
//   isBaseLayer: true
//   };

            map = new OpenLayers.Map ("map");
            var options2 = {numZoomLevels: 3, projection: "EPSG:27700",
isBaseLayer: true};
            var graphic = new OpenLayers.Layer.Image(
                                'Counties',
                                'http://www.thomasav.com/england.jpg',
                                new
OpenLayers.Bounds(125755.604,922.206,662492.41,661558.365),
                                new OpenLayers.Size(2231, 2746),
                                options2);
            map.addLayers([graphic]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Image Layer Example</h1>
    <div id="tags"></div>
    <p id="shortdesc">
        Demonstrate a single non-tiled image as a selectable base layer.
    </p>
    <div style="width:100%; height:100%" id="map"></div>
    <div id="docs">
        <p class="caption">
            The "City Lights" layer above is created from a single web
accessible
            image.  If you construct it without any resolution related
options,
            the layer will be given a single resolution based on the
extent/size.
            Otherwise, it behaves much like a regular layer.  This is
primarily
            intended to be used in an overview map - where another layer
type
            might not make a good overview.
        </p>
    </div>
  </body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090723/a7eb8a90/attachment.html


More information about the Users mailing list