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>
