nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

timing issue -- anyone who is good with deferreds?

KaitlynnDavis

I'm building an editing application, and I use a custom drop-down menu for one of the fields in my attribute inspector. The drop down is populated by a query, so it's very important that the query function completes before the function that builds the attribute inspector. My problem is timing the query. My map listener map.on("layers-add-result", initEditor); fires initEditor well before my query has had the chance to complete and as a result my map features become disabled. I can fix the problem by pausing the execution of initEditor with an alert box, but obviously this can't be a permanent solution.

I believe a deffered would help ensure that my query task has returned before populating my attribute inspector, but I am weak on the concept. Is there a programmatic way to say map.on("layers-add-result", initEditor) after query returns results?

Trouver plus de publications taguées avec

Accepted answers

KaitlynnDavis

The big picture is that I want an attribute inspector field that draws from a feature layer called "reports", so people can easily associate the map feature they're adding with the report that it comes from. We'll be continuously adding to the reports dataset, so I can't have a domain with finite values. I couldn't find a way to create a domain in ArcMap that is formulated from a query, just domains where you have to hard code your possible options. So that's why I ended up creating a custom select dijit in my JavaScript.

I was able to resolve my issue with the deferred pattern. As was suggested earlier I want to control when my map layers are getting added to the map, so that the completion of my queries are prioritized before firing the editor init function. So in my init function for the map I created a new Deferred and the instruction to wait until it's resolved to add my map layers

deferred = new dojo.Deferred();  deferred.then(function(value){         console.log(value);  map.addLayers([needPoints, needRoutes, needAreas]); });

Then, at the end of my query I resolved my deferred:

deferred.resolve("success"); return deferred.promise;

This was a tricky one and I very much appreciate the help you gave!

All comments

JohnGravois

why not just name the function you want to call using a QueryTask event like 'complete'?

ie:

myQuery.on('complete', initEditor);

KaitlynnDavis

That would be a good choice except then my layers will load before my query's callback gets the chance to finish. That's important because the callback is where the dropdown menu is populated. As far as I can tell there is no event listener in the API for the completion of a callback function...

queryTaskDocs = new esri.tasks.QueryTask("server_path");
var queryDocs = new esri.tasks.Query();
queryDocs.outFields = ["DOC_TITLE2"];
queryDocs.returnGeometry = false;
queryDocs.where  = "DOC_TITLE2 <> ''"
queryTaskDocs.execute(queryDocs,function(results){
 //Populate the dropdown list box with unique values from DOC_TITLE2 field
 var docs;
 var values = [];
 var testVals={};
 var features = results.features;
 dojo.forEach (features, function(feature) {
     docs = feature.attributes.DOC_TITLE2;
     if (!testVals[docs]) {
   testVals[docs] = true;
   values.push({name:docs});
  }
     });        
 store1 = new dojo.store.Memory({data:values});
 dijit.byId("docSelect").set("store", store1);  
});
dojo.connect(queryTaskDocs, "onComplete", map.addLayers([featurePoints, featureRoutes, featureAreas]));

JohnGravois

i have to confess i don't quite understand the code flow, but you should be able to call map.addLayers() as the last line within your existing QueryTask callback.

queryTaskDocs.execute(queryDocs,function(results){
 //...
 dijit.byId("docSelect").set("store", store1);
 map.addLayers([featurePoints, featureRoutes, featureAreas])); 
});

//no need for this anymore
//dojo.connect(queryTaskDocs, "onComplete", map.addLayers([featurePoints, featureRoutes, featureAreas]));

if not, please layout the entire sequence of asynchronous calls being made and their dependencies and i should be able to walk you through using existing events to control the timing.

KaitlynnDavis

I tried your suggestion and placing map.addLayers at the end of my callback just caused the runtime to skip over most of the callback before adding the layers...

I reproduced my problem using esri data (apologies for the extra indents), placing log statements throughout to monitor the timing of my code. It should work so:

