topic Re: Edit an existing geometry on map in ArcGIS JavaScript Maps SDK Questions

Edit an existing geometry on map

DivyaArora — Fri, 11 Nov 2022 13:23:45 GMT

We are trying to integrate the ESRI Maps in a React Application. Using ARCGIS API for JS 4.24, we are able to draw the map and add features like marker and boundary on the map.

Now, we need to edit the geometry on the map by performing various operations like draw polygon, circle, split, move , delete etc. We could not find anything in the ARCGIS API for JS 4.24.

The document has some examples for ARCGIS API for JS 3.42 but in this case we are not able to render the map.

Using the code like below , we are getting the error : "Module not found: Error: Can't resolve 'esri/Map'"

import Map from "esri/Map";

map = new Map("map", {

basemap: "streets-vector",

center: [-15.469, 36.428],

zoom: 3

});

Any help regarding implementing the feature would be appreciated

Re: Edit an existing geometry on map

JayakumarPD — Sat, 12 Nov 2022 13:16:57 GMT

Hi Divya

You can refer this https://github.com/Esri/react-arcgis/blob/master/demo/src/index.js

import { Map } from '@esri/react-arcgis';

Any how I am in my Next js solution using like this. there is no error. After installing the arcgis core.

import ArcGISMap from "@arcgis/core/Map";

const map = new ArcGISMap({

basemap: "topo-vector",

// other porps can be set here

});

Re: Edit an existing geometry on map

DivyaArora — Mon, 14 Nov 2022 09:15:30 GMT

Map is correctly working in ARcGis 4.2 version. I am looking for some edit operation on the existing geometry like splitting a polygon. Documentation refers using cut operation of Geometry engine but could not understand the way how to use it.

Re: Edit an existing geometry on map

JayakumarPD — Tue, 15 Nov 2022 04:36:59 GMT

Hi, kindly share the code I will try to help.

Re: Edit an existing geometry on map

DivyaArora — Wed, 16 Nov 2022 07:47:45 GMT

I have followed the url "https://developers.arcgis.com/javascript/latest/calculate-geometries/" to implement the split functionality.

This worked for a single polygon now. Now, looking for splitting multiple polygons with a single polyline. Could some one guide on this if this is the tight approach for implmenting a split operation.

Below is the code :

const sketchVM = new Sketch({

layer: graphicsLayer,

view: window.mapView,

// graphic will be selected as soon as it is created

creationMode: "update"

});

const splitUsingGeomtryService = (polyline: any) => {

// const url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer";

const dissolvedGeometry = geometryEngine.union(window.lastpolygon);

const splittedGeometry = geometryEngine.cut(dissolvedGeometry, polyline);

console.log("splittedGeometry: ", splittedGeometry);

graphicsLayer.removeAll();

const intersection1Graphic = new Graphic({

geometry: splittedGeometry[0] as any,

symbol: {

type: "simple-fill",

style: "solid",

color: "red",

outline: {

color: "blue"

}

} as any

});

graphicsLayer.add(intersection1Graphic);

const intersection2Graphic = new Graphic({

geometry: splittedGeometry[1] as any,

symbol: {

type: "simple-fill",

style: "solid",

color: "red",

outline: {

color: "blue"

}

} as any

});

graphicsLayer.add(intersection2Graphic);

}

Re: Edit an existing geometry on map

DivyaArora — Wed, 16 Nov 2022 07:48:08 GMT

Any guidance with a reference link or code is appreciated

Re: Edit an existing geometry on map

JayakumarPD — Thu, 17 Nov 2022 04:43:10 GMT

I have hardcoded the polygon and polyline and performed cut polygon using geometryEngine, the task can also be done dynamically. By clicking on cut button the operation will be performed.

