AnsweredAssumed Answered

How to add an attribute pop up to web app with multiple layers javascript

Question asked by on Apr 20, 2019
Latest reply on Apr 22, 2019 by kenbuja
Hi I am trying to add a attribute pop up when clicking on a census tract for my "cities" feature layer. I obviously haven't added any attributes to the infotemplate yet but whenever I run this code, there is no map that shows up, I take it out, and my map runs just fine. I just want the infotemplate for the cities feature layer. Thank you!
<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--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">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="css/layout.css">
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    #leftPane {
      width: 30%;
    #pane1 {
      border: solid #97DCF2 1px;
      border: solid #C0C0C0 2px;
    #HomeButton {
      position: absolute;
      top: 98px;
      left: 26px;
      z-index: 50;
    #legendPane {
      border: solid #97DCF2 1px;
  <script src=""></script>
    var map;
            "dojo/parser", "esri/map", "esri/dijit/HomeButton", "esri/layers/FeatureLayer", "dojo/on", "dojo/dom", "dojo/dom-construct", "esri/dijit/Legend", "dojo/_base/array", "dijit/form/CheckBox",  "esri/dijit/BasemapGallery", "esri/dijit/Geocoder",
            "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/screenUtils", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      parser, InfoTemplate, Map, HomeButton, FeatureLayer, on, dom, domConstruct, Legend, array, CheckBox, BasemapGallery, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils, Color,  domConstract, BorderContainer, ContentPane, AccordionContainer
    ) {
      //Create the map
      var map = new Map("map", {
        center: [-80.734, 28.297],
        zoom: 10,
        basemap: "topo"
      //Add a home button
      var home = new HomeButton({
      }, "HomeButton");
      //Add Feature Layers
 map.on("load", initOperationalLayer);
 function initOperationalLayer() {
   var infoTemplate = new InfoTemplate();
      var cities = new FeatureLayer(
          "", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
    infoTemplate: infoTemplate
      var rivers = new FeatureLayer(
          "", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
      var states = new FeatureLayer(
          "", {
          mode: FeatureLayer.MODE_ONDEMAND,
          opacity: 0.5,
          outFields: ["*"]
            //add the legend
      map.on("layers-add-result", function (evt) {
          var layerInfo =, function (layer,
          index) {
              return {
                  layer: layer.layer,
          if (layerInfo.length > 0) {
              var legendDijit = new Legend({
                  map: map,
                  layerInfos: layerInfo
              }, "legendDiv");
                //add check boxes
          function (layer) {
              var layerName = layer.title;
              if(layerName != 'AGEMEANTRACT'){
              var checkBox = new CheckBox({
                  name: "checkBox" +,
                  checked: layer.layer.visible,
                  onChange: function (evt) {
                      var clayer = map.getLayer(this.value);
                      this.checked = clayer.visible;
                    //add the check box and label to the TOC
    , "layers",
              var checkLabel = domConstruct.create('label', {
                  innerHTML: layerName
              }, checkBox.domNode, "after");
    "<br />", checkLabel,
      map.addLayers([states, rivers, cities]);
      //Create the Basemap
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
<body class="nihilo">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
  <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
       <strong>Layer Checkbox</strong>
  <div id="leftPane"       data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="pane1" data-dojo-props="title:'Base Maps', selected:false">
        <div id="basemapGallery"></div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Layers', selected:true">
          <span style="padding: 10px 0;">Click to toggle each layer on or off</span>
          <div id="layers"></div>
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:false">
        <div id="legendDiv"></div>
  <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
  <div id="HomeButton"></div>