Community

draw all routes when clicking on map

2518
0
10-07-2013 10:00 PM
PhuongNguyen_Thanh
by
New Contributor
‎10-07-2013 10:00 PM
Hi everyone !

I'm doing a map that when I click on the map and it will show us possible routes can go in 5 or 10 minutes. But I'm getting stuck that it's not drawing something on a map.

My code: 
<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">



  <script src="http://js.arcgis.com/3.6/"></script>


    

    <title>Routing</title>
    <style>
        html, body, #map{
        height: 100%;
        margin: 0;
        padding: 0;
        }
    </style>

    <script>
        var map, serviceAreaTask, params, routeparams, routeTask;
        require([

             "dojo/_base/Color",
           
        
             "esri/map",
             "esri/graphic",

             "esri/symbols/SimpleMarkerSymbol",
             "esri/symbols/SimpleLineSymbol",
             "esri/tasks/FeatureSet",
             "esri/tasks/RouteTask",
             "esri/tasks/RouteParameters",
             "esri/tasks/RouteResult",
             "dojo/domReady!"
        ],
       function (Color, Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureSet, RouteTask, RouteParameters, RouteResult) {


           esriConfig.defaults.io.proxyUrl = "/proxy";
          


           map = Map("map", {
               basemap: "streets",
               center: [-86.18, 40.22],
               zoom: 16
           });

           map.on("solvecomplete", showRoute);


           routeparams = new RouteParameters();
           routeparams.attributeParameterValues = [{attributeName: "Time", parameterName: "10 MPH", value: "10"}];
           routeparams.outSpatialReference = map.SpatialReference;
           routeparams.returnRoutes = true;
           routeparams.returnStops = true;
           routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");

           function showRoute(evt) {

               map.graphics.clear(); 
               var stopSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS,
                    3,
                    new SimpleLineSymbol(
                      SimpleLineSymbol.STYLE_SOLID,
                      new Color([89, 95, 35]), 2
                    ),
                    new Color([130, 159, 83, 0.40])
                  );

               routeparams.stops.features.push(map.graphics.add(new Graphic(evt.mapPoint,stopSymbol)));

           
               routeTask.solve(routeparams, function (solveRoute) {
                   var lineRoute = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([254,0,0]),3);
                   dojo.forEach(solveRoute.routeResults, function (routeResult) {
                       routeResult.setSymbol(lineRoute);
                       map.graphics.add(routeResult);
                   });
               });
           }


       });


    </script>
</head>
<body class="claro">
    <div id="map"></div>
</body>
</html>


Please help me to find out where i was wrong or missing something to improve my map. Your help will be my best motivation.

Thank you for your reading time. I hope you will have a lucky day with your work !!!!

Phuong Nguyen
0 Kudos
0 Replies