D.E.Smith99

Editing Projected data

Discussion created by D.E.Smith99 on Jul 23, 2012
Latest reply on Jul 23, 2012 by D.E.Smith99
I am working on an editing application with the JavaScript API. I am using the basemap gallery and template picker examples to start out with and have added some custom code. 

Here is my question:
When geometry is edited in the map (map uses Web Mercator Aux Sphere defined by the basemaps being added first) what is the best technique for projecting the data to the native Spatial reference of the map service before saving the geometry edits?

Also sometimes when i create geometry or edit attributes i loose the ability to pan the map and after i create one feaure the double click does not complete the next polygon... thoughts?

    <script type="text/javascript">
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.SnappingManager");
      //added below to support basemap gallery widget
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.Tooltip");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
      dojo.require("dijit.dijit");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.tasks.geometry");


      var map,basemapGallery,geometryService,areaSqKm;

      function init() {
        //snapping is enabled for this sample - change the tooltip to reflect this
        esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start +  "<br/>Press <b>CTRL</b> to enable snapping";
        esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint +  "<br/>Press <b>CTRL</b> to enable snapping";
           
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "https://.../proxy/proxy.ashx";
        esri.config.defaults.io.alwaysUseProxy = true;

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("https://.../rest/services/Geometry/GeometryServer");
        geometryService =new esri.tasks.GeometryService("https://.../rest/services/Geometry/GeometryServer");
        
       var extent = new esri.geometry.Extent({
            "xmin": -14015250.2090277,
            "ymin": 4046527.47766432,
            "xmax": -12851216.7378639,
            "ymax": 5933211.56136369,
            "spatialReference": {"wkid": 102100}
        }); 
     
        map = new esri.Map("map",{extent: extent});
        
        dojo.connect(map, "onLoad", function() {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        dojo.connect(map, "onLayersAddResult", initEditing);
        //dojo.connect(geometryService, "onAreasAndLengthsComplete", outputAreaAndLength);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        
        var cropMapRegions = new esri.layers.ArcGISDynamicMapServiceLayer("https://.../MapServer");
        map.addLayer(cropMapRegions);

        var operationsPointLayer = new esri.layers.FeatureLayer("https://.../FeatureServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
       


        map.addLayers([operationsPointLayer]);
        map.infoWindow.resize(400, 300);
        createBasemapGallery();
      }
      function getAreaAndLength(geometry) {
        //setup the parameters for the areas and lengths operation
        var areasAndLengthParams = new esri.tasks.AreasAndLengthsParameters();
        areasAndLengthParams.areaUnit = esri.tasks.GeometryService.SQUARE_KILOMETERS;
        geometryService.simplify([geometry], function(simplifiedGeometries) {
          areasAndLengthParams.polygons = simplifiedGeometries;
          //alert(geometryService.url)
          geometryService.areasAndLengths(areasAndLengthParams,outputAreaAndLength);
          alert("area and length complete");
        });
        
      }
      function outputAreaAndLength(result) {
        console.log(dojo.toJson(result));
        areaSqKm=0;
        areaSqKm = result.areas[0].toFixed(3)/1000000;
        alert(areaSqKm);
      }
      function delay(){
      }

    
    function initEditing(results) {
        //alert("Editor Ini");
        areaSqKm = 0;
        //add a default value for newly added features
        dojo.connect(results[0].layer,'onBeforeApplyEdits',function(adds,deletes,updates){
        //alert("Connect onB4ApplyEdit");
          dojo.forEach(adds,function(add){
                //alert("forGraphic");
                getAreaAndLength(add.geometry);
                //setTimeout(delay(),3000);
                alert(areaSqKm)
                add.attributes['Sq_km'] = areaSqKm;
          });

        });
        

        var featureLayerInfos = dojo.map(results, function(result) {
          return {
            'featureLayer': result.layer, 
            'fieldInfos': [
            {'fieldName': "Name", 'visible':true, 'label':"AOI Name"},
            {'fieldName': "SubName", 'visible':true, 'label':"AOI SubName"},
            {'fieldName': "AOI_Extent_Status", 'visible':true, 'label':"AOI Status"},
            {'fieldName': "Acres", 'visible':true, 'isEditable': true,'label':"Acres"},
            {'fieldName': "Sq_km", 'visible':true, 'isEditable': false,'label':"Sq km"}]
          };
        });

        var settings = {
          map: map,
          enableUndoRedo:true,
          toolbarVisible:true,
          layerInfos: featureLayerInfos
        };

        var params = {
          settings: settings
        };

        var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
       
        var options = {snapKey:dojo.keys.copyKey};
        map.enableSnapping(options);
       
        editorWidget.startup();
        
      }
      
     function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemaps = [];
        
        var streetLayer = new esri.dijit.BasemapLayer({
        url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"});
        var aerialLayer = new esri.dijit.BasemapLayer({
        url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"});
        var topoLayer = new esri.dijit.BasemapLayer({
        url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"});
        
        var basemapRoad = new esri.dijit.Basemap({
          layers: [streetLayer],
          id: "bmRoad",
          title: "Road"
        });
        basemaps.push(basemapRoad);
        
        var basemapAerial = new esri.dijit.Basemap({
          layers: [aerialLayer],
          id: "bmAerial",
          title: "Aerial"
        });
        basemaps.push(basemapAerial);
        
        var basemapTopo = new esri.dijit.Basemap({
          layers: [topoLayer],
          id: "bmTopo",
          title: "Topo"
        });
        basemaps.push(basemapTopo);


        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          basemaps: basemaps,
          map: map
        });
       
        //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
        //we are going to create a custom user interface to display the basemaps, in this case a menu.
        dojo.forEach(basemapGallery.basemaps, function(basemap) {            
          //Add a menu item for each basemap, when the menu items are selected
          dijit.byId("bingMenu").addChild(new dijit.MenuItem({
            label: basemap.title,
            color:"#92a661",
            onClick: dojo.hitch(this, function() {
              this.basemapGallery.select(basemap.id);
            })
          }));
         
        });
      }

      dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
      <div style="position:absolute; right:200px; top:10px; z-Index:99;">
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'AOI Editor', closable:'false', open:'false'">
                <div style="padding:10px;" id="editorDiv">
                </div>
          </div>
       </div>
      <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton"  label="Basemaps"  dojoType="dijit.TitlePane" data-dojo-props="title:'Basemaps'" style="background:#687e9a">
            <div dojoType="dijit.Menu" id="bingMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>
      <!-- <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
        <div id="panelHeader">
          Default Editor
        </div>
        <div style="padding:10px;" id="editorDiv">
        </div> 
      </div>-->
    </div>
  </body>

</html>

Outcomes