paulhedlund

Cut geometry service not working properly in FireFox

Discussion created by paulhedlund on Sep 16, 2013
Latest reply on Mar 10, 2015 by NSharma-esristaff
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[i].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[i], 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>

Attachments

Outcomes