Use Webservices with Arcgis API

kawishabbas · ‎09-26-2019

Hi

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

kawishabbas · ‎09-27-2019

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
          })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎09-27-2019

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?

kawishabbas · ‎09-30-2019

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.

RobertScheitlin__GISP · ‎10-01-2019

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.

kawishabbas · ‎10-02-2019

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

RobertScheitlin__GISP · ‎10-02-2019

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