topic Re: identify dynamicservice layers and edit feature layer in ArcGIS JavaScript Maps SDK Questions

identify dynamicservice layers and edit feature layer

BC — Wed, 12 Feb 2014 02:22:57 GMT

I am trying to combine two scripts that I found on esri.com into one script -
1. identify two mapservice layers - "click" event identify task and popups - works well.
2. edit a featureservice layer using - "layers-add-result" event and template picker - doesn't work.

I would like to have the application to do the following -
1. when clicked on a feature from mapservice (polygons) the identify poppup window should display results
2. but if clicked on point feature service only the edit functionality should work. points and polygons do overlap.

I am just getting my feet wet in esri javascript api. Any help is really appreciated.

Thank you!

BC




var precURL = "http://server/arcgis/rest/services/Polys/MapServer"

var addressURL = "http://server/arcgis/rest/services/Points/FeatureServer/0";

var visibleLayers = [0,1];

var mapTitle = "Address pts";

var map, mapLayer, featureLayer, fLayer;

/*
Define the map application script using "require" to load the necessary modules. 
See documentation here: "http://dojotoolkit.org/documentation/tutorials/1.8/modules/" for more information.
This includes standard ESRI modules as well as custom modules included with the application.
*/


require([
 "esri/map", 
 "esri/dijit/HomeButton",
 "esri/geometry/Extent", 
 "esri/layers/ArcGISDynamicMapServiceLayer",  
 "esri/layers/FeatureLayer", 
 "esri/dijit/Scalebar", 
 "esri/dijit/PopupTemplate", 
 "esri/dijit/Popup", 
 "esri/dijit/Geocoder",
 
 "esri/tasks/IdentifyTask", 
 "esri/tasks/IdentifyParameters", 
 "esri/tasks/IdentifyResult", 
 "esri/geometry/screenUtils",
 
 "dojo/_base/array", 
 "dojo/parser", 
 "modules/customBasemaps", 
 "modules/clickLegend",
 "dojo/dom", 
 "dojo/dom-construct",
 "esri/config",
   
 "esri/toolbars/edit",
 "esri/layers/ArcGISTiledMapServiceLayer",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/dijit/editing/Editor-all",
 "esri/dijit/editing/TemplatePicker",
 "esri/config",
 "dojo/i18n!esri/nls/jsapi",
 "dojo/keys",
 
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
  "dojo/domReady!"

 ],
 function(
  Map, 
  HomeButton,
  Extent, 
  ArcGISDynamicMapServiceLayer, 
  FeatureLayer,
  Scalebar, 
  PopupTemplate, 
  Popup, 
  Geocoder,
    
  IdentifyTask, 
  IdentifyParameters, 
  IdentifyResult, 
  screenUtils,
    
  arrayUtils, 
  parser, 
  CustomBasemaps, 
  ClickLegend, 
  dom, 
  domConstruct,
  esriConfig,

  Edit, 
  ArcGISTiledMapServiceLayer, 

  SimpleMarkerSymbol, 
  //SimpleLineSymbol, 
    
  Editor, 
  TemplatePicker,
    
   
  jsapiBundle, 
  keys
 ) {
  
  parser.parse();
  
  // Set the document (webpage) title.
  document.title = mapTitle;

  // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy"; 
  

       
  // Create a dynamic map service layer object using the global mapLayer variable.
  mapLayer = new ArcGISDynamicMapServiceLayer(precURL);

  // Address layer
  featureLayer = new FeatureLayer(addressURL,{
    mode: FeatureLayer.MODE_ONDEMAND, 
    outFields: ['*']
   });
  
  //labels
  var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
  
  //change in prod
  esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

 
  // Set a variable to the extent with the desired spatial reference.

  
  // Create the map variable with basemap, extent, and minScale.
  map = new esri.Map("map", {
          basemap: "streets",
          center: [-70.34, 30.0],
          zoom: 10
  });
    
  //Legend   
    var legend = new ClickLegend();
    // Send the service url to the "setLayers" method of ClickLegend to create the legend.
       legend.setLayers([precURL]);
    
  // Use the custom basemap module to create create a basemap gallery with the desired basemap layers.
  // The layers can be changed by editing the code in the "customBasemaps.js" module.    
  var basemapGallery = new CustomBasemaps({
          showArcGISBasemaps: false,
          map: map
        }, "basemapMenu");
        basemapGallery.startup();
  
  
        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
        //esriConfig.defaults.io.proxyUrl = "/proxy";    
    
  // Set functions to occur once the map has loaded.
  map.on("load", function(){
   // Using ESRI module, add a scale bar to the map. CSS style can be modified in layout.css.
   var scalebar = new Scalebar({
    map:map,
    scalebarUnit:"english"
   });
   
   //Home button
   var home = new HomeButton({
    map: map
    }, "HomeButton");
    home.startup();
   
   // Using ESRI module, add a new geocoder search widget. CSS style can be modified in layout.css.
   var search = new Geocoder({
    map:map
   }, "search");
   search.startup();
   
   
   // Set legal disclaimer language.
           //alert("This GIS data product to be used for reference purposes only and is not to be construed as a legal document.");
   
   var layerDefinitions = [];
   layerDefinitions[0] = "COUNTY_ID = 1";
   layerDefinitions[1] = "COUNTY_ID = 1";
   mapLayer.setLayerDefinitions(layerDefinitions);
   // Add the layer to the map.
   map.addLayers([mapLayer,labels,featureLayer]);
  
   // Set the visible layers using the visibleLayers variable.
   mapLayer.setVisibleLayers(visibleLayers);
    
  });
    
  // Set identifyTask to run when the map is clicked.
  map.on("click", function(evt){
  
  // This code creates the identify functionality when a feature on the map is clicked.
  //First create the identifyTask and identifyParameters variables. Then set the identifyParameters properties.
  
   var identifyTask = new IdentifyTask(precURL);
   var identifyParams = new IdentifyParameters();
   identifyParams.tolerance = 3;
   identifyParams.returnGeometry = true;
   identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
   identifyParams.width  = map.width;
   identifyParams.height = map.height;

   // Create a variable to hold the clicked point on the map.
   var clickPnt = evt.mapPoint;
         identifyParams.geometry = clickPnt;
         identifyParams.mapExtent = map.extent;
         identifyParams.layerIds = mapLayer.visibleLayers;
   //identifyParams.layerIds = [0,1];
   
   // Execute the identifyTask, which will return an array of popup templates to be stored in the "deferred" variable. 
         var deferred = identifyTask.execute(identifyParams);

         deferred.addCallback(function(response) {      
          // The idenitifyTask returns an array of identify result objects    
            // This callback function is used to change it to an array of features each with
            // a popup template based on the attribute fields for each feature.
            return dojo.map(response, function(result) {
              var feature = result.feature;
              var fieldInfo = [];
              for (var key in feature.attributes){
               if (feature.attributes.hasOwnProperty(key)){
                var info = {fieldName:"", visible:true};
                info.fieldName = key;
                fieldInfo.push(info);
               }
              };
              feature.setInfoTemplate(new PopupTemplate({
      title: result.layerName,
      fieldInfos: fieldInfo
     }));
              return feature;
            });
         });
      
         // InfoWindow expects an array of features from each deferred
         // object that you pass. If the response from the task execution 
         // above is not an array of features, then you need to add a callback
         // like the one above to post-process the response and return an
         // array of features.
         // Set the infoWindow features to the array stored in the "deferred" variable.
         map.infoWindow.setFeatures([ deferred ]);
         // Set the anchor point for the infoWindow to the clicked point.
         map.infoWindow.show(clickPnt); 
        });
     
        
   
  //editor  
  map.on("layers-add-result", initEditor); 
  
        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: 1
          }, "templateDiv");
          templatePicker.startup();
  
          var layers = arrayUtils.map(evt.layers, function(result) { 
   //alert(result.layer.name);
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
   //geometryService:geometryService,
            layerInfos: layers
          };
  
          var params = {settings: settings};    
          var myEditor = new Editor(params,"editorDiv");
          //define snapping options
          myEditor.startup();
        }
 }
);

