Sharing Maps

If you want to share your KML files then uploading them to Google Maps is an easy solution -. simply set them to Public. You can even set up a collaborative project.

You can also get Google to take notice of your KML/KMZ files that you host and offer them to a wider public audience in response to searches.

To do this you have to

1. Create your KML/KMZ file
2. Make sure it contains attribution tags that contain information such as author, name, url to your website etc.
3. Post the KML/KMZ to a publicly accessible webserver
4. Create a Geo site map - that is an XML format file that describes where on the webserver there are KML/KMZ files that you would like Google to index.
5. Submit the Sitemap to Google search in the usual way.

KML via the Map API

Of course if you are hosting Google Maps in your own web page, as described in Getting started with Google Maps then the obvious thing to do is to find our how to display KML within a hosted map. This turns out to be very easy.

First let's tackle the case where the KML file is available via a publicly accessible URL. In this case all we have to do is create a KmlLayer object using the URL in the constructor. This downloads and interprets the KML file and when you add the KmlLayer to the map the graphics it specifies appear. The technique works with KMZ files as well.

For example, assuming that we already have the code to create a map object then the demo1.KML file can be loaded using:

var kml=new google.maps.KmlLayer(
      "http://www.i-programmer.info/
                       maps/demo1.kml");
kml.setMap(map);

Notice that there is no way of loading KML generated by Javascript say directly into a map. In Google maps all KML has to be hosted at a public URL.

There are obvious ways round this but they are too difficult to go into here and will be covered in a future project. 

KML in Google Earth

Google Earth is better at supporting KML than Maps - it has more facilities and more extensions.

There are many ways to load KML into Google Earth but it is also worth knowing that if you select any displayed graphic on a Google Earth display, right click and select copy then a KML representation of the object is loaded to the clipboard. If you paste the KML into a text editor you can view it and modify it for use in your own code. This is a good way to learn about KML and to get KML that you can use as a starting point for your own custom objects.

The easiest way to display a KML file is to simply load the KML file into Google Earth. If you have Earth installed on your machine than simply double clicking on the KML file will open it in Google Earth and display the contents of the file. You can also use the File,Open command and navigate to the KML file. KML files, once loaded can be saved as part of MyPlaces.

If you want to load the KML file using the API then there are three basic ways of doing the job. The first is very similar to the Google Maps API way. You first have to ensure that the KML file is publicly accessible via a URL. If this is the case you can create a NetworkLink object and load it into the Google Earth object for display.

Assuming that the Google Earth object is loaded and initialised then you can display the demo1.kml file given at the start of the article as follows.

First create the link object:

var link = ge.createLink('');
link.setHref(
       "http://www.i-programmer.info/
                          maps/demo1.kml");

Next create the NetworkLink object and initialise it to the URL using the Link object:
var networkLink = ge.createNetworkLink(''); networkLink.set(link, true, true);

The set method is used to initialise the link and to make it visible and make the map "fly" to the location.

Finally add the NetworkLink object to the map:

ge.getFeatures().
             appendChild(networkLink);

If you run this short code segment then you will see the map pan to the new location and you will see a default marker.

So far we haven't done anything we couldn't have achieved using Google Maps - the KML file is loaded from a URL and you can't modify it. If you use either the fetchKML method then you can do the same job but now you can manipulate the resulting KML objects.

The fetchKml method accepts three parameters - the Google Earth object, the url as a string and a call back function that accepts the resulting kmlObject as its first parameter.

For example to load the demo1.kml file you would use something like:

google.earth.fetchKml(ge,
           "http://www.i-programmer.info/
           maps/demo1.kml",
           getKML);

Where getKML is a function that is called when the KML has been loaded into the kmlObject.

For example to load the kmlObject into the map you would use:

function getKML(kmlObject){
 if (kmlObject) {
   ge.getFeatures().appendChild(kmlObject);
 }
}

Notice that this doesn't zoom and pan the map to the new location but if you use  the mouse to move to the location you will see the default marker in place. Also notice that if the URL is incorrect or if there is any problem with the KML file the kmlObject is null.

The final KML load method, parseKML, is perhaps the most versatile as it can parse KML presented to it as a string. This means you can obtain the KML from any source you care to problem - a local file say, a URL or generated using code.

For example, if we store the text of the previous KML example in a variable:

var KML = '<?xml version="1.0" 
                   encoding="UTF-8"?>' +
 '<kml xmlns="http://earth.google.com/
                            kml/2.2">' +
 ' <Placemark>' +
 '  <Point>' +
 '   <coordinates>' +
 '     -1.5,55  ' +
 '   </coordinates>' +
 '  </Point>' +
 ' </Placemark>' +
 '</kml>';

The strange way of entering the string literal is used to preserve some of the formatting within the program - line breaks and spaces are mostly ignored in KML.

To create the kmlObject from the string we use:

var kmlObject = ge.parseKml(KML);

As long as everything worked and kmlObject isn't null we can display it on the map in the usual way:

ge.getFeatures().appendChild(kmlObject);

Once again the map doesn't automatically pan to the new location but if you do the job manually you will see the marker.

Working with the KML DOM

The main reason for wanting to load the KML into a kmlObject is to manipulate it before displaying it.

The kmlObject can be thought of as a sort of map equivalent of the DOM - Document Object Model. Indeed the same idea applies to the map object itself.

What happens is that as the KML is parsed objects are created with the same structure as the nested tags. Each tag gives rise to an object in the DOM and they are nested within each other in the same way that the tags are.  That is if <tag2> is nested within <tag1> e.g.

<tag1>
  <tag2>
  </tag2>
</tag1>

the object that represents tag2 is a child of the object that represents tag1.

Sometimes tags at the lowest level of the hierarchy are converted into properties of the object that corresponds to the tag that contains them - see the example below.

The biggest problem you have in any given situation is working out what object in the Google Earth API correspond to which tags. You also have to realise that the structure of a KML file can be far more complicated than the one we have been using so far - in particular there can be multiple features like placemarkers and you have to write code which navigates its way through the DOM tree to find what you are looking at.

A simple example will help get you started. In the case of the sample file demo1.kml that was loaded into the kmlObject variable there is only only feature i.e. the single placemarker. Thus the kmlObject isn't a collection of features it is a an instance of the KmlPlacemark object.  The KmlPlacemark object has getGeometry and setGeometry methods that can be use to manipulate its child objects - which correspond to the tags nested within it.

In this case the only child object is a kmlPoint object which was created to correspond to the point tag. This has get and set Latitude and Longitude methods and we don't need to dig any deeper because the co-ordinate tags have been converted into properties of the kmlPoint object.

So putting all this together. To set the latitude and longitude of the placemark to 0,0 we would use:

kmlObject.getGeometry().setLatitude(0);
kmlObject.getGeometry().setLongitude(0);

and to discover the current values we would use:


alert(kmlObject.getGeometry().
          getLatitude ());
alert(kmlObject.getGeometry().
          getLongitude());

Notice that the connection between the kmlObject and the map is live in the sense that if you change the details of the object after it has been added to the map then the display is updated.

In a more complicated case the kmlObject may contain lots of placemark objects and other objects and you would have to navigate the DOM to find the placemark you needed to modify or add to.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:0471790095>

<ASIN:1593853661>

<ASIN:0470156236>

<ASIN:0321525590>

<ASIN:1590597079>

<ASIN:0596101619>

<ASIN:1449502768>

<ASIN:1430218290>

<ASIN:0470515112>

<ASIN:0470236825>

<ASIN:1430216204>

<ASIN:1420068059>

<ASIN:0596008651>