Tamplate picker issue

ChiranjeeviGK — Thu, 03 Oct 2013 14:14:22 GMT

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">
    
    <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]

Re: Tamplate picker issue

JohnGravois — Thu, 03 Oct 2013 14:55:19 GMT

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.

Re: Tamplate picker issue

ChiranjeeviGK — Thu, 03 Oct 2013 15:17:10 GMT

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?

Re: Tamplate picker issue

JohnGravois — Thu, 03 Oct 2013 15:23:19 GMT

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/ServiceRequest/FeatureServer/0

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)

Re: Tamplate picker issue

ChiranjeeviGK — Sat, 05 Oct 2013 12:39:51 GMT

Yes its issue with the symbol

i loaded a different layer which is working fine.

Thanks

topic Re: Tamplate picker issue in ArcGIS JavaScript Maps SDK Questions

Tamplate picker issue

Re: Tamplate picker issue

Re: Tamplate picker issue

Re: Tamplate picker issue

Re: Tamplate picker issue