AnsweredAssumed Answered

Polygon Geometry is not Showing

Question asked by kawish on Nov 16, 2019
Latest reply on Nov 20, 2019 by kawish

Hi

I have created JSON service with Node.js and use it to display polygons on map but Geometry is not showing while Legend is working properly as shown in attached image. 

 

<!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/Polygon",
        "esri/widgets/Editor",
        "esri/widgets/Legend",
        "esri/layers/FeatureLayer",
        "esri/geometry/projection",
        "esri/geometry/SpatialReference"
      ], function(Map, MapView, esriRequest, Graphic,Polygon,Editor, Legend,FeatureLayer, projection, SpatialReference) {

      projection.load()

      let url ="http://localhost:7001/polygon"
      let myData = []

      let fields = [
        {
          name: "ObjectID",
          alias: "ObjectID",
          type: "oid"
        },
        {
          name: "CATEGORY",
          alias: "CATEGORY",
          type: "string"
        },
        {
          name: "TYPE",
          alias: "TYPE",
          type: "string"
        },
        {
          name: "TOWN",
          alias: "TOWN",
          type: "string"
        },
        {
          name: "BLOCK_PHASE_SECTOR",
          alias: "BLOCK_PHASE_SECTOR",
          type: "string"
        },
        {
          name: "STREET",
          alias: "STREET",
          type: "string"
        },
        {
          name: "DATE",
          alias: "DATE",
          type: "string"
        }
      ];

      let pTemplate = {
        title: "{title}",
        content: [
          {
            type: "fields",
            fieldInfos: [
              {
                fieldName: "CATEGORY",
                label: "CATEGORY",
                visible: true
              },
              {
                fieldName: "TYPE",
                label: "TYPE",
                visible: true
              },
              {
                fieldName: "TOWN",
                label: "TOWN",
                visible: true
              },
              {
                fieldName: "BLOCK_PHASE_SECTOR",
                label: "BLOCK_PHASE_SECTOR",
                visible: true
              },
              {
                fieldName: "STREET",
                label: "STREET",
                visible: true
              },
              {
                fieldName: "DATE",
                label: "DATE",
                visible: true,
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };


      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 => {

        res.map(function(result, i){
    
             let resultPnts = result.Shape.points.map(function(point){

             return new Polygon({
                rings:point,
                spatialReference : {
                  wkid: 102100
                }
              });
            
            })

              let atts = {
                "ObjectID": i,
                "CATEGORY": result.CATEGORY,
                "TYPE": result.TYPE,
                "TOWN": result.TOWN,
                "BLOCK_PHASE_SECTOR": result.BLOCK_PHASE_SECTOR,
                "STREET": result.STREET,
                "DATE": result.DATE
              };

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

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

             
               let markerSymbol = {
                  type: "simple-fill", // autocasts as new SimpleFillSymbol()
                  color: [100, 139, 79],
                  outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 1
                  }
                };

                let g =new Graphic({
                  geometry:pnt,
                  symbol: markerSymbol,
                  attributes: atts
                })

                myData.push(g)
             
              })
              return graArr
          })
           
          console.log(myData)

          let layer = new FeatureLayer({
          geometryType: "polygon",
          source: myData,
          fields: fields,
          objectIdField: "ObjectID",
          //renderer: dataRenderer,
          popupTemplate: pTemplate
        });
        map.add(layer)

         var legend = new Legend({
            view: view,
           layerInfos: [
              {
                layer: layer,
                title: "Town"
              }
            ]
          });
        view.ui.add(legend, 'bottom-left')

    }

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

       view.popup.autoOpenEnabled = true; //disable popups

         /* // Create the Editor
          let editor = new Editor({
            view: view
          });

          // Add widget to top-right of the view
          view.ui.add(editor, "top-right");*/


      })

      });
    </script>
  </head>

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

Outcomes