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

[emackn]

It turned out to be a css issue.  The container was setting the width and
height to 100%.  After setting that to a fixed width and height, the window
aligned correctly on the map.  So, the map was always calculating the center
correctly but the window was in the wrong spot.


emackn wrote:
> 
> 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);
> }
> 
> 
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
> 
> 

-- 
View this message in context: http://n2.nabble.com/map-centers-correctly-when-not-in-lightbox.-tp3277742p3294373.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.