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 widget sample enhanced to support 'click on the map to add a stop'

JohnGravois

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)

Trouver plus de publications taguées avec

Accepted answers

All comments

ICZEMICZEM

Thank you very much for this wonderful sample!

There's one question: if I click on the map it returns stop name like "204 E 90th St". Is it possible to make it also return city name, something like "204 E 90th St New York"?

JohnGravois

you're very welcome.

as you can see from the code in that page, we aren't doing anything in the application itself to handle the reverse geocoding. based on your other post it sounds like you want to skip this part entirely, but if you really wanted to get that level of control i guess you could update the string manually using a method like updateStop()

ICZEMICZEM

Thanks, John!

We're using our own locator so we have solved this problem by editing 'reverse geocoding' section in the locator style file.

As for my other question - no, we don't want to skip geocoding... In fact we would be happy to use only geocoding but unfortunately we have many important roads with no names and no addresses nearby So now I see maybe 2 solutions: using Route Task or creating geolocator for every road segment. But we just hoped for the most convenient way out - to translate coordinates of the clicked point to Directions dijit stops even if 'location could not be found' by geocoder. This point could have a name 'unknown stop' of something like that.

JeffPace1

Hey john,

I am going to try to integrate this with my code, hope it makes it into core eventually.

Two quick questions.

1. When i move a stop, the stop display turns to coordinates (I am using my own geocoding, geometry and routing services). A successful reverse geocode call is made with a single address, but the display never updates.. any ideas?

2. My print page is not printing an overview map. Not sure how to even troubleshoot.

Thanks!

Jeff

John Gravois‌

  var geometryService = window.location.protocol+'//'+window.location.hostname+"/arcgis01/rest/services/Utilities/Geometry/GeometryServer";
                             var locatorUrl = window.location.protocol+'//'+window.location.hostname+"/arcgis01/rest/services/tools/AGSStreetOnly/GeocodeServer";
                           var locatorUrl2 = window.location.protocol+'//'+window.location.hostname+"/arcgis01/rest/services/tools/AGSParcel/GeocodeServer";
                           var routingUrl = window.location.protocol+'//'+window.location.hostname+"/arcgis02/rest/services/routing/routing/NAServer/Route";
                           var printUrl = window.location.protocol+'//'+window.location.hostname+"/arcgis01/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
                          



function createDirections() {
                                    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 

                                    }, "directionsDiv");


                                    directions.startup();
                                }

khutchins

Jeff and John the ability to click on the map to add stops will be in the next release (due very soon) of the ArcGIS API for JavaScript (version 3.12) .

JeffPace1

Thats awesome Kelly Hutchins!! Thank you.

Still not sure why my Stop is not updating the location with the reverse geocode address though, or why my overview map is not showing.

Help.

khutchins

Jeff

Do you have a test app that shows the issue you are having with the overview map and reverse geocode?

JeffPace1

Manatee County GIS Mobile Server

Directions are on the tools tab on the left. Add two addresses, for example

1112 Manatee Ave W, Bradenton

2027 Manatee Ave W, Bradenton

And then move one of the points. It will show coordinates. Fiddler and Firebug show the reverse geocode is called and that an address is returned, it just doesnt update the box.

khutchins

Jeff,

I can reproduce the issue with your app but not with the Directions sample in the help. Are you able to reproduce with the sample? If not then maybe try adding some of your custom logic to the sample until it breaks. This will give us a small bit of code that easily allows us to reproduce the issue and troubleshoot the problem.

ArcGIS API for JavaScript Sandbox

JeffPace1

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%20Task";
       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>

JeffPace1

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.

DavidColey

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?

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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