Show results as KML

View live sample

Description

This example shows how to return query results as KML. KML is an XML-based format for representing features and attributes. It's commonly used in Google Maps and other geographic applications. Returning query results in KML preserves the symbology originally set by the map author.

To run this example, pan to an area of the map click Execute Query. All of the highway features in the map extent will be overlaid on the map as a GeoXML overlay (KML). You can click a road segment to display an info window with attributes.

Click Clear Map Overlays to remove the KML features. Optionally, you can navigate to a new area of the map and execute the query again.

The initialize function sets up the map, adding all of the necessary controls and specifying the coordinates and zoom level that the map should use when the page opens. This function also creates a new MapExtension that will help display the results.

To prepare for the query, the function creates a new QueryTask, a class specific to the ArcGIS JavaScript extension. The URL of the map layer to be queried is passed to the QueryTask constructor:
```
qtask = new esri.arcgis.gmaps.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Speciality/ESRI_StateCityHighway_USA/MapServer/0");
```
The URL in the constructor references the highway layer that will be queried. In this case, it's the layer with index number 0 in the ESRI_StateCityHighway_USA map service. To find the URLs for the layers you want to query in your own maps, use the Services Directory.
The executeQuery function runs when someone clicks the Execute Query button. This function gets the bounding box of the map, removes any existing overlays, and sets up the query conditions. It tells the query to return information from the LENGTH, TYPE, ADMN_CLASS, TOLL_RD fields. Finally, the function uses the following line to run the task, thereby executing the query:
```
qtask.execute(query, true, mycallback);
```
The three arguments represent 1) the query conditions, 2) whether to return a GGeoXML overlay (KML), and 3) a callback function that runs immediately after the query is executed.
The callback function mycallback adds the query results to the map, using the helper MapExtension class that was created in the initialize function.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug=true>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Query Task as GeoXml (Polyline)</title>

    <script src="http://maps.google.com/maps?file=api&v=2&key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.2" type="text/javascript" ></script>

    <script type="text/javascript">

      var gmap = null;
      var qtask = null;
      var query = null;
      var mapExtension = null;
      var gOverlays = null;

      function initialize() {
        // GMap construction
        gmap = new GMap2(document.getElementById('gmap'));
        gmap.addMapType(G_NORMAL_MAP);
        gmap.addMapType(G_SATELLITE_MAP);
        gmap.addControl(new GLargeMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.setCenter(new GLatLng(38, -96), 6);
        gmap.enableScrollWheelZoom();

        //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);

        // Query Task
        qtask = new esri.arcgis.gmaps.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/0");
        GEvent.addListener(qtask, "complete", function() {
          //console.debug("'query task complete' event fired!!!");
        });

        // Query
        query = new esri.arcgis.gmaps.Query();
      }

      function executeQuery() {
        var cent = gmap.getCenter();
        var bounds = gmap.getBounds();

        // clear map overlays
        //gmap.clearOverlays();
        mapExtension.removeFromMap(gOverlays);

        // set query parameters
        query.queryGeometry = bounds;
        query.returnGeometry = true;
        query.outFields = ["LENGTH", "TYPE", "ADMN_CLASS", "TOLL_RD"];

        // execute query task with asGeoXml option set to true
        //results will be returned from the server as kml
        qtask.execute(query, true, mycallback);
      }

      function mycallback(geoXml) {
        gOverlays = mapExtension.addToMap(geoXml);
      }

    </script>

  </head>

  <body onload="initialize();" onunload="GUnload();">
  <table width="100%" height="100%">
    <tr>
      <td align="center">

        <table>
          <tr align="left">
            <td>
              <input type="button" value="Execute Query" onclick="executeQuery();" /> 

              <input type="button" value="Clear Map Overlays" onclick="mapExtension.removeFromMap(gOverlays);" />
            </td>
          </tr>

          <tr align="left" valign="top">
            <td>
              <div id="gmap" style="width: 500px; height:500px;"></div>
            </td>
          </tr>
        </table>


      </td>
    </tr>
  </table>
  </body>
</html>