KML Interactions

I've had a few requests asking about how to interact with the KML once you've loaded it onto the map. It's really quite an easy step once you've got the KML on there but I'll show you how in this simple example.

KML Interaction Example

Firstly if you haven't read the Simple KML Loader post then head over there first. It explains how to get that KML file loaded and displayed on your map.

The objective of this simple example is to show an info window popup when we rollover one of the objects in the kml, showing the name of the kml object in the window.

The code for this example is here:

Make sure you have our SimpleKmlLoader library in your project.

To create the loader, load the kml and have it added to your map:

  1. var _loader:SimpleKmlLoader = new SimpleKmlLoader( _map, true );
  2. _loader.addEventListener( Event.COMPLETE, loader_completeHandler );
  3. _loader.load( _file );

Now on the complete handler you can add the interactions:

  1. function loader_completeHandler( _event:Event ):void
  2. {
  3. // At this point generally this objects array
  4. // will simply be the base object of the KML
  5. addInteraction( _loader.objects );
  6. }
  8. /**
  9.  * Add interaction to every object in the array
  10.  */
  11. function addInteraction( _objects:Array ):void
  12. {
  13. for each (var _object:KmlDisplayObject in _objects)
  14. {
  15. _object.interactive = true;
  16. _object.addEventListener(MapMouseEvent.ROLL_OVER, object_rollOverHandler, false, 0, true );
  17. _object.addEventListener(MapMouseEvent.ROLL_OUT, object_rollOutHandler, false, 0, true );
  19. // Process any children
  20. addInteraction( _object.children );
  21. }
  22. }
  24. function object_rollOverHandler( _event:MapMouseEvent ):void
  25. {
  26. // show an info panel...
  27. var _object:KmlDisplayObject = KmlDisplayObject(_event.currentTarget);
  28. _map.openInfoWindow( _object.latLng, new InfoWindowOptions({}) );
  29. }
  31. function object_rollOutHandler( _event:MapMouseEvent ):void
  32. {
  33. _map.closeInfoWindow();
  34. }

Now when you run with this code you should see the name of the kml object appear in the info window when you rollover the object. This is of course a very simple example, and much more can be done with this, but it is a good point to introduce the concept of interactions.

Published by


7 thoughts on “KML Interactions”

  1. Awesome stuff.
    I’m just learning this right now, so sorry for the super basic question:
    When you say: “Make sure you have our SimpleKmlLoader library in your project.”, what file exactly should I download, and where should I put it?

    I’d really appreciate your help.

    1. Take a look at this post but briefly:

      You need to download the SimpleKmlLoader from our svn (there’s heaps of help on svn around if you haven’t used it before). From a command line:

      svn co

      In that directory there are a heap of files (mostly a repackage of the google utility library, which is a requirement of our loader). The files I’m referring too lie in the com/distriqt/gmaps/kml/utils/ directory. You need to keep them in this structure though, so I suggest just copying the entire com directory into the source directory for your project.

      Hope that helps!

  2. Hello,

    I’m attempting to modify your example to display a KML file that contains an elaborate polygon (several hundred coordinate points). My file mimics the polygon pattern in your example.kml file. My file opens perfectly in Google Earth 5.2.1, but when rendered via the SimpleKMLLoader I get a some type of ‘checkerboard’ pattern where the polygon should be and colored ‘streaks’ (based on the style defined) extending far beyond the boundaries of the polygon.

    Is there a limit to the number of coordinates that SimpleKMLLoader can handle?

    1. Not that I’m aware, the loader just uses the parser from the utility library and then creates a polygon from the parsed geometry. So you just have to account for the normal limits of overlays in google maps.

      Could you send me the modified kml so I can take a look?

  3. hey guys, I have an error with RemoveFromMap() inside a “button click handler” function that don’t recognize remove from map because kmlLoader can’t let me call from another function or add child for it… I need a button that says Clear Map but these objects overload memory and don’t dissapear making a “loop overlaying”… I don’t found more doc, just that your tips and comments…

    Help!!! :S


Leave a Reply

Your email address will not be published. Required fields are marked *