topic Re: Editor conflicts with unrelated feature layer's popup template in ArcGIS JavaScript Maps SDK Questions

Editor conflicts with unrelated feature layer's popup template

MaartenManders — Sat, 11 Dec 2021 15:52:37 GMT

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

Re: Editor conflicts with unrelated feature layer's popup template

KellyHutchins — Sat, 11 Dec 2021 15:52:39 GMT

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

Re: Editor conflicts with unrelated feature layer's popup template

MaartenManders — Wed, 04 Mar 2015 13:12:46 GMT

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'.

Re: Editor conflicts with unrelated feature layer's popup template

KellyHutchins — Wed, 04 Mar 2015 16:40:31 GMT

Maarten Manders I can't reproduce that behavior with my test app. Do you have a code sample that shows the problem?

Re: Editor conflicts with unrelated feature layer's popup template

MaartenManders — Sat, 11 Dec 2021 15:52:43 GMT

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/1",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });


        var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{
          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>

Re: Editor conflicts with unrelated feature layer's popup template

MichaelStranovsky — Tue, 19 May 2015 15:05:30 GMT

Hi Kelly,

In Maeerten code, suppose the rivers where the editable layer and waterbodies where not. How would you prevent the infowindow for waterbodies to appear and allow the attribute inspector for rivers to appear when you want to add a river on top of a waterbody?