I have an issue where using the Editor + TemplatePicker causes the feature layer's (that is not editable) pop up template to not display or only briefly when using this code:
featureLayer.on("click", function(evt) { var center = evt.graphic.geometry; map.infoWindow.setFeatures([evt.graphic]); map.infoWindow.show(center); });
Also I have a problem where the label layer's labels are editable, I managed to disable this by adding the code below. I don't know if there's a better way.
labelLayer.disableMouseEvents();
The full code I inserted in this sandbox after settings variable:
//create a feature collection for the flickr photos var featureCollection = { "layerDefinition": null, "featureSet": { "features": [], "geometryType": "esriGeometryPoint" } }; featureCollection.layerDefinition = { "geometryType": "esriGeometryPoint", "objectIdField": "ObjectID", "drawingInfo": { "renderer": { "type": "simple", "symbol": { "type": "esriPMS", "url": "images/flickr.png", "contentType": "image/png", "width": 15, "height": 15 } } }, "fields": [{ "name": "ObjectID", "alias": "ObjectID", "type": "esriFieldTypeOID" }, { "name": "description", "alias": "Description", "type": "esriFieldTypeString" }, { "name": "title", "alias": "Title", "type": "esriFieldTypeString" }] }; //define a popup template var popupTemplate = new PopupTemplate({ title: "{title}", description: "{description}" }); //create a feature layer based on the feature collection featureLayer = new FeatureLayer(featureCollection, { id: 'flickrLayer', infoTemplate: popupTemplate }); featureLayer.on("click", function(evt) { var center = evt.graphic.geometry; map.infoWindow.setFeatures([evt.graphic]); map.infoWindow.show(center); }); map.addLayer(featureLayer); var symbol = new esri.symbol.TextSymbol(); var renderer = new esri.renderer.SimpleRenderer(symbol); var labelLayer = new esri.layers.LabelLayer(); labelLayer.addFeatureLayer(featureLayer, renderer, "${CITY_NAME}"); map.addLayer(labelLayer); requestPhotos(); function requestPhotos() { //get geotagged photos from flickr //tags=flower&tagmode=all var requestHandle = esriRequest({ url: "http://api.flickr.com/services/feeds/geo?&format=json", callbackParamName: "jsoncallback" }); requestHandle.then(requestSucceeded, requestFailed); } function requestSucceeded(response, io) { //loop through the items and add to the feature layer var features = []; arrayUtils.forEach(response.items, function(item) { var attr = {}; attr["description"] = item.description; attr["title"] = item.title ? item.title : "Flickr Photo"; var geometry = new Point(item); var graphic = new Graphic(geometry); graphic.setAttributes(attr); features.push(graphic); }); featureLayer.applyEdits(features, null, null); } function requestFailed(error) { console.log('failed'); } labelLayer.disableMouseEvents();
If you want the attribute inspector to show up for the editable features you can disable the info window when clicking on editable layers or creating features:
on(rivers,"click", function(){ map.setInfoWindowOnClick(false); }); on(rivers, "before-apply-edits", function(){ map.setInfoWindowOnClick(false); });
Then you can re-enable popups when clicking on non-editable layers.
featureLayer.on("click", function(){ //enable info window on click map.setInfoWindowOnClick(true); });
Thanks for your reply. It resolved the issue of the pop up hiding, but when clicking on an editable graphic its infoWindow now displays no editable information but instead shows 'No information avalailable'.
Maarten Manders I can't reproduce that behavior with my test app. Do you have a code sample that shows the problem?
This is the complete code used in the aforementioned sandbox.
<!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>Edit rivers and waterbodies</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css" /> <style> html,body{height:100%;width:100%;margin:0;overflow:hidden;} #map{ padding:0; } #header{ font-size: 1.1em; font-family: sans-serif; padding-left: 1em; padding-top:4px; color:#660000; } .templatePicker { border: none; } .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content {position: relative;} </style> <script src="http://js.arcgis.com/3.12/"></script> <script> var map; require([ "esri/map", "esri/tasks/GeometryService", "esri/toolbars/edit", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "esri/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/dijit/editing/Editor", "esri/dijit/editing/TemplatePicker", "esri/graphic", "esri/dijit/PopupTemplate", "esri/request", "esri/geometry/Point", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/layers/LabelLayer", "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, Edit, ArcGISTiledMapServiceLayer, FeatureLayer, Color, SimpleMarkerSymbol, SimpleLineSymbol, Editor, TemplatePicker, Graphic, PopupTemplate, esriRequest, Point, TextSymbol, SimpleRenderer, LabelLayer, 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/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("http://tasks.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("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"); map.addLayer(labels); var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); map.addLayers([waterbodies,rivers]); on(rivers,"click", function(){ map.setInfoWindowOnClick(false); }); on(rivers, "before-apply-edits", function(){ map.setInfoWindowOnClick(false); }); 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) { 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 } }; //create a feature collection for the flickr photos var featureCollection = { "layerDefinition": null, "featureSet": { "features": [], "geometryType": "esriGeometryPoint" } }; featureCollection.layerDefinition = { "geometryType": "esriGeometryPoint", "objectIdField": "ObjectID", "drawingInfo": { "renderer": { "type": "simple", "symbol": { "type": "esriPMS", "url": "images/flickr.png", "contentType": "image/png", "width": 15, "height": 15 } } }, "fields": [{ "name": "ObjectID", "alias": "ObjectID", "type": "esriFieldTypeOID" }, { "name": "description", "alias": "Description", "type": "esriFieldTypeString" }, { "name": "title", "alias": "Title", "type": "esriFieldTypeString" }] }; //define a popup template var popupTemplate = new PopupTemplate({ title: "{title}", description: "{description}" }); //create a feature layer based on the feature collection featureLayer = new FeatureLayer(featureCollection, { id: 'flickrLayer', infoTemplate: popupTemplate }); featureLayer.on("click", function(){ //enable info window on click map.setInfoWindowOnClick(true); }); // featureLayer.on("click", function(evt) { // var center = evt.graphic.geometry; // map.infoWindow.setFeatures([evt.graphic]); // map.infoWindow.show(center); // }); map.addLayer(featureLayer); var symbol = new esri.symbol.TextSymbol(); var renderer = new esri.renderer.SimpleRenderer(symbol); var labelLayer = new esri.layers.LabelLayer(); labelLayer.addFeatureLayer(featureLayer, renderer, "${CITY_NAME}"); map.addLayer(labelLayer); requestPhotos(); function requestPhotos() { //get geotagged photos from flickr //tags=flower&tagmode=all var requestHandle = esriRequest({ url: "http://api.flickr.com/services/feeds/geo?&format=json", callbackParamName: "jsoncallback" }); requestHandle.then(requestSucceeded, requestFailed); } function requestSucceeded(response, io) { //loop through the items and add to the feature layer var features = []; arrayUtils.forEach(response.items, function(item) { var attr = {}; attr["description"] = item.description; attr["title"] = item.title ? item.title : "Flickr Photo"; var geometry = new Point(item); var graphic = new Graphic(geometry); graphic.setAttributes(attr); features.push(graphic); }); featureLayer.applyEdits(features, null, null); } function requestFailed(error) { console.log('failed'); } labelLayer.disableMouseEvents(); 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(); } }); </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>