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>
<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>
