[GIS] GML and GeoJSON vector layer can not display in Firefox and Chrome

geojsongmlopenlayers-2vector

I have following codes. It works perfectly in IE (GML and GeoJSON vector layer was loaded), but not in Firefox and Chrome without any errors noticed. Please help me to fix this problem.

Here is the code with GML vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):

    <!DOCTYPE html>
    <html>
    <head>
    <title>Creating a simple map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Include OpenLayers library -->
    <script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <!-- The magic comes here -->
    <script type="text/javascript">
        var map;
        function init() {
            var bounds = new OpenLayers.Bounds(
                -124.73142200000001, 24.955967,
                -66.969849, 49.371735
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.22563114453125,
                projection: "EPSG:4326",
                units: 'degrees'
            };

            map = new OpenLayers.Map("ch3_wfs",options);

            var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
            {
                layers: "topp:states",
            });    
            map.addLayer(baseLayer);

            var statesLayer = new OpenLayers.Layer.Vector("States", {
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50",
                    format: new OpenLayers.Format.GML()
                }),
                strategies: [new OpenLayers.Strategy.Fixed()],
            });

            map.addLayer(statesLayer);

            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.setCenter(new OpenLayers.LonLat(0,0), 2);
            map.zoomToMaxExtent();

        }

    </script>
    </head>
    <body onload="init()">
        <div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
    </body>
    </html>

Here is the code with GeoJSON vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):

<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<!-- The magic comes here -->
<script type="text/javascript">
    var map;
    function init() {
        var bounds = new OpenLayers.Bounds(
            -124.73142200000001, 24.955967,
            -66.969849, 49.371735
        );
        var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution: 0.22563114453125,
            projection: "EPSG:4326",
            units: 'degrees'
        };

        map = new OpenLayers.Map("ch3_wfs",options);

        var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
        {
            layers: "topp:states",

        });    
        map.addLayer(baseLayer);

        var statesLayer = new OpenLayers.Layer.Vector("States", {
            protocol: new OpenLayers.Protocol.HTTP({
                url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=json",
                format: new OpenLayers.Format.GeoJSON()
            }),
            strategies: [new OpenLayers.Strategy.Fixed()],
        });
        map.addLayer(statesLayer);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.setCenter(new OpenLayers.LonLat(0,0), 2);
        map.zoomToMaxExtent();
    }

</script>
</head>
<body onload="init()">
    <div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>

Best Answer

You could try to simplify a bit more the test, for example by removing maxResolution map option (cf. OpenLayers: Use scales instead of resolutions for more info about that configuration option).

With the debugging tools of the browser, you can also verify that wfs/json data are actually requested and received.

Related Question