topic Re: Looking for an example: Display query-results in sidebar in ArcGIS JavaScript Maps SDK Questions

Looking for an example: Display query-results in sidebar

JensOldeland — Wed, 19 May 2010 09:40:48 GMT

Hello,

I am desperately looking for a nice example that displays a query-result as a table (or as a chart!) in a sidebar. I will try looking for some and will post them here but if anyone is aware of such thing, please post here as well.

Needed Config: AGS-Javascript + GoogleMapsAPI + Dojo, nojQuery 😉 (not yet)

thanks!

PS: I LOVE FIREBUG !

Re: Looking for an example: Display query-results in sidebar

AlessioDi_Lorenzo — Sat, 11 Dec 2021 10:00:50 GMT

Hi jens,

try this

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.enableScrollWheelZoom();

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

        // Query Task
        qtask = new esri.arcgis.gmaps.QueryTask(mapServiceURL+layerID);

        // You can execute a task and listen for the complete event or use the callback to get the results
        GEvent.addListener(qtask, "executecomplete", function() {
          //console.debug("'query task complete' event fired!!!");
        });

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

function executeQuery() {

        // clear map overlays and event listeners using MapExtension removeFromMap
        gmap.clearOverlays();

        // set query parameters
        query.returnGeometry = true;
 query.outFields =["ATTR1","ATTR2","ATTR3"];

        // execute query task
        qtask.execute(query, false, mycallback);
}

function mycallback(fset) {
 var features = fset.features, feature, attributes, i;
 var r = "<table id='resTable'><tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>"; 
        
  for (i = 0; i < features.length; i++) { // process each city in the feature set
          feature = features;
          attributes = features.attributes;
   gOverlays = mapExtension.addToMap(feature);

   r = r + "<tr><td>" + attributes["ATTR1"] + "</td>"
         +          "<td>" + attributes["ATTR2"] + "</td>" 
         +   "<td>" + attributes["ATTR3"] + "</td>"
         + "</tr>"; 
  }

 r = r + "</table>";

        //insert the table in the div with id=results (this could be your side panel)
        document.getElementById('results').innerHTML = r;

      }

Then you can style the table with css.
In alternative, you may change the code and use the attribute array (r) dojo datastore item and populate a dojogrid instead of an html table

Re: Looking for an example: Display query-results in sidebar

JensOldeland — Wed, 19 May 2010 12:21:57 GMT

Perfect !

The table is there! at the moment only with one row, but I´ll get that fixed soon.

Many thanks!

Re: Looking for an example: Display query-results in sidebar

JensOldeland — Wed, 19 May 2010 16:09:07 GMT

Hi Alessio,

I modified your script and was then even able to place my barcharts into the sidebar! Amazing!

so many thanks

Re: Looking for an example: Display query-results in sidebar

AlessioDi_Lorenzo — Wed, 19 May 2010 17:39:10 GMT

I'm happy it was helpful 😄

I'd like to see it in action on your application