Display feature attributes on infowindow

Question

I am trying to show an infowindow with feature attrebutes at onclick. I have written some following code, after debugging this code infowindow is not displaying at the onclick mappoint. Please suggest me how to get the infowondow at correct location with respective feature attributes.

My Simple Map html, body, #map { height: 100%; margin: 0; padding: 0; }

</style>
<script src="http://js.arcgis.com/3.17/"></script>
<script>
    var map;
    require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/InfoTemplate", "esri/Color"], function (Map, ArcGISDynamicMapServiceLayer, IdentifyTask, IdentifyParameters, SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, Color) {
        map = new Map("map", {
            basemap: "streets",
            center: [-90.45, 37.75],
            zoom: 5
        });
        var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
        map.addLayer(layer);

        map.on("click", doIdentify);

        var identifyTask = new IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

        var identifyParams = new IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0, 2];
        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
        identifyParams.width = map.width;
        identifyParams.height = map.height;

        var infoTemplate = new InfoTemplate("${Title: CITY_NAME}", "Name : ${CITY_NAME}<br /> State : ${STATE_NAME}<br />Population : ${POP1990}");

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


        function doIdentify(event) {
            var mappoint = event.mapPoint;
            map.graphics.clear();
            identifyParams.geometry = event.mapPoint;
            identifyParams.mapExtent = map.extent;
            identifyTask.execute(identifyParams, addToMap);
        }
        function addToMap(results) {

            for (var i = 0, il = results.length; i < il; i++) {
                var graphic = results[i].feature;
                graphic.setSymbol(symbol);
                map.graphics.add(graphic);

                map.infoWindow.show();
            }

            //map.infoWindow.setTitle("State Datails");
            //map.infoWindow.setContent("State Datails");

        }
    });

</script>

Contenet Panel

Answer 1

It is appearing but it doesn't know where to put it, if you look closely it appears in the top left corner.

I set the "map.infoWindow.show(identifyParams.geometry)" to set it at your map click / query geometry.

I also uncommented the setTitle and setContent.

<script>
var map;
require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/InfoTemplate", "esri/Color"], function (Map, ArcGISDynamicMapServiceLayer, IdentifyTask, IdentifyParameters, SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, Color) {
    map = new Map("map", {
        basemap: "streets",
        center: [-90.45, 37.75],
        zoom: 5
    });
    var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer",{infoWindow: infoTemplate});
    map.addLayer(layer);

    map.on("click", doIdentify);

    var identifyTask = new IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

    var identifyParams = new IdentifyParameters();
    identifyParams.tolerance = 3;
    identifyParams.returnGeometry = true;
    identifyParams.layerIds = [0, 2];
    identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
    identifyParams.width = map.width;
    identifyParams.height = map.height;

    var infoTemplate = new InfoTemplate("${Title: CITY_NAME}", "Name : ${CITY_NAME}<br /> State : ${STATE_NAME}<br />Population : ${POP1990}");

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


    function doIdentify(event) {
        var mappoint = event.mapPoint;
        map.graphics.clear();
        identifyParams.geometry = event.mapPoint;
        identifyParams.mapExtent = map.extent;
        identifyTask.execute(identifyParams, addToMap);
    }
    function addToMap(results) {

        for (var i = 0, il = results.length; i < il; i++) {
            var graphic = results[i].feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            map.infoWindow.show(identifyParams.geometry);

        }

        map.infoWindow.setTitle("State Datails");
        map.infoWindow.setContent("State Datails");


    }
});