https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/create-a-grid-with-polygon-edge-instead-of-polygon/m-p/1492979#M84870 <P>Hi.</P><P>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?&nbsp;</P><P>&nbsp;</P><P>Codepen of grid with Polygon extent <A href="https://codepen.io/Andy0206/pen/yLrpXjp" target="_blank">https://codepen.io/Andy0206/pen/yLrpXjp</A></P><P>&nbsp;</P><P>Thanks in advance.</P> Fri, 14 Jun 2024 19:15:15 GMT SaiPeketi 2024-06-14T19:15:15Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/create-a-grid-with-polygon-edge-instead-of-polygon/m-p/1492979#M84870 <P>Hi.</P><P>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?&nbsp;</P><P>&nbsp;</P><P>Codepen of grid with Polygon extent <A href="https://codepen.io/Andy0206/pen/yLrpXjp" target="_blank">https://codepen.io/Andy0206/pen/yLrpXjp</A></P><P>&nbsp;</P><P>Thanks in advance.</P> Fri, 14 Jun 2024 19:15:15 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/create-a-grid-with-polygon-edge-instead-of-polygon/m-p/1492979#M84870 SaiPeketi 2024-06-14T19:15:15Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/create-a-grid-with-polygon-edge-instead-of-polygon/m-p/1493503#M84877 <P><a href="https://community.esri.com/t5/user/viewprofilepage/user-id/204563">@SaiPeketi</a>&nbsp;<BR /><BR /></P><P>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&nbsp; of the polygon instead.<BR /><BR />You can calculate the new grid corners by calculating the steps between two corners pairs.<BR />Note it can get a bit confusing as your matching up corner pairs.<BR /><BR />I've just quickly modified your code to illustrate below, naming the corners to try and make it easier to understand.<BR /><BR />Hope it helps.<BR /><BR /></P><LI-CODE lang="c">&lt;script&gt; require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Extent", "esri/widgets/Measurement"], (Map, MapView, Graphic, Extent, Measurement) =&gt; { 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 &lt;= 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]); }); &lt;/script&gt;</LI-CODE><P><BR /><BR /></P> Mon, 17 Jun 2024 00:06:08 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/create-a-grid-with-polygon-edge-instead-of-polygon/m-p/1493503#M84877 JamesIng 2024-06-17T00:06:08Z