Community
Select to view content in your preferred language

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

1668
10
04-30-2014 03:26 AM
LauraTeisl
by
Emerging Contributor
‎04-30-2014 03:26 AM
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">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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>
0 Kudos
10 Replies
williamcarr
by
Frequent Contributor
‎04-30-2014 03:43 AM
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();
0 Kudos
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎04-30-2014 03:47 AM
Also, when using map.addLayers you need to pass an array:

map.addLayers([SpecialtyFoodProducers]);
0 Kudos
LauraTeisl
by
Emerging Contributor
‎04-30-2014 03:47 AM
Thank you.  I will try that.
0 Kudos
LauraTeisl
by
Emerging Contributor
‎04-30-2014 06:28 AM
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">
  <!--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>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">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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>
0 Kudos
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎04-30-2014 06:44 AM
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"]
        });
0 Kudos
williamcarr
by
Frequent Contributor
‎04-30-2014 06:47 AM
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.
0 Kudos
LauraTeisl
by
Emerging Contributor
‎04-30-2014 07:16 AM
That did the trick!  This is fun!  Well, it is fun thanks to your help.
0 Kudos
LauraTeisl
by
Emerging Contributor
‎04-30-2014 07:57 AM
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?
0 Kudos
MichaelVolz
by
Esteemed Contributor
‎04-30-2014 09:36 AM
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?
0 Kudos