How to get coordinates of particular area though Javascript ArcGIS Api

KamalMittal — Thu, 25 May 2017 08:58:20 GMT

Hi,

Actually I am using ArcGIS API for JavaScript 3.20. I want to get coordinates of particular area when draw polyline. How to achieve that . Apart from that I also need addresses of buildings within that area.

Suppose I draw a area through polyline. In this area there are four hospitals. Now I need coordinates of area as well as address of four hospitals within that area.

Thanks,

Kamal

Re: How to get coordinates of particular area though Javascript ArcGIS Api

RobertScheitlin__GISP — Thu, 25 May 2017 13:52:14 GMT

Kamal,

It sounds like you are very unfamiliar with the JS API. To start you should look at the samples for various things.

Drawing tools | ArcGIS API for JavaScript 3.20

This will give you the basics of how to draw on the map. The addToMap function in that sample has evt.geometry which is the geometry of the drawn feature if the geometry was a polygon then you would loop through the polygons rings to get the XY of the points in the rings (the coordinates).

Next look at this FeatureLayer Select sample:

Select with Feature Layer | ArcGIS API for JavaScript 3.20

This will show you how to use a query and the geometry of the clicked point to return feature that intersect the circle that is produced based on that map click point.

Re: How to get coordinates of particular area though Javascript ArcGIS Api

KamalMittal — Mon, 29 May 2017 02:53:37 GMT

Hi Robert,

Thanks for your reply.

Based on your sample example, I have integrate code of toolbar and feature layer but below code is not showing feature layer to map. When I try to set feature layer then it is showing error in console "g.set is not a function". Right now i am calling setfeaturelayers() function from map.on("load",...) . Apart from that I want to set map center to newyork city but I don't know how to get center viewpoint of any state/city. Can you please look into this?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>


<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map, toolbar ,InfoTemplate, featureLayer;
require([
"esri/map",
"esri/toolbars/draw",
"esri/graphic",
   "esri/config",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"

,"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/InfoTemplate",
"esri/renderers/SimpleRenderer",
"esri/config",
"dojo/dom"

], function(
Map, Draw, Graphic,esriConfig,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry
,FeatureLayer,
Query,
InfoTemplate, SimpleRenderer,
   dom
) {
parser.parse();

esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new Map("map", {
basemap: "streets",
//center: [-15.469, 36.428],
//zoom: 3
});



map.on("load", function() {

toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);

   setFeatureLayers();


});


function setFeatureLayers(){

   featureLayer = new FeatureLayer("https://services7.arcgis.com/JRY73mi2cJ1KeR7T/ArcGIS/rest/services/NewYorkHospitalLayer/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: new InfoTemplate("Name: ${Name}", "${*}"),
outFields: ["Name","Street","City", "Zip", "PhoneNo"]
});



   map.addLayer(featureLayer);

}
// loop through all dijits, connect onClick event
// listeners for buttons to activate drawing tools
registry.forEach(function(d) {
// d is a reference to a dijit
// could be a layout container or a button

if ( d.declaredClass === "dijit.form.Button" ) {
d.on("click", activateTool);
}
});
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}

function addToMap(evt) {
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}

   map.graphics.clear();
map.infoWindow.show();

var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);


var query = new Query();
query.geometry = evt.geometry.getExtent();


//use a fast bounding box query. will only go to the server if bounding box is outside of the visible map
featureLayer.queryFeatures(query, selectInBuffer);

}


function selectInBuffer(response){
var feature;
var features = response.features;
var inBuffer = [];
//filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
for (var i = 0; i < features.length; i++) {
feature = features;
if(circle.contains(feature.geometry)){
inBuffer.push(feature.attributes[featureLayer.objectIdField]);
}
}
var query = new Query();
query.objectIds = inBuffer;
//use a fast objectIds selection query (should not need to go to the server)
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){



var totalLocations = getLayersLocation(results);
var r = "";
r = totalLocations ;
dom.byId("messages").innerHTML = r;



});
}

function getLayersLocation(features) {
var location = "";
debugger;

for (var x = 0; x < features.length; x++) {
location = location + features.attributes["Street"] + " " + features.attributes["City"] + " "+ features.attributes["Zip"] +"<br>";
}
return location;
}




});
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Draw:<br /></span>
<button data-dojo-type="dijit/form/Button">Point</button>
<button data-dojo-type="dijit/form/Button">Multi Point</button>
<button data-dojo-type="dijit/form/Button">Line</button>
<button data-dojo-type="dijit/form/Button">Polyline</button>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>

<button data-dojo-type="dijit/form/Button">Arrow</button>
<button data-dojo-type="dijit/form/Button">Triangle</button>
<button data-dojo-type="dijit/form/Button">Circle</button>
<button data-dojo-type="dijit/form/Button">Ellipse</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>

Thanks,

Kamal

Re: How to get coordinates of particular area though Javascript ArcGIS Api

KenBuja — Tue, 30 May 2017 13:45:58 GMT

The order of the arguments in your function have to match the order of the modules in the require. Take a look at this blog posting for more details: The abc’s of AMD | ArcGIS Blog

Re: How to get coordinates of particular area though Javascript ArcGIS Api

SiyabongaKubeka — Mon, 20 Jan 2020 11:33:08 GMT

Hi Kamal Mittal,

Whats if I have embedded a map into a html file, using iframe or embed. That map displays and I can draw the polygon. How do I get the coordinates of the polygon?

topic Re: How to get coordinates of particular area though Javascript ArcGIS Api in ArcGIS Server with JavaScript API Questions

How to get coordinates of particular area though Javascript ArcGIS Api

Re: How to get coordinates of particular area though Javascript ArcGIS Api

Re: How to get coordinates of particular area though Javascript ArcGIS Api

Re: How to get coordinates of particular area though Javascript ArcGIS Api

Re: How to get coordinates of particular area though Javascript ArcGIS Api