AnsweredAssumed Answered

Chart in attribute inspector

Question asked by thebillcarr on Dec 12, 2014
Latest reply on Jul 24, 2015 by dcoley

Greetings,

 

     I'm working on a map that will contain features for attribute editing, and features to display a chart pretty much exactly like the examples. I can get each to work independently, but not together.

 

<!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>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

 

 

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

    <style>

      html, body {

        height: 100%; width: 100%;

        margin: 0;

        padding: 0;

        overflow: hidden;

      }

      #mapDiv{

        margin: 0;

        padding:0;

      }

      #detailPane{

        height:20px;

        color:#570026;

        font-size:12pt;

        font-weight:600;

        overflow:hidden;

      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }

      .dj_ie .simpleInfoWindow .content {position: relative;}

 

 

      .esriAttributeInspector {height:100px;}

      .esriAttributeInspector .atiLayerName {display:none;}

      .saveButton {

        padding-left:45px;

         margin:0px;width:16px; height:16px;

       }

    </style>

   

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      var map;

      var updateFeature;

     

      require([

        "esri/map",

        "esri/layers/FeatureLayer",

        "esri/dijit/AttributeInspector",

 

 

        "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol",

        "esri/Color",

       

      "esri/dijit/Popup",

      "esri/dijit/PopupTemplate",

 

 

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/config",

 

 

        "esri/tasks/query",

 

 

        "dojo/parser",

        "dojo/dom-construct",

        "dijit/form/Button",

 

 

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

      ], function(

        Map, FeatureLayer, AttributeInspector,

        SimpleLineSymbol, SimpleFillSymbol, Color,Popup, PopupTemplate,

        ArcGISDynamicMapServiceLayer, esriConfig,

        Query,

        parser, domConstruct, Button

      ) {

        parser.parse();

 

 

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

        esriConfig.defaults.io.proxyUrl = "/proxy/";

 

 

        map = new Map("mapDiv", {

          basemap: "streets",

          center: [-97.395, 37.537],

          zoom: 11

        });

 

 

        map.on("layers-add-result", initSelectToolbar);

 

 

        var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/MapServer");

        petroFieldsMSL.setDisableClientCaching(true);

        map.addLayer(petroFieldsMSL);

 

 

var ReportMaster = new esri.layers.ArcGISDynamicMapServiceLayer("");

      

        map.addLayer(ReportMaster);   

 

 

 

 

        var petroFieldsFL = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/FeatureServer/0", {

          mode: FeatureLayer.MODE_SELECTION,

          outFields: ["approxacre", "objectid", "field_name", "activeprod", "cumm_oil", "cumm_gas", "avgdepth"]

        });

       

       

       

 

 

        var selectionSymbol = new SimpleFillSymbol(

            SimpleFillSymbol.STYLE_NULL,

            new SimpleLineSymbol(

                "solid",

                new Color("yellow"),

                2

            ),

            null

        );

        petroFieldsFL.setSelectionSymbol(selectionSymbol);

 

 

        petroFieldsFL.on("edits-complete", function() {

          petroFieldsMSL.refresh();

        });

 

 

        map.addLayers([petroFieldsFL]);

 

 

            function initSelectToolbar(evt) {

          var asdf = evt.layers[0].layer;

          var selectQuery = new Query();

 

 

          map.on("click", function(evt) {

              var selectionQuery = new esri.tasks.Query();

        var tol = map.extent.getWidth()/map.width * 30;

        var x = evt.mapPoint.x;

        var y = evt.mapPoint.y;

        var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

        selectionQuery.geometry = queryExtent;

 

 

           

           

           

           

           

           

           

           

           

           

           

           

           

           

        asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

            

               //store the current feature

                updateFeature = features[0]; console.log("adf");

                map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

                map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

    

            });

          });

 

 

        

 

 

          var layerInfos = [

            {

              'featureLayer': petroFieldsFL,

              'showAttachments': false,

              'isEditable': true,

              'fieldInfos': [

                {'fieldName': 'activeprod', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'},

                {'fieldName': 'field_name', 'isEditable': true, 'tooltip': 'The name of this oil field', 'label': 'Field Name:'},

                {'fieldName': 'approxacre', 'isEditable': false, 'label': 'Acreage:'},

                {'fieldName': 'avgdepth', 'isEditable': false, 'label': 'Average Depth:'},

                {'fieldName': 'cumm_oil', 'isEditable': false, 'label': 'Cummulative Oil:'},

                {'fieldName': 'cumm_gas', 'isEditable': false, 'label': 'Cummulative Gas:'}

              ]

            }

          ];

 

 

          var attInspector = new AttributeInspector({

            layerInfos: layerInfos

          }, domConstruct.create("div"));

 

 

          //add a save button next to the delete button

          var saveButton = new Button({ label: "Save", "class": "saveButton"});

          domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

 

 

          saveButton.on("click", function() {

            updateFeature.getLayer().applyEdits(null, [updateFeature], null);

          });

         

         

         

      

          attInspector.on("attribute-change", function(evt) {

            //store the updates to apply when the save button is clicked

            updateFeature.attributes[evt.fieldName] = evt.fieldValue;

          });

 

 

          attInspector.on("next", function(evt) {

            updateFeature = evt.feature;

            console.log("Next " + updateFeature.attributes.objectid);

          });

 

 

          attInspector.on("delete", function(evt) {

            evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

            map.infoWindow.hide();

          });

 

 

          map.infoWindow.setContent(attInspector.domNode);

          map.infoWindow.resize(350, 240);

        }

       

       

       

       

       

       

       

 

 

       

       

       

       

       

       

       

       

 

 

     

              

    

 

 

       var popupTemplate = new PopupTemplate({

        "title": "asdf",

        "fieldInfos": [{

          "fieldName": "BLOCKCE10",

          "label": "Sasdf",

       

          "format": {

            "places": 0,

            "digitSeparator": true

          }

        }, {

          "fieldName": "relationships/0/GAL",

          "label": "Sum of species tree count",

          "format": {

            "places": 0,

            "digitSeparator": true

          },

          "statisticType": "sum"

        }, {

          "fieldName": "relationships/0/date2",

          "label": "Common Name"

        }, {

          "fieldName": "BLOCKCE10",

          "label": "SERVICE_ID"

        }],

        "description": "asdf",

        "showAttachments": false,

        "mediaInfos": [{

          "title": "",

          "type": "columnchart",

          "caption": "",

          "value": {

            "theme": "GreySkies",

            "fields": ["relationships/0/GAL"],

            "normalizeField": null,

            "tooltipField": "relationships/0/date2"

          }

        }]

      });

     

     

     

            var popupTemplate1 = new PopupTemplate({

        "title": "asdf",

        "fieldInfos": [{

          "fieldName": "Point_Count",

          "label": "Count of Points",

          "format": {

            "places": 0,

            "digitSeparator": true

          }

        }, {

          "fieldName": "relationships/1/GAL",

          "label": "Sum of species tree count",

          "format": {

            "places": 0,

            "digitSeparator": true

          },

          "statisticType": "sum"

        }, {

          "fieldName": "relationships/1/date2",

          "label": "Common Name"

        }, {

          "fieldName": "BLOCKCE10",

          "label": "Block"

        }],

        "description": "asdf",

        "showAttachments": false,

        "mediaInfos": [{

          "title": "",

          "type": "columnchart",

          "caption": "",

          "value": {

            "theme": "GreySkies",

            "fields": ["relationships/1/GAL"],

            "normalizeField": null,

            "tooltipField": "relationships/1/date2"

          }

        }]

      });

     

     

     

                  var popupTemplate2 = new PopupTemplate({

        "title": "asdf",

        "fieldInfos": [{

          "fieldName": "Point_Count",

          "label": "Count of Points",

          "format": {

            "places": 0,

            "digitSeparator": true

          }

        }, {

          "fieldName": "relationships/2/GAL",

          "label": "Sum of species tree count",

          "format": {

            "places": 0,

            "digitSeparator": true

          },

          "statisticType": "sum"

        }, {

          "fieldName": "relationships/2/date2",

          "label": "Common Name"

        }, {

          "fieldName": "BLOCKCE10",

          "label": "Block"

        }],

        "description": "asdf",

        "showAttachments": false,

        "mediaInfos": [{

          "title": "",

          "type": "columnchart",

          "caption": "",

          "value": {

            "theme": "GreySkies",

            "fields": ["relationships/2/GAL"],

            "normalizeField": null,

            "tooltipField": "relationships/2/date2"

          }

        }]

      });

     

     

         var popupTemplate3 = new PopupTemplate({

            title: "{asdf}",

            fieldInfos: [

              {

                fieldName: "asdf",

                visible: true,

                label: "Service ID"

              },

              {

                fieldName: "asdf",

                visible: true,

                label: "Name",

              

              }

            ],

            showAttachments: true

          });

    

 

 

              var featureLayer = new FeatureLayer("asdf", {

        mode: FeatureLayer.MODE_SNAPSHOT,

        infoTemplate: popupTemplate,

        outFields: ["*"]

      });

 

 

      map.addLayer(featureLayer);

     

            var featureLayer1 = new FeatureLayer("asdf", {

        mode: FeatureLayer.MODE_SNAPSHOT,

        infoTemplate: popupTemplate1,

        outFields: ["*"]

      });

 

 

      map.addLayer(featureLayer1);

     

            var featureLayer2 = new FeatureLayer("asdf", {

        mode: FeatureLayer.MODE_SNAPSHOT,

        infoTemplate: popupTemplate2,

        outFields: ["*"]

      });

 

 

      map.addLayer(featureLayer2);

     

                  var featureLayer3 = new FeatureLayer("asdf", {

        mode: FeatureLayer.MODE_SNAPSHOT,

        infoTemplate: popupTemplate3,

        outFields: ["asdf","asdf"]

      });

 

 

      map.addLayer(featureLayer3);

     

             

      });

     

    </script>

  </head>

 

  <body class="claro">

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">

      <div id="detailPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

        Click a field to display the attribute inspector with customized fields.

      </div>

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="mapDiv"></div>

    </div>

  </body>

</html>

 

 

 

 

Does anyone know of a way to have access to both the attribute inspector and the chart abilities of popup template?

Any help would be greatly appreciated.

Outcomes