i want to load a map into a lightbox . so, once a link is triggered a lightbox is showed contains the map . but when i do that , some tiles isn't loaded except when i open/close firebug ( depends on if it was already opened or not ) not only firebug actually , but also Chrome inspector and IE developer tools . i tried it separately on a page ( without the lightbox ) with the same sizes and the same structure and everything is working fine . i'm using OpenLayers-2.12 by the way . is it an issue in debugging or something ? and if it's , how can i fix it ?
here is the code of the all page :
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function longlat(lon,lat) {
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
return new OpenLayers.LonLat(lon,lat).transform(fromProjection, toProjection);
}
function init_map() {
var map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var position = longlat(28.8013,31.1711);
var zoom = 3;
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
var location = new OpenLayers.Geometry.Point(28.8013, 31.1711).transform('EPSG:4326', 'EPSG:3857');
var popup = new OpenLayers.Popup.FramedCloud('Popup',location.getBounds().getCenterLonLat(),new OpenLayers.Size(200,200),'<p>some text</p>',null,true);
var marker = new OpenLayers.Marker(longlat(28.8013,31.1711),icon.clone());
marker.events.register('click',marker,function (evt) {
map.addPopup(popup);
popup.show();
});
markers.addMarker(marker);
map.addLayer(mapnik);
map.setCenter(position, zoom);
}
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
init_map();
jQuery('#map_button').click(function() {
jQuery('.map_lightbox , .map_box , #basicMap').css('display','block');
jQuery('.map_lightbox').animate({opacity:0.8},300,'linear');
jQuery('.map_box').animate({opacity:1.0},500,'linear');
jQuery('.map_close').click(function() {
map_close();
});
jQuery('.map_lightbox').click(function() {
map_close();
});
});
});
function map_close() {
$('.map_container').children('object').remove();
$('.map_lightbox').animate({opacity:0},300,'linear',function() {
$('.map_lightbox , .map_box').css('display','none');
});
}
</script>
<style>
.map_lightbox {
position: fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000000;
opacity:0;
filter:alpha(opacity=0);
z-index: 1000;
display:none;
}
.map_box {
position:fixed;
top:20%;
left:25%;
width:600px;
height:400px;
background :#f2f2f2;
z-index:1005;
padding:10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
display:none;
}
.map_close {
cursor:pointer;
float:right;
margin-left:98%;
font-weight:bold;
}
.map_container {
margin-right:5px;
}
.map_container {
width:95%;
height:95%;
position:relative;
float:right;
margin-right:20px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-border-radius:3px;
}
</style>
</head>
<body>
<div class='map_lightbox'>
</div>
<div class='map_box'>
<div class='map_close'>x</div>
<div class='map_container'>
<div id='basicMap' style='width:100%;height:100%;display:none;position:absolute;'></div>
</div>
</div>
<a href='javascript:void(0)' id='map_button' >full map</a>
</body>
</html>
thanks
Does this make any difference in the end result ?
Also, does the javacript debugger 'break' somewhere ? maybe due to a js error? and lastly, does your 'net' panel show any non http response code 200 lines (usually in red). Then you know the call was made but failed.