I'm struggling 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.

What am I doing wrong?

<!DOCTYPE html>
    <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; }
<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)");
            var layer = new OpenLayers.Layer.GML("KML", "http://openlayers.org/dev/examples/kml/sundials.kml", {
               format: OpenLayers.Format.KML,
               formatOptions: {
                 'extractStyles': true
            map.addControl(new OpenLayers.Control.LayerSwitcher());
                new OpenLayers.Bounds(
                    68.774414, 11.381836, 123.662109, 34.628906
                ).transform(map.displayProjection, map.projection)

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

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

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

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

    <div id="docs"></div>

1 Answer 1


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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