Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I've been told to write up a small site which displays data from our ArcGis server. As a first time user of the ArcGis Api I instantly ran into a serious problem.

I am creating a map with a datagrid below just like in this code sample. Afterwards I want to implement a legend on the right hand side, but the div-container stays empty and does not display a legend. Following the code sample for the stand alone legend it works just fine.

Besides this crucial problem, there is a minor question which popped up while trying to solve this issue:

I am using dojo.require() und require() alongside. Eliminating dojo.require() or require() results in js. errors in my code.

Please point me to my errors and tell me where I went wrong.

Thanky you in advance

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
  <style>
    html, body { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      overflow: hidden;
    }
    #container { 
      height: 100%; 
      visibility: hidden;
    }
    #bottomPane { height: 200px; }
    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }

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

  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.layers.FeatureLayer");
      // dojo's layout dijits and the parser to auto-create the dijits

      // bring in dgrid, esri and dojo modules
      // create the grid and the map
      // then parse the dijit layout dijits
      require(["dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "esri/map", "esri/layers/FeatureLayer", "dojo/_base/declare", "dojo/number", "dojo/parser", "dojo/domReady!"],
      function (Grid, Selection, Memory, Map, FeatureLayer, declare, dojoNum, parser) {
          // call the parser to create the dijit layout dijits
          parser.parse();

          // create the dgrid
          window.grid = new (declare([Grid, Selection]))({
              // use Infinity so that all data is available in the grid
              bufferRows: Infinity,
              columns: {
                  "id": "OBJECTID",
                  "hochwert": "HOCHWERT",
                  "schadennr": "SchadenNr",
                  "status": "Status"
              }
          }, "grid");
          // add a click listener on the ID column
          grid.on(".field-id:click", selectItem);

          window.map = new esri.Map("map", {
              basemap: "gray",
              center: [12.8, 51],
              zoom: 9
          });
          window.HWSUrl = "http://herellbedragons/ArcGIS/rest/services/hwstest/MapServer/2";
          window.outFields = ["OBJECTID", "something", "damagenr", "STATUS"];
          var fl = new FeatureLayer(window.HWSUrl, {
              id: "schaden",
              mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
              outFields: window.outFields
          });
          dojo.connect(fl, "onLoad", function (fl) {
              fl.maxScale = 0; // show the states layer at all scales
              fl.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
          });
          //add the legend



          dojo.connect(map, "onLoad", function (map) {
              // show the border container now that the dijits 
              // are rendered and the map has loaded
              dojo.style(dijit.byId("container").domNode, "visibility", "visible");
              populateGrid(Memory); // pass a reference to the MemoryStore constructor
          });



          //add the legend
          dojo.connect(map, 'onLayersAddResult', function (results) {
              var layerInfo = dojo.map(results, function (layer, index) {
                  return { layer: layer.layer, title: layer.layer.name };
              });
              if (layerInfo.length > 0) {
                  var legendDijit = new esri.dijit.Legend({
                      map: map,
                      layerInfos: layerInfo
                  }, "legendDiv");
                  legendDijit.startup();
              }
          });



          dojo.connect(fl, "onClick", selectGrid);
          map.addLayer(fl);
      }
    );

      function addLegend(results) {
          var layerInfo = dojo.map(results, function (layer, index) {
              return { layer: layer.layer, title: layer.layer.name };
          });
          if (layerInfo.length > 0) {
              var legendDijit = new esri.dijit.Legend({
                map: map,
                layerInfos: layerInfo
              }, "legendDiv");
          }
      }

      function populateGrid(Memory) {
          var qt = new esri.tasks.QueryTask(window.HWSUrl);
          var query = new esri.tasks.Query();
          query.where = "1=1";
          query.returnGeometry = false;
          query.outFields = window.outFields;
          qt.execute(query, function (results) {
              var data = dojo.map(results.features, function (feature) {
                  return {
                      // property names used here match those used when creating the dgrid
                      "id": feature.attributes[window.outFields[0]],
                      "hochwert": feature.attributes[window.outFields[1]],
                      "schadennr": feature.attributes[window.outFields[2]],
                      "status": feature.attributes[window.outFields[3]]
                  }
              });
              var memStore = new Memory({ data: data });
              window.grid.set("store", memStore);
          });
      }

      // fires when a row in the dgrid is clicked
      function selectItem(e) {
          // select the feature
          var fl = map.getLayer("schaden");
          var query = new esri.tasks.Query();
          query.objectIds = [parseInt(e.target.innerHTML)];
          fl.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (result) {
              if (result.length) {
                  // re-center the map to the selected feature
                  window.map.centerAt(result[0].geometry.getExtent().getCenter());
              } else {
                  console.log("Feature Layer query returned no features... ", result);
              }
          });
      }

      // fires when a feature on the map is clicked
      function selectGrid(e) {
          var id = e.graphic.attributes.OBJECTID;
          // select the feature that was clicked
          var query = new esri.tasks.Query();
          query.objectIds = [id];
          var states = map.getLayer("schaden");
          states.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
          // select the corresponding row in the grid
          // and make sure it is in view
          grid.clearSelection();
          grid.select(id);
          grid.row(id).element.scrollIntoView();
      }
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline', gutters: false">
     <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:'Pane 2'">
            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'"></div>
    <div id="bottomPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>
    </div>
  </div>
