[OpenLayers-Users] map centers correctly when not in lightbox.

[Eric Mckenna]

Hello All,
I'm displaying the same map details in two different ways.  One is on a 
simple webpage, this one works flawless.
http://skitch.com/emackn/b2nhq/map-on-simple-page

The issues occurs when I put my map into a jquery tools overlay, 
http://flowplayer.org/tools/overlay.html. 
When displayed with the overlay lib, my map has the correct center but 
the map is "scrolled" in that the center marker is in the upper left 
hand corner. 
http://skitch.com/emackn/b2nhk/overlay-map

I've checked the projection and doubled checked the zoom value and 
center points.  They all look good to me.

One odd issue is that when I hit the zoom in or out scale button, the 
map corrects itself.
http://skitch.com/emackn/b2nha/after-hitting-zoom-out-button

Any suggestions?


here's my code:
/**
 * Render the Hot Spot detail map with the provided configuration
 *
 * @param id
 *    The id of the div to use for the map
 * @param config
 *    The array of configuration options for the Hot Spot
 */
function hotspotsRenderDetailMap(id, config) {
  var lat = Number(config.latitude);
  var lon = Number(config.longitude);
  var zoom = Number(config.zoom);
  var image = config.marker;
  var hotspot = new OpenLayers.LonLat(lon, lat);

  OpenLayers.ImgPath = config.imgpath;

  var map = new OpenLayers.Map(id, {
      controls: [
          new OpenLayers.Control.Navigation(),
          new OpenLayers.Control.PanZoomBar(),
          new OpenLayers.Control.ScaleLine(),
          new OpenLayers.Control.LayerSwitcher()
      ],
  });
 
  // In case something needs to get at this later
  if (!Drupal.hotspotsMap) {
    Drupal.hotspotsMap = [];
  }
  Drupal.hotspotsMap[id] = map;
 


  var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
      key: 'c6ee2dab1ccd513e8ab325db51aa28b7',
      styleId: 3818,
  });
  map.addLayer(cloudmade);

  if (!map.getCenter()) {
    var epsg4326 = new OpenLayers.Projection("EPSG:4326");
    hotspot.transform(epsg4326, map.getProjectionObject());
    map.setCenter(hotspot, zoom);
  }

  var markers = new OpenLayers.Layer.Markers("Markers");
  map.addLayer(markers);

  var size = new OpenLayers.Size(30,43);
  var icon = new OpenLayers.Icon(image, size);
  var marker = new OpenLayers.Marker(hotspot, icon);
  markers.addMarker(marker);
 
  for ( var i in config.overlays ) {
    var kml_features;
    kml = new OpenLayers.Layer.GML(config.overlays[i].filename, 
config.overlays[i].filepath, {
      format: OpenLayers.Format.KML,
      formatOptions: {
        extractStyles: true,
        extractAttributes: true,
        maxDepth: 4,

      }
    });
   
    selectControl = new OpenLayers.Control.SelectFeature(kml,
      {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
    map.addLayer(kml);
    map.addControl(selectControl);
    selectControl.activate();

  }

  function onPopupClose(evt) {
    selectControl.unselect(selectedFeature);
  }

  function onFeatureSelect(feature) {

    selectedFeature = feature;
    //console.dir(feature.attributes);
    var bubbletxt = "<div><em>"+feature.attributes.name+"<em>";
   
    if ( typeof feature.attributes.description != "undefined" ) {
      bubbletxt += "<p>"+ feature.attributes.description +"</p>";
    }
    bubbletxt += "</div>";
    popup = new OpenLayers.Popup.FramedCloud("ab-feature",
                               
feature.geometry.getBounds().getCenterLonLat(),
                               new OpenLayers.Size(200,50),
                               bubbletxt,
                               null, true, onPopupClose);
    feature.popup = popup;
    map.addPopup(popup);
  }
 
  function onFeatureUnselect(feature) {
      map.removePopup(feature.popup);
      feature.popup.destroy();
      feature.popup = null;
  }

  // Move the marker layer to the top (for Firefox bug)
  map.setLayerIndex(markers, 100);
}