Nighteyez07

AttributeInspector requires a FeatureLayer when using graphics?

Discussion created by Nighteyez07 on Aug 27, 2012
Latest reply on Jul 8, 2013 by deriven
I'm attempting to create a feature where a user is able to come in and create graphics to mark out excavation areas. The existing layers are all Dynamic layers. Through my research with the AttributeInspector (AI) it looks like it requires a FeatureLayer, which is a child of the Graphics layer. Is there a way to use the AttributeInspector without having to add a FeatureLayer? And if a FeatureLayer is required, can one create an "empty" layer just to satisfy the constraints of the AI?

I've attached a sample file of how I'm currently attempting to achieve this and obviously it doesn't work at the moment. Any insight someone might have would be greatly appreciated. I've also included the code in the post for easy reference.

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <!--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>Maps Toolbar</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad: true
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
   dojo.require("esri.toolbars.edit");
   dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
   dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.editing.TemplatePicker");
dojo.require("esri.dijit.AttributeInspector-all");
  
      var map, toolbar, editToolbar, symbol, geomTask;
   var ctxMenuForGraphics, ctxMenuForMap;

      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-11721159,"ymin":-1138850,"xmax":8277212,"ymax":9858297,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
       
        dojo.connect(map, "onLoad", createToolbar);
       
        //add the world street map basemap
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
   
        map.addLayer(basemap);

      }

      function createToolbar(themap) {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

       toolbar = new esri.toolbars.Draw(map);
    editToolbar = new esri.toolbars.Edit(map);
      
       dojo.connect(toolbar, "onDrawEnd", addToMap);
      }

      function addToMap(geometry) {
        toolbar.deactivate();
        map.showZoomSlider();
         switch (geometry.type) {
            case "polygon":
              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
              break;
          }
          var graphic = new esri.Graphic(geometry, symbol);
    graphic.setAttributes({"Title": "My Shape", "Description": "My Test Description", "Perimeter": "0", "Area": "0"})
    graphic.setInfoTemplate(infoTemplateNew(graphic));
          map.graphics.add(graphic);
      }
  
function infoTemplateNew(graphic){
  var infoWindow = new esri.InfoTemplate();
  infoWindow.setTitle(graphic.attributes.Title)
  
  //possible code to abstractly handle updating fields - errors out at the moment
  var layer = map.getLayer("map_graphics");
  //var layer = esri.layers.FeatureLayer;
  var layerInfos = [{'featureLayer': layer,'isEditable': false}];
  var attInspector = new esri.dijit.AttributeInspector({layerInfos: layerInfos}, dojo.create("div"));
  infoWindow.setContent(attInspector.domNode);
 
  return infoWindow;
}
 
function activateToolbar(graphic){
  var tool = 0;
  tool = tool | esri.toolbars.Edit.MOVE;
  tool = tool | esri.toolbars.Edit.EDIT_VERTICES; 
  tool = tool | esri.toolbars.Edit.SCALE;
  tool = tool | esri.toolbars.Edit.ROTATE;
  var options = {
    allowAddVertices: true,
    allowDeleteVertices: true
  };
  editToolbar.activate(tool, graphic, options);
}

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;">
      <span>Draw:<br /></span>
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();}">Polygon</button>
      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
    </div>
    <div id="map" data-dojo-type="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" data-dojo-props="region:'center'">
    </div>
</div>
  </body>
</html>


[/HTML]

Outcomes