Content Pane

williamcarr · ‎05-19-2014

I'm trying to figure out how to get the editor template to load only one layer into a content pane.

It was suggest that I change the array to filter:

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

to:

var templateLayers = arrayUtils.filter(evt.layers, function(result){
                        return result.layer.id == "id of layer you want";
                    });

I have had no luck thus far getting it to pull any layers... Any ideas?

JakeSkinner · ‎05-20-2014

Hi William,

Here is one way to accomplish this:

function initEditing(evt) {
  var currentLayer = null;
  
  //specify layer id
  var layers = arrayUtils.map(evt.layers, function(result) {
    if(result.layer.id == 'landusePoint'){
      return result.layer;  
    }                       
  });
  
  //remove 'undefined' from array
  var index = layers.indexOf(undefined);
  if (index > -1) {
      layers.splice(index, 100);
  }
....
....

Working example can be found here.

williamcarr · ‎05-20-2014

I checked out that fiddle and it appears to be what I'm looking for, but whenever I hit run it restarts without populating the template. This is regardless of whether changes were made or not. I tried loading my point layers in, but it came back empty as well. Am I doing something wrong?

JakeSkinner · ‎05-20-2014

Can you post the code you are trying to run? Or, what is the URL to your points layer?

williamcarr · ‎05-20-2014

It's secured so I can't post it. The layer is showing up, but again the template is blank.

  function initSelectToolbar(evt) {
              
              
              
          var templateLayers = arrayUtils.map(evt.layers, function(result){
             return result.layer.id =='postit'; 
             console.log(result.layer.id);
          });
    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
            }
          };

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

Thanks for taking a look.

JakeSkinner · ‎05-20-2014

Try the following function:

function initSelectToolbar(evt) {                
    var templateLayers = arrayUtils.map(evt.layers, function(result){
        if(result.layer.id == 'postit'){
            return result.layer
        }
    });
    
    var index = templateLayers.indexOf(undefined);
    if (index > -1) {
        templateLayers.splice(index, 100);
    }
    
    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
        }
    };

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

}

williamcarr · ‎05-20-2014

Now it is throwing the whole array of all layers.

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

Should this selection be modified for the single layer?

JakeSkinner · ‎05-20-2014

I don't believe so. I was able to modify the following sample to only have the Water Bodies feature layer show in the template picker. Note: you will need to configure the proxy for the edits to be submitted

<!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.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/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.9/"></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/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,
        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/en/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, 
          id: 'waterBodies',
          outFields: ['*']
        });

        map.addLayers([waterbodies,rivers]);

        function initEditor(evt) {
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            if(result.layer.id == 'waterBodies'){
              return result.layer;
            }
          });
          
          var index = templateLayers.indexOf(undefined);
          if (index > -1) {
            templateLayers.splice(index, 100);
          };
    
          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
            }
          };

          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>

williamcarr · ‎05-20-2014

First off, thanks for your help. I really appreciate it.

Your sample works as needed, but I'm getting some weird actions from it. The template only appears about half the time in your map, not at all in mine with the changes, and not in your map with my layers(have to server log in btw). I'm getting the impression that there is an underlying issue. I don't want to burn too much of your time, but should the function be called somewhere else? Deferred after the login?