Simple KML Loader

Lately we have been playing around a fair bit with some google flash maps and have been amazed by the power and simplicity of the API. We used it heavily in the ABC Black Saturday site using custom markers with images and even a scrolling grid.

We were faced with another challenge of being able to mark out areas (districts) within Victoria that represented the most affected regions. These regions were sometimes complex and we needed to be able to update them simply and quickly as the need arose. The regions weren't to be displayed directly but used for two major items. Firstly to focus the map on a particular region, by moving the view to the region contained by these districts, and secondly, to assign events/markers to a district by calculating if they were contained within the bounds of the district lines.

The solution ended up being ridiculously simple. We created a shared map on google maps, with shapes defining the districts. We then could export from this online map to kml by grabbing the view in Google Earth link and changing the output parameter from nl to kml. This gave us the map of the districts in a nice kml format.

abc-district-google-map

Once we had the map in kml we needed to load in the objects and create overlays for google maps. Surprisingly there wasn't a simple "load kml" function in google maps, but there are some nice kml parsing utilities in the google map extras library. So we created a kml loader class that loads the kml file, extracts the objects and creates overlays for placement on a google map. Hopefully it can be helpful to others, check it out from the following:

https://github.com/marchbold/as3-gmaps-utils

Usage:

Firstly create the loader and start the load of your kml file. You'll need to add a listener to the COMPLETE event to process the code on completion.

  1. import com.distriqt.gmaps.kml.utils.*;
  2.  
  3. var kmlLoader:KmlLoader = new KmlLoader();
  4. kmlLoader.addEventListener( Event.COMPLETE, kmlLoader_completeHandler );
  5. kmlLoader.load( "your-kml-file-location.kml" );

Once the loading is complete you'll have to re-curse through the object list in the loader, adding the objects to your map. Note the "map" variable in the below should be your google map instance.

  1. function kmlLoader_completeHandler( _event:Event ):void
  2. {
  3. for each (var _object:KmlDisplayObject in KmlLoader(_event.currentTarget).objects)
  4. addObject( _object );
  5. }
  6. function addObject( _object:KmlDisplayObject ):void
  7. {
  8. // It may just be a container with child elements
  9. // so check if there is an overlay
  10. if (_object.overlay != null)
  11. {
  12. // Here you can add the kml object to your map
  13. map.addOverlay( _object.overlay );
  14. }
  15. // Add the children
  16. for each (var _child:KmlDisplayObject in _object.children)
  17. addObject( _child );
  18. }

Let us know if you find it useful.

Published by

Michael

http://michaelarchbold.com

9 thoughts on “Simple KML Loader”

    1. Sure! A kml file is simply an xml file used to communicate geographic information. Mainly this can be used to draw lines and put placemarks on your map. For example, the following kml contains a polygon loop of 5 points:

      
      <?xml version="1.0" encoding="UTF-8"?>
      <kml xmlns="http://earth.google.com/kml/2.2">
        <Document>
          <Placemark>
            <name>New Object 1</name>
            <description>New Object 1</description>
            <Polygon>
              <outerBoundaryIs>
                <LinearRing>
                  <tessellate>1</tessellate>
                  <coordinates>145.08647918701172,-37.23688866855949,0
      		144.9862289428711,-37.36087973803272,0
      		145.11669158935547,-37.425797766419976,0
      		145.36731719970703,-37.23743533287159,0
      		145.36731719970703,-37.23743533287159,0</coordinates>
                </LinearRing>
              </outerBoundaryIs>
            </Polygon>
          </Placemark>
        </Document>
      </kml>
      
      

      For more information you can find the reference here:
      http://code.google.com/apis/kml/documentation/kmlreference.html

    1. You can load multiple files by two methods, either using an instance of KmlLoader for each file or using a single instance and loading the files in series, so once one load is complete load the next.

      Internally the KmlLoader uses a URLLoader to load the file, so once the KmlLoader fires the complete event, you will be able to call load(_file) again to load another file into the same KmlLoader instance. The features from the two files will be combined into the same KmlLoader instance and can be added to the map once you’ve loaded all of your files. I haven’t tested many of the styles with this approach yet so you may have some unexpected results if styles are named the same in the two files.

      Take a look at the SimpleKmlLoader post as well, there’s an example in the svn linked from there.

  1. Hi I am trying to use your code to load a KML file but without success.

    Can I sxend you the KML vuia email.

    Thanks
    Victoria Australia

Leave a Reply

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