[GIS] Display problem while using openlayers with jquery

jqueryopenlayers-2

I want to use jquery with openlayers for rich interface. I have used layout-master for simple layout. But the problem is, when I add simple map using openlayers 'map' will not display at the center.!output1

<!DOCTYPE html>
    <html>

    <head>
        <link type="text/css" rel="stylesheet" href="../api/layout-master/source/stable/layout-default.css">
        <script type="text/javascript" src="../api/layout-master/source/jquery/jquery.js"></script>
        <script type="text/javascript" src="../api/layout-master/source/stable/jquery.layout.js"></script>
        <script type="text/javascript" src="../../OpenLayers/v2.0/OpenLayers.js"></script>
        <style type="text/css">
            .ui-layout-toggler-west,
            .ui-layout-toggler-south {
                border: 0;
            }
            .ui-layout-toggler-west div {
                width: 8px;
                height: 35px;
            }
            .ui-layout-toggler-south div {
                width: 35px;
                height: 8px;
                float: left;
            }
        </style>
        <script type="text/javascript">
            function init() {
                var options = {
                    projection: new OpenLayers.Projection("EPSG:32643"),
                    units: "m",
                    numZoomLevels: 10,
                    maxExtent: new OpenLayers.Bounds(401623.280957, 1282418.1261, 888858.311664, 2044579.876058)
                };
                var map = new OpenLayers.Map("map", options)
                var layer = new OpenLayers.Layer.MapServer("District", "http://{myserver}/cgi-bin/mapserv.exe", {
                    map: 'C:/ms4w/Apache/htdocs/myapp/hello2.map',
                });
                map.addLayer(layer);
                map.zoomToMaxExtent();
            };

            function finalizeLayout() {
                //Layout
                var mainLayout = $('body').layout({
                    applyDefaultStyles: true
                });
            };
            $(document).ready(function() {
                init();
                finalizeLayout();
            });
        </script>
    </head>

    <body>
        <div class="ui-layout-center" id="map">
         </div>
        <div class="ui-layout-north"> </div>
        <div class="ui-layout-south"> </div>
        <div class="ui-layout-east"> </div>
        <div class="ui-layout-west"> </div>
    </body>

</html>

It works fine if I use simple html(no jquery)output2

    <head>
        <script src="http://{myserver}/openlayers/v2.0/OpenLayers.js" type="text/javascript"></script>
        <style>
            html,
            body {
                width: 100%;
                height: 98%;
                margin: 1;
                padding: 1;
            }
            ;
        }
        </style>
        <script type="text/javascript">
            function init() {
                var options = {
                    projection: new OpenLayers.Projection("EPSG:32643"),
                    units: "m",
                    numZoomLevels: 50,
                    maxExtent: new OpenLayers.Bounds(401623.280957, 1282418.1261, 888858.311664, 2044579.876058)
                };
                var map = new OpenLayers.Map("map", options)
                var layer = new OpenLayers.Layer.MapServer("district_utm", "http://{myserver}/cgi-bin/mapserv.exe", {
                    map: 'C:/ms4w/Apache/htdocs/hello2.map',
                });
                map.addLayer(layer);
                map.zoomToMaxExtent();
            };
        </script>
    </head>

    <body onload="init();">
        <div id="map" style="color:#0000FF">
        </div>
    </body>

</html>

I am not able to find the error in my code.

Best Answer

Inside your first snippet (the one with jQuery support), try inverting the call to init() and finalizeLayout(), like this:

$(document).ready(function() {
    finalizeLayout();
    init();
});

It seems that if you load your map first and then apply the layout, the map is resized and this affects its extent property. Therefore, you need to apply the layout first and then load your map; this way the extent you've defined in your code is respected.

Related Question