Putting KML with Query String Processing
Prerequisites
Lecture - JavaScript - Processing URL and Query String
Lecture - XML Languages - KML
Summary
Topics covered:
Creating a page that allows you to link multiple KML files
Displaying KML files inside a browser
Video
http://www.youtube.com/watch?v=ePwfXbB0mQc
Reference Materials
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample Click to see KML</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var map;
var kmlOptions;
function display_kmlmap()
{
// A map needs 2 things - a place to put it and map options
var map_options = { MapTypeId: google.maps.MapTypeId.TERRAIN };
map = new google.maps.Map(document.getElementById("map_canvas"),map_options);
// OK - now we have a map, now let's display some kml - for this you need
// to create a kmlLayer. You can add multple of these to a map in the kmlOptions
// A kml layer needs 2 things - a kml file and a set of options
// I selected a random kml file - but since I did not give a location for the
// map in map options - the kml file better do this
kmlUrl = getParameterByName('kml');
if (kmlUrl == '')
kmlUrl = 'http://earth-api-samples.googlecode.com/svn/trunk/examples/static/red.kml';
var kmlOptions = { map: map };
// Create the kmlLayer - and you are done
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
</head>
<body onload="display_kmlmap()">
<br/>
<div id="map_canvas" style="width:500px; height:400px; "></div>
<br/>
<button onclick="map.setMapTypeId(google.maps.MapTypeId.TERRAIN);">Show TERRAIN</button>
<button onclick="map.setMapTypeId(google.maps.MapTypeId.ROADMAP);">Show ROADMAP</button>
<button onclick="map.setMapTypeId(google.maps.MapTypeId.SATELLITE);">Show SATELLITE</button><br/>
Display Specific Map:<br/>
<a href="/index.html?kml=http://earth-api-samples.googlecode.com/svn/trunk/examples/static/red.kml">Red Sample</a> |
<a href="/index.html?kml=http://www.runtastic.com/en/routes/nasiczne-cyrynski-dolina-sanu.kml">Nasiczne Biking</a> |
<a href="/index.html?kml=http://support.nature.org/xml/preserves.kml">Nature Preserves</a> |
<a href="/index.html?kml=http://www.scribblemaps.com/maps/kml/_J3wPxboDe.kml">MN Hiking Trails</a>
</body>
</html>
|
Additional Information
COP 4813 Lectures
Comments (0)
You don't have permission to comment on this page.