topic Re: Content Pane in ArcGIS JavaScript Maps SDK Questions

Content Pane

williamcarr — Mon, 19 May 2014 18:03:15 GMT

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?

Re: Content Pane

JakeSkinner — Fri, 10 Dec 2021 23:29:08 GMT

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.

Re: Content Pane

williamcarr — Tue, 20 May 2014 12:08:23 GMT

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?

Re: Content Pane

JakeSkinner — Tue, 20 May 2014 12:15:24 GMT

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

Re: Content Pane

williamcarr — Fri, 10 Dec 2021 23:29:10 GMT

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.

Re: Content Pane

JakeSkinner — Fri, 10 Dec 2021 23:29:13 GMT

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

}

Re: Content Pane

williamcarr — Fri, 10 Dec 2021 23:29:16 GMT

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?

Re: Content Pane

JakeSkinner — Fri, 10 Dec 2021 23:29:18 GMT

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>

Re: Content Pane

williamcarr — Tue, 20 May 2014 14:17:36 GMT

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?