My own Polygon Geometry is not Showing only default comes with the example working fine.

397
2
Jump to solution
08-07-2021 11:25 PM
ankitchauhan
New Contributor

I have created JSON file   and use it to display polygons on map but Geometry is not showing .It is showing layer with default example coordinates but with my own coordinates it is not showing.please help me here, i am new to arcgis javascript.

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Geometry Engine Showcase</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body, #map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#results{
  bottom: 20px;
  left: 20px;
  width: 150px;
}
#title{
  top: 20px;
  width: 50%; 
  height: 50px;;
  padding-top: 5px;
  text-align: center;
  margin: 0 0 0 25%;
}
.mainStyle{
  position: absolute;
  z-index: 99;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  opacity: 0.8;
}
</style>

<script>
var dojoConfig = { 
  paths: {
    data: location.pathname.replace(/\/[^/]+$/, "") + "/data"
  }
};
</script>

<script src="http://js.arcgis.com/3.15/"></script>
<script>
var map, orchardLayer;
require(["esri/map",
         "esri/graphic",
         "esri/graphicsUtils",
         "esri/geometry/Extent",
         "esri/geometry/geometryEngine",
         "esri/geometry/Polyline",
         "esri/geometry/Point",
         "esri/SpatialReference",
         "esri/toolbars/draw",
         "esri/symbols/SimpleFillSymbol",
         "esri/symbols/SimpleLineSymbol",
         "esri/symbols/TextSymbol",
         "esri/symbols/Font",
         "esri/Color",
         "esri/renderers/SimpleRenderer",
         "esri/layers/GraphicsLayer",
         "data/orchards",  //Feature layer representing an apple orchard
         "dojo/on",
         "dojo/_base/array",
         "dojo/dom",
         "dojo/domReady!"
], function(Map, Graphic, graphicsUtils, Extent, geometryEngine, Line, Point, SpatialReference, Draw, SimpleFillSymbol, SimpleLineSymbol, TextSymbol, Font, Color, SimpleRenderer, GraphicsLayer, orchards, on, array, dom) {
    
  var initExtent = new Extent(-13056650, 6077558, -13055709, 6077938, new SpatialReference({wkid:3857}));
    
  //Instructions for using the app. Will update based on user behavior    
  var drawInstructions = "Click outside the selected feature to begin drawing cutting line. Double-click to finish line and make final cut.";
  var initInstructions = "Click to select a feature.";
  var mergeInstructions = "Select another polygon to merge into the selected feature.";
  var addInstructions = "Click to begin drawing a new feature. Polygons must have at least 3 vertices.";
  var deleteInstructions = "Click to delete a feature.";
  dom.byId("instructions").innerHTML = initInstructions;

  //comes  with default example
  // map = new Map("map", {
  //   basemap: "satellite",
  //   extent: initExtent
  // });

    //My custom map configration
  map = new Map("map", {
    basemap: "streets",
    center: [77.019135, 28.481216],
    zoom: 9,
    showAttribution:true
  });
    
  //Layer symbology    
  var orchardSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([175, 255, 155]), 2), new Color([175, 255, 155, 0.3]));
  var selectionSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color("black"), 3), new Color([255, 255, 255, 0.25]));
  var offsetSym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color("#960AC4"), 2), new Color([96, 252, 219, 0.5]));
  var cutterSym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color("white"), 2);
  var renderer = new SimpleRenderer(orchardSym);
    
  //Get FeatureLayer created from FeatureCollection stored on the client through data/orchards
  orchardLayer = orchards;  
  console.log(orchardLayer,'layer data fetch');
  orchardLayer.setRenderer(renderer);
    
  //Create graphics layer for labeling
  var displayLabels = new GraphicsLayer();
  var labelFont = new Font(14, Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Verdana");    
  var textSym = new TextSymbol("filler text", labelFont, new Color("white")).setHaloColor(new Color("#960AC4")).setHaloSize(2);
    
  //Create selection layer to display selection symbol
  var selectionLayer = new GraphicsLayer();
  var originalGraphicSelection, selectedGraphic;

  //Create GraphicsLayer for cutting line   
  var cutGraphic1, cutGraphic2;

  map.addLayers([orchardLayer, selectionLayer, displayLabels]);
    
  //Initialize Draw polygon tool
  var drawPolygon = new Draw(map, { showTooltips: true });
  drawPolygon.setFillSymbol(new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, cutterSym, new Color([255, 255, 255, 0.25])));

  //Calculates the area of the input geometry using GeometryEngine.geodesicArea() and converts it to a string
  function calcArea(geom){
    return (Math.round(geometryEngine.geodesicArea(geom, 109402)*100) / 100) + " acres"; //area in acres
  }
    
  //Define cutting line object
  var cutter = null;
    
  //Function for creating drawing line
  function drawLine(pt1, pt2){
    var pt1Cor = [pt1.x, pt1.y];
    var pt2Cor = [pt2.x, pt2.y];
    var lineJSON = {
      paths: [[pt1Cor, pt2Cor]],
      spatialReference: pt1.spatialReference
    };
    var polyLine = new Line(lineJSON);
    return polyLine;
  }
  
  //Label areas based on input POLYGON geometries
  function labelAreas(geoms){
     displayLabels.clear();
     array.forEach(geoms, function(item, i){
        var center = item.getCentroid();
        var area = calcArea(item);
        textSym.setText(area);
        displayLabels.add(new Graphic(center, textSym));
     });
  }
    
  var isSelected = false;
  
  //Select features on click event    
  function selectFeature(evt){
    if(cutOpt.checked){
      disableMerge();
      disableAdd();
      disableDelete();
      dom.byId("instructions").innerHTML = drawInstructions;    
      if(!disableDraw){
          return;
      }
      selectionLayer.clear();    
      originalGraphicSelection = evt.graphic;
      selectedGraphic = new Graphic(evt.graphic.geometry, selectionSym);
      selectionLayer.add(selectedGraphic);
      isSelected = true;   
    }
    if(mergeOpt.checked){
      disableCut();
      disableAdd();
      disableDelete();
      selectedGraphic = new Graphic(evt.graphic.geometry, selectionSym);
      selectionLayer.add(selectedGraphic);
      dom.byId("instructions").innerHTML = mergeInstructions;
    }  
    return selectedGraphic;
  }
  
  //Manage map clicking for line drawing purposes    
  var initClick;
  var clicks = 0;
    
  //cut and merge options    
  var cutOpt = dom.byId("cutOpt");
  var mergeOpt = dom.byId("mergeOpt");
  var addOpt = dom.byId("addOpt");   
  var deleteOpt = dom.byId("deleteOpt");    
   
  //click handler    
  on(map, "click", mapClick);

  on(map, "layers-add-result", function(evt){
    var geoms = graphicsUtils.getGeometries(orchardLayer.graphics);
    labelAreas(geoms);
  });
    
  function initCut(){
    cutter = null;  //reset cutter to null each time cut is intialized
    disableDraw = false;  //enable drawing
    map.disableMapNavigation();  //disable map navigation while drawing  
  }
  
  //Starts drawing cutting line    
  function startCut(evt){
    if(clicks === 0){
      initCut();  
    }

    clicks++;  //increment map clicking var for line construction purposes  
    if(clicks === 1){
        initClick = evt.mapPoint;  //set initial click to global var for testing purposes
        if(selectedGraphic){
           var initClickOutsideSelection = geometryEngine.disjoint(selectedGraphic.geometry, initClick);
        }
        if(!initClickOutsideSelection){
            //Don't allow for cutting to being inside of selected feature
            alert("Start cutting line outside of selected feature.");
        }
        else{
            //Create line and add to map
            var lineGeom = drawLine(evt.mapPoint, evt.mapPoint);
            cutter = new Graphic(lineGeom, cutterSym);
            map.graphics.add(cutter);
        }
    }
    if(clicks > 1){
      //Add additional line paths for each click (can be "buggy" at times) don't click too fast
      cutter.geometry.addPath([cutter.geometry.paths[cutter.geometry.paths.length-1][1], evt.mapPoint]);
      map.graphics.redraw();
    } 
    return;   
  }
    
  //Click handler    
  function mapClick(evt){
    if(cutOpt.checked){
       activateCut(evt); 
    }
    if(mergeOpt.checked){
       activateMerge(evt);
    }
    if(addOpt.checked){
       disableCut();
       disableMerge();
       disableDelete();
    }
    if(deleteOpt.checked){
       activateDelete(evt);
    }
  }
    
  //Delete features when clicked    
  function activateDelete(evt){
    var feature = evt.graphic.geometry;
    if(feature){
      array.forEach(orchardLayer.graphics, function(item, i){
        if(item && geometryEngine.equals(item.geometry, feature)){
          orchardLayer.remove(item);
          displayLabels.remove(displayLabels.graphics[i]);
        }    
      });
    } else{
      alert("Select a feature to delete.");
    }
  }
   
  //Activate cutting tool    
  function activateCut(evt){
    if(evt.graphic && !isSelected){
      selectFeature(evt);
    } else if (!evt.graphic && !isSelected){
      alert("Please select a feature to cut first.");
      return;
    } 
    else if (evt.graphic && isSelected && clicks < 1){
      var sameGraphic = geometryEngine.equals(evt.graphic.geometry, selectedGraphic.geometry); 
      if(!sameGraphic){     
        startCut(evt); 
      } else{
          alert("You must start drawing outside of the feature to cut it.");
      }
    }
    else{
      startCut(evt);
    } 
  }    
    
 //For managing cleared selections   
 function clearSelectedFeatures(){
      selectionLayer.clear();
      isSelected = false;
      clicks = 0;
      cutter = null;
      selectedGraphic = null;
 }
    
  //After starting to draw a line, continue drawing with cursor movement    
  on(map, "mouse-move", function(evt){
    if(cutter && !disableDraw){
        cutter.geometry.setPoint(cutter.geometry.paths.length-1, 1, evt.mapPoint);
        map.graphics.redraw();
        cutGeoms(selectedGraphic.geometry, cutter.geometry, evt.mapPoint, selectionLayer);
    }
    else{
        return;
    }
  });
    
 var disableDraw = true;
    
 //Finish drawing line on double-click event 
 on(map, "dbl-click", function(evt){
   if(cutOpt.checked){
     map.enableMapNavigation();
     disableDraw = true;
     map.graphics.clear();
     var goodCut = cutGeoms(selectedGraphic.geometry, cutter.geometry, evt.mapPoint, orchardLayer);
     if(goodCut){
        //Add cut graphics to map and remove original selected graphic
        orchardLayer.add(cutGraphic1);
        orchardLayer.add(cutGraphic2);
        orchardLayer.remove(originalGraphicSelection);
      }
      else{
        disableDraw = true;
      }
      clearSelectedFeatures();
      dom.byId("instructions").innerHTML = initInstructions;
      enableMerge();
      enableAdd();
      enableDelete();
   }
   if(addOpt.checked){
     drawPolygon.finishDrawing();
   }
   var orchardGeoms = graphicsUtils.getGeometries(orchardLayer.graphics);
   labelAreas(orchardGeoms);     
  });
    
  //cut the polygon with the line drawn on map
  function cutGeoms(poly, cutLine, endPoint, lyr){
      var crossTest = geometryEngine.crosses(cutLine, poly);
      var disjointTest = geometryEngine.disjoint(poly, endPoint);
      //Don't attempt cut if line doesn't properly cross selected geometry
      if(crossTest && disjointTest){
        var cutPolys = geometryEngine.cut(poly, cutLine);
        if(lyr === selectionLayer){
            lyr.clear();
            //Define final cut graphics and add temporary ones to map as mouse moves
            cutGraphic1 = new Graphic(cutPolys[0], orchardSym);
            cutGraphic2 = new Graphic(cutPolys[1], orchardSym);
            lyr.add(new Graphic(cutPolys[0], selectionSym));
            lyr.add(new Graphic(cutPolys[1], selectionSym));

            //Create dashed offset polygon symbol and add to map for visualization purposes
            var offsetPolys = offsetGeoms(cutPolys);
            lyr.add(new Graphic(offsetPolys[0], offsetSym));
            lyr.add(new Graphic(offsetPolys[1], offsetSym));
            labelAreas(cutPolys);
        }
        if(lyr === orchardLayer){
            //For finishing the line
            selectionLayer.clear();
        }
        return true;
      }
      else{
          return false;
      }
  }
    
  var selections = [];    
  var selection1, selection2;
    
  function activateMerge(evt){
    if(orchardLayer.graphics.length < 2){
      alert("There must be more than one graphic available to perform a merge operation.");
    } else if(!evt.graphic){
      alert("You must select a feature to merge");
    } else { 
      selections.push(selectFeature(evt));
      if(selections.length === 1){
        selection1 = evt.graphic;
      }
      if (selections.length === 2){
        selection2 = evt.graphic;
        mergeGeoms(selections);
        selections = [];
      }
    }
  }    
  
  //Merge polygon geometries    
  function mergeGeoms(graphs){
    geom1 = graphs[0].geometry;
    geom2 = graphs[1].geometry;
    var mergedGeometry = geometryEngine.union([geom1, geom2]);
    selectionLayer.clear();
    orchardLayer.remove(selection1);
    orchardLayer.remove(selection2);
    orchardLayer.add(new Graphic(mergedGeometry, orchardSym));
    labelAreas(graphicsUtils.getGeometries(orchardLayer.graphics));
    dom.byId("instructions").innerHTML = initInstructions;
    enableCut();
    enableAdd();
    enableDelete();
  }
    
  on(addOpt, "click", function(evt){
    if(addOpt.checked){
      activateAdd();
    }
    dom.byId("instructions").innerHTML = addInstructions;
  });
    
  on(cutOpt, "click", function(evt){
    deactivateAdd();
    dom.byId("instructions").innerHTML = initInstructions;  
  });
    
  on(mergeOpt, "click", function(evt){
    deactivateAdd();
    dom.byId("instructions").innerHTML = initInstructions;
  });
    
  on(deleteOpt, "click", function(evt){
    deactivateAdd();
    dom.byId("instructions").innerHTML = deleteInstructions;
  });    
    
  on(drawPolygon, "draw-end", function(evt){
    enableCut();
    enableMerge();
    enableDelete();
    deactivateAdd();
    activateAdd();
    var geom = evt.geometry;
    if(geom.rings[0].length <= 3){
      alert("Polygon must have at least three vertices.");
      return;
    }  
    
    var topoTest = testTopology(geom);
    if(topoTest === "within"){
      alert("New feature must not be completely within existing features.");
    }
    if(typeof topoTest === "object"){
      orchardLayer.add(new Graphic(topoTest, orchardSym));
    }
  });
    
  function testTopology(feature){
      var newfeature, combined;
      var allGeoms = graphicsUtils.getGeometries(orchardLayer.graphics);
    if(allGeoms.length > 0){
      combined = geometryEngine.union(allGeoms);
      if(geometryEngine.within(feature, combined)){
        return "within";
      }
      if(geometryEngine.intersects(combined, feature)){
        newfeature = geometryEngine.difference(feature, combined);
      }
      else{
        newfeature = feature;
      }
    }
    else{
      newfeature = feature;
    }
    return newfeature;
  }
    
  function activateAdd(){
    drawPolygon.activate(Draw.POLYGON);
  }
    
  function deactivateAdd(){
    drawPolygon.deactivate();
  }    

  //Function for offseting geometries by 10 feet    
  function offsetGeoms(polys){
    return geometryEngine.offset(polys, 10, 9002, 0);
  }
  
  //Prevent user from changing tools mid-selection    
  function disableMerge(){
    mergeOpt.disabled = true;
    dom.byId("mergeLabel").style.color = "gray";
  }
  function enableMerge(){
    mergeOpt.disabled = false;
    dom.byId("mergeLabel").style.color = "black";  
  } 
  function disableCut(){
    cutOpt.disabled = true;
    dom.byId("cutLabel").style.color = "gray";
  }
  function enableCut(){
    cutOpt.disabled = false;
    dom.byId("cutLabel").style.color = "black";  
  }
  function disableAdd(){
    addOpt.disabled = true;
    dom.byId("addLabel").style.color = "gray";
  }
  function enableAdd(){
    addOpt.disabled = false;
    dom.byId("addLabel").style.color = "black";  
  } 
  function disableDelete(){
    deleteOpt.disabled = true;
    dom.byId("deleteLabel").style.color = "gray";
  }
  function enableDelete(){
    deleteOpt.disabled = false;
    dom.byId("deleteLabel").style.color = "black";  
  }    
});
</script>
</head>

