Web page with legend and popups not working

RuthCostley4 · ‎01-27-2017

Hi!

I'm creating a web map with Javascript 3.19 with the legend widget and popups. I can get the Legend to work with my data, but when I add the code for the pop ups the map and legend disappear. Am I missing something?

<script>
  var map;
  require([
    "esri/map",  "esri/dijit/Legend", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/InfoTemplate", "esri/layers/FeatureLayer",
    "dojo/_base/array", "dojo/parser",
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
    "dijit/layout/AccordionContainer", "dojo/domReady!"
  ], function(
    Map,  Legend, Popup, PopupTemplate, InfoTemplate, FeatureLayer,
    arrayUtils, parser
  ) {
    parser.parse();

    map = new Map("map", {
      basemap:"satellite",
      center: [-98.157, 31.029],
      zoom: 8,
        infoWindow: Popup
    });

    var template = new PopupTemplate({
          title: "{UNITNAME}"
      });

RobertScheitlin__GISP · ‎01-27-2017

Ruth,

It is hard to know with just this portion of your code but from that code I can see that you are trying to set the maps infoWindow to "popup" which has not be defined or created yet which results in the infoWindow being set to null.

RuthCostley4 · ‎01-27-2017

Hi Robert, Thanks again for your help! I added the popup, but still no map...

See.

<!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>Map with legend</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">

  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
    /* Change color of icons to match bar chart and selection symbol */
    .esriPopup.dark div.titleButton,
    .esriPopup.dark div.titlePane .title,
    .esriPopup.dark div.actionsPane .action {
      color: #46d9f0;
    }
    /* Additional customizations */
    .esriPopup.dark .esriPopupWrapper {
      border: none;
    }
    .esriPopup .contentPane {
      text-align: center;
    }
    .esriViewPopup .gallery {
      margin: 0 auto;
    }
  </style>

  <script src="https://js.arcgis.com/3.19/"></script>
  <script>
    var map;
    require([
      "esri/map",  "esri/dijit/Legend", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer",
      "dojo/_base/array", "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map,  Legend, Popup, PopupTemplate, FeatureLayer,
      arrayUtils, parser
    ) {
     parser.parse();

      var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));
        //Add the dark theme which is customized further in the <style> tag at the top of this page
        domClass.add(popup.domNode, "dark");


      map = new Map("map", {
        basemap:"satellite",
        center: [-98.157, 31.029],
        zoom: 8,
       infoWindow: Popup
      });

      var template = new PopupTemplate({
            title: "{UNITNAME}"
        });

      var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer");
        map.addLayer(layer);


      var rivers = new FeatureLayer("https://arcgis01.blueprints.corp:6443/arcgis/rest/services/I14constraints2/I14_constraints_web/MapSe...", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
          infoTemplate: template
      });
      var waterbodies = new FeatureLayer("https://arcgis01.blueprints.corp:6443/arcgis/rest/services/I14constraints2/I14_constraints_web/MapSe...", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
          infoTemplate:template
      });

      //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.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();
        }
      });

      map.addLayers([waterbodies, rivers]);
    });
  </script>
</head>

<body class="claro">
<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="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Help'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
</div>
</body>

</html>

thejuskambi · ‎01-27-2017

If you look at the console there is an error "ReferenceError: fill is not defined". While defining the popup, a variable fill is used which is not defined.