<!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">
<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script>
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/dijit/AttributeInspector",
"esri/dijit/InfoWindow",
"esri/config",
"dojo/dom",
"dojo/dom-construct",
"dojo/number",
"dojo/on",
"dojo/parser",
"dijit/layout/TabContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
],
function (
Map, InfoTemplate, FeatureLayer, Query, AttributeInspector, InfoWindow,
esriConfig,
dom, domConstruct, number, on, parser,
TabContainer, BorderContainer, ContentPane, Button
) {
parser.parse();
//create the infoWindow
var infoWindow = new InfoWindow({}, domConstruct.create("div"));
infoWindow.startup();
//create the map
var map = new Map("mapDiv", {
basemap: "topo",
center: [-96.755, 33.176],
zoom: 18,
infoWindow: infoWindow
});
//set the infoTemplate for the new infoWindow
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("${CAMERA_NAME}");
infoTemplate.setContent(getWindowContent);
//define the camera layer that will be added to map
var cameras = new FeatureLayer("myURL", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: infoTemplate,
outFields: ["*"]
});
//add the camera layer to the map
map.addLayers([cameras]);
//resize the infoWindow
map.infoWindow.resize(300, 300);
//function that formats and populates the infoWindow content's 2 tabs
function getWindowContent(graphic) {
//make a container for tabs
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width: 100%;"
}, dojo.create("div"));
//tab 1
var cp1 = new dijit.layout.ContentPane({
title: "Video"
});
cp1.setContent(getVideo);
tc.addChild(cp1);
//tab 2
var cp2 = new dijit.layout.ContentPane({
title: "Edit"
});
cp2.setContent(initSelectToolbar);
tc.addChild(cp2);
return tc.domNode;
};
//function that gets the camera url to open and display in tab1
function getVideo(evt) {
selectedCamera = evt.feature.attributes.URL;
return selectedCamera;
};
//function that creates the attribute inspector tab2
function initSelectToolbar(evt) {
var selectQuery = new Query();
map.on("click", function (evt) {
selectQuery.geometry = evt.mapPoint;
selectQuery.distance = 4;
selectQuery.units = "feet"
selectQuery.returnGeometry = true;
cameras.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {
if (features.length > 0) {
//store the current feature
updateFeature = features[0];
map.infoWindow.setTitle(features[0].getLayer().name);
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
else {
map.infoWindow.hide();
}
});
});
map.infoWindow.on("hide", function () {
cameras.clearSelection();
});
var layerInfos = [
{
'featureLayer': cameras,
'showAttachments': false,
'isEditable': true,
'fieldInfos': [
{ 'fieldName': 'CAMERA_NAME', 'label': 'Name', 'isEditable': false },
{ 'fieldName': 'VideoStream', 'label': 'Video Stream?', 'isEditable': true },
{ 'fieldName': 'CorrectView', 'label': 'Correct View?', 'isEditable': true },
{ 'fieldName': 'Comments', 'label': 'Comments', 'isEditable': true }
]
}
];
//Initialize Attribute Inspector
var attInspector = new AttributeInspector({
layerInfos: layerInfos
}, domConstruct.create("div"));
//add a save button next to the delete button
var saveButton = new Button({ label: "Save", "class": "saveButton" }, domConstruct.create("div"));
domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
saveButton.on("click", function () {
updateFeature.getLayer().applyEdits(null, [updateFeature], null);
});
//adds a close button next to the save button
var closeButton = new Button({ label: "Close", "class": "closeButton" }, domConstruct.create("div"));
domConstruct.place(closeButton.domNode, saveButton.domNode, "after");
//by clicking the close button the following action will happen
closeButton.on("click", function () {
map.infoWindow.hide();
});
attInspector.on("attribute-change", function (evt) {
//store the updates to apply when the save button is clicked
updateFeature.attributes[evt.fieldName] = evt.fieldValue;
});
attInspector.on("next", function (evt) {
updateFeature = evt.feature;
console.log("Next " + updateFeature.attributes.OBJECTID);
});
attInspector.on("delete", function (evt) {
evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
map.infoWindow.hide();
});
map.infoWindow.setContent(attInspector.domNode);
}
});
</script>
</head>
<body class="soria">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