After loading my map and layers in init, I call a query function that obtains all the results for the req_type field, and then fires a callback that loops through the results and places the unique values into an object store. This store is used to populate a drop down that appears in the attribute inspector. So its basically a plain editing app that has a custom drop down for one of its attribute inspector fields

My problem is that the initEditor function that sets up the attribute inspector starts as soon as my map layers are added, and completes before my callback has the chance to complete. When I place an alert though, it halts initEditor, allowing the populateList callback to complete. I am just wondering if I can make the populateList a deferred that when resolved adds my map layers which in turn starts my editor initialization...

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--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>Add New Needs</title>

 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox/grid/resources/Grid.css">
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox/grid/resources/claroGrid.css">
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
 <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.dijit.Geocoder");
      dojo.require("dijit.layout.StackContainer");
      dojo.require("dijit.MenuBar"); 
     dojo.require("dijit.PopupMenuBarItem");
     dojo.require("dijit.DropDownMenu");
     dojo.require("dijit.MenuItem");
     dojo.require("esri.layers.FeatureLayer");
     dojo.require("dojo.parser");
    dojo.require("dijit.form.ComboBox");
    dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("esri.SnappingManager");
   dojo.require("esri.dijit.editing.AttachmentEditor");
   dojo.require("dijit.form.Select");
   dojo.require("dijit.form.ComboBox");
   dojo.require("dojo.store.Memory");
   dojo.require("dojo.Deferred");


      var map;
      
      function init() {
   
   console.log("drop line 1");
   esriConfig.defaults.io.proxyUrl = "/proxy"; 
   //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications. 
   esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  
   var customExtentAndSR = new esri.geometry.Extent({"xmin": -134.060026464775,"ymin": 32.885241223675,"xmax": -110.305411069225,"ymax": 42.2934163323251,"spatialReference": {"wkid": 4326}});
        
   map = new esri.Map("map", {extent:customExtentAndSR, zoom: 11});
   dojo.connect(map, "onLayersAddResult", initEditor);

   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
   
   var needPoints = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0");
   map.addLayers([basemap, needPoints]);
   
   var queryTaskDocs = new esri.tasks.QueryTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0");
    var queryDocs = new esri.tasks.Query();
    queryDocs.outFields = ["req_type"];
    queryDocs.returnGeometry = false;
    queryDocs.where  = "req_type <> ''"
    queryTaskDocs.execute(queryDocs,populateListDocs);
    
   console.log("drop line 3");

   }
   
   function populateListDocs(results) {
  console.log("drop line 4");
     //Populate the dropdown list box with unique values
     var type;
     var values = [];
     var testVals={};
     var features = results.features;
     dojo.forEach (features, function(feature) {
       type = feature.attributes.req_type;
       if (!testVals[type]) {
      testVals[type] = true;
      values.push({name:type});
       }
     });        
     store1 = new dojo.store.Memory({data:values});
     dijit.byId("docSelect").set("store", store1);
     def.resolve();
     console.log("store is set");
   };
 
   function initEditor(results) {
   alert("this is just here for now");
   console.log("drop line 5");
   var templateLayers = dojo.map(results,function(result){
    return result.layer;
   });
   console.log("drop line 6");
   var templatePicker = new esri.dijit.editing.TemplatePicker({
    featureLayers: templateLayers,
    grouping: false,
    rows: 'auto',
    columns: 3
   },'templateDiv');
   templatePicker.startup();
    
   //widget used for the attribute inspector custom field
    var docSelect = new dijit.form.ComboBox({
     id: "docSelect",
     name: "docSelect",
     store: store1,
    }, "docSelect");

     var layers = arrayUtils.map(evt.layers, function(result) {
    return { featureLayer: result.layer,
      showDeleteButton:true,
      fieldInfos:[
        {fieldName: "req_id", visible: true, 'label':"id", 'customField': docSelect},
        {fieldName: "req_type", visible: true, 'label':"req type", 'customField': docSelect}
        ]
      };
     });
    
    var settings = {
     map: map,
     templatePicker: templatePicker,
     layerInfos:layers,
     toolbarVisible: true,
     createOptions: {
      polylineDrawTools:[ esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE],
      polygonDrawTools: [ esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,
      esri.dijit.editing.Editor.CREATE_TOOL_CIRCLE,
      esri.dijit.editing.Editor.CREATE_TOOL_TRIANGLE,
      esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE
      ]
     },
     toolbarOptions: {
      reshapeVisible: true
     }
    };
    console.log("drop line 8");
    var params = {settings: settings};
    //Create the editor widget 
     var myEditor = new esri.dijit.editing.Editor(params,'editorDiv');
    //define snapping options
    var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 5), null);
    map.enableSnapping({
      snapPointSymbol:symbol,
      tolerance:20,
      snapKey:dojo.keys.ALT
    });
    
    myEditor.startup();
   }
   console.log("drop line 9");
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
        Edit Hydrography
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>