Re: identify dynamicservice layers and edit feature layer

JakeSkinner — Wed, 12 Feb 2014 14:19:20 GMT

Hi BC,

One way you could do this is by creating a Start Editing and Stop Editing button. Once the Start Editing button is clicked, you will be able to add/update point features. When Stop Editing is clicked, you can identify the polygons.

For some reason, I would receive an error after clicking 'Stop Editing' when a dynamic map layer was added to the app. To workaround this, I added the polygon layer as a feature layer. You can take a look at an example here.

Re: identify dynamicservice layers and edit feature layer

BC — Sat, 11 Dec 2021 14:17:49 GMT

Thank you for your reply -
I tried to implement the logic from your example. However I still cannot enable editing - Wondering if you could see where I may be messing up - Thank you in advance - BC


var precURL = "http://Polygons../MapServer"
var addressURL = "http://PointService../FeatureServer/0";
var visibleLayers = [0,1];
var mapTitle = "mymap";
var map, mapLayer, featureLayer, fLayer;

require([
 "esri/map", 
 "esri/dijit/HomeButton",
 "esri/geometry/Extent", 
 "esri/layers/ArcGISDynamicMapServiceLayer",  
 "esri/layers/FeatureLayer", 
 "esri/dijit/Scalebar", 
 "esri/dijit/PopupTemplate", 
 "esri/dijit/Popup", 
 "esri/dijit/Geocoder",
 
 "esri/tasks/IdentifyTask", 
 "esri/tasks/IdentifyParameters", 
 "esri/tasks/IdentifyResult", 
 "esri/geometry/screenUtils",
 
 "dojo/_base/array", 
 "dojo/parser", 
 "modules/customBasemaps", 
 "modules/clickLegend",
 "dojo/dom", 
 "dojo/dom-construct",
 "esri/config",
   
 "esri/toolbars/edit",
 "esri/layers/ArcGISTiledMapServiceLayer",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/dijit/editing/Editor-all",
 "esri/dijit/editing/TemplatePicker",
 "esri/config",
 "dojo/i18n!esri/nls/jsapi",
 "dojo/keys",
 
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
  "dijit/registry",
  "dijit/form/Button",
  "dojo/domReady!"

 ],
 function(
  Map, 
  HomeButton,
  Extent, 
  ArcGISDynamicMapServiceLayer, 
  FeatureLayer,
  Scalebar, 
  PopupTemplate, 
  Popup, 
  Geocoder,
    
  IdentifyTask, 
  IdentifyParameters, 
  IdentifyResult, 
  screenUtils,
    
  arrayUtils, 
  parser, 
  CustomBasemaps, 
  ClickLegend, 
  dom, 
  domConstruct,
  esriConfig,

  Edit, 
  ArcGISTiledMapServiceLayer, 

  SimpleMarkerSymbol, 
  Editor, 
  TemplatePicker,
  jsapiBundle, 
  keys,
  registry
 ) {
  
  parser.parse();
  
  document.title = mapTitle;

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

        esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
       
  mapLayer = new ArcGISDynamicMapServiceLayer(precURL);

  // Address layer
  featureLayer = new FeatureLayer(addressURL,{
    mode: FeatureLayer.MODE_ONDEMAND, 
    outFields: ['*']
   });
  
  //labels
  var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
  
  //change in prod
  esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

  
  map = new esri.Map("map", {
          basemap: "streets",
          center: [-79.34, 36.0],
          zoom: 10
  });
    
  //Legend   
    var legend = new ClickLegend();
    // Send the service url to the "setLayers" method of ClickLegend to create the legend.
       legend.setLayers([precURL]);
    
 
  var basemapGallery = new CustomBasemaps({
          showArcGISBasemaps: false,
          map: map
        }, "basemapMenu");
        basemapGallery.startup();
  
  // Set functions to occur once the map has loaded.
  map.on("load", function(){
   // Using ESRI module, add a scale bar to the map. CSS style can be modified in layout.css.
   var scalebar = new Scalebar({
    map:map,
    scalebarUnit:"english"
   });
   
   //Home button
   var home = new HomeButton({
    map: map
    }, "HomeButton");
    home.startup();
   
   var search = new Geocoder({
    map:map
   }, "search");
   search.startup();
     
   var layerDefinitions = [];
   layerDefinitions[0] = "COUNTY_ID = 1";
   layerDefinitions[1] = "COUNTY_ID = 1";
   mapLayer.setLayerDefinitions(layerDefinitions);
   // Add the layer to the map.
   map.addLayers([mapLayer,labels,featureLayer]);
  
   // Set the visible layers using the visibleLayers variable.
   mapLayer.setVisibleLayers(visibleLayers);
   
   //editing
    registry.forEach(function(d) {
     // d is a reference to a dijit
     // could be a layout container or a button
     alert("test1");
     if ( d.declaredClass == "dijit.form.Button" ) {
    alert("test");
    if (d.value === "startEditing"){
     alert("aaa");
     d.on("click",initEditor);
     }
    else if (d.value==="stopEditing"){
     alert("bbb")
     d.on("click",stopEditing1);
    }
    else{
     return;
    }
     }
   });
  });


  functionMode = true;
        map.on("click", function (evt) {
            if (functionMode == true) {
    //alert(dom.byId("startEditing").value);
                executeIdentifyTask(evt)
            } else {
                return
            }
        })
  //First create the identifyTask and identifyParameters variables. Then set the identifyParameters properties.
  
  // Set identifyTask to run when the map is clicked.
  var identifyTask = new IdentifyTask(precURL);
  var identifyParams = new IdentifyParameters();
  identifyParams.tolerance = 3;
  identifyParams.returnGeometry = true;
  identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
  identifyParams.width  = map.width;
  identifyParams.height = map.height;

  function executeIdentifyTask(evt) {
   // Create a variable to hold the clicked point on the map.
   var clickPnt = evt.mapPoint;
         identifyParams.geometry = clickPnt;
         identifyParams.mapExtent = map.extent;
         identifyParams.layerIds = mapLayer.visibleLayers;
   //identifyParams.layerIds = [0,1];
   
   // Execute the identifyTask, which will return an array of popup templates to be stored in the "deferred" variable. 
         var deferred = identifyTask.execute(identifyParams);

         deferred.addCallback(function(response) {      
          // The idenitifyTask returns an array of identify result objects    
            // This callback function is used to change it to an array of features each with
            // a popup template based on the attribute fields for each feature.
            return dojo.map(response, function(result) {
              var feature = result.feature;
              var fieldInfo = [];
              for (var key in feature.attributes){
               if (feature.attributes.hasOwnProperty(key)){
                var info = {fieldName:"", visible:true};
                info.fieldName = key;
                fieldInfo.push(info);
               }
              };
              feature.setInfoTemplate(new PopupTemplate({
      title: result.layerName,
      fieldInfos: fieldInfo
     }));
              return feature;
            });
         });
      
         // InfoWindow expects an array of features from each deferred
         // object that you pass. If the response from the task execution 
         // above is not an array of features, then you need to add a callback
         // like the one above to post-process the response and return an
         // array of features.
         // Set the infoWindow features to the array stored in the "deferred" variable.
         map.infoWindow.setFeatures([ deferred ]);
         // Set the anchor point for the infoWindow to the clicked point.
         map.infoWindow.show(clickPnt); 
        //});
    } 
        
  
  //editor  
  //map.on("layers-add-result", initEditor); 
  
        function initEditor() {
    alert ("initEditor");
    functionMode = false;
          var templateLayers = arrayUtils.map(evt.layers, function(result){
   return result.layer;
          });
   
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 1
          }, "templateDiv");
          templatePicker.startup();
  
          var layers = arrayUtils.map(evt.layers, function(result) { 
   //alert(result.layer.name);
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
   //geometryService:geometryService,
            layerInfos: layers
          };
  
          var params = {settings: settings};    
          var myEditor = new Editor(params,"templateDiv");
          //define snapping options
          myEditor.startup();
        }
  

  /*
  function initEditor() {
   alert("initEditor");
            map.graphics.clear();
            functionMode = false;
            templatePicker = new TemplatePicker({
                featureLayers: [featureLayer]
            }, "templateDiv");
            templatePicker.startup();

            var layers = [{
                featureLayer: featureLayer
            }];

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

            var params = {
                settings: settings
            };
            myEditor = new Editor(params, 'templateDiv');

            myEditor.startup();
        };

  */
  
        function stopEditing() {
   alert("stop editing..");
            templatePicker.destroy();
            myEditor.destroy();
   
            dojo.create("div", {
                id: "templateDiv"
            },"cpTemplate");
            functionMode = true;
   
        }
  
 }
);

