<!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></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
//<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
require([
"esri/map",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"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",
"dijit/form/Button",
"dojo/domReady!"
], function(
Map,
BorderContainer,
ContentPane,
AccordionContainer,
FeatureLayer,
AttributeInspector,
Graphic,
esriConfig,
dom,
on,
array,
Draw,
domConstruct,
parser,
draw,
TemplatePicker,
Button
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy";
var map, updateFeature;
map = new Map("map", {
basemap: "streets",
center: [-114.2, 51.06],
zoom: 12
});
on(map, "layers-add-result", initEditing);
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;
}
});
//dojo.require("dijit.layout.BorderContainer");
//dojo.require("dijit.layout.ContentPane");
//dojo.require("dijit.layout.AccordionContainer");
//dojo.require("esri.map");
//dojo.require("esri.dijit.HomeButton");
//dojo.require("esri.dijit.LocateButton");
//var map;
//function init() {
// map = new esri.Map("map", {
// basemap: "topo",
// center: [-118.404, 34.054],
// zoom: 11
// });
//}
//var home = new HomeButton({
// map: map
//}, "HomeButton");
//home.startup();
//var geoLocate = new LocateButton({
// map: map
//}, "LocateButton");
//geoLocate.startup();
//dojo.ready(init);
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
This is the HEADER section
<div id="subheader">with a subheader</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
<div data-dojo-type="dijit.layout.AccordionContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
Content for pane 1
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Add Comment'">
<p>Content for pane 2</p>
<div id="templatePickerDiv"></div>
</div>
<!--<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 3'">
<p>Content for pane 3</p>
</div>-->
</div>
</div>
<div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
<!--<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane">
This is the right section
</div>-->
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
this is the footer section
</div>
</div>
</body>
</html>