kenbuja

Have you tried initialize the attribute editor in the populateListDocs function, after the store is built, instead of in the onLayersAddResult function?

KaitlynnDavis

thanks for the suggestion. Placing initEditor() at the end of my query callback introduces problems because initEditor needs to take as an argument the loaded map layers in order to apply the editor widgets to them. So when initEditor(results) is invoked it is taking the result of "onLayersAddResult". So I tried this to store the result in a global to use later:

dojo.connect(map, "onLayersAddResult", function(results){myResults = results;});

Then I connected my query function to the layer onLoad event and, as you suggested, placed initEditor(myResults); at the last line of my query callback. Doing this breaks my code at that line, so I don't think I called initEditor properly.

JohnGravois

i apologize if im missing something, but if you defined a domain for the appropriate field in the feature layer itself, wouldnt the editor widget pick up on it and show corresponding descriptions to users automatically?

KaitlynnDavis

deferred = new dojo.Deferred();  deferred.then(function(value){         console.log(value);  map.addLayers([needPoints, needRoutes, needAreas]); });

Then, at the end of my query I resolved my deferred:

deferred.resolve("success"); return deferred.promise;

This was a tricky one and I very much appreciate the help you gave!

JohnGravois

thanks for taking the time to explain your steps. i guess i'm still not sure what you mean by 'from a query', but i can definitely understand the trouble of working with a growing domain.

if it would be helpful, perhaps you could use a gp tool like table to domain as some sort of scheduled task instead of entering items manually?

WilsonIonara

Hi Kaitlynn,

I am having a similar issue, do you think you can share your code? Thank you so much!!!

The big picture is that I want an attribute inspector field that draws from a feature layer called "reports", so people can easily associate the map feature they're adding with the report that it comes from. We'll be continuously adding to the reports dataset, so I can't have a domain with finite values. I couldn't find a way to create a domain in ArcMap that is formulated from a query, just domains where you have to hard code your possible options. So that's why I ended up creating a custom select dijit in my JavaScript.

I was able to resolve my issue with the deferred pattern. As was suggested earlier I want to control when my map layers are getting added to the map, so that the completion of my queries are prioritized before firing the editor init function. So in my init function for the map I created a new Deferred and the instruction to wait until it's resolved to add my map layers
deferred = new dojo.Deferred();

deferred.then(function(value){
        console.log(value);
 map.addLayers([needPoints, needRoutes, needAreas]);
});
Then, at the end of my query I resolved my deferred:
deferred.resolve("success");
return deferred.promise;
This was a tricky one and I very much appreciate the help you gave!

JianHuang

If you need to wait for both queryComplete and mapOnload finish to call initEditor(), deferredList is what you are looking for.
http://livedocs.dojotoolkit.org/dojo/DeferredList

WilsonIonara

Thank Jian, I tried to use it, but the second time I change something on the combobox, nothing happens because the deferred function already has been resolved. I have a few feature layers and want just one to be in the template picker depending on the selection in the combobox.

