Cut geometry service not working properly in FireFox

PaulHedlund · ‎09-16-2013

I cannot get the Cut GeometryService to work properly in FireFox. It works great in IE and Chrome.

Sample code is here:

It is designed for cutting of polygons. You may need to adjust proxy and FeatureLayer when testing locally.



<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>JavaScript API Cut Test</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      #header{
        font-size: 1.1em;
        font-family: sans-serif;
        padding-left: 1em;
        padding-top:4px;
        color:#660000;
      }
      .templatePicker {
        border: none;
      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
    
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      var map;
      
      require([
        "esri/map", 
        "esri/toolbars/edit",
  "esri/dijit/editing/Cut",
  "esri/toolbars/draw",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
  "esri/tasks/query",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/tasks/QueryTask",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",
  "esri/tasks/GeometryService",

        "esri/config","esri/dijit/editing/Union","esri/graphic",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys","dojo/on","dijit/registry","dojo/_base/lang",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, Edit,Cut, Draw,
        ArcGISTiledMapServiceLayer, FeatureLayer,Query,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, QueryTask,
        Editor, TemplatePicker, GeometryService,
        esriConfig, Union, Graphic,jsapiBundle,
        arrayUtils, parser, keys, on,registry, lang
      ) {
        parser.parse();       

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
        //esriConfig.defaults.io.proxyUrl = "http://localhost/proxy/proxy.ashx";   
  esriConfig.defaults.io.proxyUrl = "/proxy";   

  var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  
  map = new Map("map", {
   basemap: "streets",
   center: [-96.541, 38.351],
   zoom: 13
        });
  
  var cutService;
  var unionService;
  var donutService;

  var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{
          outFields: ['*']
        });

  var fieldsSelectionSymbol = new SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));
  fieldsSelectionSymbol.setOutline(new SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2));
  waterbodies.setSelectionSymbol(fieldsSelectionSymbol);

        map.addLayers([waterbodies]);
  
  function SelectionSet(geometries, tb) {
   tb.deactivate();
   var selectQuery = new Query();
   selectQuery.geometry = geometries;
   waterbodies.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW);
  }
  
  
  function PerformCut() {
 
   var selectGraphics = waterbodies.getSelectedFeatures();
  
   if (selectGraphics.length == 0){
    alert("Select a polygon to slice.");
    return;
   }
   else if (selectGraphics.length > 1){
    alert("More than one polygon is currently selected.  The slice operation can only be done on one polygon.");
    return;
   }
   
   var sliceGeometry = selectGraphics[0].geometry;
     
   var tbSlice = new Draw(map);
   //find points in Extent when user completes drawing extent
   on(tbSlice, "DrawEnd", function(polyline){
    splitLineComplete(polyline);
   });
   tbSlice.activate(Draw.POLYLINE);
   
   function splitLineComplete(polyline) {
    if (polyline) {
     var selectGeometries = new Array();
     var sliceGraphics = waterbodies.getSelectedFeatures();
     for (var i = 0; i < sliceGraphics.length; i++) {
      selectGeometries.push(sliceGraphics.geometry);
     }
     
     geometryService.cut(selectGeometries,polyline);
    }
   }
  
   cutService = geometryService.on("cut-complete", function(results) {
    tbSlice.deactivate(Draw.POLYLINE);
    if (results.result.geometries != null && results.result.geometries.length > 1) {
     var cutGraphic = waterbodies.getSelectedFeatures()[0].setGeometry(results.result.geometries[0]);
     
     // Create for the next 
     currentSymbolCut = waterbodies.getSelectedFeatures()[0].symbol;
     currentAttributesCut = lang.clone(cutGraphic.attributes);
     
     var newGraphics = new Array();

     for (var i = 1; i < results.result.geometries.length; i++) {
      newGraphics.push(new Graphic(results.result.geometries, currentSymbolCut,currentAttributesCut));
     }
     
     waterbodies.applyEdits(newGraphics, [cutGraphic], null, CutSucceed, CutFailed);
     
     function CutSucceed() {
      cutService.remove();
      clearTool();   
     }
     
     function CutFailed(evt) {
      cutService.remove();
      alert("Failed - " + evtObj);
      GenFunc.clearTool();
     }
    }
   });
  }

  function SelectFeatures() {
   var tb = new Draw(map);
   //find points in Extent when user completes drawing extent
   on(tb, "DrawEnd", function(geometries){
    SelectionSet(geometries, tb)
   });
   tb.activate(Draw.EXTENT);
  }

  var bSelect = registry.byId("btnSelect");
  on(bSelect, "click", function(evt){
   SelectFeatures();
  });
  
  var bSlice = registry.byId("btnSplit");
  on(bSlice, "click", function(evt){
   PerformCut();
  });
  
  var bClear = registry.byId("btnClear");
  on(bClear, "click", function(evt){
   clearTool(waterbodies);
  });
  
  function clearTool(waterbodies){
   map.graphics.clear();
   if (waterbodies) {
    waterbodies.clearSelection();
    waterbodies.refresh();
   }  
  }  
      });
    </script>
  </head>
  <body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
        JavaScript API Cut Test
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
  <br>
  <div id="btnSelect" data-dojo-type="dijit/form/Button" style='padding-left:5px;'>Select</div>
  <br>
  <div id="btnSplit" data-dojo-type="dijit/form/Button" style='padding-left:5px;'>Cut</div>
  <br>
  <div id="btnClear" data-dojo-type="dijit/form/Button" style='padding-left:5px;'>Clear</div>
  <br>
  <br>
  <span><u>Steps</u></span>
  <br>
  <br>
  <span>1. Select one polygon</span>
  <br>
  <br>
  <span>2. Click the Cut button and draw a line through the selected polygon</span>
  <br>
  <br>
  <span>3. Polygon will should now be split.</span>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>

NikhilSharma · ‎03-10-2015

Hi Paul,

I tried hosting the sample and was able to reproduce your issue. What I can observe after debugging your code and analyzing network traffic is that the code calls the apply edits function of feature layer but in the network response of the browser or fiddler I don't see any apply edits operation going on even with the latest version of API.

I will test it further.

Regards,

Nikhil