nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

directions graphic to feature layer

williamcarr

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

Finde mehr Beiträge mit dem Tag

Accepted answers

JakeSkinner

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>

All comments

JakeSkinner

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>

khutchins

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

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)
  })
})

williamcarr

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.