<body>
  <div id="map">
    <div class="mainStyle" id="title"><h2>Apple Orchards</h2></div>
    <div class="mainStyle" id="results"><span id="instructions"></span><br><br>
    <input type="radio" name="operation" id="cutOpt" checked><span id="cutLabel">Cut Features</span><br><br>
    <input type="radio" name="operation" id="mergeOpt"><span id="mergeLabel">Merge Features</span><br><br>
    <input type="radio" name="operation" id="addOpt"><span id="addLabel">Add Features</span><br><br>
    <input type="radio" name="operation" id="deleteOpt"><span id="deleteLabel">Delete Features</span><br><br>     
  </div>
</div>
</body>
</html>

 

This is my json file ,which is only showing first feature but not the second one.

 

define(["esri/layers/FeatureLayer"], function (FeatureLayer) {
    var orchardJson = {
        "objectIdFieldName": "OBJECTID",
        "globalIdFieldName": "",
        "geometryType": "esriGeometryPolygon",
        "spatialReference": { "wkid": 102100, "latestWkid": 3857 },
        "fields": [{ "name": "OBJECTID", "type": "esriFieldTypeOID", "alias": "OBJECTID", "sqlType": "sqlTypeOther", "domain": null, "defaultValue": null },
         { "name": "NAME", "type": "esriFieldTypeString", "alias": "NAME", "sqlType": "sqlTypeOther", "length": 100, "domain": null, "defaultValue": null },
         { "name": "AREA", "type": "esriFieldTypeString", "alias": "AREA", "sqlType": "sqlTypeOther", "length": 100, "domain": null, "defaultValue": null },
          { "name": "GlobalID", "type": "esriFieldTypeGlobalID", "alias": "GlobalID", "sqlType": "sqlTypeOther", "length": 38, "domain": null, "defaultValue": null }],
           "features": [
               //working fine with there coordinates
               {
            "attributes": { "OBJECTID": 6, "NAME": "apple", "AREA": "calculate this",
             "GlobalID": "eb9337a3-0edd-48c7-9acf-0151c4310153" },
            "geometry": {
                "rings":
                    [
                        [
                        [-13056478.2271, 6077897.9925], 
                        [-13055890.7646, 6077901.4887], 
                        [-13055886.5869, 6077768.2201], 
                        [-13055887.8402, 6077728.532], 
                        [-13055891.6001, 6077703.048], 
                        [-13055898.2845, 6077680.4885], 
                        [-13055905.8043, 6077665.031], 
                        [-13055914.5775, 6077652.4979], 
                        [-13055926.275, 6077637.876], 
                        [-13055949.2524, 6077620.7474],
                         [-13055975.5719, 6077609.0499], 
                         [-13056000.2203, 6077603.2011], 
                         [-13056034.8952, 6077601.53], 
                         [-13056099.6495, 6077602.3655],
                          [-13056165.5846, 6077601.3813],
                           [-13056282.6647, 6077601.3813], 
                           [-13056473.7252, 6077604.773],
                            [-13056478.2271, 6077897.9925]
                        ]
                    ]
            }
        },
        //My own coordinates
        {
            
                        "attributes": { "OBJECTID": 6,
                         "NAME": "serviceable 1", 
                         "AREA": "calculate this",
                        // "REGION":"Serviceable",
            },
            'geometry': {
              'rings': 
              [
                [
                  [ 77.15760062500001,30.890967638580772],
                  [ 77.2941240625,29.57600861486909],
                  [ 76.95873343750002,28.428848818170273],
                 [ 75.9202178125,28.434726060930952],
                 [ 75.5131084375,28.909133164756486],
                 [ 74.70792777343749,29.39857793541408],
                 [ 74.78873587890624,29.871326311523653],
                 [ 75.48477835937497,29.65680741133687],
                 [ 76.15957328125,29.79063051517841],
                 [ 77.15760062500001,30.890967638580772],
                ],
              ],
            },
          },
    ]
    };

    var layerDef = {
        "geometryType": orchardJson.geometryType,
        "fields": orchardJson.fields,
        "spatialReference": orchardJson.spatialReference
    };

    var orchards = new FeatureLayer({
        layerDefinition: layerDef,
        featureSet: orchardJson
    }, {
        mode: FeatureLayer.MODE_SNAPSHOT
    });

    return orchards;
});

 

