tags to preserve your indentation, making the code easier for others to read.require(["dojo/dom", "dojo/dom-attr", "dojo/_base/array", "dojo/_base/Color", "dojo/parser", "esri/config", "esri/map", "esri/graphic", "esri/tasks/GeometryService", "esri/tasks/BufferParameters", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"], function (dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { var map, geo, tb; parser.parse(); map = new Map("map", { basemap: "streets", center: [-122.4, 37.785], zoom: 13 }); esriConfig.defaults.io.proxyUrl = "/proxy"; esriConfig.defaults.io.alwaysUseProxy = false; geo = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map.on("load", initToolbar); /* ** Initialize the drawing toolbar */ function initToolbar(evtObj) { app.tb = new Draw(evtObj.map); app.tb.on("draw-end", drawPoint); } // Array where points are saved var list = []; /* ** Draw point */ function drawPoint(evtObj) { // Get the click geometry var geometry = evtObj.geometry; // Point symbol var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25])); // Add point to the map var graphic = new Graphic(geometry, symbol); app.map.graphics.add(graphic); // Store the point geometry list.push(geometry); } /* ** Create buffer around points */ function doBuffer() { // Stop drawing points app.tb.deactivate(); // Show the zoom slider app.map.showZoomSlider(); // Setup the buffer parameters var params = new BufferParameters(); params.distances = [dom.byId("distance").value]; params.bufferSpatialReference = new esri.SpatialReference({ wkid: dom.byId("bufferSpatialReference").value }); params.outSpatialReference = map.spatialReference; params.unit = GeometryService[dom.byId("unit").value]; params.geometries = list; // Launch buffer calculation app.geo.buffer(params, showBuffer); } /* ** Draw buffer on the map */ function showBuffer(geoms) { // Symbol of the buffer var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.65]), 2), new Color([255, 0, 0, 0.35])); // Add the buffer graphics to the map array.forEach(geoms, function (geometry) { var graphic = new Graphic(geometry, symbol); app.map.graphics.add(graphic); }); } app = { map: map, tb: tb, geo: geo, buffer: doBuffer }; }); /* ** Click on Foggy Zone button */ function foggyZoneClick() { app.buffer(); } /* ** Click on Point button */ function pointClick() { app.tb.activate(esri.toolbars.Draw.POINT); app.map.hideZoomSlider(); }
Hi pepatosp,
Thanks for your feedback, it's exactly the problem i'am facing, even if i'am changing the geometry service and using geoprocessing service i'am still using an instance of the GeometryService.
I check the URL that you send me i found some classes that i change but still not working if you can provide me with more help i will be grateful.
Thanks a lot for your support
<!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>Foggy Buffer Zone</title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } #leftPane{ color:#000; width:250px; padding-bottom:15px; } #map{ padding:0; } .details{ font-size:14px; font-weight:600; padding-bottom:20px; } </style> <script src="http://js.arcgis.com/3.7/"></script> <script> require(["dojo/dom", "dojo/dom-attr", "dojo/_base/array", "dojo/_base/Color", "dojo/parser", "esri/config", "esri/map", "esri/graphic", "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/tasks/LinearUnit", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"], function(dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, Geoprocessor, FeatureSet, LinearUnit, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { var map, gp, tb; parser.parse(); map = new Map("map", { basemap: "streets", center: [-122.4, 37.785], zoom: 13, }); esriConfig.defaults.io.proxyUrl = "/proxy"; esriConfig.defaults.io.alwaysUseProxy = false; gp = new Geoprocessor("http://localhost:6080/arcgis/rest/services/SFFoggyZone/GPServer/Model"); //gp.setOutputSpatialReference({ //wkid: 32612 //}); map.on("load", initToolbar); /* ** Initialize the drawing toolbar */ function initToolbar(evtObj) { app.tb = new Draw(evtObj.map); app.tb.on("draw-end", drawPoint); } // Array where points are saved var list = new Array(); /* ** Draw point */ function drawPoint(evtObj) { // Get the click geometry var geometry = evtObj.geometry; // Point symbol var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1), new Color([0,255,0,0.25]) ); // Add point to the map var graphic = new Graphic(geometry, symbol); app.map.graphics.add(graphic); // Store the point geometry list.push(geometry) } /* ** Create buffer around points */ function doBuffer() { // Stop drawing points app.tb.deactivate(); // Show the zoom slider app.map.showZoomSlider(); // Setup the buffer parameters // var params = new BufferParameters(); // params.distances = [ dom.byId("distance").value ]; // params.bufferSpatialReference = new esri.SpatialReference({wkid: dom.byId("bufferSpatialReference").value}); // params.outSpatialReference = map.spatialReference; // params.unit = GeometryService[dom.byId("unit").value]; // params.geometries = list; var features = []; // features.push(graphic); var featureSet = new FeatureSet(); featureSet.features = features; var distances = new LinearUnit(); distances.distance = [ dom.byId("Dis").value ]; distances.units = [dom.byId("unit").value]; // var bufferSpatialReference = new gp.setOutputSpatialReference({wkid: dom.byId("bufferSpatialReference").value}); var params = { "Foggy_Points":FeatureSet, "Boundary_Polygons":FeatureSet, "Buffer_Distance": distances, "bufferSpatialReference": dom.byId("bufferSpatialReference").value }; // Launch buffer calculation // app.geo.buffer(params, showBuffer); gp.execute(params, showBuffer); }; /* ** Draw buffer on the map */ function showBuffer(geoms) { // Symbol of the buffer var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0,0.65]), 2 ), new Color([255,0,0,0.35]) ); // Add the buffer graphics to the map array.forEach(geoms, function(geometry) { var graphic = new Graphic(geometry, symbol); app.map.graphics.add(graphic); }); } app = { map: map, tb: tb, geo: geo, buffer: doBuffer }; }); /* ** Click on Foggy Zone button */ function foggyZoneClick(){ app.buffer(); } /* ** Click on Point button */ function pointClick(){ app.tb.activate(esri.toolbars.Draw.POINT); app.map.hideZoomSlider(); } /* ** Click on Clear Graphics button */ function clearGraphicsClick(){ app.map.graphics.clear(); } </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:'true', design:'sidebar'" style="width:100%;height:100%;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> </div> <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"> <div><b>Foggy Zone Parameters</b></div> Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="32612" /><br /> Distance: <input type="text" id="Dis" size="5" value="1" /> <select id="unit" style="width:100px;"> <option value="UNIT_KILOMETER">Kilometers</option> <option value="UNIT_METER">Meters</option> <option value="UNIT_STATUTE_MILE">Miles</option> </select><br /> <hr /> <div class="details">Please enter points of the Foggy Zone</div> <button data-dojo-type="dijit.form.Button" onclick="pointClick();">Report Fog</button> <button id="point" data-dojo-type="dijit.form.Button" onclick="foggyZoneClick();">Foggy Zone</button> <button data-dojo-type="dijit.form.Button" type="button" onclick="clearGraphicsClick();">Clear Graphics</button> <br /> </div> </div> </body> </html>