<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Cut Polygone | Sample | ArcGIS API for JavaScript 4.25</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/widgets/Sketch", "esri/Map", "esri/views/draw/Draw", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/views/MapView", "esri/geometry/Polyline", "esri/geometry/Polygon", "esri/geometry/geometryEngine", ], ( Sketch, Map, Draw, Graphic, GraphicsLayer, MapView, Polyline, Polygon, geometryEngine ) => { // const graphicPolyline = new GraphicsLayer(); const map = new Map({ basemap: "topo-vector", }); const view = new MapView({ container: "viewDiv", map: map, zoom: 10, center: [75, 14], }); const rings1 = [ [ [8323584.716104832, 1584076.9248102568], [8344681.335911548, 1605173.5446169735], [8360427.3637383, 1592484.9979216293], [8356911.260437181, 1567413.652644082], ], [ [8353089.409022921, 1549527.388025344], [8371434.29581137, 1568789.5191532157], [8386721.701468411, 1553807.8616093155], [8364707.837322271, 1533016.9899157395], ], ]; const polygon1 = new Polygon({ rings: rings1, hasZ: false, hasM: false, spatialReference: { wkid: 102100 }, }); let polygoneGraphic1 = new Graphic({ geometry: polygon1, symbol: { type: "simple-fill", color: "gray", style: "solid", outline: { color: "yellow", width: 1, }, }, }); view.graphics.add(polygoneGraphic1); let paths1 = [ [ [8322514.597708838, 1596153.9752793193], [8362873.348643427, 1574292.9851897506], [8379995.242979313, 1537450.3375562814], ], ]; let line1 = new Polyline({ hasZ: false, hasM: false, paths: paths1, spatialReference: { wkid: 102100 }, }); const graphicPolyline1 = new Graphic({ geometry: line1, symbol: { type: "simple-line", color: [200, 70, 30], width: 2, }, }); view.graphics.add(graphicPolyline1); function drawPolygon(event) { const vertices = event.vertices; let polygon = { type: "polygon", rings: vertices, spatialReference: view.spatialReference, }; console.log(polygon); let polygoneGraphic = new Graphic({ geometry: polygon, symbol: { type: "simple-fill", color: "gray", style: "solid", outline: { color: "yellow", width: 1, }, }, }); view.graphics.add(polygoneGraphic); } function drawLine(event) { const vertices = event.vertices; let polyline = { type: "polyline", hasZ: false, hasM: false, paths: vertices, spatialReference: view.spatialReference, }; console.log(polyline); const graphicPolyline = new Graphic({ geometry: polyline, symbol: { type: "simple-line", color: [200, 70, 30], width: 2, }, }); view.graphics.add(graphicPolyline); } const draw = new Draw({ view: view, }); document.getElementById("Polyline").onclick = () => { const action = draw.create("polyline"); view.focus(); action.on("vertex-add", drawLine); }; document.getElementById("Polygon").onclick = () => { const action = draw.create("polygon"); view.focus(); action.on("vertex-add", drawPolygon); }; view.ui.add(info, "top-right"); view.when(() => { document.getElementById("handleClick").onclick = () => { console.log("cut started.."); const geometries = geometryEngine.cut(polygon1, line1); console.log("cut completed.."); console.log(geometries); // just for my reference.. const rings2 = [ [ [8376763.972308426, 1544403.339624886], [8367399.716694297, 1564553.211080289], [8371434.29581137, 1568789.5191532157], [8386721.701468411, 1553807.8616093155], [8376763.972308426, 1544403.339624886], ], ]; const polygon2 = new Polygon({ rings: rings2, hasZ: false, hasM: false, spatialReference: { wkid: 102100 }, }); let polygoneGraphic2 = new Graphic({ geometry: polygon2, symbol: { type: "simple-fill", color: "blue", style: "solid", outline: { color: "red", width: 1, }, }, }); view.graphics.add(polygoneGraphic2); const rings3 = [ [ [8358228.865145299, 1576808.7470845701], [8331042.491026713, 1591534.6997321376], [8344681.335911548, 1605173.5446169735], [8360427.3637383, 1592484.9979216293], [8358228.865145299, 1576808.7470845701], ], ]; const polygon3 = new Polygon({ rings: rings3, hasZ: false, hasM: false, spatialReference: { wkid: 102100 }, }); let polygoneGraphic3 = new Graphic({ geometry: polygon3, symbol: { type: "simple-fill", color: "tomato", style: "solid", outline: { color: "blue", width: 1, }, }, }); view.graphics.add(polygoneGraphic3); const rings4 = [ [ [8356911.260437181, 1567413.652644082], [8323584.716104832, 1584076.9248102568], [8331042.491026713, 1591534.6997321376], [8358228.865145299, 1576808.7470845701], [8356911.260437181, 1567413.652644082], ], ]; const polygon4 = new Polygon({ rings: rings4, hasZ: false, hasM: false, spatialReference: { wkid: 102100 }, }); let polygoneGraphic4 = new Graphic({ geometry: polygon4, symbol: { type: "simple-fill", color: "green", style: "solid", outline: { color: "blue", width: 1, }, }, }); view.graphics.add(polygoneGraphic4); const rings5 = [ [ [8364707.837322271, 1533016.9899157395], [8353089.409022921, 1549527.388025344], [8367399.716694297, 1564553.211080289], [8376763.972308426, 1544403.339624886], [8364707.837322271, 1533016.9899157395], ], ]; const polygon5 = new Polygon({ rings: rings5, hasZ: false, hasM: false, spatialReference: { wkid: 102100 }, }); let polygoneGraphic5 = new Graphic({ geometry: polygon5, symbol: { type: "simple-fill", color: "violet", style: "solid", outline: { color: "blue", width: 1, }, }, }); view.graphics.add(polygoneGraphic5); }; }); }); </script> </head> <body> <div id="viewDiv"></div> <div id="info"> <button id="Polygon">Polygon</button> <button id="Polyline">Polyline</button> <button id="handleClick">Cut</button> </div> </body> </html>

Re: Edit an existing geometry on map

DivyaArora — Thu, 17 Nov 2022 08:46:37 GMT

Thanks @JayakumarPD for the assistance but in your codebase you have added the hardcoded geometry at the corrdinates of the initial polygon. How can i get the coordinates of the newly splitted polygons so that I can add them dynamically.

Considering your example how can i identify the polygons that have been crossed by this polyline so that i can dynamically add the newly created geometries.

If you will refer my code I am able to perform cut on a single polygon that gives me 2 polygons but unable to dynamically handle the case mentioned by you (which is also my case)

Re: Edit an existing geometry on map

JayakumarPD — Fri, 18 Nov 2022 04:47:20 GMT

How can i get the coordinates of the newly splitted polygons so that I can add them dynamically.

const geometries = geometryEngine.cut(polygon1, line1); console.log(geometries); // here we will ge the newly created polygone

check the console, for that only I have applied the symbology.

Considering your example how can i identify the polygons that have been crossed by this polyline

const isCrossed = geometryEngine.crosses(polygon1, line1); // if isCrossed is true then only perfor the cut else alert the user if(isCrossed){ const geometries = geometryEngine.cut(polygon1, line1); console.log(geometries); }else{ alert("Kindly draw the line on polygone"); }

Hope it solves the problem.

Re: Edit an existing geometry on map

DivyaArora — Mon, 21 Nov 2022 05:36:13 GMT

Hi @JayakumarPD

I will try to rephrase my requirement. For ex : I have 2 polygons initially and i need to split them into 4 using a polyline(cutter).

Query : How can i pass these 2 polygons to get the new splitted polygon's geometry because as per the documentation, the cut method accepts a single geometry.

const geometries = geometryEngine.cut(polygon1, line1); // here i can pass only single polygon

The concern is to split multiple polygons into another set of multiple polygons.

Re: Edit an existing geometry on map

DivyaArora — Thu, 24 Nov 2022 05:49:41 GMT

Anyone could help me in this please

Re: Edit an existing geometry on map

JayakumarPD — Thu, 24 Nov 2022 08:06:16 GMT

You can iterate over polygon and apply the cut geometry

if (isCrossed) { rings1.map((x) => { const iteratingGeometry = new Polygon({ rings: x, hasZ: false, hasM: false, spatialReference: { wkid: 102100 }, }); const geometries = geometryEngine.cut(iteratingGeometry, line1); console.log(geometries);

Will it be helpful

Re: Edit an existing geometry on map

DivyaArora — Tue, 29 Nov 2022 06:58:15 GMT

crosses method helped me fix my issue. Thanks a lot 🙂

Re: Edit an existing geometry on map

JayakumarPD — Tue, 29 Nov 2022 08:19:18 GMT

Good. It got resolved.

You can see the knowledge content from Sri. Rene Rubalcava, on geometry engine recently sir published a video on yotube.

Keep on Mapping...

https://www.youtube.com/@odoenet