topic How to add an attribute pop up to web app with multiple layers javascript in ArcGIS JavaScript Maps SDK Questions

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

JohnnyHarley — Sun, 21 Apr 2019 02:53:34 GMT

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>
<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>Checkbox</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #leftPane {
      width: 30%;
    }

    #pane1 {
      border: solid #97DCF2 1px;
    }
    #header{
      border: solid #C0C0C0 2px;
      background-color:#C0C0C0
    }
    #HomeButton {
      position: absolute;
      top: 98px;
      left: 26px;
      z-index: 50;
    }
    #legendPane {
      border: solid #97DCF2 1px;
    }
</style>

<script src="http://js.arcgis.com/3.28/"></script>
<script>

    var map;
    require([
            "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
    ) {
      parser.parse();
      //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({
        map:map
      }, "HomeButton");
      home.startup();
      //Add Feature Layers
map.on("load", initOperationalLayer);
function initOperationalLayer() {
   var infoTemplate = new InfoTemplate();
      var cities = new FeatureLayer(
          "http://gis.nwmissouri.edu/msgis642/rest/services/Harley/MEANAGE/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
    infoTemplate: infoTemplate
      });
      var rivers = new FeatureLayer(
          "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
      });
      var states = new FeatureLayer(
          "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {
          mode: FeatureLayer.MODE_ONDEMAND,
          opacity: 0.5,
          outFields: ["*"]
      });

            //add the legend
      map.on("layers-add-result", function (evt) {
          var layerInfo = array.map(evt.layers, function (layer,
          index) {
              return {
                  layer: layer.layer,
                  title: layer.layer.name
              };
          });
          if (layerInfo.length > 0) {
              var legendDijit = new Legend({
                  map: map,
                  layerInfos: layerInfo
              }, "legendDiv");
              legendDijit.startup();
          }
                //add check boxes
          array.forEach(layerInfo,

          function (layer) {
              var layerName = layer.title;
              if(layerName != 'AGEMEANTRACT'){
              var checkBox = new CheckBox({
                  name: "checkBox" + layer.layer.id,
                  value: layer.layer.id,
                  checked: layer.layer.visible,
                  onChange: function (evt) {
                      var clayer = map.getLayer(this.value);
                      clayer.setVisibility(!clayer.visible);
                      this.checked = clayer.visible;
                  }
              });
                    //add the check box and label to the TOC
              domConstruct.place(checkBox.domNode, "layers",
                  "after");
              var checkLabel = domConstruct.create('label', {
                  'for': checkBox.name,
                  innerHTML: layerName
              }, checkBox.domNode, "after");
              domConstruct.place("<br />", checkLabel,
                  "after");
           }
          });
      });
      map.addLayers([states, rivers, cities]);
      //Create the Basemap
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error: ", msg);

        });
    });
</script>

</head>
<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>
<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>
      <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>
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:false">
        <div id="legendDiv"></div>
      </div>
    </div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
<div id="HomeButton"></div>

</div>

</div>
</body>

</html>

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

KenBuja — Sat, 11 Dec 2021 09:45:08 GMT

The big problem was your function arguments did not match the order that the modules were called in the require.

This code works (and is centered on Kansas City)

<!DOCTYPE html>
<html>
<head>
  <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">
  <title>Checkbox</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/nihilo/nihilo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
  <link rel="stylesheet" href="css/layout.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #leftPane {
      width: 30%;
    }

    #pane1 {
      border: solid #97DCF2 1px;
    }

    #header {
      border: solid #C0C0C0 2px;
      background-color: #C0C0C0
    }

    #HomeButton {
      position: absolute;
      top: 98px;
      left: 26px;
      z-index: 50;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>

  <script src="https://js.arcgis.com/3.28/"></script>
  <script>
    var map;
    require([
      "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",
      "esri/InfoTemplate",
      "dojo/domReady!"
    ], function (
      parser, Map, HomeButton, FeatureLayer, on, dom, domConstruct,
      Legend, array, CheckBox, BasemapGallery, Geocoder,
      Graphic, SimpleMarkerSymbol, screenUtils, BorderContainer, ContentPane, AccordionContainer,
      InfoTemplate
    ) {
        parser.parse();
        //Create the map
        var map = new Map("map", {
          center: [-94.7, 39],
          zoom: 10,
          basemap: "topo"
        });
        //Add a home button
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();
        //Add Feature Layers
        map.on("load", initOperationalLayer);
        function initOperationalLayer() {
          var infoTemplate = new InfoTemplate();
          var cities = new FeatureLayer(
            "https://gis.nwmissouri.edu/msgis642/rest/services/Harley/MEANAGE/MapServer/0", {
              mode: FeatureLayer.MODE_ONDEMAND,
              outFields: ["*"],
              infoTemplate: infoTemplate
            });
          var rivers = new FeatureLayer(
            "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {
              mode: FeatureLayer.MODE_ONDEMAND,
              outFields: ["*"]
            });
          var states = new FeatureLayer(
            "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {
              mode: FeatureLayer.MODE_ONDEMAND,
              opacity: 0.5,
              outFields: ["*"]
            });
          //add the legend
          map.on("layers-add-result", function (evt) {
            var layerInfo = array.map(evt.layers, function (layer,
              index) {
              return {
                layer: layer.layer,
                title: layer.layer.name
              };
            });
            if (layerInfo.length > 0) {
              var legendDijit = new Legend({
                map: map,
                layerInfos: layerInfo
              }, "legendDiv");
              legendDijit.startup();
            }
            //add check boxes
            array.forEach(layerInfo,
              function (layer) {
                var layerName = layer.title;
                if (layerName != 'AGEMEANTRACT') {
                  var checkBox = new CheckBox({
                    name: "checkBox" + layer.layer.id,
                    value: layer.layer.id,
                    checked: layer.layer.visible,
                    onChange: function (evt) {
                      var clayer = map.getLayer(this.value);
                      clayer.setVisibility(!clayer.visible);
                      this.checked = clayer.visible;
                    }
                  });
                  //add the check box and label to the TOC
                  domConstruct.place(checkBox.domNode, "layers",
                    "after");
                  var checkLabel = domConstruct.create('label', {
                    'for': checkBox.name,
                    innerHTML: layerName
                  }, checkBox.domNode, "after");
                  domConstruct.place("<br />", checkLabel,
                    "after");
                }
              });
          });
          map.addLayers([states, rivers, cities]);
          //Create the Basemap
          var basemapGallery = new BasemapGallery({
            showArcGISBasemaps: true,
            map: map
          }, "basemapGallery");
          basemapGallery.startup();
          basemapGallery.on("error", function (msg) {
            console.log("basemap gallery error:  ", msg);

          });
        }
      });
  </script>
</head>
<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>
    <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>
        <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>
        <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:false">
          <div id="legendDiv"></div>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
      <div id="HomeButton"></div>

    </div>
  </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