Tamplate picker issue

776
4
10-03-2013 07:14 AM
ChiranjeeviGK
New Contributor III
Hi all

i am trying to learn the TemplatePicker as in the example simpletoolbar.html

instead of loading the given layers as in example i added my layer which i have created from online arcGIS account,

i am not able to see any marker in the template picker panel.

here i have attached the code

[HTML]<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--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.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/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.7/"></script>
    <script>
      var map;
     
      require([
        "esri/map",
        "esri/toolbars/edit",

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

        "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, Edit,
        ArcGISTiledMapServiceLayer, FeatureLayer,
        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 esri.tasks.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 bangalore = new FeatureLayer("http://services1.arcgis.com/6KARYenaCPY4jndv/ArcGIS/rest/services/bangaloreDetails/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        map.addLayers([bangalore]);

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

          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>
[/HTML]
0 Kudos
4 Replies
JohnGravois
Frequent Contributor
after making sure i had a valid proxy reference and swapping the url in your app with a different feature service i was able to see editing templates so there doesn't appear to be anything wrong with the code.

http://sampleserver6.arcgisonline.com/arcgis/rest/services/ServiceRequest/FeatureServer/0

looking at your own service, it looks fine to me, but you might try publishing another one without picture marker symbology to see if something is wrong with your own symbology for some reason.
0 Kudos
ChiranjeeviGK
New Contributor III
Thanks jgravois

valid proxy reference


i have copied the proxy.jsp in to my web app but i can not see the symbols.

i can see the error in the console as below


XMLHttpRequest cannot load http://server.arcgisonline.com/ArcGIS/rest/info?f=json. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.


is this the reason?
0 Kudos
JohnGravois
Frequent Contributor
the error you mentioned isn't the cause of the problem.  see this thread for more information.

you can test that your proxy is actually functioning by trying to load a page directly in the browser like this
http://servername/folder/proxy.jsp?http://sampleserver6.arcgisonline.com/arcgis/rest/services/Servic...

that being said, i checked the network traffic in my own app and in our live sample and the proxy doesn't seem to be needed to load the page so i think it would be better to focus on the service itself (as i mentioned previously)
0 Kudos
ChiranjeeviGK
New Contributor III
Yes its issue with the symbol

i loaded a different layer which is working fine.

Thanks
0 Kudos