<br clear="all">
<div></div>
<div>Good afternoon,</div>
<div> </div>
<div>I've been beating my head against this all day so I'll ask for wisdom from the group.</div>
<div> </div>
<div>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.</div>
<div> </div>
<div>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.</div>
<div> </div>
<div>The map is here: <a href="http://www.thomasav.com/countiesimage.html">http://www.thomasav.com/countiesimage.html</a></div>
<div> </div>
<div>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.</div>
<div> </div>
<div>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.</div>
<div> </div>
<div>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.</div>
<div> </div>
<div>Many many thanks for your time and comments.</div>
<div>-- Anthony</div>
<div> </div>
<div>Code:</div>
<div><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br> <head><br> <title>OpenLayers Image Layer Example</title><br> <link rel="stylesheet" href="/theme/default/style.css" type="text/css" /><br>
<link rel="stylesheet" href="style.css" type="text/css" /><br> <style type="text/css"><br> p.caption {<br> width: 512px;<br> }<br> </style><br>
<script src="/lib/OpenLayers.js"></script><br> <script type="text/javascript"><br> var map;<br> function init(){<br> <br>// var options = {<br>// maxExtent: new OpenLayers.Bounds(125755.604,922.206,662492.41,661558.365),<br>
// var center = bounds.getCenterLonLat(400000, 400000),<br>// maxResolution: 156543,<br>// units: 'm',<br>// projection: "EPSG:27700"<br>// isBaseLayer: true<br>// };<br> <br> map = new OpenLayers.Map ("map");</div>
<div> var options2 = {numZoomLevels: 3, projection: "EPSG:27700", isBaseLayer: true};</div>
<div> var graphic = new OpenLayers.Layer.Image(<br> 'Counties',<br> '<a href="http://www.thomasav.com/england.jpg">http://www.thomasav.com/england.jpg</a>',<br>
new OpenLayers.Bounds(125755.604,922.206,662492.41,661558.365),<br> new OpenLayers.Size(2231, 2746),<br> options2);</div>
<div> map.addLayers([graphic]);<br> map.addControl(new OpenLayers.Control.LayerSwitcher());<br> map.zoomToMaxExtent();<br> }<br> </script><br> </head><br> <body onload="init()"><br>
<h1 id="title">Image Layer Example</h1></div>
<div> <div id="tags"></div></div>
<div> <p id="shortdesc"><br> Demonstrate a single non-tiled image as a selectable base layer.<br> </p></div>
<div> <div style="width:100%; height:100%" id="map"></div></div>
<div> <div id="docs"><br> <p class="caption"><br> The "City Lights" layer above is created from a single web accessible<br> image. If you construct it without any resolution related options,<br>
the layer will be given a single resolution based on the extent/size.<br> Otherwise, it behaves much like a regular layer. This is primarily<br> intended to be used in an overview map - where another layer type<br>
might not make a good overview.<br> </p><br> </div><br> </body><br></html></div>
<div> </div>
<div><br><br> </div>