Re: identify dynamicservice layers and edit feature layer

BC — Tue, 18 Feb 2014 00:21:04 GMT

resolved. Thanks for the example.

Re: identify dynamicservice layers and edit feature layer

RichardMoussopo — Thu, 23 Oct 2014 16:34:54 GMT

Hi Jake, I am looking for a similar scenario but your link is not working for me.

Re: identify dynamicservice layers and edit feature layer

Anonymous User — Wed, 11 Feb 2015 14:09:34 GMT

I noticed in your example Jake that this almost does exactly what we need. Except that its Identify only works on one layer. The layer that is not editable. To see the edit layer attribs you have to be editing. For now this will work though and thank you.

We had the same issue, where I want an Identify tool and Editor. We have two services. One is a dynamic map service with a dozen or so different layers (layer ids). And a feature service point layer that is editable. Identify should work on all layers and display the normal infowindow. (for all visible layers). When editing, the Editor Template takes over for the layer that is editable, the feature service layer, and displays its special Attribute Inspector popup with editing fields and delete button.

What would be perfect is for Identify to work for both layers when not editing. And display standard popup. And to make it really perfect, they would not conflict and they would even work when Editing is active. By that I mean that if you are Editing, then click Identify, it works on the dynamic map service as normal, but it does not override the Editor infowindow.

