JavaScript – Putting KML with Query String Processing

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