I've created a html page with an input option to load a KML file and a button to show the KML markers.<br>
Also added a function to reload the page to show the new layer (with KML markers)<br>
<pre> function reloadPage()
{
window.location.reload();
}</pre><br>
Not very decent, but this solution works well in Mozilla Firefox but not in IE8 (after a reload the filename is empty)<br>
I'm looking for a solution to load the KML file in a decent way.<br>
I'm only using HTML and javascript, no PHP.<br><br>
Any advice is appreciated !!!<br><br>
My page so far:<br><br>
<pre><!DOCTYPE html>
<html>
<head>
<title>Creating map using KML file</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="OpenLayers.js"></script>
<style>
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function init()
{
var options = {
minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
controls: [
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.KeyboardDefaults()
],
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
};
var map = new OpenLayers.Map("map", options);
var osm_layer = new OpenLayers.Layer.OSM();
map.addLayer(osm_layer);
// get file name
filename = document.getElementById('theFile').value;
var kml_layer = new OpenLayers.Layer.Vector("KML", {
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
protocol: new OpenLayers.Protocol.HTTP({
url: filename,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 10
})
})
});
map.addLayer(kml_layer);
map.zoomToMaxExtent();
}
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body onload="init()">
<body>
<br><input type="file" placeholder="Type some text" id="theFile" size="100" /> <input type="button" value="Show Markers" onClick="reloadPage()"><br><br>
<div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html></pre>
<br/><hr align="left" width="300" />
View this message in context: <a href="http://osgeo-org.1560.n6.nabble.com/Input-option-to-load-KML-file-tp5015133.html">Input option to load KML file</a><br/>
Sent from the <a href="http://osgeo-org.1560.n6.nabble.com/OpenLayers-Users-f3910695.html">OpenLayers Users mailing list archive</a> at Nabble.com.<br/>