Tell me more ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.
up vote 2 down vote favorite

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>
share|improve this question
When you say it doesn't work in Firefox and Chrome but doesn't show errors, what exactly does that mean? What are you seeing? – Chad Cooper Nov 11 '12 at 18:28
Thanks you for your reply. It means only the raster layer (WMS) was loaded, but not for GML and GeoJSON vector layer. These vector layers were loaded when running on IE. – Le Hau Nov 12 '12 at 2:30
Which versions of Chrome, FF and IE are you using? – R.K. Nov 12 '12 at 7:48
I am now using: Chrome Version 23.0.1271.64 m. Firefox 16.0 and IE 8.0.7600.16385. And OS is Win 7 32 bit. GeoServer 2.1.4. – Le Hau Nov 12 '12 at 8:06

1 Answer

up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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