var stewardship = new esri.layers.FeatureLayer("http://tfsgis-iisd01:6080/arcgis/rest/services/FeatureServiceStewAAreaAPoint/FeatureServer/0",
  
  {
          mode: FeatureLayer.MODE_SELECTION, id: 'stewardship',
          outFields: ['*']
   
 });
  var activityarea = new esri.layers.FeatureLayer("http://tfsgis-iisd01:6080/arcgis/rest/services/FeatureServiceStewAAreaAPoint/FeatureServer/1",
  
  {
          mode: FeatureLayer.MODE_SELECTION, id: 'activityarea',
          outFields: ['*']
   
 }); 
          deferred = new dojo.Deferred();

         deferred.then(function(value){
        console.log(value);
        activityValue = dijit.byId('Activity').get('displayedValue')
     if (activityValue == "Forest Stewardship Plan")
  {   map.removeAllLayers;
   alert("TEST")
   map.addLayers([stewardship]);
  }
    if (activityValue == "Non Forest Stewardship Plan")
  {  
   map.removeAllLayers;
   alert("TEST2")
   map.addLayers([activityarea]);
  }
  
  
});
 
    map.on("layer-remove", layerremove)
 
 function layerremove()
 {
  TemplatePicker.destroy()
  
 }
 
   
      
//   map.addLayers([activityarea]);

        function initEditor(evt) {
     


           var templateLayers = arrayUtils.map(evt.layers, function(result){
      
   return result.layer;
   

          });


 // TEST: Changed to stewardship instead of templateLayers

          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result)
     {
     
   
   var fieldInfos= arrayUtils.map(result.layer.fields,function(field){
            if(field.name === 'RecipientLast'){
              return {'fieldName': field.name,'label':'Rec Last Name'}
            }
   
    if(field.name === 'RecipientFirst'){
              return {'fieldName': field.name,'label':'Rec First Name'}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'Phone'){
              return {'fieldName': field.name,'label':'Phone', 'customField':myDijit}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'ZipCode'){
              return {'fieldName': field.name,'label':'ZipCode', 'customField':myDijit2}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   if (field.name == 'DateStart')
   {
    
       return {'fieldName': field.name,'label':'Start Date', 'customField': datedijit }
    
   }
            else{
              return {'fieldName': field.name,'label':field.alias}
            }
          });
            return { featureLayer: result.layer, 'fieldInfos':fieldInfos};
          });
 
 
      
        //add a default value for newly added features 
     
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true,
     mergeVisible: true,
     cutVisible: true
     
     
     
            }
   
   
          };

          var params = {settings: settings};    
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS, 
            15, 
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, 
              new Color([255, 0, 0, 0.5]), 
              5
            ), 
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });

        }//end of init editor function

          
dojo.connect(dijit.byId("Activity"), 'onChange', function(value){ 
               deferred.resolve("success");
              return deferred.promise;
     
  
    
   }


       });

JianHuang

First of all, since JS API 3.4 (cannot remember the exact version number), you don't have to wait for map onload to create an editor widget. You can call new Editor(); right after var map = new Map();
Secondly, editor widget doesn't provide a method setLayerInfos() to allow you to dynamically change the editing layers. What you need to do is to destroy the editor widget and recreate it every time user select a new item in the dropdown.
Hope this helps.

WilsonIonara

Hi Jian,

