Trying to get InfoWindow sample to work

SaraKidd · ‎03-24-2011

Hello all - I hope someone can take a moment to help me out. All I want to do is click on my points and show an InfoWindow. I used this example http://help.arcgis.com/en/webapi/javascript/arcgis/demos/query/query_showinfowindow.html

I replaced the layers with my own and can see my points on top of the background layer. I also altered the fields in the query. When I click on the points, nothing happens. Here is my code:

<!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" />

    <!--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>QueryTask with geometry, queries with multiple results at the same location are displayed in an InfoWindow</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>

    <script type="text/javascript" language="Javascript">

      dojo.require("esri.map");

      dojo.require("esri.tasks.query");



      var map, queryTask, query;

      var featureSet;



      function init() {

        var startExtent = new esri.geometry.Extent({"xmin":-8625438.488209609,"ymin":4369606.075512551,"xmax":-8441989.620325275,"ymax":4553054.943396885,"spatialReference":{"wkid":102100}});

        //create map

        map = new esri.Map("mapDiv", {extent: startExtent});



        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

        map.addLayer(tiledLayer);
   
        
         //Add housing portal sites
        var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/ArcGIS/rest/services/IntranetServices/Portal_SP/MapServer");
         map.addLayer(dynamicLayer);



        //Listen for click event on the map, when the user clicks on the map call executeQueryTask function.

        dojo.connect(map, "onClick", executeQueryTask);



        //Listent for infoWindow onHide event

        dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});





        //build query task

        queryTask = new esri.tasks.QueryTask("http://localhost/ArcGIS/rest/services/IntranetServices/Portal_SP/MapServer/0");



        //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.

        //dojo.connect(queryTask, "onComplete", showResults);



        //build query filter

        query = new esri.tasks.Query();

        query.outSpatialReference = {"wkid":102100};

        query.returnGeometry = true;

        query.outFields = ["Organizati", "ProgramTyp"];
        
        
        
      function executeQueryTask(evt) {

        map.infoWindow.hide();

        map.graphics.clear();

        featureSet = null;



        //onClick event returns the evt point where the user clicked on the map.

        //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).

        //set query geometry = to evt.mapPoint Geometry

        query.geometry = evt.mapPoint;



        //Execute task and call showResults on completion

        queryTask.execute(query, function(fset) {

          if (fset.features.length === 1) {

            showFeature(fset.features[0],evt);

          } else if (fset.features.length !== 0) {

            showFeatureSet(fset,evt);

          }

        });

      }
        

      }


      function showFeature(feature,evt) {

        map.graphics.clear();



        //set symbol

        //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));

        //feature.setSymbol(symbol);



        //construct infowindow title and content

        var attr = feature.attributes;

        var title = attr.FIELD_NAME;

        var content = "Organization : " + attr.Organizati

                    + "<br />Program Type : " + attr.ProgramTyp;

        map.graphics.add(feature);



        map.infoWindow.setTitle(title);

        map.infoWindow.setContent(content);



        (evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;

      }



      function showFeatureSet(fset,evt) {

        //remove all graphics on the maps graphics layer

        map.graphics.clear();

        var screenPoint = evt.screenPoint;



        featureSet = fset;



        var numFeatures = featureSet.features.length;



        //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the infowindow.

        var title = "You have selected " + numFeatures + " fields.";

        var content = "Please select desired field from the list below.<br />";



        for (var i=0; i<numFeatures; i++) {

          var graphic = featureSet.features;

          content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";

        }



        map.infoWindow.setTitle(title);

        map.infoWindow.setContent(content);

        map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

      }



      dojo.addOnLoad(init);

    </script>

  </head>

  <body class="claro">

    Housing Portal Sample 

    <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>

  </body>

</html>

I'm obviously new to this but I can't figure out how only swapping out the data layers in the sample results in it not working. Does it have something to do with different geometry types? I commented out the code about the symbol since I have points, not polygons.

Thanks!

JamesGonsoski · ‎03-24-2011

Sara,

I think I had the same problem with that sample and getting it to work with points rather than polygons. I think the trick was that it is easier to successfully query a feature polygon with a screen point rather a feature point with a screen point.

I recall I solved this by creating an extent around my screen point and then using that as the query geometry in the hope that a 'box' would intersect my feature point better than just a screen coordinate and it worked.

Rather than doing this in your code:

 //set query geometry = to evt.mapPoint Geometry
 query.geometry = evt.mapPoint;

Try this:

  var ext = new esri.geometry.Extent(evt.mapPoint.x - 100, evt.mapPoint.y - 100, evt.mapPoint.x + 100, evt.mapPoint.y + 100, globals.spatialRef);
  query.geometry = ext;

Bear in mind that I'm adding map units (which in my case were METERS) to create a 100 sq meter box around the screen point and using that to intersect.

SaraKidd · ‎03-25-2011

I made the change but unfortunately the window did not appear when I clicked on the point.

Thank you very much for taking the time to reply.

KellyHutchins · ‎03-25-2011

Sara,

If you are trying to display info windows for one layer in your map an easier solution might be to create a feature layer. When you create a new feature layer and add it to the map you can define an info template for that layer. Then when someone clicks on a feature in that layer the info window appears.

Here's an example showing how this works:

<!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" />
    <!--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>
      Street Trees
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
      .esriScalebar{padding: 20px 20px; }
      #map{ padding:0; }      
      

     
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Scalebar");
      dojo.require("esri.layers.FeatureLayer");
 
      
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -13627755,
          "ymin": 4548254,
          "xmax": -13626718,
          "ymax": 4548849,
          "spatialReference": {
            "wkid": 102100
          }
        });
        map = new esri.Map("map", {
          extent: initExtent
        });

        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        
        var template = new esri.InfoTemplate();
        template.setTitle("<b>${qAddress}</b>");
        template.setContent("${*}");

        
        //add the street trees to the map
        var featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/ArcGIS/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["*"]
        });

        map.addLayer(featureLayer);
     
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          var scalebar = new esri.dijit.Scalebar({
            map: map,
            attachTo: "top-right"
          });
          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }
     
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>

SaraKidd · ‎03-25-2011

Works great! Thank you!