Adding a KML/KML layer

MichaelKnapp

Hi there -

Is it possible to add a pure KML/KMZ file as an overlay onto a Javascript API map. We do not use ArcGIS Server, and would like to use the Javascript API (i.e. move away from the Google Maps API), but are having some trouble figuring out how to add a KML/KMZ layer to our API... maybe it's not possible?

Or perhaps I'm just missing the obvious.

Thanks!

Mike Knapp

timgogl

loading xml into javascript shouldnt be too difficult.
this block of code i used on a project to load xml file into js. i think i found this file in a discussion on the google maps forums, but it doesnt appear to use any of the googlemaps api.

/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
 try {
   if (typeof ActiveXObject != 'undefined') {
     return new ActiveXObject('Microsoft.XMLHTTP');
   } else if (window["XMLHttpRequest"]) {
     return new XMLHttpRequest();
   }
 } catch (e) {
   changeStatus(e);
 }
 return null;
};

/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
 var status = -1;
 var request = createXmlHttpRequest();
 if (!request) {
   return false;
 }

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     try {
       status = request.status;
     } catch (e) {
       // Usually indicates request timed out in FF.
     }
     if (status == 200) {
       callback(request.responseXML, request.status);
       request.onreadystatechange = function() {};
     }
   }
 }
 request.open('GET', url, true);
 try {
   request.send(null);
 } catch (e) {
   changeStatus(e);
 }
};

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

/**
 * Appends a JavaScript file to the page.
 * @param {string} url
 */
function downloadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

here is the code i used in my app to download the xml file, and parse it into custom js classes:

 function grabxml(){
  downloadUrl("trails.kml",xmlParser); //function from the above js file
 }

 function xmlParser(xml){
  var oAsset={};
  var i=0;
  $j(xml).find("Placemark").each(function(){ //jquery 
   oAsset = new Asset();
   oAsset.setId($j(this).find('name').text());
   //oAsset.setStyle($j(this).find('styleUrl').text());
   oAsset.setUpCoordinates($j(this).find('coordinates').text());
   IR.addItem(oAsset);  
  });
  
  drawTrails();
 }

this 'xml' file was actually a kml file showing hiking trails in the state of oregon. the load was fairly quick, the parse wasnt even too bad, but my drawTrails function needs alot of work, it really became too slow to actually be of use on an external website.