topic Re: JavaScript Application - What am I missing? in ArcGIS JavaScript Maps SDK Questions

JavaScript Application - What am I missing?

ChrisHolmes — Thu, 09 Oct 2014 20:56:12 GMT

Hello everyone,

I have the attached file (AddRecord_V6.html) which I will paste into the thread at the bottom. It works fine in the JavaScript sandbox environment. I have recently tried to break this file out into separate files (.html, .js, .css) to see if I can get this working from the web server on my PC (localhost).

Of course it's not working. What I see is:

I'm confident that 2 things that need to be changed when moving away from the Sandbox environment are:

Proxy
- I have been trying to follow (https://developers.arcgis.com/javascript/jshelp/ags_proxy.html) to get the proxy working. But I'm not getting it. Is there any documentation that can help walk someone more explicitely through the steps?
- Irregardless, I don't think that the proxy issue would have anything to do with the map not displaying above.
Dojo
- I've been reading on the dojo site dojotoolkit.org, trying to get that set up. The easiest method seems to be to reference a CDN.

Basically I don't know what I'm missing to get this working. Any direction greatly appreciated. The index.zip contains the individual files broken out. Below is the code from AddRecord_V6.html

Thanks all!

<!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>Multiple Attribute Inspectors</title>  
  
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">  
    <style>  
      html,body {  
        height:100%;  
        width:100%;  
        background-color:#FFF;  
        font-family:Kimberley, sans-serif;  
        margin:0;  
        padding:0;  
      }  
  
      #header {  
        padding-top:4px;  
        padding-right:15px;  
        background-color:#570026;  
        color:#CCC59E;  
        font-size:16pt;  
        text-align:right;  
        font-weight:700;  
        height:55px;  
        margin:2px;  
      }  
  
      #subheader {  
        font-size:small;  
        color:#E8D9AC;  
        text-align:right;  
        padding-right:1px; /*20px;*/  
      }  
  
      #leftPane {  
        margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/  
        width:200px; /*300px;*/  
        color:#3C1700;  
        background-color:#FFF;  
      }  
      
      #HomeButton {
         position: absolute;
         top: 95px;
         left: 20px;
         z-index: 50;
         }
         
    #LocateButton {
      position: absolute;
      top: 129px;
      left: 20px;
      z-index: 50;
    }
      
      #map {  
        margin:5px;  
        padding:0px;  
      }  
      .templatePicker {  
        border: none !important;  
        height: 93% !important;  
      }  
      .templatePicker .grid .groupLabel{ /* This css will remove the template picker title*/  
        display:none;                      /* "TRPLCWH.Comments"*/  
      }  
      .templatePicker .itemLabel{ /*makes text orange*/  
        color:black;  
      }  
      .roundedCorners{  
        border:solid 3px #705B35;  
        border-radius:6px;  
      }  
      .shadow {  
        -webkit-box-shadow: 0 8px 6px -6px #999;  
        -moz-box-shadow: 0 8px 6px -6px #999;  
        box-shadow: 0 8px 6px -6px #999;  
      }  
  
      .esriAttributeInspector {  
        height:283px;  
        /*width:400px;*/
        overflow: hidden; /* makes it so that the vertical scroll bar does not show up */
      }  
  
      .esriAttributeInspector .atiLayerName {  
        display:none;  
      } 


      .esriAttributeInspector .atiField {
        font-family: "Verdana";
        font-size: 1em;
        width: 300px;
      }
      
      .esriAttributeInspector .atiTextAreaField {
        font-family: "Verdana";
        font-size: 1em;
        width: 296px;
      }


      .saveButton {  
        padding-left:45px;  
         margin:0px;width:16px; height:16px;  
       }  
    </style>  
  
    <script src="http://js.arcgis.com/3.10/"></script>  
    <script>  
      require([  
          "esri/map", "esri/dijit/HomeButton", "esri/dijit/LocateButton", "esri/layers/FeatureLayer", "esri/dijit/AttributeInspector", "esri/graphic", "esri/config",  
          "dojo/dom", "dojo/on", "dojo/_base/array", "esri/toolbars/draw", "dojo/dom-construct",  
          "dojo/parser", "esri/toolbars/draw", "esri/dijit/editing/TemplatePicker", "esri/dijit/AttributeInspector",  
          "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",  
          "dojo/domReady!"  
        ], function(  
          Map, HomeButton, LocateButton, FeatureLayer, AttributeInspector, Graphic, esriConfig,  
          dom, on, array, Draw, domConstruct,  
          parser, draw, TemplatePicker, AttributeInpsector,   
          Button  
        ) {  
          
          parser.parse();  
            
          esriConfig.defaults.io.proxyUrl = "/proxy";  
    
          var map, updateFeature;  
            
          map = new esri.Map("map", {  
            basemap: "streets",  
            center: [-114.2, 51.06],   
            zoom: 12  
          });
          
          var home = new HomeButton({
            map: map
          }, "HomeButton");
          home.startup();  
    
          var geoLocate = new LocateButton({
            map: map
          }, "LocateButton");
          geoLocate.startup();
          
          on(map, "layers-add-result", initEditing);  
          
          var pointLayer = new FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/CitizenComments/FeatureServer/0", {  
            mode: FeatureLayer.MODE_SNAPSHOT,  
            outFields: ["*"]  
          });  
    
          map.addLayers([pointLayer]);  
          
    
          function initEditing(results) {            
            var layers = [results.layers[0].layer];  
              
            var templatePicker = new TemplatePicker({  
              featureLayers: layers,  
              rows: 'auto',  
              columns: 'auto',  
              grouping: true  
            }, "templatePickerDiv");  
      
            templatePicker.startup();  
      
            var drawToolbar = new Draw(map);  
      
            var selectedTemplate;  
      
            on(templatePicker, "selection-change", function() {  
              selectedTemplate = templatePicker.getSelected();  
      
              if (selectedTemplate) {  
                switch (selectedTemplate.featureLayer.geometryType) {  
                case "esriGeometryPoint":  
                  drawToolbar.activate(esri.toolbars.Draw.POINT);  
                  break;  
                }  
              }  
            });  
    
            on(drawToolbar, "draw-end", function(geometry) {  
              updateFeature = geometry;  
              console.log(updateFeature);  
           
              if (map.infoWindow.isShowing) {  
                map.infoWindow.hide();  
              }  
      
              drawToolbar.deactivate();  
      
              var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);  
              var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);  
              var newGraphic = new Graphic(geometry, null, newAttributes);               
      
              var layerInfos = [{  
                'featureLayer': selectedTemplate.featureLayer,  
                'isEditable': true,  
                'showAttachments': true,    
                fieldInfos: [    
                  { fieldName: "NAME", label: "NAME:", isEditable: true },    
                  { fieldName: "EMAIL", label: "EMAIL:", isEditable: true },    
                  { fieldName: "PHONE", label: "PHONE:", isEditable: true },    
                  { fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }                      
                ]    
              }];  
      
              var attInspector = new AttributeInspector({  
                layerInfos: layerInfos  
              }, domConstruct.create("div"));  
                
              var saveButton = new Button({ label: "Save", "class": "saveButton"});  
                domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");  
                  
                saveButton.on("click", function(){  
                map.infoWindow.hide();           
              });  
     
              selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {  
                var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));  
                 
                map.infoWindow.setContent(attInspector.domNode);  
                map.infoWindow.resize(400,400); //(325, 185);  
                map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));  
      
                templatePicker.clearSelection();  
              });  
      
              on(attInspector, "attribute-change", function(evt) {  
                  evt.feature.attributes[evt.fieldName] = evt.fieldValue;  
                evt.feature.getLayer().applyEdits(null, [evt.feature], null);  
              });  
               
              //delete a point  
              on(attInspector, "delete", function(evt) {  
                evt.feature.getLayer().applyEdits(null, null, [evt.feature]);  
                map.infoWindow.hide();  
              });  
            });  
          }  
        //removing this code makes it so that the info window does not open  
        function getInfoWindowPositionPoint(feature) {  
          var point;  
          switch (feature.getLayer().geometryType) {  
          case "esriGeometryPoint":  
            point = feature.geometry;  
            break;  
          }  
          return point;  
        }  
         
        //required for info window  
        function layerFieldToAttributes(fields) {  
          var attributes = {};  
          dojo.forEach(fields, function(field) {  
            attributes[field.name] = null;  
          });  
          return attributes;  
        }  
     });  
    </script>  
  </head>  
  
  <body class="claro">  
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"  
     style="width:100%; height:100%;">  
      <div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">  
        Planning Comments  
        <div id="subheader">  
        West Springs  
        </div>  
      </div>  
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">  
        <div>Click the pin below then click location on map to add your comment.</div>  
        <div id="templatePickerDiv"></div>  
      </div>  
      <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
       <div id="HomeButton"></div>
       <div id="LocateButton"></div>
      </div> 
    </div>  
  </body>  
  
