title: popup window on web map
body: <p>i have displayed my map on web by using arcgis javascript api sample. in the sample it display a popup window but on my side it does not. now i want to add popup window. i want when user click on the different type of soil a popup window will open and display the attributes of the layers</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&gt;
      &lt;title&gt;Create web map from JSON&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"/&gt;
      &lt;link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css" /&gt;
      &lt;link rel="stylesheet" href="css/layout.css"/&gt;
  
      &lt;script src="https://js.arcgis.com/3.20/"&gt;&lt;/script&gt;
      &lt;script&gt;
        require([
          "dojo/parser",
          "dojo/ready",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/dom",
          "esri/map", 
          "esri/geometry/Extent",
          "esri/urlUtils",
          "esri/arcgis/utils",
          "esri/dijit/Legend",
          "esri/dijit/Scalebar",
          "dojo/domReady!"
        ], function(
          parser,
          ready,
          BorderContainer,
          ContentPane,
          dom,
          Map,
          Extent,
          urlUtils,
          arcgisUtils,
          Legend,
          Scalebar
        ) {
          ready(function(){
  
          parser.parse();
  
          var webmap = {};
          webmap.item = {
            "title":"Soil Map",
           "snippet": "This map shows the Soil types",
            "extent": [[73.94251383600005, 31.02571637300008],[74.05297753900004, 31.11529292900019]]
          };
  
          webmap.itemData = {
            "operationalLayers": [{
              "url": "http://localhost:6080/arcgis/rest/services/Soil_Maps/soil_map/MapServer",
              "visibility": true,
              "opacity": 0.75,
              "title": "Soil Survey Map",
              
            }],
            "baseMap": {
              "baseMapLayers": [{
                "opacity": 1,
                "visibility": true,
                "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
                },{
                "isReference": true,
                "opacity": 1,
                "visibility": true,
                "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
                }],
              "title": "World_Terrain_Base"
            },
            "version": "1.1"
          };
  
          dom.byId("title").innerHTML = webmap.item.title;
          dom.byId("subtitle").innerHTML = webmap.item.snippet;
  
          arcgisUtils.createMap(webmap,"map").then(function(response){
  
  
            var map = response.map;
  
  
  
            //add the scalebar 
            var scalebar = new Scalebar({
              map: map,
              scalebarUnit: "english"
            });
  
            //add the legend. Note that we use the utility method getLegendLayers to get 
            //the layers to display in the legend from the createMap response.
            var legendLayers = arcgisUtils.getLegendLayers(response); 
            var legendDijit = new Legend({
              map: map,
              layerInfos: legendLayers
            },"legend");
            legendDijit.startup();
  
  
          });
  
  
          });
  
        });
  
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;/head&gt;
  
    &lt;body class="claro"&gt;
      &lt;div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"&gt;
        &lt;div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"&gt;
          &lt;div id="title"&gt;&lt;/div&gt;
          &lt;div id="subtitle"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"&gt;&lt;/div&gt;
        &lt;div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" &gt;
          &lt;div id="legend"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>