Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm stuggling to add a KML layer to a simple test OpenLayers map - no errors are shown, but the KML layer does not display on the map.

I've tried multiple samples including the Sundials on a Spherical Mercator sample and the Layers help page. I can open this example in Firefox and see the KML points on the map without error.

I copied this sample's source code and adjusted the paths to the CSS, JS and KML files to use full paths.

However, when opening this map the KML points are not displayed. Firebug shows GET sundials.kml on the working example from OpenLayers, but OPTIONS sundials.kml on my version.

Any advice on what I'm doing wrong? Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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">
    <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">

<style type="text/css">
    html, body {
        height: 100%;
    }
    #map {
        width: 100%;
        height: 80%;
        border: 1px solid black;
    }
    .olPopup p { margin:0px; font-size: .9em;}
    .olPopup h2 { font-size:1.2em; }
</style>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, select;

        function init(){
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            };
            map = new OpenLayers.Map('map', options);
            var mapnik = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
            map.addLayer(mapnik);

            var layer = new OpenLayers.Layer.GML("KML", "http://openlayers.org/dev/examples/kml/sundials.kml", {
               format: OpenLayers.Format.KML,
               formatOptions: {
                 'extractStyles': true
               }
            });
            map.addLayer(layer);

            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToExtent(
                new OpenLayers.Bounds(
                    68.774414, 11.381836, 123.662109, 34.628906
                ).transform(map.displayProjection, map.projection)
            );
        }
    </script>
 </head>


<body onload="init()">
      <h1 id="title">KML Layer Example</h1>

      <div id="tags">
          kml, popup, feature
      </div>

      <p id="shortdesc">
          Demonstrates loading and displaying a KML file on top of a basemap.
    </p>

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

    <div id="docs"></div>
  </body>
</html>
share|improve this question
add comment

1 Answer

up vote 4 down vote accepted

Firebug says that XMLHttpRequest cannot load http://openlayers.org/dev/examples/kml/sundials.kml. Origin null is not allowed by Access-Control-Allow-Origin. So you can move original kml file to the same host as your OpenLayers application or set up proxy.

share|improve this answer
    
Bingo. I did try running the file from a web server, but I didn't try having the KML file on the same web server. Thanks for the quick help. –  Stephen Lead Jul 9 '12 at 3:38
add comment

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.