
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <link rel="stylesheet" href="http://dev.openlayers.org/sandbox/bartvde/loadingpanel/theme/default/style.css" type="text/css" />

    <style type="text/css">

        #map {

            width: 512px;

            height: 512px;

            border: 1px solid black;

        }

        .olControlLoadingPanel {

            background-image:url(http://dev.openlayers.org/sandbox/bartvde/loadingpanel/theme/default/img/loading.gif);

            background-position:center;

            background-repeat:no-repeat;

        }

    </style>

        <script src="http://openlayers.org/api/OpenLayers.js"></script>

        <script src="http://dev.openlayers.org/sandbox/bartvde/loadingpanel/lib/OpenLayers/Control/LoadingPanel.js"></script>

    <script type="text/javascript">

        var lon = -93;

        var lat = 56;

        var zoom = 3;

        var map, layer;


        function init(){

            map = new OpenLayers.Map( 'map' );

            map.addControl( new OpenLayers.Control.LoadingPanel({minSize: new OpenLayers.Size(600, 600)}) );

            layer = new OpenLayers.Layer.WMS(

                "OpenLayers WMS",

                "http://labs.metacarta.com/wms/vmap0",

                {layers: 'basic'},

                {singleTile: false, buffer: 0, ratio: 1}

            );

            map.addLayer(layer);


            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",

                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",

                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +

                         "prov_bound,fedlimit,rail,road,popplace",

                 transparent: "true", format: "image/png"},

                 {singleTile: true});

            map.addLayer(dm_wms);


            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

            map.addControl( new OpenLayers.Control.LayerSwitcher() );

        }

    </script>

  </head>

  <body onload="init()">

    <h1 id="title">LoadingPanel example</h1>


    <div id="tags">

    </div>

        <p id="shortdesc">

            Shows an example of the LoadingPanel control

        </p>

    <div id="map"></div>

  </body>

</html>