topic Re: directions graphic to feature layer in ArcGIS JavaScript Maps SDK Questions

directions graphic to feature layer

williamcarr — Tue, 14 Apr 2015 14:35:00 GMT

Before I go off spending hours on a possible wrong path I figured I would ask if anyone has ever seen an example of a newly created directions graphic being saved to a feature layer.

Thanks

Re: directions graphic to feature layer

williamcarr — Tue, 14 Apr 2015 19:54:46 GMT

Got the apply edits working in a test, still unsure of how the directions graphic layer is accessed.

Re: directions graphic to feature layer

JakeSkinner — Sun, 12 Dec 2021 07:52:20 GMT

Hi William,

I was able to get the direction features, but could not get the applyEdits method to work. Here is how I was able to obtain the features:

on(directions, "directions-finish", function(e){
  var directions = e.result.routeResults[0].directions;
  directionFeatures = directions.features;
  array.forEach(directionFeatures, function(feature){            
    var graphic = new Graphic(feature.geometry, null, feature.attributes);
    console.log(graphic);
    featureLayer.applyEdits(graphic, null, null)
  })
})

Re: directions graphic to feature layer

KellyHutchins — Tue, 14 Apr 2015 23:01:12 GMT

Jake Skinner in your example if you add the graphics value you use in apply edits to an array it should work. For example:

featureLayer.applyEdits([graphic]);

Re: directions graphic to feature layer

JakeSkinner — Sun, 12 Dec 2021 07:52:23 GMT

Thanks, Kelly! That did the trick. William, below is the code I was able to get working:

<!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>Directions Widget</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
    </style>

    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map;
     
      require([
        "esri/urlUtils", "esri/map", "esri/dijit/Directions", "esri/layers/FeatureLayer",
        "dojo/parser", "dojo/on", "esri/graphic", "dojo/_base/array", "esri/config",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        urlUtils, Map, Directions, FeatureLayer,
        parser, on, Graphic, array, esriConfig
      ) {
        parser.parse();
       
        esriConfig.defaults.io.proxyUrl = "http://server1/proxy/proxy.ashx"
        esriConfig.defaults.io.alwaysUseProxy = false;
        esriConfig.defaults.io.corsEnabledServers.push("server1");

        urlUtils.addProxyRule({
          urlPrefix: "route.arcgis.com", 
          proxyUrl: "http://server1/proxy/proxy.ashx"
        });
        urlUtils.addProxyRule({
          urlPrefix: "traffic.arcgis.com", 
          proxyUrl: "http://server1/proxy/proxy.ashx"
        });


        map = new Map("map", {
          basemap: "streets",
          center:[-98.56,39.82],
          zoom: 4
        });
       
        var featureLayer = new FeatureLayer("http://server1/arcgis/rest/services/DirectionRoute/FeatureServer/0")     

        var directions = new Directions({
          map: map
        },"dir");
       
        on(directions, "directions-finish", function(e){
          var directions = e.result.routeResults[0].directions;
          directionFeatures = directions.features;
          array.forEach(directionFeatures, function(feature){           
            var graphic = new Graphic(feature.geometry, null, feature.attributes);
            featureLayer.applyEdits([graphic], null, null)
          })
        })
       
        directions.startup();
      });
    </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="design:'headline', gutters:false"
        style="width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane"
          data-dojo-props="region:'right'"
          style="width:250px;">
       
        <div id="dir"></div>
      </div>
      <div id="map"
          data-dojo-type="dijit/layout/ContentPane"
          data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>

Re: directions graphic to feature layer

williamcarr — Thu, 16 Apr 2015 15:25:52 GMT

Just to clarify the "final" out come of this project. I ended up using the mergedGeometry rather than the initial array, that way it would just be a single Polyline rather than a series of them.

Thanks for all the help Jake and Kelly!

var directions = new esri.dijit.Directions({

map: map,

geocoderOptions: options

},"dir");

directions.startup();

directions.deactivate();

var featureLayerrr = new FeatureLayer("Feature Layer")

on(directions, "directions-finish", function(e){

var directions = e.result.routeResults[0].directions;

directionFeatures = directions.features;

queryyy = new Query("Query Layer");

queryyy.where = "Driver = '" + "t10'";

console.log(queryyy.results);

var graphiccc = new Graphic(directions.mergedGeometry, null, null);

//Record-Selector-Magiger

featureLayerrr.selectFeatures(queryyy, FeatureLayer.SELECTION_NEW, function(results) {

//Update the query reults \/ with the geometry \/

results[0].geometry = directions.mergedGeometry;

// Update the Layer \/

featureLayerrr.applyEdits(null, results, null);

//refresh the layer to make sure the edit was successful

featureLayerrr.refresh();

});

console.log(" Fire on everything!");

});