Select to view content in your preferred language

directions widget sample enhanced to support 'click on the map to add a stop'

7058
16
04-17-2014 02:37 PM
JohnGravois
Frequent Contributor
hi all, ive had a few people curious about getting the directions widget to support adding stops by clicking on the map itself so i put together a basic sample in case anyone wants to check it out

http://johngravois.com/maps/directions-click.html

(just an fyi, you'll have to sign in to ArcGIS Online to do the actual routing)
16 Replies
JeffPace
MVP Alum

Ok i was able to reproduce in the sandbox

I get a reverse geocode result

{"address":{"Street":"325 21ST ST W","City":"Bradenton","ZIP":"34205"},"location":{"x":-9193059.6560794469,"y":3185651.2728893212,"spatialReference":{"wkid":102100,"latestWkid":3857}}}

But it doesnt update the box. Clicking to add a point also adds at coordinates instead of address.

Printing with overview map works however, so that must be on my end

<!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.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/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.12/"></script>
    <script>
      require([
        "esri/urlUtils", "esri/map", "esri/dijit/Directions", 
        "dojo/parser", 
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        urlUtils, Map, Directions,
        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 geometryService = "http://www.mymanatee.org/arcgis01/rest/services/Utilities/Geometry/GeometryServer";
 var locatorUrl = "http://www.mymanatee.org/arcgis01/rest/services/tools/AGSStreetOnly/GeocodeServer";
                           var routingUrl = "http://www.mymanatee.org/arcgis02/rest/services/routing/routing/NAServer/Route";
                           var printUrl = "http://www.mymanatee.org/arcgis01/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%...";
       var map = new Map("map", {
          basemap: "streets",
          center:[-98.56,39.82],
          zoom: 4
        });
      
        var options = { 
                                    autoComplete:true, 
                                    arcgisGeocoder: false, 
                                    geocoders:[{ 
                                      url: locatorUrl ,
                                      name:"centerlineLocator"
                                    } ]
                                  }; 
                                      var directions = new Directions({
                                        map: map,
                                        routeTaskUrl:routingUrl,
                                        printTaskUrl:printUrl,
                                        showSegmentPopup:false,
                                        directionsLengthUnits:"MILES",
                                        geometryTaskUrl:geometryService,
                                        geocoderOptions: options 

                                    }, "dir");


                                    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>
0 Kudos
JeffPace
MVP Alum

I may have found something

If you "click to add a stop" within the bounds of my geolocator, it adds the coordinates in web mercator.

If you add one outside (say Naples to the south) it adds Lat/Long to the Display.

0 Kudos
DavidColey
Frequent Contributor

Jeff, I can confirm your findings as well, using my local WebMercator geolocator along with my local routing service.  I also found that if you move the origin stop on the map, I have to also move the destination stop or the route will nor draw.  If I move just the destination stop around, the route will continue to recalc and draw.  Valueso outside my geocoder extent populate lat lon values in the boxes

Also, does anyone know how to get at the interactive controll so I can disable my pop up while it is active? 

0 Kudos
JeffPace
MVP Alum

David,

Thanks for reproducing.  Anyone else having the issue with local geocoders?

Kelly Hutchins

0 Kudos
KellyHutchins
Esri Frequent Contributor

Jeff

Glad you were able to find out more info about this issue. Sounds like an issue that should be reported to support so they can investigate and submit a bug for this issue if necessary.

0 Kudos
JeffPace
MVP Alum

Submitted to support

JeffPace
MVP Alum

Defect ID: BUG-000084635

0 Kudos