</body>
</html>
share|improve this question

1 Answer 1

up vote 2 down vote accepted

The legend was not being created in the code you posted because you set up an event listener for onLayer*s*AddResult but you're adding layers with addLayer. For onLayersAddResult to fire, you need to use map.addLayer*s*.

Regarding require() vs. dojo.require(), you can technically use both at the same time but I would pick one or the other. Otherwise, your code is unnecessarily complex (and ugly). I made some additional changes to use local module references instead of global dojo.* but didn't change them all.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
  <style>
    html, body { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      overflow: hidden;
    }
    #container { 
      height: 100%; 
      visibility: hidden;
    }
    #bottomPane { height: 200px; }
    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }

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

  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.layers.FeatureLayer");
      // dojo's layout dijits and the parser to auto-create the dijits

      // bring in dgrid, esri and dojo modules
      // create the grid and the map
      // then parse the dijit layout dijits
      require([
        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", 
        "esri/map", "esri/layers/FeatureLayer", 
        "dojo/_base/declare", "dojo/_base/array", "dojo/_base/connect", "dojo/number", "dojo/parser",
        "dojo/domReady!"
      ], function (Grid, Selection, Memory, Map, FeatureLayer, declare, arrayUtils, connect, dojoNum, parser) {
          // call the parser to create the dijit layout dijits
          parser.parse();

          // create the dgrid
          window.grid = new (declare([Grid, Selection]))({
              // use Infinity so that all data is available in the grid
              bufferRows: Infinity,
              columns: {
                  "id": "OBJECTID",
                  "hochwert": "HOCHWERT",
                  "schadennr": "SchadenNr",
                  "status": "Status"
              }
          }, "grid");
          // add a click listener on the ID column
          grid.on(".field-id:click", selectItem);

          window.map = new Map("map", {
              basemap: "gray",
              center: [-100, 40],
              zoom:5 
          });
          window.HWSUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4";
          window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"];
          var fl = new FeatureLayer(window.HWSUrl, {
              id: "schaden",
              mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
              outFields: window.outFields
          });
          connect.connect(fl, "onLoad", function (fl) {
              fl.maxScale = 0; // show the states layer at all scales
              fl.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
          });
          connect.connect(map, "onLoad", function (map) {
              // show the border container now that the dijits 
              // are rendered and the map has loaded
              dojo.style(dijit.byId("container").domNode, "visibility", "visible");
              populateGrid(Memory); // pass a reference to the MemoryStore constructor
          });

          //add the legend
          var layerAdd = connect.connect(map, 'onLayersAddResult', function (results) {
              connect.disconnect(layerAdd);
              var layerInfos = arrayUtils.map(results, function(r) {
                return { layer: r.layer, title: r.layer.name };
              });
              var legendDijit = new esri.dijit.Legend({
                  map: map,
                  layerInfos: layerInfos
              }, "legendDiv");
              legendDijit.startup();
          });

          connect.connect(fl, "onClick", selectGrid);
          map.addLayers([fl]);
      }
    );

      function populateGrid(Memory) {
          var qt = new esri.tasks.QueryTask(window.HWSUrl);
          var query = new esri.tasks.Query();
          query.where = "1=1";
          query.returnGeometry = false;
          query.outFields = window.outFields;
          qt.execute(query, function (results) {
              var data = dojo.map(results.features, function (feature) {
                  return {
                      // property names used here match those used when creating the dgrid
                      "id": feature.attributes[window.outFields[0]],
                      "hochwert": feature.attributes[window.outFields[1]],
                      "schadennr": feature.attributes[window.outFields[2]],
                      "status": feature.attributes[window.outFields[3]]
                  }
              });
              var memStore = new Memory({ data: data });
              window.grid.set("store", memStore);
          });
      }

      // fires when a row in the dgrid is clicked
      function selectItem(e) {
          // select the feature
          var fl = map.getLayer("schaden");
          var query = new esri.tasks.Query();
          query.objectIds = [parseInt(e.target.innerHTML)];
          fl.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (result) {
              if (result.length) {
                  // re-center the map to the selected feature
                  window.map.centerAt(result[0].geometry.getExtent().getCenter());
              } else {
                  console.log("Feature Layer query returned no features... ", result);
              }
          });
      }

      // fires when a feature on the map is clicked
      function selectGrid(e) {
          var id = e.graphic.attributes.OBJECTID;
          // select the feature that was clicked
          var query = new esri.tasks.Query();
          query.objectIds = [id];
          var states = map.getLayer("schaden");
          states.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
          // select the corresponding row in the grid
          // and make sure it is in view
          grid.clearSelection();
          grid.select(id);
          grid.row(id).element.scrollIntoView();
      }
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline', gutters: false">
     <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:'Pane 2'">
            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'"></div>
    <div id="bottomPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>
    </div>
  </div>
</body>
</html>
share|improve this answer
    
I figured that one out too, the documentation is slacky on that part. Anyway it is correct. In my actual code, I got rid of all dojo.require() methods, as well as all the other deprecated dojo functions. As for the ugly part: I'm fine with that, since I don't plan on writing JS fulltime. Thanks for your help. Appreciate it :) –  Serv May 2 '13 at 5:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.