directions graphic to feature layer

3647
5
Jump to solution
04-14-2015 07:35 AM
williamcarr
Occasional Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

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>

View solution in original post

5 Replies
williamcarr
Occasional Contributor II

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

0 Kudos
JakeSkinner
Esri Esteemed Contributor

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)
  })
})
0 Kudos
KellyHutchins
Esri Frequent Contributor

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]);

JakeSkinner
Esri Esteemed Contributor

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>
williamcarr
Occasional Contributor II

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!");

         

      

           });     

0 Kudos