1

I am trying to display the query results in an Infowindow with a click on my map. But the infowindow displaying on a second click not with a firstclick on map.

Can you run the following code and suggest where I have to modify the code?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
      var map;

      require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, Color) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-100.275, 42.573], // longitude, latitude
          zoom: 5
        });

        var dynamicMapService = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer")
        map.addLayer(dynamicMapService);

        var queryTask = new QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1");
        var query = new Query();
        query.returnGeometry = true;
        query.outFields = ["*"];

        var infoTemplate = new InfoTemplate("${*}");

        var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))

        map.on("click", executeQueryTask);

        function executeQueryTask(evt){

        query.geometry = evt.mapPoint;      
        queryTask.execute(query, showResults);

        }
        function showResults(featureSet) {
          //remove all graphics on the maps graphics layer
          map.graphics.clear();

          //Performance enhancer - assign featureSet array to a single variable.
          var resultFeatures = featureSet.features;

          //Loop through each feature returned
          for (var i=0, il=resultFeatures.length; i<il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = resultFeatures[i];
            graphic.setSymbol(symbol);

            //Set the infoTemplate.
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
          }
        }
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
1

map.infoWindow actually is Popup. if you check link , you see show function. you can use show function in your code.

https://developers.arcgis.com/javascript/3/jsapi/popup-amd.html#show

for example : change showResults function

function showResults(featureSet) {

    var features = featureSet.features.map(function(feature){return 
        feature.setInfoTemplate(infoTemplate)
    })
    map.infoWindow.setFeatures(features);
    features.length>0 ? map.infoWindow.show(features[0].geometry.getCentroid()) : console.log("not found");


}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.