</html>

Re: JavaScript Application - What am I missing?

RobertScheitlin__GISP — Thu, 09 Oct 2014 21:15:20 GMT

Chris,

Just add the JS API script to your index.html:

<!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>Multiple Attribute Inspectors</title>  
  
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> 
    <link rel="stylesheet" href="css/styles.css">

    <!-- Reference the js frame work from ESRI-->
    <script src="//js.arcgis.com/3.10"></script>
    
    <script src="js/map.js"></script>
  </head>  
  
  <body class="claro">  
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"  
     style="width:100%; height:100%;">  
      <div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">  
        Planning Comments  
        <div id="subheader">West Springs</div>  
      </div>  
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">  
        <div>Click the pin below then click location on map to add your comment.</div>  
        <div id="templatePickerDiv"></div>  
      </div>  
      <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
       <div id="HomeButton"></div>
       <div id="LocateButton"></div>
      </div> 
    </div>  
  </body>
</html>

Re: JavaScript Application - What am I missing?

ChrisHolmes — Thu, 09 Oct 2014 21:28:24 GMT

Thanks Robert. That seemed pretty simple. It works fine in Chrome. In IE it will not open the form or put a point on the map when I click to add a new point, I believe this is where the proxy is required?? I am using IE 9 (which I thought it would work fine with, I thought the Proxy was needed only for older browser versions)?

Thanks for your help,

Chris

Re: JavaScript Application - What am I missing?

RobertScheitlin__GISP — Thu, 09 Oct 2014 22:19:57 GMT

Chris,

It works fine on my local web server using IE11 (I don't have access to IE9).