topic Re: Geometry Service Question in ArcGIS JavaScript Maps SDK Questions

Geometry Service Question

LloydBronn — Sat, 11 Dec 2021 07:02:42 GMT

I've set up a blank map where I click on any point and a popup displays the lat/lon coordinates and a link to a geoprocessing service. Right now I'm using this example to get everything working. Eventually I'll make my own geoprocessing tool that returns custom charts based on the lat/lon coordinates from the click event. When I click the link in the popup, it just says "calculating" and never returns a population. Chrome creates a debug text file with a bunch of errors. I'm pretty sure this happens because I haven't specified a geometry service in my script.

<!DOCTYPE html>
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Forecast Analysis</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.19/esri/css/esri.css">
    <style>
      html, body, .container, #map {
            height: 700px;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "arial";
        }          
       .esriScalebar {
        padding: 20px 20px;
      }
       
       #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
       
          
          .esriPopup .titleButton.maximize {
        display: none;

      }
       .esriPopup .sizer {
          position: relative;
          width: 150px;
          z-index: 1;
          }     
                    
          .esriPopup .contentPane {
        text-align: left;
          
      }
          
       
       #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 75px;
      }
       
       .esriPopup .actionsPane .zoomTo{     
       display: none; 
       }  
     
 
    </style>
    <script src="http://js.arcgis.com/3.19/"></script>
    <script>
      var map;

      require([
         "esri/config",
        "esri/map",
          "esri/arcgis/utils",
        "esri/tasks/Geoprocessor",
        "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters",
          "esri/graphic",
          "esri/geometry/webMercatorUtils",
          "esri/SpatialReference",
        "esri/tasks/FeatureSet",
        "esri/symbols/SimpleFillSymbol",
          "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
          "esri/InfoTemplate",
          "esri/layers/FeatureLayer",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/dijit/BasemapGallery",
          "esri/dijit/HomeButton",
          "esri/dijit/Search",
          "dojo/dom-construct",
        "esri/Color",
          "dojo/dom",
          "dojo/dom-attr",
          "dojo/query",
          "dojo/on",           
          "dojo/parser",
          "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
          "dijit/TitlePane",
        "dojo/domReady!"
      ], function (
        esriConfig, Map,  arcgisUtils, Geoprocessor, GeometryService,
        BufferParameters, Graphic, webMercatorUtils,  SpatialReference,
        FeatureSet, SimpleFillSymbol, Popup, PopupTemplate, 
          InfoTemplate, FeatureLayer, SimpleMarkerSymbol,
          SimpleLineSymbol, BasemapGallery, HomeButton, Search, domConstruct, 
          Color, dom, domAttr, query, on, parser
      ) {
          parser.parse();

            map = new Map("map", {
            basemap: "gray",
               center: [10, 40],
               maxZoom: 18,
            minZoom: 3
          });
            
            var home = new HomeButton({
          map: map
         }, "HomeButton");
         home.startup();
           
           var search = new Search({
            map: map,
               showInfoWindowOnSelect: false,
               enableLabel: false,
               enableHighlight: false
         }, "search");
         search.startup();
            
           var popupOptions = {
            markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
              new Color([0, 0, 0, 0.25])),
            marginLeft: "20",
            marginTop: "20"
          };
          
      
            
            var basemapGallery = new BasemapGallery({
             showArcGISBasemaps: true,
             map: map
           }, "basemapGallery");
           basemapGallery.startup();
            
            basemapGallery.on('load',function(){  
          basemapGallery.remove('basemap_2');  
          basemapGallery.remove('basemap_4');
          basemapGallery.remove('basemap_5'); 
          basemapGallery.remove('basemap_0'); 
          basemapGallery.remove('basemap_1');
          basemapGallery.remove('basemap_11');
     }); 
       
          basemapGallery.on("selection-change",function(){
           var tp = dijit.byId("TitlePane");
         if(tp != null){tp.toggle();}
         });
       
           basemapGallery.on("error", function(msg) {
            console.log("basemap gallery error:  ", msg);
          });
       
         basemapGallery.on("load", function(msg) {
        for (b=0;b<map.basemapLayerIds.length;b++){
          var lyr = map.getLayer(map.basemapLayerIds[b]);
          if(lyr._isRefLayer){
            refLayerId = lyr.id;
          }
        }
      });
       
       map.on("load", function() {
          //after map loads, connect to listen to mouse move & drag events
          map.on("mouse-move", showCoordinates);
          map.on("mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          //display mouse coordinates
          dom.byId("info").innerHTML = "Longitude: " + mp.x.toFixed(3) + "    " + "Latitude: " + mp.y.toFixed(3);
        };
               
          map.on("click", function(evt){
            var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
            var x = mp.x.toFixed(3);
            var y = mp.y.toFixed(3);
          map.graphics.clear();
          var graphic = new Graphic(evt.mapPoint);

          map.graphics.add(graphic);
          map.infoWindow.setFeatures([graphic]);

          map.infoWindow.setContent("Longitude: " + x.toString() + " <br>Latitude: " + y.toString());
          map.infoWindow.show(evt.mapPoint)
        });

          var link = domConstruct.create("a",{
                "class": "action", 
                "id": "statsLink",
                "innerHTML": "Population", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", map.infoWindow.domNode)[0]);
          on(link, "click", calculatePopulation);
            
            window.gp = new Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer/PopulationSummary");
            
            function calculatePopulation(evt){
            //display a message so user knows something is happening
            domAttr.set(dom.byId("statsLink"), "innerHTML", "Calculating...");

            //Get the feature associated with the displayed popup and use it as 
            //input to the geoprocessing task. The geoprocessing task will calculate 
            //population statistics for the area within the specified buffer distance. 
            var feature = window.map.infoWindow.getSelectedFeature();
            
            var param = new BufferParameters();
            param.geometries = [webMercatorUtils.webMercatorToGeographic(feature.geometry)];

            param.distances = [10]; //buffer distance
            param.unit = GeometryService.UNIT_KILOMETER;
            param.bufferSpatialReference = new SpatialReference({"wkid": 4326});
            param.outSpatialReference = new SpatialReference({"wkid": 102100});
            param.geodesic = true;

            config.defaults.geometryService.buffer(param, function(geometries){

              var graphic = new Graphic(geometries[0]);
              graphic.setSymbol(new SimpleFillSymbol().setColor(new Color([0,255,255,0.25])));

              window.map.graphics.add(graphic);
 
              //Use the buffered geometry as input to the GP task 
              var featureSet = new FeatureSet();
              featureSet.geometryType = "esriGeometryPolygon";
              featureSet.features = [graphic];
              var taskParams = {
                "inputPoly": featureSet
              };
              window.gp.execute(taskParams, gpResultAvailable, gpFailure);


            });
          }

          function gpResultAvailable(results, messages){
            domAttr.set(dom.byId("statsLink"),"innerHTML", "Population");
            //clear any existing features displayed in the popup 
            window.map.infoWindow.clearFeatures();

            //display the query results 
            var content = "";
            if(results.length > 0){
              content = "Population = " + results[0].value.features[0].attributes.SUM;
            }else{
              content = "No Results Found";
            }
            window.map.infoWindow.setContent(content);
          }
          function gpFailure(error){
            domAttr.set(dom.byId("statsLink"),"innerHTML", "Population");

            var details = domConstruct.create("div", {
              "innerHTML": "Population = " + error
            }, query(".break", window.map.infoWindow.domNode)[0],"after" );
            console.error("Error occurred: ", error);
          }

        
          
     
     });
    </script>
  </head>

  <body class="claro">
  
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
         style="width: 100%; height: 100%; margin: 0;">
           
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
       
       <div id="search"></div>
             
             <span id="info" style="font-family:arial;position:absolute;left:15px; bottom:30px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
             
             <div id="HomeButton"></div>
             
          <div style="position:absolute; left:15px; bottom:60px; z-Index:999;">
          
     <div data-dojo-type="dijit/TitlePane" id = "TitlePane" style="font-family:arial;background-color:lightgray"
             data-dojo-props="title:'Switch Basemap', closable:true, open:false">
                
            <div id="basemapGallery"></div>
               
               
             </div>
          </div>   
      </div>
    </div>
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If I follow the GP tool in popup example and I add a geometry service from my company ArcGIS server or this ESRI sample server, my popup disappears, as does my lat/lon tracker. The popup and lat/lon tracker incorporate webmercator utils to convert XY to lat/lon. I'm not sure how to proceed.

config.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
config.defaults.io.proxyUrl = "/proxy/";‍‍

Re: Geometry Service Question

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:02:45 GMT

Lloyd,

Your issue is that you have "esri/config" var'd as esriConfig and then you are trying to use config.defaults.... instead of esriConfig.defaults....

Use:

            esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
            esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";‍‍

and

esriConfig.defaults.geometryService.buffer(param, function(geometries) {‍

Re: Geometry Service Question

LloydBronn — Tue, 10 Jan 2017 14:27:02 GMT

Oh duh, thanks!

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 14:57:53 GMT

Lloyd,

You need to start checking your browser web console. You will see errors there that will tell you what is going wrong. In this case it is likely your proxy. On my end it works without issue.

Re: Geometry Service Question

LloydBronn — Tue, 10 Jan 2017 15:23:36 GMT

I'm using the above proxy: esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";

It says "Uncaught TypeError: Cannot read property 'getSelectedFeature' of undefined
at HTMLAnchorElement.calculatePopulation "

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 15:34:53 GMT

Lloyd,

So is /proxy/proxy.ashx the correct location and file name from your proxy? Do you have "http://sampleserver1.arcgisonline.com" setup in your proxy.config file?

Re: Geometry Service Question

LloydBronn — Sat, 11 Dec 2021 07:02:47 GMT

I just copied those two lines from above:

esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";‍‍

Do I need a proxy config file if I'm using ESRI's geometry service? I haven't used a geometry service or a proxy before.

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 15:46:47 GMT

Lloyd,

There is a reason that the esri sample has those line (they are needed). You will need to install and setup a proxy for this to work.

Re: Geometry Service Question

LloydBronn — Sat, 11 Dec 2021 07:02:50 GMT

Thanks for your help Robert.

I set up the proxy using .Net 4.5 on the IIS server and enabled directory browsing. The lines in the script are now:

esriConfig.defaults.geometryService = new GeometryService("http://<ourserver>/arcgis/rest/services/Utilities/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "http://<ourserver>/DotNet/proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = false; ‍‍‍‍‍‍

I confirmed that I can navigate to the proxy.ashx file URL through a web browser, but I get this error:

{error: {code: 400,message:"This proxy does not support empty parameters."}}

I'm still getting the same error as before when I try to calculate population in the popup:

"Uncaught TypeError: Cannot read property 'getSelectedFeature' of undefined
at HTMLAnchorElement.calculatePopulation "

I've set up the proxy config file:

<?xml version="1.0" encoding="utf-8" ?>
<ProxyConfig allowedReferers="*"
             mustMatch="true">
    <serverUrls>  
          <serverUrl url="http://<ourserver>/arcgis/rest"
                       username ="usernamen"
                       password ="password"
                   matchAll="true"/>
    </serverUrls>
</ProxyConfig>

<!-- See https://github.com/Esri/resource-proxy for more information -->
‍‍‍‍‍‍‍‍‍‍‍‍

Are there other steps I need to take to configure the proxy?

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 18:28:25 GMT

Lloyd,

Have you done a ping test on your proxy?

http://[yourmachine]/DotNet/proxy.ashx?ping

Have you seen this blog?

Setting up a Proxy | Support Services Blog

Or this JS API help topic?

Using the proxy | Guide | ArcGIS API for JavaScript 3.19

You will need to have http://sampleserver1.arcgisonline.com as one of the serverUrls in your proxy.config

Re: Geometry Service Question

LloydBronn — Tue, 10 Jan 2017 18:50:39 GMT

Here is the result of the ping test:

{ "Proxy Version": "1.1.0", "Configuration File": "OK", "Log File": "Not Exist/Readable"}

I followed both of those links, yes.

I'm having trouble figuring out credentials for that sample server in the proxy.config. The server URL is Demographics/ESRI_Population_World (GPServer) , but what would the clientID and clientSecret credentials be? I tried to find this through my developer account, but I could only generate credentials for apps that I would upload.

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 19:16:24 GMT

Great then all you need to do is add the sample server 1 url to the proxy.config then. As I mentioned I have the code working fine on my end.

Re: Geometry Service Question

LloydBronn — Tue, 10 Jan 2017 19:18:23 GMT

So no need for credentials then? I'm still getting the same uncaught error when I click the population link, even after updating the proxy config file.

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 19:21:03 GMT

No, Sample server 1 does not require credentials

Re: Geometry Service Question

LloydBronn — Sat, 11 Dec 2021 07:02:53 GMT

Following the help on the ESRI Github proxy resource page, I've confirmed that the proxy is able to forward requests directly in the browser. Everything seems to be configured properly but I'm still getting that Uncaught error when I click population. This line is causing the error: var feature = window.map.infoWindow.getSelectedFeature();

Here is the server config file. I probably don't need credentials for our server do I? The REST services page is accessible from any web browser.

<?xml version="1.0" encoding="utf-8" ?>
<ProxyConfig allowedReferers="*"
             mustMatch="true">
    <serverUrls>

          
          <serverUrl url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services"
                    matchAll="true"/>
       
                      
          <serverUrl url="http://<ourserver>/arcgis/rest/services"
                   matchAll="true"/>
    </serverUrls>
</ProxyConfig>

<!-- See https://github.com/Esri/resource-proxy for more information -->
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Geometry Service Question

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:02:56 GMT

Lloyd,

You should not use such detailed urls just limit them to the bare minimum.

And no you do not need credentials for your server unless you are trying to access secured services:

<?xml version="1.0" encoding="utf-8" ?>
<ProxyConfig allowedReferers="*"
             mustMatch="true">
    <serverUrls>
          <serverUrl url="http://sampleserver1.arcgisonline.com"
                    matchAll="true"/>
          <serverUrl url="http://<Yourserver>"
                   matchAll="true"/>
    </serverUrls>
</ProxyConfig>

<!-- See https://github.com/Esri/resource-proxy for more information -->

Re: Geometry Service Question

LloydBronn — Tue, 10 Jan 2017 21:36:07 GMT

OK. I shortened the URLs, but I'm still getting the error. Can I send you my script?

Re: Geometry Service Question

RobertScheitlin__GISP — Tue, 10 Jan 2017 21:57:51 GMT

Lloyd,

Is it not the same as the original post with the two esriConfig lines?

Re: Geometry Service Question

LloydBronn — Tue, 10 Jan 2017 22:04:48 GMT

The only thing I changed was the geometry service. I'm using the one on our server. I changed it back to the geometry service on the sample server and got the same error. I also made sure that any other "config" was changed to esriConfig.

I then removed any reference to "window" because I realized that I don't have a variable named window. So window.gp becomes map.gp, etc. I'm now getting other errors. It looks like the browser is trying to use HTTPS, but all of my URLs in the script and proxy config files are HTTP. You said you've gotten it to work as is?

Re: Geometry Service Question

LloydBronn — Wed, 11 Jan 2017 16:03:41 GMT

Is this because our server is currently set up to be accessed by http only?