Use Webservices with Arcgis API

632
15
Jump to solution
09-26-2019 05:35 AM
kawishabbas
New Contributor III

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
kawishabbas
New Contributor III

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

View solution in original post

0 Kudos
15 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Kawish,

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

0 Kudos
kawishabbas
New Contributor III

Yes Robert.

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
kawishabbas
New Contributor III

Spatial reference is 4326

0 Kudos
CarlosNantes
New Contributor III

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.

0 Kudos
kawishabbas
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Kawish,

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

0 Kudos
kawishabbas
New Contributor III

Sorry Robert 

4326 is spatial reference of my another service.

Spatial reference of data returned by this service is 32642

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Kawish,

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

0 Kudos