Hi, I am trying to create buffer over feature layer on the basis of earth quake depth. Here is what I have been trying, but it is not working. could you please help me to find a solution? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Quetta Locations</title> <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css"> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="https://js.arcgis.com/4.3/"></script> </head> <body> <!-- http://dservices3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/services/QuettaLayer/WFSServer?service=wfs&request=getcapabilities --> <div id="viewDiv"></div> <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:50%; top:50%; z-index:100; display:none;" /> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/geometry/geometryEngine", "esri/geometry/Point", "esri/tasks/QueryTask", "esri/tasks/support/Query", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/Graphic", "dojo/dom", "dojo/dom-style", "esri/PopupTemplate", "dojo/domReady!" ], function ( Map, MapView, FeatureLayer, GraphicsLayer, geometryEngine, Point, QueryTask, Query, SimpleRenderer, SimpleMarkerSymbol, Graphic, dom, domStyle, PopupTemplate ) { var map = new Map({ basemap: "gray" }); var view = new MapView({ center: [66, 35], container: "viewDiv", map: map, zoom: 4 }); var fl = new FeatureLayer({ title: "QuettaLocation", id:0, url: "http://services3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/rest/services/QuettaLocationD/FeatureServer/0?token=dTl1ak0nvnpH2W0YNHxgxdBx6dIDJ-lS26rQJSg3oTTs8DM58AJM_CmIT-t8A4YakCrWk3S2rWDysifmG6KT_LS6t-yIbZe6k1Sk2cAOd1wZYLV-CEl542SuMlCIxKJAGKTLj2l76CSZqLQ6xBLiwKBkgpQaEfXyDzqcsZF49ElPZZACynOsQWCPnVkOi_aGk8zsSNzHrRtZljYcNr8vsw.."//"http://services3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/rest/services/QuettaLocation/FeatureServer" }); map.add(fl); fl.then(function () { view.extent = fl.fullExtent; }); // helper functions function showLoadingSpinner() { var spinnerNode = dom.byId(loadingImg); domStyle.set(spinnerNode, "display", "block"); } function hideLoadingSpinner() { var spinnerNode = dom.byId(loadingImg); domStyle.set(spinnerNode, "display", "none"); } function displayMyPolygon(polygonGeometry, aColorString, anOpacity) { var aGraphic = new Graphic({ geometry: polygonGeometry, symbol: new SimpleFillSymbol({ color: aColorString, style: "solid" }) }); // if opacity was not specified, default to 1.0 if (anOpacity) { } else { anOpacity = 1.0; } aGraphic.symbol.color.a = anOpacity; graphicsLayer.graphics.add(aGraphic); } var graphicsLayer = new GraphicsLayer({ graphics: [] }); map.add(graphicsLayer); //Buffer analysis function var myGeometry; function bufferbyDistance(depth) { var q = fl.createQuery(); q.where = "depth ='" + depth + "'"; q.returnGeometry = true; var depthTask = new QueryTask({ url: "http://services3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/rest/services/QuettaLocation/FeatureServer" }); return depthTask.execute(q).then(function (response){ return response.FeatureLayer[0].geometry; }).then(function (geometry) { myGeometry = geometryEngine.buffer( geometry, 2, "km" ); displayMyPolygon(myGeometry , "red"); }); } //showLoadingSpinner(); view.then(fl .then(bufferbyDistance) .then(hideLoadingSpinner) ); }); </script> </body> </html>
... View more