topic Re: Combining two samples (Legend and Info Window Lite) and not working. in ArcGIS JavaScript Maps SDK Questions

Combining two samples (Legend and Info Window Lite) and not working.

LauraTeisl — Wed, 30 Apr 2014 10:26:33 GMT

From the Samples listed on the ArcGIS API for JavaScript page, I am attempting to combine the Legend (Maps > Legend) and Info Window Lite (Popups and Info Windows > Info Window Lite). Basically, I can't get it to work, probably due to the fact that I am a JavaScript newbie. Any help would be appreciated!

Code:

<!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="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

<style>
    html, body {
      font-family: Tahoma, Geneva, sans-serif;
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 20%;
    }

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

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

<script>

    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser", "dojo/dom-construct", "esri/dijit/InfoWindowLite",
      "esri/InfoTemplate",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser, InfoWindowLite,
      InfoTemplate, domConstruct
    ) {
      parser.parse();

      var map = new Map("map", {
        basemap:"topo",
        center: [-69, 45.5],
        zoom: 7
      });

      var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

      var template = new InfoTemplate();
        template.setTitle("<b>${org_name} - ${address}</b>");
        template.setContent("${org_name} is in ${state}");

      var SpecialtyFoodProducers = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
        outFields: ["org_name" , "address" , "state"]
      });

      //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(SpecialtyFoodProducers);

      map.infoWindow.resize(200, 75);
    });
</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:'Tools'">
        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>

Re: Combining two samples (Legend and Info Window Lite) and not working.

williamcarr — Sun, 12 Dec 2021 00:11:19 GMT

Your "require" and functions have to be in the same order.

require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
"dojo/_base/array", "dojo/parser", "dojo/dom-construct", "esri/dijit/InfoWindowLite",
"esri/InfoTemplate", 
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
"dijit/layout/AccordionContainer", "dojo/domReady!"
], function(
Map, FeatureLayer, Legend,
arrayUtils, parser, domConstruct, InfoWindowLite,
InfoTemplate
) {
parser.parse();

Re: Combining two samples (Legend and Info Window Lite) and not working.

JakeSkinner — Wed, 30 Apr 2014 10:47:05 GMT

Also, when using map.addLayers you need to pass an array:

map.addLayers([SpecialtyFoodProducers]);

Re: Combining two samples (Legend and Info Window Lite) and not working.

LauraTeisl — Wed, 30 Apr 2014 10:47:36 GMT

Thank you. I will try that.

Re: Combining two samples (Legend and Info Window Lite) and not working.

LauraTeisl — Wed, 30 Apr 2014 13:28:06 GMT

What you both suggested worked! Thank you.

I would like to build on the code by adding two more services. Now all three services correctly display in the legend.

But I have an issue with the popups. Each service has the same three fields: org_name, address and state. The popup works correctly only for the first service listed: SpecialtyFoodProducers. But not for the remaining two. The popups "pop up," but the fields are not listed.

Any ideas? Again, many thanks.

code:

<!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="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

<style>
    html, body {
   font-family: Tahoma, Geneva, sans-serif;
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 20%;
    }

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

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

<script>

    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser", "esri/dijit/InfoWindowLite",
      "esri/InfoTemplate", "dojo/dom-construct",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser, InfoWindowLite,
      InfoTemplate, domConstruct
    ) {
      parser.parse();

      var map = new Map("map", {
        basemap:"topo",
        center: [-69, 45.5],
        zoom: 7
      });

   var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

      var template = new InfoTemplate();
        template.setTitle("<b>${org_name} - ${address}</b>");
        template.setContent("${org_name} is in ${state}");

      var SpecialtyFoodProducers = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
        outFields: ["org_name" , "address" , "state"]
      });

   var Distributors = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/ProcessorsGIS428/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        infoTemplate:template,
        outFields: ["org_name" , "address" , "state"]
      });

   var BuyingClubs = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/BuyingClubsGIS428/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        infoTemplate:template,
        outFields: ["org_name" , "address" , "state"]
      });

      //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([SpecialtyFoodProducers, Distributors, BuyingClubs]);

   map.infoWindow.resize(200, 75);
    });
</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:'Tools'">
        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>

Re: Combining two samples (Legend and Info Window Lite) and not working.

JakeSkinner — Sun, 12 Dec 2021 00:11:21 GMT

The fields in the Processors service are all capitalized. So, you will need to create another template:

var template2 = new InfoTemplate();
template2.setTitle("<b>${ORG_NAME} - ${ADDRESS}</b>");
template2.setContent("${ORG_NAME} is in ${STATE}");

Set the infoTemplate to this new template, and reference the fields as all caps in the 'outfields' parameter:

var Distributors = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/ProcessorsGIS428/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template2,
          outFields: ["ORG_NAME" , "ADDRESS" , "STATE"]
        });

Re: Combining two samples (Legend and Info Window Lite) and not working.

williamcarr — Wed, 30 Apr 2014 13:47:29 GMT

I think I got it. Your field names in you additional services need to be case correct.. In your Processors layer the fields are capitalized. Try fixing those and let me know how it goes.

Re: Combining two samples (Legend and Info Window Lite) and not working.

LauraTeisl — Wed, 30 Apr 2014 14:16:57 GMT

That did the trick! This is fun! Well, it is fun thanks to your help.

Re: Combining two samples (Legend and Info Window Lite) and not working.

LauraTeisl — Wed, 30 Apr 2014 14:57:02 GMT

I have a popup display question.

Let's assume that I have no data in one of the "address" fields in the service. My popup will then have a space where that field data would have displayed. Is there code that will delete the space if there is no data in the field so the popup will be more nicely displayed?

Re: Combining two samples (Legend and Info Window Lite) and not working.

MichaelVolz — Wed, 30 Apr 2014 16:36:11 GMT

Does your sample contain a table of contents to control layer visibility besides scale dependencies set in the mxd that is the source of the feature layer?

Re: Combining two samples (Legend and Info Window Lite) and not working.

LauraTeisl — Thu, 01 May 2014 10:09:38 GMT

Thank you for replying. I will check and get back to you.