Mixing FeatureLayer and KMLLayer on same map breaks edit ability

1079
0
08-24-2016 04:00 PM
DamNguyen
New Contributor III

Hi guys, I have a map with multiple FeatureLayers and KMLLayers. Prior to adding the KMLLayers, I was able to edit/draw on the FeatureLayers  using the simple tools provided. After adding KMLLayers, I'm still able to draw, but when I click on any graphic/feature, or right after drawing a new graphic, I get a "No information available" popup window. Here's a sample code I've taken from here: ArcGIS API for JavaScript Sandbox  with a couple of lines added to add a KMLLayer.

var map;

 require([
 "esri/map",
 "esri/tasks/GeometryService",

 "esri/layers/ArcGISTiledMapServiceLayer",
 "esri/layers/FeatureLayer",
 "esri/layers/KMLLayer",

 "esri/Color",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/symbols/SimpleLineSymbol",

 "esri/dijit/editing/Editor",
 "esri/dijit/editing/TemplatePicker",

 "esri/config",
 "dojo/i18n!esri/nls/jsapi",

 "dojo/_base/array", "dojo/parser", "dojo/keys",

 "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
 "dojo/domReady!"
 ], function(
 Map, GeometryService,
 ArcGISTiledMapServiceLayer, FeatureLayer, KMLLayer,
 Color, SimpleMarkerSymbol, SimpleLineSymbol,
 Editor, TemplatePicker,
 esriConfig, jsapiBundle,
 arrayUtils, parser, keys
 ) {
 parser.parse();

 // snapping is enabled for this sample - change the tooltip to reflect this
 jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";

 // refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
 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.
 esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

 map = new Map("map", {
 basemap: "satellite",
 center: [-96.541, 38.351],
 zoom: 14,
 slider: false
 });

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

 //add boundaries and place names
 var labels = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
 map.addLayer(labels);

 var responsePoints = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
 mode: FeatureLayer.MODE_ONDEMAND,
 outFields: ['*']
 });

 var responsePolys = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2", {
 mode: FeatureLayer.MODE_ONDEMAND,
 outFields: ['*']
 });
 
 map.addLayers([responsePolys, responsePoints]);
 
 var kmlUrl = 'http://dl.dropbox.com/u/2654618/kml/Wyoming.kml';
 var kml = new esri.layers.KMLLayer(kmlUrl); 
 map.addLayer(kml);
 
 function initEditor(evt) {
 var templateLayers = arrayUtils.map(evt.layers, function(result){
 return result.layer;
 });
 var templatePicker = new TemplatePicker({
 featureLayers: [responsePolys, responsePoints],
 grouping: true,
 rows: "auto",
 columns: 3
 }, "templateDiv");
 templatePicker.startup();

 var layers = arrayUtils.map(evt.layers, function(result) {
 return { featureLayer: result.layer };
 });
 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
 }
 };

 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();
 }
 });

I have bolded the new code. JSFiddle here: Edit fiddle - JSFiddle. In the JSFiddle example, for some reasons, the first drawn graphic will show the proper info window with a delete button, but any subsequent action to a new/existing graphic will only display a "No information available". 

Tags (2)
0 Kudos
0 Replies