AnsweredAssumed Answered

Editor widget - how to set up symbol layer (unique value renderer)?

Question asked by AGI_friedrich.striewski on Nov 19, 2015
Latest reply on Nov 19, 2015 by AGI_friedrich.striewski

I am stuck with setting up the template-picker layer for editing tools, the layer from which the user picks its symbols (point, line etc) to be placed in the map. In the API reference, this is usually the wildfire layer (Layer: Wildfire Response Points (ID: 0) ). Now I want to use one of my own layers instead, mainly to set up a customized toolset to pick from.

 

I imagine it is necessary to first define a unique value renderer to create a subset of unique symbols from my feature layer. I provided such renderer after referencing my feature layer by service URL in the app - although I see that a unique value renderer is already stored within the wildfire layers.

 

First question: Is this workflow correct?

 

Second question: How can I set up my feature layer to contain a unique value renderer in its service - without having ArcGIS Server (only Desktop)?

 

I attached my code at the bottom. Layers are added and styled correctly, but the symbol range does not appear in the side panel (where icons get picked). Instead the panel is empty except for the label and the default wildfire layer. I can not figure out, where the layers are fed into the template-picker or how my code differs from the default layer.

 

Third question: What's wrong with my set-up?

 

At least, fourth question: Where is the user input stored, e.g. the drawn symbols or provided attachments? Does my layer have to be editable, can this be toggled and what are the requirements?

 

 

Code:

(based on Editor widget with simple toolbar)

 

<!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.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/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.14/"></script>
    <script>
      var map;
      
      require([
        "esri/map", 
        "esri/tasks/GeometryService",

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

        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",  "esri/symbols/SimpleFillSymbol",
     "esri/renderers/UniqueValueRenderer",

        "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,
        Color, SimpleMarkerSymbol, SimpleLineSymbol,    SimpleFillSymbol,
        UniqueValueRenderer,
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys
      ) {
        parser.parse();       
        // https://developers.arcgis.com/javascript/jssamples/ed_simpletoolbar.html
        // 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");
        
        // add map
        
        map = new Map("map", { 
          basemap: "topo",
          center: [10.56, 51.738],
          zoom: 13,
          slider: false 
        });

      map.on("layers-add-result", initEditor); // !important
       
        //add layer and stuff
        var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(labels);

        var responsePoints = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });
        
        // my layers
        
        var testPoints2 = new FeatureLayer("http://services5.arcgis.com/0tjzL07CGvc7jUJw/arcgis/rest/services/SAMPLEZ/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['Descr']
        });
        
        var testPoints = new FeatureLayer("http://services5.arcgis.com/0tjzL07CGvc7jUJw/arcgis/rest/services/SAMPLEZ/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['Descr']
        });
        
        // set up unique value renderer
        
        var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
        defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

         var renderer = new UniqueValueRenderer(defaultSymbol, "Descr");
         renderer.addValue("PG1", new SimpleMarkerSymbol().setColor(new Color([255, 0, 0])));
          renderer.addValue("Glacier1", new SimpleMarkerSymbol().setColor(new Color([0, 255, 0, 0.5])));
          renderer.addValue("Lake1", new SimpleMarkerSymbol().setColor(new Color([0, 0, 255, 0.5])));
         testPoints.setRenderer(renderer); // nimmt default symbol aus tabelle, aber punkte werden gestylt
        
        
        map.addLayers([responsePoints, testPoints2, testPoints]); //has to be here or breaks
        
        // end of layer def. and add to map
        

        
        function initEditor(evt) {
          
          // var templateLayers
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          
          // sets up template window  --> https://developers.arcgis.com/javascript/jsapi/templatepicker-amd.html
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers, testPoints, // sets icon layer? XX
            grouping: true,
            rows: "auto",
            columns: 3 // sets icon columns in side bar
          }, "templateDiv");
          templatePicker.startup();

          
          // var layers
          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          }); // end layers
          
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: false, // true | false, toggles the toolbar
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ ]
            },
            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>

Attachments

Outcomes