This sounds simple but i know the logic here is quite complex. Mostly due to the rather minimalist approach so far that has been taken with regards to the API. I think many customers would like an Identify out of the box that "just works". Long has it been sought, that an Identify works on all visible layers, and... in this case, for all services or a certain group of services. So, ID all visible layers in all or in several services. But also do not conflict with Editor as above. In fact I gave up on an Identify like this, even though someone posted a great example here (IdentifyTask Returning Scale-Dependent Layers When Outside of Scale Range ) I couldn't seem to get it to work and so I put everything into one dynamic map service and that seemed to work nicely with AGS JS TOC and YourLayerName.visibleLayers as for the layerIds parameters.

Maybe ESRI or someone has done such a thing or has said example? Where ID and Editor "just work"? For now I think I'll just adopt Jake's sample (thank you again) and just tell users to "see" the attribs of the editing layer they have to turn on Editing. But I think the workflow I described where they are in less conflict and both "just work" for the user, seems more optimal and intuitive.

Re: identify dynamicservice layers and edit feature layer

JakeSkinner — Wed, 11 Feb 2015 15:05:51 GMT

Hi Kevin,

Here is an updated Fiddle that has the ability to identify all the layers when not editing. I also updated the code to allow you to edit all layers.

Re: identify dynamicservice layers and edit feature layer