Can you please take a look at my code and tell me how I destroy the template and remove the layer? It is not working. When I select another item in the combobox, I would like to have the layer removed and the editor destroyed but I don't know how to do that. I kind of need the layers-add-result event, because to create layerinfos for the editor settings, I need the results of the event. Thank you so much!!!

    dojo.connect(dijit.byId("Activity"), 'onChange', function(value){ 
             //alert('ok ' + event);
 
    if (value in oc(officeactivitylist)) {
    
      map.on("layers-add-result", initEditor);
  var stewardship = new FeatureLayer("http://tfsgis-iisd01:6080/arcgis/rest/services/MyMapService2/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });
  
    map.addLayers([stewardship]);
 
        function initEditor(evt) {
 
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
 

          });

          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
     
   
   var fieldInfos= arrayUtils.map(result.layer.fields,function(field){
            if(field.name === 'RecipientLast'){
              return {'fieldName': field.name,'label':'Rec Last Name'}
            }
   
    if(field.name === 'RecipientFirst'){
              return {'fieldName': field.name,'label':'Rec First Name'}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'Phone'){
              return {'fieldName': field.name,'label':'Phone', 'customField':myDijit}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'ZipCode'){
              return {'fieldName': field.name,'label':'ZipCode', 'customField':myDijit2}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   if (field.name == 'DateStart')
   {
    
       return {'fieldName': field.name,'label':'Start Date', 'customField': datedijit }
    
   }
            else{
              return {'fieldName': field.name,'label':field.alias}
            }
          });
            return { featureLayer: result.layer, 'fieldInfos':fieldInfos};
          });
 


 
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true,
     mergeVisible: true,
     cutVisible: true
     
     
     
            }
   
   
          };

          var params = {settings: settings};    
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS, 
            15, 
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, 
              new Color([255, 0, 0, 0.5]), 
              5
            ), 
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });
    
   
      
        }
    
   }
    
   if (value  in oc(communityactivitylist)) {
        alert("Community Activity")
     map.removeLayer(stewardship)
     myEditor.destroy()
     
   }
   
   if (value  in oc(countyactivitylist)) {
   
     alert("County Activity")
   }
   if (value in oc(activityarealist)) {
   
     alert("Activity Area")
   }
   if (value  in oc(activitypointlist)) {
   
     alert("Activity Point")
   }
   
   else if (value == "Forest Stewardship Plan") {
   
     alert("Stewardship")
   }
       });

JianHuang

After you call editor.destroy();, you can recreate it by editor = new Editor(params, 'editorDiv'); just make sure params.settings.layerInfos exclude the layer that you removed from the map.

WilsonIonara

Hi Jian,

Sorry for the delay in replying. I got sidetracked with another issue. I am able to remove the first layer when I click on the other combobox but the editor is still showing the previous layer. How do I make sure params.settings.layerInfos exclude the layer that I removed from the map?

    if (value in oc(officeactivitylist)) {
     
    
    var contentHolder = "<div id='templateDiv'></div><div id='editorDiv'></div>";
    dojo.place(contentHolder, "contentpane", "first");
  
    
      map.on("layers-add-result", initEditor);

  
    map.addLayers([stewardship]);
 
        function initEditor(evt) {
 
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
 

          });

          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
     
   
   var fieldInfos= arrayUtils.map(result.layer.fields,function(field){
            if(field.name === 'RecipientLast'){
              return {'fieldName': field.name,'label':'Rec Last Name'}
            }
   
    if(field.name === 'RecipientFirst'){
              return {'fieldName': field.name,'label':'Rec First Name'}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'Phone'){
              return {'fieldName': field.name,'label':'Phone', 'customField':myDijit}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'ZipCode'){
              return {'fieldName': field.name,'label':'ZipCode', 'customField':myDijit2}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   if (field.name == 'DateStart')
   {
    
       return {'fieldName': field.name,'label':'Start Date', 'customField': datedijit }
    
   }
            else{
              return {'fieldName': field.name,'label':field.alias}
            }
          });
            return { featureLayer: result.layer, 'fieldInfos':fieldInfos};
          });
 


 
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true,
     mergeVisible: true,
     cutVisible: true
     
     
     
            }
   
   
          };

          var params = {settings: settings};    
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS, 
            15, 
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, 
              new Color([255, 0, 0, 0.5]), 
              5
            ), 
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });
    
        myEditor.startup();
      
        }
    
   }
    
   if (value  in oc(communityactivitylist)) {
   
    map.removeLayer(stewardship)
              
    
  map.on("layers-add-result", initEditor2);

  
    map.addLayers([activityarea]);
 
        function initEditor2(evt) {
 
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
 

          });

          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
     
   
   var fieldInfos= arrayUtils.map(result.layer.fields,function(field){
            if(field.name === 'RecipientLast'){
              return {'fieldName': field.name,'label':'Rec Last Name'}
            }
   
    if(field.name === 'RecipientFirst'){
              return {'fieldName': field.name,'label':'Rec First Name'}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'Phone'){
              return {'fieldName': field.name,'label':'Phone', 'customField':myDijit}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   
   if(field.name === 'ZipCode'){
              return {'fieldName': field.name,'label':'ZipCode', 'customField':myDijit2}
    //    return {'fieldName': field.name,'label':'Rec First Name',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
            }
   if (field.name == 'DateStart')
   {
    
       return {'fieldName': field.name,'label':'Start Date', 'customField': datedijit }
    
   }
            else{
              return {'fieldName': field.name,'label':field.alias}
            }
          });
            return { featureLayer: result.layer, 'fieldInfos':fieldInfos};
          });
 


 
          var settings2 = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true,
     mergeVisible: true,
     cutVisible: true
         
     
            }
   
   
          };
  myEditor.destroy()
          var params2 = {settings: settings2};    
          var myEditor2 = new Editor(params2,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS, 
            15, 
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, 
              new Color([255, 0, 0, 0.5]), 
              5
            ), 
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });
    
        myEditor2.startup();
      
        }

