<!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.8/js/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#loading {
display: none;
vertical-align: middle;
}
</style>
<script src="http://js.arcgis.com/3.8/"></script>
<script>
var map, featureLayer, gp;
require([
"esri/map", "esri/config", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/tasks/FeatureSet", "esri/geometry/Extent",
"esri/layers/GraphicsLayer", "esri/tasks/Geoprocessor",
"dijit/form/Button", "dojo/parser", "dijit/registry", "dojo/dom", "dojo/on", "dojo/dom-style", "dojo/domReady!"
], function(
Map, esriConfig, FeatureLayer, InfoTemplate, FeatureSet, Extent,
GraphicsLayer, Geoprocessor,
Button, parser, registry, dom, on, domStyle
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "proxy.ashx";
var loading = dom.byId("loading");
map = new Map("mapDiv", {
basemap: "streets",
center: [-117.1625, 32.7150],
zoom: 13
});
var infoTemplate = new InfoTemplate("Details", "<tr>OBJECTID: <td>${objectid}</tr></td><br><br><button id='button' dojoType='dijit.form.Button'>Export</button>");
featureLayer = new FeatureLayer("http://sampleserver4.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/Incident_Data_Extraction...",{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
map.addLayer(featureLayer);
gp = new Geoprocessor("http://sampleserver4.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/Incident_Data_Extraction...");
gp.setOutSpatialReference({
wkid : 102100
});
on(map.infoWindow, "show", function(){
on(dom.byId("button"), "click", extractData);
})
function pointToExtent(map, pointX, pointY, tolerance){
var xmin = pointX - tolerance;
var ymin = pointY - tolerance;
var xmax = pointX + tolerance;
var ymax = pointY + tolerance;
return new Extent(xmin, ymin, xmax, ymax, map.spatialReference)
}
function extractData() {
var extent = pointToExtent(map, map.graphics.graphics[0].geometry.x, map.graphics.graphics[0].geometry.y, 10);
map.graphics.add(extent);
var featureSet = new FeatureSet();
var features = [];
features.push(map.graphics.graphics[0]);
featureSet.features = features;
var params = {
"Layers_to_Clip" : ["Incident Areas"],
"Area_of_Interest" : featureSet,
"Feature_Format" : "Shapefile - SHP - .shp"
};
domStyle.set(loading, "display", "inline-block");
gp.submitJob(params, completeCallback, statusCallback, function(error) {
alert(error);
domStyle.set(loading, "display", "none");
});
}
function completeCallback(jobInfo){
if ( jobInfo.jobStatus !== "esriJobFailed" ) {
gp.getResultData(jobInfo.jobId, "Output_Zip_File", downloadFile);
}
}
function statusCallback(jobInfo) {
var status = jobInfo.jobStatus;
if ( status === "esriJobFailed" ) {
alert(status);
domStyle.set("loading", "display", "none");
}
else if (status === "esriJobSucceeded"){
domStyle.set("loading", "display", "none");
}
}
function downloadFile(outputFile){
var theurl = outputFile.value.url;
window.location = theurl;
}
});
</script>
</head>
<body>
<div id="mapDiv">
<img id="loading" src="images/loading.gif">
</div>
</body>
</html>
