<HTML><HEAD>
<META content="text/html; charset=iso-8859-15" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.6001.18783"></HEAD>
<BODY 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<BR><BR>>>> On 7/25/2009 at 5:16 PM, Nicholas Efremov-Kendall <n.e.kendall@gmail.com> wrote:<BR></DIV>
<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">http://www.openlayers.org/api/OpenLayers.js</A>"></script></DIV>
<DIV><script src="<A href="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">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><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var map, layer, selectedFeature, selectControl, selectedFeature;</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var lat = 10.87;</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var lon = 33.79;</DIV>
<DIV><BR></DIV>
<DIV>//Popups</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>function onPopupClose(evt) {</DIV>
<DIV>selectControl.unselect(selectedFeature);</DIV>
<DIV>}</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>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">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><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>}</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>function onFeatureUnselect(feature) {</DIV>
<DIV>map.removePopup(feature.popup);</DIV>
<DIV>feature.popup.destroy();</DIV>
<DIV>feature.popup = null;</DIV>
<DIV>} </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>//Map Constructor</DIV>
<DIV>function init() {</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map = new OpenLayers.Map ("map", </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>{</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>controls:[</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>new OpenLayers.Control.Navigation(),</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>new OpenLayers.Control.PanZoomBar(),</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>new OpenLayers.Control.LayerSwitcher(),</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>new OpenLayers.Control.Attribution()],</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>sphericalMercator: true,</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>maxResolution: 156543.0399,</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>numZoomLevels: 19,</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>units: 'm',</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>projection: new OpenLayers.Projection("EPSG:900913"),</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>displayProjection: new OpenLayers.Projection("EPSG:4326"),</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>}</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>);</DIV>
<DIV>//Map Data</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV>//Base Layers</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addLayer(layerMapnik);</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var ol_wms = new OpenLayers.Layer.WMS( "World Map", </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>"<A href="http://labs.metacarta.com/wms/vmap0">http://labs.metacarta.com/wms/vmap0</A>", {layers: 'basic', format: 'image/png' } );</DIV>
<DIV><BR></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV>// Overlays<SPAN style="WHITE-SPACE: pre" class=Apple-tab-span> </SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var topo = new OpenLayers.Layer.GML("Jerba Topography", </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>"data/topopj.gml", {styleMap: new OpenLayers.StyleMap({strokeWidth: 1, strokeColor: "#000000"}) });</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addLayer(topo);</DIV>
<DIV><BR></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var sites = new OpenLayers.Layer.GML(</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>"Sites", "data/siteswatr.gml", {styleMap: new OpenLayers.StyleMap({pointRadius: 2.5, fillColor: "#"}, </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>{projection: new OpenLayers.Projection("EPSG:32632")})});</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addLayer(sites); </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var outline = new OpenLayers.Layer.GML("Jerba Island", "data/outline.gml");</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addLayer(outline);</DIV>
<DIV><BR></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>//Map Controls Should theoretically be in map constructor, but only navigation works</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addControl( new OpenLayers.Control.LayerSwitcher());</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addControl( new OpenLayers.Control.MousePosition());</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addControl( new OpenLayers.Control.OverviewMap());</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.addControl( new OpenLayers.Control.ScaleLine());</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>//map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>//highlighting stuff</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>var report = function(e) {</DIV>
<DIV>OpenLayers.Console.log(e.type, <A href="http://e.feature.id">e.feature.id</A>);</DIV>
<DIV>};</DIV>
<DIV></DIV>
<DIV>var highlightCtrl = new OpenLayers.Control.SelectFeature(sites, {</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>onSelect: onFeatureSelect, </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>onUnselect: onFeatureUnselect,</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>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></DIV>
<DIV>var selectCtrl = new OpenLayers.Control.SelectFeature(sites,</DIV>
<DIV>{clickout: true}</DIV>
<DIV>);</DIV>
<DIV></DIV>
<DIV>map.addControl(highlightCtrl);</DIV>
<DIV>map.addControl(selectCtrl);</DIV>
<DIV></DIV>
<DIV>highlightCtrl.activate();</DIV>
<DIV>selectCtrl.activate();</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>// set center from geometry </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>if( ! map.getCenter() )</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>{</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>topo.events.register('loadend', topo, function(){map.zoomToExtent(topo.getDataExtent())});</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.setCenter(null, null);</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>}</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>else </DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>{</DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>map.setCenter(new OpenLayers.LonLat(lon, lat));<SPAN style="WHITE-SPACE: pre" class=Apple-tab-span> </SPAN></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>} ;</DIV>
<DIV><BR></DIV>
<DIV><SPAN style="WHITE-SPACE: pre" class=Apple-tab-span></SPAN>};</DIV>
<DIV><BR></DIV></DIV></DIV></DIV></BODY></HTML>