WilsonIonara

I keep getting an error

Uncaught Error: Tried to register widget with id==btnNewSelection but that id is already registered

I think it had to do with not destroying the editor, but how can I destroy an editor from another function since it is not available on the other function? Thanks

JianHuang

To answer the question how to get the reference of editor object in another function. You can:
1. declare editor as a global variable, which is not recommended in most cases since it may cause conflicts.
2. use dojo.hitch to pass extra arguments to the callback function. Read the doc:
https://dojotoolkit.org/reference-guide/1.7/dojo/hitch.html#providing-arguments

WilsonIonara

Jiang, I don't know how to create a function when declaring the editor variable, since the constructor does not accept other arguments. Can you please check and let me know what I need to change? Do I need to use any require (import) statement?

Here is the snippet for the function where the user an item in the combobox:

   var params = {settings: settings};    
         var myEditor = new Editor(params,'editorDiv');
    var func = dojo.hitch(myEditor, function(){
  myEditor.destroy();
});

And here I am calling the function

if (displayedvalue in oc(communityactivitylist)) {
    
    map.removeLayer(stewardship)
                dojo.destroy("templateDiv")
    dojo.destroy('editorDiv')
    
    map.destroy()
    
    var contentHolder = "<div id='templateDiv2'></div><div id='editorDiv2'></div>";
    dojo.place(contentHolder, "contentpane", "first");
 
        map = new Map("map", { 
          basemap: "hybrid",
         sliderStyle: "large",

   
          center: [-98.57, 30.98],
          zoom: 6,
          slider: true 


        });
    
  
    map.addLayers([activityarea]);
  map.setExtent(map.extent); 
        func()

Of course I get an error: Cannot call method 'toJson' of undefined.

Can you please help me with this? Thank you!

JianHuang

Please take a look at the code snippet:

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

function iniEditor(results){
  //the same code as you already have to build layerInfos in settings.
  var editor = new new esri.dijit.editing.Editor(params,'editorDiv');
  editor.startup();
  //when a layer is removed from the map, recreate the editor widget
  map.on("layer-remove", dojo.hitch(null, recreateEditor, editor));
}

function recreateEditor(editor){
  editor.destroy();
  editor =  new new esri.dijit.editing.Editor(params,'editorDiv');
  editor.startup();
}

WilsonIonara

Thank you so much for taking the time to answer this Jian! This is great!!!

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.