Anonymous User — Wed, 11 Feb 2015 18:28:37 GMT

Jake thank you so much that was quite fast! I will bookmark this for the future certainly.

But my current situation is that I have a feature layer to edit, and a second layer, but that I bring in as a dynamic map service. (it covers the county with dozens of complex layers so I have to bring it in as dynamic and not feature).

I guess for now I don't need Identify to work on the feature layer. I just want to stop Identify from showing its popup infoWindow when Editing.

Here is what happens: Editing works fine by itself. Identify works fine by itself. But, after using Identify, the popup infoWindow for the editable feature layer gets "messed up". If I click one of the editable points, it displays whatever the last thing was I clicked on with Identify, in the other layer, the dynamic one. Example: 1. I activate Identify 2. I click a Zip Code and it highlights and shows its popup infowindow just like it should 3. I then click an editable point in the feature layer. The polygon I had previously clicked, the Zip Code, highlights, and its popup infoWindow shows up, but it is anchored from the featurelayer point I just clicked though.

Now, I did use this thread with the brilliant on.once example ....on.once(map, 'click', function(evt) { //do stuff });

Cancel Identify Task

But it seems the that while this takes care of the identify handler's conflicts with clicks on the map, the infowindow from the Identify persists. And appears instead of the attribute inspector.

Thoughts? For now I just want Editor take back over the infoWindow at least for the feature layer, when activated. I am ok if Identify works for only the dynamic layer. I will keep working on this and post back results if successful...Thanks to all.

I am working on posting a Fiddle but since it's got a lot of local and proprietary stuff in it it's not quite up and running on Fiddle but if that would help I will keep working on it and post it. And as an example for others. Has anyone else tried to do what I'm doing? Identify and Edit, with a dynamic layer and feature layer respectively? This must be a common scenario?

Re: identify dynamicservice layers and edit feature layer

Anonymous User — Fri, 27 Feb 2015 16:40:59 GMT

Hi Everyone.

I figured it out. Complete working example code is below. JS fiddle was having an issue but this works on ESRI Sandbox. (ArcGIS API for JavaScript Sandbox ) I just used a sample ESRI feature service for Points to edit and a sample Dynamic service with lots of stuff, to show off the TOC.

Now I need to integrate it back into my main project.... I was trying to get around destroying the Editor etc. but I guess it's necessary, so popups don't get messed up. I was hoping the simple way of "pausing" Editor, with the logic below.... (my Editor is in a jQuery dialog)

$('#EditDivContainer').on('dialogclose', function (event) {

myEditor.stopEditing(false);

myEditor._disableMapClickHandler();

});

$("#EditStartBtn").click(function() {

myEditor._enableMapClickHandler();

});

But, no dice. Popups messed up. Tried a bunch of things to blow away the map.infoWindow to no avail. So, Jake I think your solution works and I will have integrate it. Thanks Jake and everyone else!

---------------- BELOW is my working Example -------------

<!DOCTYPE html>

<html>

<head>

<title>Identify and Editor </title>

var dojoConfig = { //3.12 vers

async: false,

parseOnLoad: true,

packages: [{

"name": "agsjs",

"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.10/build/agsjs/dijit/' // for xdomain load

}]

};

</script>

html, body, #divMap {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

body {

background-color: #FFF;

overflow: hidden;

font-family: "Trebuchet MS";

}

#bcMain {

width: 100%;

height: 100%;

}

#cpTop {

height: 50px;

}

