some tiles in OpenLayers isn't loaded except when i open/close firebug

Question

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

same problem. I opened this issue: https://github.com/openlayers/openlayers/issues/1257 Test here: http://jsfiddle.net/aEy3x/3/ What happens is that handler is removed from event inside the handler and that confuses OpenLayers — GoTo, Feb 25 '14 at 21:13
also it seems that there is a conflict between libraries. OSM and jQuery in your case and OSM and Nokia maps API in my case. When registering an event with Nokia maps, the tiles in OSM stop loading on pan. OSM map and Nokia maps are in separate divs. — GoTo, Feb 25 '14 at 21:39

score 0 · Answer 1 · answered Oct 18 '12 at 11:35

0

Does this make any difference in the end result ?

   OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;

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.

answered Oct 18 '12 at 11:35

Glenn Plas

1,608
15
17

OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5; doesn't make any difference . the debugger doesn't break at all and everything is fine in 'net' panel .. thanks for your reply – Ahmed Muhammad Oct 18 '12 at 12:14
1

You could try `"use strict";` to see if chrome/firefox still have some sort of deeper javascript issue. it helped me a lot in tuning javascript code, each browser treats this different so you might notice changes among them and those could be a first clue. – Glenn Plas Oct 18 '12 at 12:40
mmm. interesting problem. I bet you have _jslint'ed_ the code too ? (sounds like you covered the basics tho). I only see what you describe when I have breakpoints in the code. I would for troubleshooting purposes try the exact same browser on a different workstation and see if they behave the same, this would be a good test at this stage nomatter what the outcome is. – Glenn Plas Oct 18 '12 at 13:02
i tested it in firefox , chrome , safari and IE9 on different workstations and everything is the same . and yea i jslint'ed the code too . – Ahmed Muhammad Oct 18 '12 at 13:45
I think now is a good time to show some actual code, if it is reproducible , I should be able to testdrive it here and see the same issue. – Glenn Plas Oct 18 '12 at 19:37
Have you been using proxy? I am facing the same problem right now, and I am looking for it's source. – bartosz.baczek Dec 30 '16 at 10:21

some tiles in OpenLayers isn't loaded except when i open/close firebug

1 Answers1