@kawishabbas  @RobertL @JoshuaBixby 

0 Kudos
1 Solution

Accepted Solutions
Sage
by
New Contributor II

@ankitchauhan 

It looks like the spatial reference of your json file is defined as 3857 or WGS84 Web Mercator (Auxiliary Sphere), and the first feature in the features array of the json file is defined with geometry values similar to this:

[-13056478.2271, 6077897.9925]

However the second feature in the features array you added seems to be using latitude and longitude for the coordinates with values similar to this:

[ 77.15760062500001,30.890967638580772]

I think the answer is that your mixing two different coordinate systems.  I'd suggest projecting the latitude and longitude values in the second feature into WGS 1984 Web Mercator (Auxiliary Sphere) and replacing the existing values in the json file.  Otherwise, you could change the first feature's coordinates to be in lat/lon and change the spatial reference in your json file accordingly to 4326.  The goal being to have the spatial reference and all the features using the same coordinate system.  You could use ArcGIS Desktop software to help with the conversion or there are a few websites that could help with this as well such as: https://products.aspose.app/gis/transformation/lat-long-to-mercator.

View solution in original post

2 Replies
Sage
by
New Contributor II

@ankitchauhan 

It looks like the spatial reference of your json file is defined as 3857 or WGS84 Web Mercator (Auxiliary Sphere), and the first feature in the features array of the json file is defined with geometry values similar to this:

[-13056478.2271, 6077897.9925]

However the second feature in the features array you added seems to be using latitude and longitude for the coordinates with values similar to this:

[ 77.15760062500001,30.890967638580772]

I think the answer is that your mixing two different coordinate systems.  I'd suggest projecting the latitude and longitude values in the second feature into WGS 1984 Web Mercator (Auxiliary Sphere) and replacing the existing values in the json file.  Otherwise, you could change the first feature's coordinates to be in lat/lon and change the spatial reference in your json file accordingly to 4326.  The goal being to have the spatial reference and all the features using the same coordinate system.  You could use ArcGIS Desktop software to help with the conversion or there are a few websites that could help with this as well such as: https://products.aspose.app/gis/transformation/lat-long-to-mercator.

View solution in original post

ankitchauhan
New Contributor

thanks @Sage . it worked after changing the spatial reference.

0 Kudos