#cpLeft {

width: 215px;

overflow: hidden;

}

</style>

//<![CDATA[

window.onload = function () {

var map, widgetEditor, functionMode;

require([

"esri/map",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/tasks/GeometryService",

"esri/dijit/editing/Editor",

"esri/dijit/editing/TemplatePicker",

"esri/config",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/InfoTemplate",

"dojo/dom-construct",

"dojo/dom-style",

"esri/dijit/Legend",

"dojo/_base/Color",

"esri/geometry/Extent",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/symbols/SimpleFillSymbol",

"esri/renderers/ClassBreaksRenderer",

"dojo/_base/fx",

"agsjs/TOC",

"dojo/ready",

"dojo/parser",

"dojo/dom",

"dojo/on",

"dojo/_base/array",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

function (

Map, ArcGISDynamicMapServiceLayer, FeatureLayer, GeometryService, Editor, TemplatePicker, config,

IdentifyTask, IdentifyParameters, InfoTemplate, domConstruct, domStyle, Legend,

Color,

Extent,

ArcGISTiledMapServiceLayer,

SimpleFillSymbol,

ClassBreaksRenderer,

baseFx,

TOC,

ready, parser, dom, on, arrayUtils,

BorderContainer, ContentPane) {

ready(function () {

parser.parse();

//config.defaults.io.proxyUrl = "http://localhost/proxy/proxy.ashx";

map = new Map("divMap", {

basemap: "topo",

center: [-109.86, 40.3],

zoom: 14

});

var flFirePoints, webmap;

webmap = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Energy/Infrastructure/MapServer";

var webmapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(webmap, {

id: 'Dynamic'

}

);

flFirePoints = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayers([flFirePoints, webmapLayer]);

dojo.connect(map, 'onLayersAddResult', function() {

var KSAVLayers = new agsjs.dijit.TOC({

map: map,

collapsed: false,

layerInfos: [

{

layer: webmapLayer,

slider: false,

title: "Web Map Layers"

}

]

}, 'TocDiv');

KSAVLayers.startup();

});

on(dom.byId("startEditing"), "click", initEditor);

on(dom.byId("stopEditing"), "click", stopEditing);

functionMode = true;

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

if (functionMode == true) {

executeIdentifyTask(evt);

} else {

return;

}

});

identifyTask = new IdentifyTask(webmap);

identifyParams = new IdentifyParameters();

identifyParams.tolerance = 3;

identifyParams.returnGeometry = true;

identifyParams.layerIds = webmapLayer.visibleLayers;

identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

identifyParams.width = map.width;

identifyParams.height = map.height;

function executeIdentifyTask(evt) {

identifyParams.geometry = evt.mapPoint;

identifyParams.mapExtent = map.extent;

identifyParams.layerIds = webmapLayer.visibleLayers;

var deferred = identifyTask.execute(identifyParams);

deferred.addCallback(function (response) {

return dojo.map(response, function (result) {

var feature = result.feature;

feature.attributes.layerName = result.layerName;

var template = new InfoTemplate("", "${*}");

feature.setInfoTemplate(template);

return feature;

});

map.infoWindow.setFeatures([deferred]);

map.infoWindow.show(evt.mapPoint);

}

function initEditor() {

map.graphics.clear();

functionMode = false;

templatePicker = new TemplatePicker({

featureLayers: [flFirePoints]

}, "divLeft");

templatePicker.startup();

var layers = [{ featureLayer: flFirePoints }];

var settings = {

templatePicker: templatePicker,

map: map,

layerInfos: layers,

toolbarVisible: true,

createOptions: { polygonDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON] }

};

var params = {

settings: settings

};

myEditor = new Editor(params, 'topDiv');

myEditor.startup();

};

function stopEditing() {

templatePicker.destroy();

myEditor.destroy();

dojo.create("div", {

id: "divLeft"

}, "cpLeft");

dojo.create("div", {

id: "topDiv"

}, "cpTop");

functionMode = true;

}

});

}//]]>

</script>

</head>

</div>

</div>

</div>

</div>

</body>

</html>