topic Re: Query to Directions Widget Communication in ArcGIS JavaScript Maps SDK Questions

Query to Directions Widget Communication

ClintonCooper1 — Mon, 27 Apr 2015 20:38:24 GMT

I am looking to code a widget (well develop a directions widget) that takes the spatially selected points from a query and finds an optimal route between the points. I believe using the communications feature between widgets is the way to go (least complicated). I am pretty new to javascript and am looking for any examples out there that can

1) help me understand how to send data between the query widget and another widget and then

2) how to code the directions widget to accept only that selected data (without the having to input any other points in).

If anything close to this has been built I would love to take a look at it and play around with it, but if not any good guides are close examples of code would work. Again, I am just learning, so I like to see actual code as that helps me understand which things are doing what. Thanks in advance!

Re: Query to Directions Widget Communication

TomSellsted — Sat, 11 Dec 2021 14:14:53 GMT

Clinton,

The result of a query will provide features that can be used to immediately populate your directions. The following example queries some points and then adds the resulting points to the directions widget. After they have been added you can call getDirections to retrieve driving directions to each location.

        var map = new Map("map", {
          basemap: "streets",
          center:[-98.56,39.82],
          zoom: 4
        });


        var directions = new Directions({
          map: map
        },"dir");
        directions.startup();

  var queryTask = new QueryTask("your_URL_to_query");
  var query = new Query();
  query.returnGeometry = true;
  query.outFields = ["*"];
  query.where = "1=1";
  queryTask.execute(query, showDirections);

  function showDirections(results) {
     directions.addStops(results.features);
     directions.getDirections();
  }

Regards,

Tom

Re: Query to Directions Widget Communication

ClintonCooper1 — Tue, 28 Apr 2015 17:43:38 GMT

Thanks for the code to get me started! Could you happen to also show the require([ or define([ and the function( code at the beginning? I am going to run this in a new widget I created (using the developers edition of web builder), so I guess it would be define([. Like I said I am new to javascript and just even understanding how to start is where I need to learn! Thanks again for taking the time to help!

Clinton

Re: Query to Directions Widget Communication

TomSellsted — Sat, 11 Dec 2021 14:14:56 GMT

Clinton,

Certainly! The code I used here is from the directions widget sample from ESRI. I modified it to add a query to a point feature service and then took the resulting features and added them as stops to the directions widget. Here is the complete code:

<!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>Query Points & 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>
      require([
        "esri/urlUtils", "esri/map", "esri/dijit/Directions",
  "esri/tasks/query", "esri/tasks/QueryTask",
        "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        urlUtils, Map, Directions, Query, QueryTask,
        parser
      ) {
        parser.parse();
        //all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
        urlUtils.addProxyRule({
          urlPrefix: "route.arcgis.com", 
          proxyUrl: "/sproxy/"
        });
        urlUtils.addProxyRule({
          urlPrefix: "traffic.arcgis.com", 
          proxyUrl: "/sproxy/"
        });


        var map = new Map("map", {
          basemap: "streets",
          center:[-98.56,39.82],
          zoom: 4
        });


        var directions = new Directions({
          map: map
        },"dir");
        directions.startup();

  var queryTask = new QueryTask("URL to your point feature class");
  var query = new Query();
  query.returnGeometry = true;
  query.outFields = ["*"];
  query.where = "1=1";
  queryTask.execute(query, showDirections);

  function showDirections(results) {
     directions.addStops(results.features);
     directions.getDirections();
  }

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

Regards,

Tom

Re: Query to Directions Widget Communication

ClintonCooper1 — Tue, 28 Apr 2015 18:30:09 GMT

Perfect! Thank You!

Is there any trick or good place to look to find the code to be able to select by geometry (ie. use a circle rectangle, box, etc) to select the points for which to run the direction on, instead of just the operational layer? I have messed around a bit with the code in the query widget, but it is still a bit too complex for a novice to just get in there and hack with. I guess I am looking for something that might help to show the simple geometry selection process code to work with the query widget. Thanks!

Re: Query to Directions Widget Communication

ClintonCooper1 — Wed, 29 Apr 2015 12:52:57 GMT

I am trying to fold this code into a new widget, but am having some issues. Is there a place to go that may show how to take code such as this and move it into a new widget? Should I just make this a new topic? Thanks!

Re: Query to Directions Widget Communication

TomSellsted — Wed, 29 Apr 2015 15:07:53 GMT

Clinton,

Here is a link from the JavaScript API site that discusses creating a re-usable widget.

Create a Re-usable Widget | Guide | ArcGIS API for JavaScript

Regards,

Tom