topic Re: Use Webservices with Arcgis API in ArcGIS JavaScript Maps SDK Questions

Use Webservices with Arcgis API

kawishabbas — Sat, 11 Dec 2021 08:49:12 GMT

Any one can help to pick my mistakes in given code. In web console data is showing but it's not displaying on map.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>GeoJSONLayer - 4.12</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/request",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/layers/FeatureLayer",
      ], function(Map, MapView, esriRequest, Graphic,Point, FeatureLayer) {

          const url ="http://localhost:5000"

           const map = new Map({
          basemap: "satellite",

        });

        const view = new MapView({
          container: "viewDiv",
          center: [67.068037, 24.872328],
          zoom: 12,
          map: map
        });

        const fields = [
        {
          name: "ObjectID",
          alias: "ObjectID",
          type: "oid"
        },
        {
          name: "Name",
          alias: "Name",
          type: "string"
        },
        {
          name: "FAT",
          alias: "FAT",
          type: "string"
        },
        {
          name: "Type",
          alias: "Type",
          type: "string"
        },
        {
          name: "DC",
          alias: "DC",
          type: "string"
        },
        {
          name: "ID",
          alias: "ID",
          type: "string"
        },
        {
          name: "POP",
          alias: "POP",
          type: "string"
        }
      ];

        const pTemplate = {
        title: "{title}",
        content: [
          {
            type: "fields",
            fieldInfos: [
              {
                fieldName: "Name",
                label: "Name",
                visible: true
              },
              {
                fieldName: "FAT",
                label: "FAT",
                visible: true
              },
              {
                fieldName: "Type",
                label: "Type",
                visible: true
              },
              {
                fieldName: "DC",
                label: "DC",
                visible: true
              },
              {
                fieldName: "ID",
                label: "ID",
                visible: true
              },
              {
                fieldName: "POP",
                label: "POP",
                visible: true,
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };

        const dataRenderer = {
          type: "simple",
          symbol : {
                type: "simple-marker",
                color: "blue",
                size: 3,
                outline: { // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: [0, 0, 0, 0.2]
                }
            },
        }

     
         var options = {
          query: {
            f: "json"
          },
          responseType: "json"
        };

        esriRequest(url, options).then(webservice)

        function webservice(response){

           var graphicsArray = response.data.map(function(result){
            //console.log(result)

             var resultPnts = result.SHAPE.points.map(function(point){

             return new Point({
                x:point.x,
                y:point.y,
                spatialReference : result.SHAPE.srid
              });

            })

              var atts = {
                "ObjectID": result.OBJECTID,
                "Splitter": result.Splitter,
                "Comment": result.Comment,
                "Name": result.Name,
                "ID": result.ID,
                "Placement": result.Placement,
                "POP": result.POP
              };

              var graArr = resultPnts.map(function(pnt){

               var markerSymbol = {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    color: [226, 119, 40]
                  };

                return new Graphic({
                  geometry:pnt,
                  symbol: markerSymbol,
                  attributes: atts
                })
              
              })
              return graArr
          })
          //console.log(graphicsArray)

          const layer = new FeatureLayer({
            geometryType: "point",
            source: [graphicsArray],
            fields: fields,
            objectIdField: "ObjectID",
            renderer: dataRenderer,
            popupTemplate: pTemplate
          });
          map.add(layer);


        }

        

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Thu, 26 Sep 2019 12:55:54 GMT

Kawish,

Did you get results from either of your console.log lines you have commented out now?

Re: Use Webservices with Arcgis API

kawishabbas — Thu, 26 Sep 2019 13:14:23 GMT

Yes Robert.

I get data in console. Following data is from line 199.

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Thu, 26 Sep 2019 13:21:14 GMT

What is the spatial reference of the data returned by the web service?

Re: Use Webservices with Arcgis API

CarlosNantes — Sat, 11 Dec 2021 08:49:14 GMT

Maybe spatialReference of points is different from the map.

             return new Point({
                x:point.x,
                y:point.y,
                spatialReference : result.SHAPE.srid
              });

I had that kind of problem once when using Arcgis js api 3.x and needed to project the points before add to the map.

Re: Use Webservices with Arcgis API

kawishabbas — Thu, 26 Sep 2019 16:31:17 GMT

Spatial reference is 4326

Re: Use Webservices with Arcgis API

kawishabbas — Thu, 26 Sep 2019 16:33:57 GMT

Spatial reference is 4326 but when i used GeoJSON service it works well.

GeoJSON service that i had used has same spatial reference as same as this web service.

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Thu, 26 Sep 2019 17:33:15 GMT

Kawish,

The x and y values you are showing in your screen shot are NOT wkid 4326.

Re: Use Webservices with Arcgis API

kawishabbas — Thu, 26 Sep 2019 17:57:14 GMT

Sorry Robert

4326 is spatial reference of my another service.

Spatial reference of data returned by this service is 32642

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Thu, 26 Sep 2019 18:09:57 GMT

Kawish,

Then you have to use the GeometryService or the projection class to project your data.

Re: Use Webservices with Arcgis API

kawishabbas — Sat, 11 Dec 2021 08:49:17 GMT

Robert,

There is no return in my console.log....

Can i use variable outSpatialReference in point object instead of result.SHAPE.srid..??

function webservice(response){

         const outSpatialReference = new SpatialReference({
            wkid: 32642
          });

           var graphicsArray = response.data.map(function(result){
            //console.log(result)

             var resultPnts = result.SHAPE.points.map(function(point){

             return new Point({
                x:point.x,
                y:point.y,
                spatialReference : result.SHAPE.srid
              });
             
            })

              var atts = {
                "ObjectID": result.OBJECTID,
                "Splitter": result.Splitter,
                "Comment": result.Comment,
                "Name": result.Name,
                "ID": result.ID,
                "Placement": result.Placement,
                "POP": result.POP
              };

              var graArr = resultPnts.map(function(pnt){

              var projectedPoint = projection.project(pnt,outSpatialReference);

               var markerSymbol = {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    color: [226, 119, 40]
                  };

                var graphic = new Graphic({
                  geometry:projectedPoint,
                  symbol: markerSymbol,
                  attributes: atts
                })
                console.log(graphic)
             
              
              })
              return graArr
          })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:49:20 GMT

Kawish,

You want to project the points to the view.spatialReference (which will be 102100). Right now you are you are asking it to project to same WKDI as the data is already in...

Corrected code:

         const outSpatialReference = new SpatialReference({
            wkid: view.spatialReference
          });‍‍‍

Also Have you called

projection.load()

earlier in your code?

Re: Use Webservices with Arcgis API

kawishabbas — Sat, 11 Dec 2021 08:49:23 GMT

Robert,

Full code is mentioned below. I received same error in my console

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>JSON</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/request",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/layers/FeatureLayer",
        "esri/geometry/projection",
        "esri/geometry/SpatialReference"
      ], function(Map, MapView, esriRequest, Graphic,Point, FeatureLayer, projection, SpatialReference) {

      projection.load()

      let url ="http://localhost:5000"

      let fields = [
        {
          name: "ObjectID",
          alias: "ObjectID",
          type: "oid"
        },
        {
          name: "Name",
          alias: "Name",
          type: "string"
        },
        {
          name: "FAT",
          alias: "FAT",
          type: "string"
        },
        {
          name: "Type",
          alias: "Type",
          type: "string"
        },
        {
          name: "DC",
          alias: "DC",
          type: "string"
        },
        {
          name: "ID",
          alias: "ID",
          type: "string"
        },
        {
          name: "POP",
          alias: "POP",
          type: "string"
        }
      ];

      let pTemplate = {
        title: "{title}",
        content: [
          {
            type: "fields",
            fieldInfos: [
              {
                fieldName: "Name",
                label: "Name",
                visible: true
              },
              {
                fieldName: "FAT",
                label: "FAT",
                visible: true
              },
              {
                fieldName: "Type",
                label: "Type",
                visible: true
              },
              {
                fieldName: "DC",
                label: "DC",
                visible: true
              },
              {
                fieldName: "ID",
                label: "ID",
                visible: true
              },
              {
                fieldName: "POP",
                label: "POP",
                visible: true,
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };

      let dataRenderer = {
          type: "simple",
          symbol : {
                type: "simple-marker",
                color: "blue",
                size: 3,
                outline: { // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: [0, 0, 0, 0.2]
                }
            },
        }


      let map = new Map({
        basemap: "satellite",
      });

      let view = new MapView({
          container: "viewDiv",
          center: [67.068037, 24.872328],
          zoom: 12,
          map: map
        });

       let options = {
        query: {
          f: "json"
        },
        responseType: "json"
      };

    let fetchData = () => esriRequest(url, options).then(response => response.data)

    let webservice = res => {

           let graphicsArray =  res.map(function(result){

             let resultPnts = result.SHAPE.points.map(function(point){

             return new Point({
                x:point.x,
                y:point.y,
                spatialReference : result.SHAPE.srid
              });
             
            })

              let atts = {
                "ObjectID": result.OBJECTID,
                "Splitter": result.Splitter,
                "Comment": result.Comment,
                "Name": result.Name,
                "ID": result.ID,
                "Placement": result.Placement,
                "POP": result.POP
              };

              let graArr = resultPnts.map(function(pnt){

              let projectedPoint = projection.project(pnt,view.spatialReference);

               let markerSymbol = {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    color: [226, 119, 40]
                  };

                return new Graphic({
                  geometry:projectedPoint,
                  symbol: markerSymbol,
                  attributes: atts
                })
                //console.log(graphic)
             
              
              })
              return graArr
          })
          console.log(graphicsArray)

          let layer = new FeatureLayer({
          geometryType: "point",
          source: [graphicsArray],
          fields: fields,
          objectIdField: "ObjectID",
          renderer: dataRenderer,
          popupTemplate: pTemplate
        });
        map.add(layer)

        }

    view.when(() =>{
      fetchData()
      .then(webservice)
    })

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is response of my data that i received in console..

I want to discuss one more thing. When i use geojson service(http://localhost:5000/geojson ) instead of json service(http://localhost:5000) the above code is working well. Why its not working on json service.

Result of geojson service.

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:49:28 GMT

Kawish,

Looks like you problem most likely is your feature layer source.

You are wrapping the array in square brackets which means an array inside and array.

(line 3 square brackets removed).

let layer = new FeatureLayer({
  geometryType: "point",
  source: graphicsArray,
  fields: fields,
  objectIdField: "ObjectID",
  renderer: dataRenderer,
  popupTemplate: pTemplate
});‍‍‍‍‍‍‍‍

As for your other question I am not sure. based on the web console it seems the geojson endpoint is returning wkid 4326 instead.

Re: Use Webservices with Arcgis API

kawishabbas — Sat, 11 Dec 2021 08:49:31 GMT

Thank you Robert,

error occurs because of an array inside and array. I create an empty array with name myData and push graphic object into myData then call its instance in FeatureLayer. Its working well.

let myData = [];
let g =  new Graphic({
                  geometry:projectedPoint,
                  symbol: markerSymbol,
                  attributes: atts
                })

                myData.push(g) 

 let layer = new FeatureLayer({
            geometryType: "point",
            source: myData,
            fields: fields,
            objectIdField: "ObjectID",
            renderer: dataRenderer,
            popupTemplate: pTemplate
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Use Webservices with Arcgis API

RobertScheitlin__GISP — Wed, 02 Oct 2019 12:04:27 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.