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.

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
1
  • 1
    Its working fine. I appreciate your help
    – Rushya
    Commented Jan 3, 2015 at 5:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.