abg_gis_intern

(Beginner) Can I add more than one query task to an  HTML page?

Discussion created by abg_gis_intern on Jan 23, 2013
Latest reply on Apr 25, 2014 by schlot
Hello all,
My first time posting to this forum. I usually only spend time reading posts!
Many of the API instructions only give information on how to include only one event or function in a web application. However, as most of you know, many tools are needed to make the web application work like we want. Can multiple tasks be performed in one application?

If so, where in the page do I include another querytask on another layer and the infotemplate?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>      
    <title>Toolbars,Dynamic Layers, and Hotmap</title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/tundra/tundra.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }
    </style>
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("esri.tasks.query");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");

     var map, navToolbar;
     var queryTask, query
      function init() {
       esriConfig.defaults.map.sliderLabel = null;
       map = new esri.Map("mapDiv", {
        extent:new esri.geometry.Extent({"xmin":2232299.5063740895,"ymin":1377942.1844668062,"xmax":2235024.5063740895,"ymax":1379686.6289112507,"spatialReference":{"wkid":2240}})
           });
           dojo.connect(map, "onClick", doQuery);
        //create tiled map layer
         var dynamic = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/HotlineJPEG/MapServer"); 
        //add layer to map
        map.addLayer(dynamic);
        queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/HotlineJPEG/MapServer/4");
           dojo.connect(queryTask, "onComplete", addToMap);          
           query = new esri.tasks.Query();
           query.returnGeometry = true;
           query.outFields = ["*"];
          
  
         navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
      }
       function doQuery(evt) {
         
           map.graphics.clear();
          
           query.geometry = evt.mapPoint;
           queryTask.execute(query);
           }
  function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
            
      }
      
     
           function addToMap(featureSet) {
           //create variables for: featureSet.features, symbol, infoTemplate
           var features = featureSet.features;
           var symbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.25]));
           var infoTemplate = new esri.InfoTemplate("${GardenName}", "${*}");

           //iterate features (use dojo.forEach) and add to map's graphics layer
           dojo.forEach(features, function(feature) {
              map.graphics.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
           });
      }  
      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="tundra">
   <div id="navToolbar" dojoType="dijit.Toolbar">
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
      <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>
    </div> 
    <div id="mapDiv"  style="width:1005px; height:509px; border:1px solid #000;"></div>
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
     <span id="messages"></span>
  </body>
</html>

Thanks in advance!

Outcomes