Create a grid with Polygon edge instead of polygon extent

SaiPeketi

Hi.

I'm able to create a grid on the top of a polygon that works fine with polygon extent but I want to make the grid parallel to based on the polygon boundary. Does anyone have an idea to do that? 

 

Codepen of grid with Polygon extent https://codepen.io/Andy0206/pen/yLrpXjp

 

Thanks in advance.

JamesIng

@SaiPeketi 

There's a couple of ways you could do this, but one method you can do assuming the polygon is a quadrilateral - is effectively modify what you're doing by calculate the grid off each corner  of the polygon instead.

You can calculate the new grid corners by calculating the steps between two corners pairs.
Note it can get a bit confusing as your matching up corner pairs.

I've just quickly modified your code to illustrate below, naming the corners to try and make it easier to understand.

Hope it helps.

<script>
    require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Extent", "esri/widgets/Measurement"], (Map, MapView, Graphic, Extent, Measurement) => {
      const map = new Map({
        basemap: "hybrid"
      });
      const view = new MapView({
        center: [-80, 35],
        container: "viewDiv",
        map: map,
        zoom: 3
      });
      const extent = new Extent({
        xmax:
          -9170525.078269107,
        xmin:
          -9170540.704066336,
        ymax: 4143155.358736824,
        ymin: 4143141.82301231,
        spatialReference: {
          wkid: 102100
        }
      });
      view.extent = extent;
      /****************************
       * Create a polygon graphic
       ****************************/
      const polygon = {
        type: "polygon", // autocasts as new Polygon()
        rings: [
          [-9170536.275099419, 4143155.358736824],
          [-9170525.078269107, 4143150.3326033456],
          [-9170529.208653882, 4143141.82301231],
          [-9170540.704066336, 4143146.351508504],
          [-9170536.275099419, 4143155.358736824]
        ],
        spatialReference: {
          wkid: 102100
        }
      };
      const fillSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [227, 139, 79, 0.8],
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 1
        }
      };
      // Add the geometry and symbol to a new graphic
      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });
      /****************************
       * Create a grid polyline graphic
       ****************************/
      const path = [];
      
      steps = 10;
      firstCorner = polygon.rings[0];
      secondCorner = polygon.rings[1];
      thirdCorner = polygon.rings[2];
      fourthCorner = polygon.rings[3];
      
                   let pathVal = [];
                   
      for (let i = 0; i <= steps; i++) {
        
        horizonalXStartingPoint = firstCorner[0] -  (((firstCorner[0] - fourthCorner[0]) / steps) * i);
        horizonalYStartingPoint = firstCorner[1] - (((firstCorner[1] - fourthCorner[1]) / steps) * i)
        
        horizonalXEndPoint = secondCorner[0] -  (((secondCorner[0] - thirdCorner[0]) / steps) * i);
        horizonalYEndPoint = secondCorner[1] - (((secondCorner[1] - thirdCorner[1]) / steps) * i)
        
        path.push([[horizonalXStartingPoint, horizonalYStartingPoint], [horizonalXEndPoint, horizonalYEndPoint]])


        verticalXStartingPoint = firstCorner[0] -  (((firstCorner[0] - secondCorner[0]) / steps) * i);
        verticalYStartingPoint = firstCorner[1] - (((firstCorner[1] - secondCorner[1]) / steps) * i)

        verticalXEndPoint = fourthCorner[0] -  (((fourthCorner[0] - thirdCorner[0]) / steps) * i);
        verticalYEndPoint = fourthCorner[1] - (((fourthCorner[1] - thirdCorner[1]) / steps) * i)
        
        path.push([[verticalXStartingPoint, verticalYStartingPoint], [verticalXEndPoint, verticalYEndPoint]])
      }
      

          
      // First create a line geometry (this is the Keystone pipeline)
      const polyline = {
        type: "polyline", // autocasts as new Polyline()
        paths: path,
        spatialReference: {
          wkid: 102100
        }
      };
      // // // Create a symbol for drawing the line
      const lineSymbol = {
        type: "simple-line", // autocasts as SimpleLineSymbol()
        color: [226, 119, 40],
        width: 4
      };
      const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol
      });
      // Add the graphics to the view's graphics layer
      view.graphics.addMany([polylineGraphic, polygonGraphic]);

    });
  </script>