AnsweredAssumed Answered

Use Webservices with Arcgis API

Question asked by kawish on Sep 26, 2019
Latest reply on Oct 2, 2019 by kawish

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>

Outcomes