How to get coordinates of particular area though Javascript ArcGIS Api

6794
4
Jump to solution
05-25-2017 01:58 AM
KamalMittal
New Contributor III

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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.

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

KamalMittal
New Contributor III

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/FeatureServe...",{

          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

0 Kudos
KenBuja
MVP Esteemed Contributor

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 

SiyabongaKubeka
Occasional Contributor

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?

0 Kudos