Search code examples
javascriptopenlayerssame-origin-policygml-geographic-markup-lan

OpenLayers loading a GML file from an other site


I'm having difficulties loading a GML file into OpenLayers. I've stripped down the problem to the following : - copy/past the example at : http://openlayers.org/dev/examples/behavior-fixed-http-gml.html - replace all links to absolute

This results in the following file/code that I run from localhost (file:///) :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>OpenLayers Vector Behavior Example</title>
        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
        <script src="http://openlayers.org/dev/OpenLayers.js"></script>

        <script type="text/javascript">
            var map;

            function init(){
                map = new OpenLayers.Map('map');
                var wms = new OpenLayers.Layer.WMS(
                    "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'}
                );

                var layer = new OpenLayers.Layer.Vector("GML", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "http://openlayers.org/dev/examples/gml/polygon.xml",
                        format: new OpenLayers.Format.GML()
                    })
                });

                map.addLayers([wms, layer]);
                map.zoomToExtent(new OpenLayers.Bounds(
                    -3.92, 44.34, 4.87, 49.55
                ));
            }
        </script>
    </head>
    <body onload="init()">
        <h1 id="title">Vector Behavior Example (Fixed/HTTP/GML)</h1>
        <div id="tags">
            vector, strategy, strategies, protocoll, advanced, gml, http, fixed
        </div>
        <p id="shortdesc">

            Vector layer with a Fixed strategy, HTTP protocol, and GML format.
        </p>
        <div id="map" class="smallmap"></div>
        <div id="docs">
            The vector layer shown uses the Fixed strategy, the HTTP protocol,
            and the GML format.
            The Fixed strategy is a simple strategy that fetches features once
            and never re-requests new data.
            The HTTP protocol makes requests using HTTP verbs.  It should be
            constructed with a url that corresponds to a collection of features
            (a resource on some server).
            The GML format is used to serialize features.
        </div>
    </body>
</html>

The problem is that the GML is not displayed (everything else works great). I have no errors in the console but status 200 OK for the request (both in FF console and FireBug Network tab). What I am missing? Same origin policy failure should show up some error, no?


Solution

  • It does give an Access-Control-Allow-Origin error in Chrome.

    XMLHttpRequest cannot load http://openlayers.org/dev/examples/gml/polygon.xml. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

    For FF it does give a 200 response code as you stated, but the response contains no data.

    http://jsfiddle.net/niklasvh/F76Hp/3/