JavaScript Application - What am I missing?

677
3
Jump to solution
10-09-2014 01:56 PM
ChrisHolmes
Occasional Contributor III

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:

localhost_public.PNG

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

  1. 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.
  2. 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> 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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> 

View solution in original post

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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> 

0 Kudos
ChrisHolmes
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Chris,

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

0 Kudos