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 class="Apple-tab-span" style="white-space:pre"> </span>var map, layer, selectedFeature, selectControl, selectedFeature;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var lat = 10.87;</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var lon = 33.79;</div><div><br></div><div>//Popups</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function onPopupClose(evt) {</div>
<div> selectControl.unselect(selectedFeature);</div><div> }</div><div><span class="Apple-tab-span" style="white-space:pre"> </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 class="Apple-tab-span" style="white-space:pre"> </span> }</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </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 class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//Map Constructor</div><div>function init() {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>map = new OpenLayers.Map ("map", </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>controls:[</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.Navigation(),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.PanZoomBar(),</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.LayerSwitcher(),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.Attribution()],</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>sphericalMercator: true,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>maxResolution: 156543.0399,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>numZoomLevels: 19,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>units: 'm',</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>projection: new OpenLayers.Projection("EPSG:900913"),</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>displayProjection: new OpenLayers.Projection("EPSG:4326"),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>);</div><div>//Map Data</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div>//Base Layers</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>map.addLayer(layerMapnik);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var ol_wms = new OpenLayers.Layer.WMS( "World Map", </div><div><span class="Apple-tab-span" style="white-space:pre"> </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 class="Apple-tab-span" style="white-space:pre"> </span></div><div>// Overlays<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var topo = new OpenLayers.Layer.GML("Jerba Topography", </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>"data/topopj.gml", {styleMap: new OpenLayers.StyleMap({strokeWidth: 1, strokeColor: "#000000"}) });</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>map.addLayer(topo);</div>
<div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var sites = new OpenLayers.Layer.GML(</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>"Sites", "data/siteswatr.gml", {styleMap: new OpenLayers.StyleMap({pointRadius: 2.5, fillColor: "#"}, </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>{projection: new OpenLayers.Projection("EPSG:32632")})});</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>map.addLayer(sites); </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>var outline = new OpenLayers.Layer.GML("Jerba Island", "data/outline.gml");</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span>map.addLayer(outline);</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> //Map Controls Should theoretically be in map constructor, but only navigation works</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> map.addControl( new OpenLayers.Control.LayerSwitcher());</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> map.addControl( new OpenLayers.Control.MousePosition());</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> map.addControl( new OpenLayers.Control.OverviewMap());</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> map.addControl( new OpenLayers.Control.ScaleLine());</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> //map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//highlighting stuff</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </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 class="Apple-tab-span" style="white-space:pre"> </span>onSelect: onFeatureSelect, </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>onUnselect: onFeatureUnselect,</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </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 class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> // set center from geometry </div><div><span class="Apple-tab-span" style="white-space:pre"> </span> if( ! map.getCenter() )</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>topo.events.register('loadend', topo, function(){map.zoomToExtent(topo.getDataExtent())});</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>map.setCenter(null, null);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>else </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>map.setCenter(new OpenLayers.LonLat(lon, lat));<span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>} ;</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>};</div><div><br></div></div></div>