<div>Hi Shawn,<br></div><div></div><div>I don't know that that's the problem. I don't get any errors, it just centers incorrectly as far as I can tell. For now, I'm just doing in-line code.</div><br><div class="gmail_quote">
On Sun, Jul 26, 2009 at 9:31 AM, Shawn Oatley <span dir="ltr"><<a href="mailto:shawn@niagarafalls.ca">shawn@niagarafalls.ca</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
<div style="margin:4px 4px 1px;font:10pt Segoe UI">
<div>It's a lttle bit hard to tell here, but it looks like you have an extra closing bracket at the bottom. You should try Firebug and see if it reports any errors in the console. Plus, in firebug, you can check out the scripts tab and see if all the scripts are actually loaded (proper file paths, etc..).</div>
<div> </div>
<div>Shawn<div><div class="h5"><br><br>>>> On 7/25/2009 at 5:16 PM, Nicholas Efremov-Kendall <<a href="mailto:n.e.kendall@gmail.com" target="_blank">n.e.kendall@gmail.com</a>> wrote:<br></div></div></div><div>
<div class="h5">
<div style="border-left:#050505 1px solid;background-color:#f3f3f3;margin:0px 0px 0px 15px;padding-left:7px">Hi all,
<div><br></div>
<div>the application I've been developing relies on the OL url API, Openstreet map (for now etc). I have one version where the code is written in-line, one version where the code is in an external script. The in-line code works fine, but the external script has misalignment issues. I have no idea why this is happening, does anyone have any suggestions? </div>
<div><br></div>
<div>These are all included in my header file</div>
<div><br></div>
<div>
<div><script src="<a href="http://www.openlayers.org/api/OpenLayers.js" target="_blank">http://www.openlayers.org/api/OpenLayers.js</a>"></script></div>
<div><script src="<a href="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" target="_blank">http://www.openstreetmap.org/openlayers/OpenStreetMap.js</a>"></script></div>
<div><script src="js/OpenLayers-2.7/proj4js-combined.js"></script></div>
<div><script language="javascript" type="text/javascript" src="js/mapsettings2.js"></script></div>
<div><br></div>
<div>and here is my code, note it is exactly the same as the in-line version.</div>
<div><br></div>
<div>
<div><!--</div>
<div>var map, layer, selectedFeature, selectControl, selectedFeature;</div>
<div>var lat = 10.87;</div>
<div>var lon = 33.79;</div>
<div><br></div>
<div>//Popups</div>
<div>function onPopupClose(evt) {</div>
<div>selectControl.unselect(selectedFeature);</div>
<div>}</div>
<div>function onFeatureSelect(feature) {</div>
<div>selectedFeature = feature;</div>
<div>popup = new OpenLayers.Popup.FramedCloud("chicken", </div>
<div>feature.geometry.getBounds().getCenterLonLat(),</div>
<div>null,</div>
<div>"<div style='font-size:.8em'>Site_ID: " + feature.attributes.title +"<hr />Locality: " + feature.attributes.title+"<br/>Description: " +feature.attributes+"<br/> Feature ID: "+<a href="http://feature.id" target="_blank">feature.id</a>+"<br/>Feature Type:"+feature.attributes.NEWSITE_ +"</div>",</div>
<div>null, true, onPopupClose);</div>
<div>feature.popup = popup;</div>
<div>map.addPopup(popup);</div>
<div>}</div>
<div>function onFeatureUnselect(feature) {</div>
<div>map.removePopup(feature.popup);</div>
<div>feature.popup.destroy();</div>
<div>feature.popup = null;</div>
<div>} </div>
<div>//Map Constructor</div>
<div>function init() {</div>
<div>map = new OpenLayers.Map ("map", </div>
<div>{</div>
<div>controls:[</div>
<div>new OpenLayers.Control.Navigation(),</div>
<div>new OpenLayers.Control.PanZoomBar(),</div>
<div>new OpenLayers.Control.LayerSwitcher(),</div>
<div>new OpenLayers.Control.Attribution()],</div>
<div>sphericalMercator: true,</div>
<div>maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),</div>
<div>maxResolution: 156543.0399,</div>
<div>numZoomLevels: 19,</div>
<div>units: 'm',</div>
<div>projection: new OpenLayers.Projection("EPSG:900913"),</div>
<div>displayProjection: new OpenLayers.Projection("EPSG:4326"),</div>
<div>}</div>
<div>);</div>
<div>//Map Data</div>
<div>//Base Layers</div>
<div>var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");</div>
<div>map.addLayer(layerMapnik);</div>
<div>var ol_wms = new OpenLayers.Layer.WMS( "World Map", </div>
<div>"<a href="http://labs.metacarta.com/wms/vmap0" target="_blank">http://labs.metacarta.com/wms/vmap0</a>", {layers: 'basic', format: 'image/png' } );</div>
<div><br></div>
<div>// Overlays<span style="white-space:pre"> </span></div>
<div>var topo = new OpenLayers.Layer.GML("Jerba Topography", </div>
<div>"data/topopj.gml", {styleMap: new OpenLayers.StyleMap({strokeWidth: 1, strokeColor: "#000000"}) });</div>
<div>map.addLayer(topo);</div>
<div><br></div>
<div>var sites = new OpenLayers.Layer.GML(</div>
<div>"Sites", "data/siteswatr.gml", {styleMap: new OpenLayers.StyleMap({pointRadius: 2.5, fillColor: "#"}, </div>
<div>{projection: new OpenLayers.Projection("EPSG:32632")})});</div>
<div>map.addLayer(sites); </div>
<div>var outline = new OpenLayers.Layer.GML("Jerba Island", "data/outline.gml");</div>
<div>map.addLayer(outline);</div>
<div><br></div>
<div>//Map Controls Should theoretically be in map constructor, but only navigation works</div>
<div>map.addControl( new OpenLayers.Control.LayerSwitcher());</div>
<div>map.addControl( new OpenLayers.Control.MousePosition());</div>
<div>map.addControl( new OpenLayers.Control.OverviewMap());</div>
<div>map.addControl( new OpenLayers.Control.ScaleLine());</div>
<div>//map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);</div>
<div>//highlighting stuff</div>
<div>var report = function(e) {</div>
<div>OpenLayers.Console.log(e.type, <a href="http://e.feature.id" target="_blank">e.feature.id</a>);</div>
<div>};</div>
<div>var highlightCtrl = new OpenLayers.Control.SelectFeature(sites, {</div>
<div>onSelect: onFeatureSelect, </div>
<div>onUnselect: onFeatureUnselect,</div>
<div>hover: true,</div>
<div>highlightOnly: true,</div>
<div>renderIntent: "temporary",</div>
<div>eventListeners: {</div>
<div>beforefeaturehighlighted: report,</div>
<div>featurehighlighted: report,</div>
<div>featureunhighlighted: report</div>
<div>}</div>
<div>});</div>
<div>var selectCtrl = new OpenLayers.Control.SelectFeature(sites,</div>
<div>{clickout: true}</div>
<div>);</div>
<div>map.addControl(highlightCtrl);</div>
<div>map.addControl(selectCtrl);</div>
<div>highlightCtrl.activate();</div>
<div>selectCtrl.activate();</div>
<div>// set center from geometry </div>
<div>if( ! map.getCenter() )</div>
<div>{</div>
<div>topo.events.register('loadend', topo, function(){map.zoomToExtent(topo.getDataExtent())});</div>
<div>map.setCenter(null, null);</div>
<div>}</div>
<div>else </div>
<div>{</div>
<div>map.setCenter(new OpenLayers.LonLat(lon, lat));<span style="white-space:pre"> </span></div>
<div>} ;</div>
<div><br></div>
<div>};</div>
<div><br></div></div></div></div></div></div></div>
</blockquote></div><br>