OpenLayers Map not loading inside CordovaActivity

Question

I'm trying to integrate an OpenLayers Map inside PhoneGap application but the map isn't showing at all. The map is fetched from GeoServer inside my LAN. The Zoom controls are visible but the map isn't loading even when when i zoom-in/out. The map consists of one layer (which is a combination of two layers in GeoServer). Here is my index.js file :

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        $(document).ready(function() {
            // pink tile avoidance
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
            // make OL compute scale according to WMS spec
            OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

            //OpenLayers.ProxyHost = "proxy.cgi?url=";

            var map, format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                -100, -100,
                5000, 2500
            );
            var options = {
                controls: [
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.TouchNavigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    }),
                    new OpenLayers.Control.Zoom()
                ],
                maxExtent: bounds,
                projection: "EPSG:2001",
                units: 'm'
            };

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

            var wms = new OpenLayers.Layer.WMS(
                "IW Map",
                "http://192.168.1.3:80/geoserver/myWorkspace/wms",
                { 
                    LAYERS: 'iwlayer',
                    STYLES: '',
                    format: format
                }, {
                        buffer: 0,
                        isBaseLayer: true,
                        yx : {'EPSG:2001' : false}
                    }
            );
            map.addLayer( wms );
            map.zoomToMaxExtent(bounds);

            alert("Map loaded!");
        });
    }
};

My index.html file :

<!DOCTYPE html>
<html>
    <head>
        <title>HelloWorld</title>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1"/>

        <link rel="stylesheet" type="text/css" href="js/theme/default/style.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> -->
        <script type="text/javascript" src="js/OpenLayers.mobile.js"></script>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

I added the <access origin="http://192.168.1.3/*" /> rule to PhoneGap's config.xml file but no luck.

Many thanks.

Answer 1

Check your bounds. Looks like you are wanting to display a slice at -100 long.

Try something like:

var NA = new OpenLayers.Bounds(-128, 48.25, -114, 60)
         .transform(geographic, spherical_mercator);

OpenLayers Map not loading inside CordovaActivity

Question

1 answers

solution1
1 2014-07-23 23:07:15

OpenLayers Map not loading inside CordovaActivity

Question

1 answers

solution1 1 2014-07-23 23:07:15

solution1
1 2014-07-23 23:07:15