KML file on OpenLayers Map

This effort started with the creation of a simple KML file using http://www.geodistance.com. By using the map on the site, a bike route near my home could be traced out and saved as a KML file to my local hard drive. The goal was to create a local HTML file that had an OpenLayers base map layer and the KML file as a second layer on the map.

There were 2 different live examples on the Open Layers site of how to display a KML layer. One of them used an OpenLayers.Layer.Vector object and the other used an OpenLayers.Layer.GML object. Both examples referenced the KML file to a kml subdirectory that exists on whatever web application OpenLayers uses to run the live examples.

Rather than download the library to my local server I chose to include the library with the single script element. I did not have a kml subdirectory under the directory with the HTML file that I was creating—I simply copied the KML file into the same directory as the HTML.

By the time that I got finished with this experiment I ended up with 4 different HTML files. Internet Explorer (Version 7) and Firefox (Version 3.5.3) were the 2 browsers I was using and they both acted differently, depending on whether the KML file was on my local drive or whether I put it on a server reachable over the Internet. Using the 2 different methods of creating the layer caused different behavior, as well.

If the KML file was on my local drive then IE could not find the file at all. It was not obvious that IE was having trouble with the fact that the file was on the local drive. The error message was “Access is denied: Line 1078”, which in the debugger pointed to a place in the OpenLayers.js that did not provide much of a clue as to what kind of access was being denied. It was only by finally uploading the KML to a remote server and providing the full URL, rather than just the local file name, that I got it to work in IE.

Using the local KML file and the two IE failure cases, one being the OpenLayers.Layer.Vector and the other the OpenLayers.Layer.GML, produced 2 different behaviors. When the Vector example failed it would fail to display the map, as well as failing to display the KML. The GML example would at least display the map and just fail to display the KML.

Firefox did not display any error messages when I used the local KML file. But it did not display the KML layer when I used OpenLayers.Layer.Vector. Using Firebug did not provide any information as to why it couldn’t display the Vector layer. But it did display the GML layer. And, unfortunately, if I used the HTML files with the full URL to the KML on the remote server Firefox could not display the KML for either the Vector or the GML. Firebug showed no errors for the Vector method; for the GML method it showed a “no element found” error in the Console Response tab.

All of this leaves me with 4 different HTML files where the only thing different amongst the four is the single “var bikeroute = “ statement where I create a KML layer for the map. None of the 4 files provides a satisfactory solution to what I’m trying to do. I have a local KML file that I want to display on an OpenLayers map in a consistent manner whether I use IE 7 or Firefox 3.5.3. Everything I’ve discussed can be reproduced with no special software and only the 4 HTML files and the KML file. If anyone could decipher for me what is going on with OpenLayers when I try to display a KML file I would greatly appreciate it.