|  Login

Adding KML Layers

   Minimize

Adding KML is a little more complex than it might seem.  In order to place a kml on to the web map using our OpenLayers API we will need to have our files hosted on a web server.  The KML must be on the same web server unless you are using a proxy which we will not be going into in this class.  You will need to go to http://www.freewebhostingarea.com/ to set up a free hosting account.  When you get there notice the section on the page that looks like the following 

Where I entered giswebmapclass you will enter a unique name.  You may select any of the servers from the dropdown box but i suggest that you pick one that says (USA) Then click proceed.  You will be asked to enter your email, create a password, agree to terms and enter a couple anti spam words.  Once you have that done Click CREATE.

When this page opens it will have all of the information you will need to use your free web server.  Make special note of the following section by saving it in a text document or some place that you will not forget it. 

Once you have saved the information Click on the link that says Account Manager is located at ....  It will take you to a login screen which you will login to with the information that you just saved.  Now you are in the Member area and we can proceed with GIS stuff!  

 We will need to go back to our code in notepad and create the KML layer similar to how we created the wms layers.  There are some extra parameters in the KML we won't go over all of them in this class but you will be able to just copy what I have here.

var kmlLayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "monte-sano-state-park.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        })

You can add that directly under the nexrad layer just before you call the addLayers.  Then under the add layers add the following code.

map.addLayer(kmlLayer);

You may wonder why we didn't just include that layer in the addLayers array and the reason is that OpenLayers prefers that we add the same type of layers in the array so to get a consistant result we will always seperate the layer tyoes when we add them. 

 Your code should look like this.  Save it as webmap3.html

<html> 
<head> 
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
	html { height: 100% }
 	body { height: 100%; margin: 0px; padding: 0px }
	#map_canvas { height: 100% }
</style>
<script>
var map;

// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

  function initialize() {
     map = new OpenLayers.Map("map_canvas");
     var mapbase = new OpenLayers.Layer.WMS('OpenLayers WMS', 
       'http://vmap0.tiles.osgeo.org/wms/vmap0', 
       { layers: 'basic,coastline_01,depthcontour,priroad,secroad,clabel'});

     var nexrad = new OpenLayers.Layer.WMS("Nexrad",
       "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?",
       {   layers:"nexrad-n0r-wmst",Time: '2011-12-25T09:45:00Z', 
           transparent:true
        }, {isBaseLayer: false, opacity:.5});

     var kmlLayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "monte-sano-state-park.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        })

     map.addLayers([nexrad, mapbase]);
     map.addLayer(kmlLayer);

     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 
 }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Now you will need the KML file which you can download here Place that in the same directory as your html file.
 
Go to the member area of your web server.  Click File Manager.  Enter your login information (this is in the file you saved when you created the server)  FTP Server/Host: is the same as FTP server.  Pick english for the language and leave everything else as default and click login.  You will see your file manager.  Click Upload.  Click choose File.  Navigate to your html file, select it and click open.  Click the next Choose File and select the KML file the same way.  Then click the green check mark at the top left and your files will be uploaded.
 
Once your files are uploaded you will be able to navigate to your page by going to your address that you picked followed by /webmap3.html for example mine is http://giswebmapclass.freevar.com/webmap3.html 
 
Your page should look just like mine!  Now we're ready to move on to Adding Markers!