laura.teisl

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

Discussion created by laura.teisl on Apr 30, 2014
Latest reply on May 1, 2014 by laura.teisl
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>

Outcomes