Hi i want to calculate area of polygons drawn on map geometry, any arcgis sample will be helpful
Solved! Go to Solution.
Sir I have a query this calculate area fn do not calculate instantly, i have it only calculate when i refresh the page and then its calculates total area from whole graohics. how to calculate area instantly when graphics is dropped on map or drawn on map
//Calculate TOtal hectares of Map Geometry
function calculateArea() {
var area = 0;
graphicsLayer.graphics.map(function (grap) {
area = geometryEngine.geodesicArea(grap.geometry, "hectares");
});
totalAreaHectare=totalAreaHectare+=Math.round(area);
//console.log(totalAreaHectare);
} //End calculateArea
});//End require
I am calling it in
function addGraphics(vertices) {
//const vertices = <?php echo json_encode($map_ring_coordinate);?>;
const polygon = createGeometry(vertices);
validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
255, 121,5]);
newDevelopmentGraphic = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(polygon),
symbol: validSymbol,
attributes: {
newDevelopment: "new store"
}
});
graphicsLayer.addMany([newDevelopmentGraphic]);
calculateArea();
} //End addGraphics
and here
function addTempGraphic(evt) {
if(evt.state === "complete" && evt.tool === 'polygon'){
evt.graphic.symbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [255, 121, 5]);
evt.graphic.attributes= {
newDevelopment: "new store"
};
calculateArea();
//appear polygon as editable first time when it is created
sketchViewModel.update(evt.graphic, {tool: "reshape"});
}
Rajni,
The Geometry engine is a client side class and does calculations instantly. I am not sure when you are storing this area to be able to say that it is not updating with a page refresh but that is likely the issue. If you put a break point in your code then you will see that it is instanly.
Yes it do calculate instantly, but it do not show instantly on my map div which i add on map , why??
view.ui.add(hectareLabel, "bottom-right");
How are you updating that view ui element?
view.when(function() {
// Add the boundary polygon and new loted polygon graphics on view
const property_vertices = <?php echo json_encode($map_ring_coordinate);?>;
addGraphics(property_vertices);
addMarker();
var hectareLabel = domConstruct.toDom("<div class='esri-component esri-widget' role='button' id='hectare' title='hectare'><b>"+totalAreaHectare+" HECTARES</b></div>");
view.ui.add(hectareLabel, "bottom-right");
}
Rajni,
The view when property is only changed when the page is first loaded or refreshed to this explains why it is not updating.
You need to get the id of your div and change the innerHTML property of your div to the updated area when you recalculate it.
Check out this test app to see how it works. Hopefully, it will point you to a right direction.
-Undral