<div dir="ltr">Hello - I have a web app that has to open a popup window and display an image as an OpenLayer map. The image is not georeferenced, but I do have the pixel height and width, which I am using to create a Bounds object. I have pulled the code out of the larger application and include it below <div>
<br></div><div> The problem is that the map div does not render in the window. If I debug with Firebug, I can see the tiled image written into the appropriate div, and mousing over the page I can see notional boxes were the image should display. I can also see the image when I mouse over the div code in the debug window.</div>
<div><br></div><div> Here is the relevant code. I am including jquery-1.6.4 and OpenLayers-2.13.1 in the page. The page can be seen at </div><div><br></div><div> <a href="http://linuxdev.lib.berkeley.edu:90/frameContent.html">http://linuxdev.lib.berkeley.edu:90/frameContent.html</a></div>
<div><br></div><div><br></div><div><br></div><div><div> if (typeof org == 'undefined'){</div><div> org = {};</div><div> } else if (typeof org != "object"){</div><div> throw new Error("org already exists and is not an object");</div>
<div> }</div><div><br></div><div><br></div><div> org.unGeoreferencedHelper = {</div><div><br></div><div><br></div><div> image_points: { maxx: null, maxy: null, minx: null, miny: null },</div><div>
<br></div><div> success: function(data, status, jqXHR) {</div><div> try {</div><div> this.image_points.maxx = data.maxx;</div><div> this.image_points.maxy = data.maxy;</div>
<div> this.image_points.minx = data.minx;</div><div> this.image_points.miny = data.miny;</div><div> } catch(e) {</div><div> alert(e);</div><div> }</div>
<div><br></div><div><br></div><div> try {</div><div> var bounds = new OpenLayers.Bounds(0,</div><div> this.image_points.miny,</div><div> this.image_points.maxx,</div>
<div> 0);</div><div> } catch(e) {</div><div> alert(e);</div><div> }</div><div><br></div><div><br></div><div>// alert("Bounds: " + bounds.toString());</div>
<div><br></div><div><br></div><div><br></div><div> var options = { controls: [],</div><div> maxExtent: bounds,</div><div> maxResolution: 32,</div>
<div> numZoomLevels: 6,</div><div> projection: "EPSG:404000",</div><div> units: "m" };</div><div>// allowOverlays: true };</div>
<div> var map = new OpenLayers.Map("map", options);</div><div><br></div><div> var abs_miny = this.image_points.miny;</div></div><div><div> try {</div><div> if(abs_miny < 0) {</div>
<div> //alert("abs_miny < 0");</div><div> abs_miny = abs_miny * -1;</div><div> }</div><div> } catch(e) {</div><div> alert(e);</div>
<div> }</div><div><br></div><div> var image = null;</div><div><br></div><div> try {</div><div> image =</div><div> new OpenLayers.Layer.WMS(</div>
<div> "UCB:images - Tiled",</div><div> '<a href="http://gis.lib.berkeley.edu:8080/geoserver/wms">http://gis.lib.berkeley.edu:8080/geoserver/wms</a>',</div><div>
{CQL_FILTER: "PATH='furtwangler/17076013_03_028a.tif'",</div><div> LAYERS: 'UCB:images',</div><div> STYLES: "",</div>
<div> format: "image/jpeg",</div><div> palette: "safe",</div><div> tiled: true,</div><div> tilesOrigin : map.maxExtent.left + ", " + map.maxExtent.bottom},</div>
<div>// version: "1.1.1",</div><div>// bbox: this.image_points.minx + ", " + this.image_points.miny + ", " + this.image_points.maxx + ", " + this.image_points.maxy,</div>
<div>// width: this.image_points.maxx,</div><div>// height: abs_miny,</div><div>// srs: "EPSG:404000"},</div><div> {buffer: 0,</div>
<div> displayOutsideMaxExtent: true,</div><div> isBaseLayer: true } );</div><div> } catch(e) {</div><div> alert(e);</div><div> }</div>
<div><br></div><div><br></div><div> try {</div><div> var succ = map.addLayer(image);</div><div> map.zoomToMaxExtent({ restricted: false });</div><div> jQuery("collection_url").attr("href", '<a href="http://www.lib.berkeley.edu/EART/mapviewer/collections/histoposf'">http://www.lib.berkeley.edu/EART/mapviewer/collections/histoposf'</a>);</div>
<div> jQuery("collection_url").text('<a href="http://www.lib.berkeley.edu/EART/mapviewer/collections/histoposf'">http://www.lib.berkeley.edu/EART/mapviewer/collections/histoposf'</a>);</div>
<div>// map.render("map");</div><div> } catch(e) {</div><div> alert(e);</div><div> }</div><div> },</div><div><br></div><div><br></div>
<div> UGOLinit: function(/* loc, baseURL, layers, CQL, coda, collectionURL */) {</div><div>:</div></div><div><div><br></div><div> OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;</div><div><br></div><div> // make OL compute scale according to WMS spec</div>
<div> OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;</div><div><br></div><div><br></div><div> var that = this;</div><div><br></div><div> /* Ajax call to gss for image size */</div><div>
jQuery.ajax({</div><div> url: '<a href="http://linuxdev.lib.berkeley.edu:8080/newOGP/gss?file_path=furtwangler/17076013_03_028a.tif">http://linuxdev.lib.berkeley.edu:8080/newOGP/gss?file_path=furtwangler/17076013_03_028a.tif</a>',</div>
<div> data: null,</div><div> context: that,</div><div> success: that.success,</div><div> datatype: "json"}</div><div> );</div>
<div><br></div><div> }</div><div> }</div><div><br></div><div> jQuery(function() {</div><div><br></div><div> org.unGeoreferencedHelper.UGOLinit();</div><div><br></div><div> });</div>
<div><br></div><div><br></div><div> </script></div><div><br></div><div> <script type="text/javascript"></div><div> function shutdown() {</div><div> }</div></div>
<div><div><br></div><div> </head></div><div> <body></div><div><br></div><div> <table></div><div> <tr><td><div id="map"></div></td></tr></div>
<div> <tr></div><div> <td>You are previewing an ungeoreferenced image, which cannot be displayed on the map.<br /></div><div> Move the image into the center of the window before zooming.</div>
<div> </td></div><div> </tr></div><div> <tr></div><div> <td>To see this image in its collection, see</div><div> <a id="collection_url" href=""></a></div>
<div> </td></div><div> </tr></div><div> </table></div><div> <button onClick="shutdown();">Shutdown</button></div><div> </body></div>
<div></html></div></div><div><br></div></div>