How to create buffer over feature layer

Engr_UmairShah — Wed, 10 May 2017 16:45:09 GMT

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>

<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");
}

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>

Re: How to create buffer over feature layer

TomSellsted — Wed, 10 May 2017 18:40:32 GMT

Engr,

There were a few problems with your script. The query task was not querying a feature layer, so no features were being returned. The SimpleFillSymbol was not defined so it was not able to construct the graphic. I put together a working demo for you. You can view it at:

Quetta Locations

Please view the source to see the modifications I made to your code. I hope this helps!

Regards,

Tom

topic Re: How to create buffer over feature layer in ArcGIS JavaScript Maps SDK Questions

How to create buffer over feature layer

Re: How to create buffer over feature layer