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

LauraTeisl · ‎04-30-2014

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>

LauraTeisl · ‎05-01-2014

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