<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">
<div>That did it!</div><div><br></div><div>That and removing the reference to the projection. Thanks to Dave Winfield's help, I realised that EPSG:27700 is not, in fact, the OS grid I was using. Since it's a simple cartesian grid, though, I just removed all reference to projection but kept the maxExtents and that worked fine. If you visit the site again, you'll see the map complete with markers (nevermind the few outliers in the sea, though). </div><div><br></div><div><a href="http://www.thomasav.com/countiesimage.html">http://www.thomasav.com/countiesimage.html </a></div><div><br></div><div>Thanks to everyone!</div><div><br></div><div>-- Anthony</div><div><br></div><br><div><div>On Jul 23, 2009, at 10:20 PM, Arnd Wippermann wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"> <div dir="ltr" align="left"><font face="Arial" color="#0000ff" size="2"><span class="062001821-23072009">Hi,</span></font></div> <div dir="ltr" align="left"><font face="Arial" color="#0000ff" size="2"><span class="062001821-23072009"></span></font> </div> <div dir="ltr" align="left"><font face="Arial" color="#0000ff" size="2"><span class="062001821-23072009">insert maxResolution to your options2, then it should work.</span></font></div> <div dir="ltr" align="left"><font face="Arial" color="#0000ff" size="2"><span class="062001821-23072009"></span></font> </div> <div dir="ltr" align="left"><font><font face="Arial" color="#0000ff" size="2">var options2 = {numZoomLevels: <span class="062001821-23072009">3</span>, projection: "EPSG:27700", isBaseLayer: true, maxResolution:1000};<br></font></font></div><font> </font><div><span class="062001821-23072009"></span><font face="Arial"><font color="#0000ff"><font size="2">Arnd</font></font></font></div> <div><font face="Arial"><font color="#0000ff"><font size="2"><span class="062001821-23072009"></span></font></font></font><br> </div> <div class="OutlookMessageHeader" lang="de" dir="ltr" align="left"> <hr tabindex="-1"> <font face="Tahoma" size="2"><b>Von:</b> users-bounces@openlayers.org [<a href="mailto:users-bounces@openlayers.org">mailto:users-bounces@openlayers.org</a>] <b>Im Auftrag von </b>Anthony Masinton<br><b>Gesendet:</b> Donnerstag, 23. Juli 2009 16:07<br><b>An:</b> <a href="mailto:users@openlayers.org">users@openlayers.org</a><br><b>Betreff:</b> [OpenLayers-Users] Map Image Layer<br></font><br></div> <div></div><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></blockquote></div><br></body></html>