JavaScript API Help

ChrisHolmes · ‎09-19-2014

Hello everyone,

Kind of learning on the go here. My initial goal here is to allow a person to put a point on a map fill in the form, then close the form. I do not want them to be able to click other points to see the data that is associated with those points.

I've used the following sample to work from:

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=ed_multipleAttrInspector

I will post my code at the bottom of this, but will put my questions here:

Info Window Questions:

1. Why doesn't an 'X' show up in the top right to close the window?

2. For the citizen comment field is there a way to make that textbox multiline?

3. The label "CITIZEN_COMMENT", is there a way to change it to be "COMMENT". Or can that only be done by changing the field name in the source schema?

4. Once I'm completed the data entry on the form, I don't know how to close it. Clicking elsewhere on the map doesn't help. I find that what I need to do is to click back in the template picker (left pane) to make a new point then when the form opens up, just click the delete button (which is not the way it should have to be done).

Info Window Note: Initially when the form would open for data entry it would increase in vertical size when you moused over the form and make it quite difficult to click in the fields. I eventually found out that by changing the size of the Info Window, the problem disappeared.

This is the change that seems to work: map.infoWindow.resize(400,400); //(325, 185);

Template Picker Questions:

1.The name displayed for the icon "TRPLCWH.Comments". Is there a way to change it to something else, for example "Add Comment"?

2. After I added the text "Click the pin below then click location on the map to add your comment" the vertical scroll bar appeared. Why would it have shown up and is there a way to remove it?

Thanks for reading. Appreciate the help!

Chris

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Multiple Attribute Inspectors</title>

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

      #map {
        margin:5px;
        padding:0px;
      }
      .templatePicker {
        border: none !important;
        height: 98% !important;
      }
      .templatePicker .grid .groupLabel{ /* This css will remove the template picker title*/
        display:none;                      /* "TRPLCWH.Comments"*/
      }
      .templatePicker .itemLabel{ /*makes text orange*/
        color:blue;
      }
      .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:100px;
      }

      .esriAttributeInspector .atiLayerName {
        display:none;
      }
      .saveButton {
        padding-left:45px;
        margin:0px;width:16px; height:16px;
      }
    </style>

var map;

      function init() {
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/proxy";

        esri.config.defaults.io.alwaysUseProxy = false;

        map = new esri.Map("map", {
          basemap: "streets",
          center: [-114.2, 51.06], //-83.243, 42.584],
          zoom: 12
        });

dojo.connect(map, "onLayersAddResult", initEditing);

        var pointLayer = new esri.layers.FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/Citizen_Comments/FeatureServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        //var lineLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
        // mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        // outFields: ["*"]
        //});
        //var polygonLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
        // mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        // outFields: ["*"]
        //});

map.addLayers([pointLayer]); //,lineLayer,polygonLayer]);
}

      function initEditing(results) {
        var map = this;
        var layers = dojo.map(results, function(result) {
          return result.layer;
        });

        //display read-only info window when user clicks on feature
        /*
        var query = new esri.tasks.Query();

        dojo.forEach(layers, function(layer) {
          dojo.connect(layer, "onClick", function(evt) {
            if (map.infoWindow.isShowing) {
              map.infoWindow.hide();
            }

            var layerInfos = [{
              'featureLayer': layer,
              'isEditable': false,
              'showDeleteButton':false
            }]

templatePicker.startup();

var drawToolbar = new esri.toolbars.Draw(map);

var selectedTemplate;

dojo.connect(templatePicker, "onSelectionChange", function() {
selectedTemplate = templatePicker.getSelected();

          if (selectedTemplate) {
            switch (selectedTemplate.featureLayer.geometryType) {
            case "esriGeometryPoint":
              drawToolbar.activate(esri.toolbars.Draw.POINT);
              break;
            /*
            case "esriGeometryPolyline":
              selectedTemplate.template.drawingTool === 'esriFeatureEditToolFreehand' ? drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE) : drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
              break;
            case "esriGeometryPolygon":
              selectedTemplate.template.drawingTool === 'esriFeatureEditToolFreehand' ? drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON) : drawToolbar.activate(esri.toolbars.Draw.POLYGON);
              break;
            */
            }
          }
        });

        dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
          //display the editable info window for newly created features

          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 esri.Graphic(geometry, null, newAttributes);

          var layerInfos = [{
            'featureLayer': selectedTemplate.featureLayer,
            'isEditable': true
          }];

          var attInspector = new esri.dijit.AttributeInspector({
            layerInfos: layerInfos
          }, dojo.create("div"));

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

          dojo.connect(attInspector, "onAttributeChange", function(feature, fieldName, newFieldValue) {
            feature.attributes[fieldName] = newFieldValue;
            feature.getLayer().applyEdits(null, [feature], null);
          });

          //delete a point
          dojo.connect(attInspector, "onDelete", function(feature) {
            feature.getLayer().applyEdits(null, null, [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;
        /*
        case "esriGeometryPolyline":
          var pathLength = feature.geometry.paths[0].length;
          point = feature.geometry.getPoint(0, Math.ceil(pathLength / 2));
          break;
        case "esriGeometryPolygon":
          point = feature.geometry.getExtent().getCenter();
          break;
        */
        }
        return point;
      }

      //required for info window
      function layerFieldToAttributes(fields) {
        var attributes = {};
        dojo.forEach(fields, function(field) {
          attributes[field.name] = null;
        });
        return attributes;
      }

      //show map on load
      dojo.ready(init);
    </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>
    </div>
</body>

</html>

JakeSkinner · ‎09-23-2014

It doesn't look like ArcGIS Server is running. When trying to access the REST services directory, a 404 error is returned:

http://gismap2.calgary.ca/arcgis/rest/services/

ChrisHolmes · ‎09-23-2014

Thanks again Jake. I just heard that the server may be down, it is a test server.