Draw line with several paths to esri map

776
7
Jump to solution
03-20-2014 01:40 PM
JasonMcGraw
New Contributor
Hello,

I am trying to draw a line between several paths on my esri map with no luck.  What's wrong with my code?

 for (var i = 1; i < data.length; i++) {                 polyline.addPath([[data[i - 1].longitude, data[i - 1].latitude], [data.longitude, data.latitude]]);             }              polylineSymbol.setStyle(esri.symbol.SimpleLineSymbol.STYLE_DASH);             polylineSymbol.setColor(new dojo.Color([255, 255, 0, 0.5]));             polylineSymbol.setWidth(4);             routeLayer.add(new esri.Graphic(polyline, polylineSymbol));
0 Kudos
1 Solution

Accepted Solutions
JonathanUihlein
Esri Regular Contributor
Hi Jason,

You must have a syntax error elsewhere in your application as I was able to draw a polyline using the JSON in your last post.

I also changed the version of my sample to 3.5 and it still works.

<!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">   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">   <title>testing</title>   <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/esri/css/esri.css">   <script src="http://js.arcgis.com/3.5/"></script>   <style type="text/css">     html, body, #mapDiv {       padding: 0;       margin: 0;       height: 100%;     }   </style>   <script>      var map;      require([       "dojo/ready",        "esri/map",       "esri/graphic",       "dojo/on",       "esri/symbols/SimpleLineSymbol",       "esri/geometry/Polyline"      ], function(       ready,        Map,       Graphic,       on,       SimpleLineSymbol,       Polyline     ) {         // set up the map       map = new Map("mapDiv", {         basemap: "topo",         //center: [-117.17, 34.03],         center: [-88.053, 30.714],         zoom: 5       });              // Dom Ready Event       ready(function () {                  // Map Load Event         on(map, "load", function(){           drawRoute();         });                  on(map, "click", function(evt){         try{           console.log(evt.mapPoint);           }catch(e){             console.log(e);           }                  });        });              // Draw Route       function drawRoute() {                // Path Data         //var inputJson = {"paths":[[[-13043348,4034155],[-13043274,4034040]],[[-13043274,4034040],[-13043226,4034010]],[[-13043226,4034010],[-13043201,4034010]],[[-13043201,4034010],[-13043193,4033972]],[[-13043193,4033972],[-13043248,4033928]],[[-13043248,4033928],[-13043275,4033909]],[[-13043275,4033909],[-13043284,4033890]],[[-13043284,4033890],[-13043319,4033900]],[[-13043319,4033900],[-13043341,4033886]],[[-13043341,4033886],[-13043349,4033870]],[[-13043349,4033870],[-13043341,4033808]],[[-13043341,4033808],[-13043171,4033551]],[[-13043171,4033551],[-13043097,4033605]],[[-13043097,4033605],[-13043097,4033357]],[[-13043097,4033357],[-13042661,4033348]],[[-13042661,4033348],[-13042660,4033162]],[[-13042660,4033162],[-13042661,4032943]],[[-13042661,4032943],[-13042501,4032943]],[[-13042501,4032943],[-13042498,4032620]],[[-13042498,4032620],[-13042455,4032616]],[[-13042455,4032616],[-13042446,4032376]],[[-13042446,4032376],[-13042419,4032299]],[[-13042419,4032299],[-13042314,4032243]],[[-13042314,4032243],[-13042250,4032188]],[[-13042250,4032188],[-13042237,4032151]],[[-13042237,4032151],[-13042243,4032109]],[[-13042243,4032109],[-13042243,4032056]],[[-13042243,4032056],[-13042240,4032025]],[[-13042240,4032025],[-13042254,4032012]],[[-13042254,4032012],[-13042284,4032064]],[[-13042284,4032064],[-13042315,4032095]],[[-13042315,4032095],[-13042674,4032187]],[[-13042674,4032187],[-13042704,4032195]],[[-13042704,4032195],[-13042739,4032257]],[[-13042739,4032257],[-13042765,4032267]],[[-13042765,4032267],[-13042834,4032275]],[[-13042834,4032275],[-13042868,4032295]],[[-13042868,4032295],[-13042882,4032357]],[[-13042882,4032357],[-13042883,4032422]],[[-13042883,4032422],[-13042926,4032452]],[[-13042926,4032452],[-13042992,4032527]],[[-13042992,4032527],[-13043059,4032609]],[[-13043059,4032609],[-13043116,4032593]],[[-13043116,4032593],[-13043278,4032553]],[[-13043278,4032553],[-13043324,4032547]],[[-13043324,4032547],[-13043488,4032597]],[[-13043488,4032597],[-13043561,4032603]],[[-13043561,4032603],[-13043773,4032808]],[[-13043773,4032808],[-13043889,4032917]],[[-13043889,4032917],[-13043963,4032871]],[[-13043963,4032871],[-13044030,4032829]],[[-13044030,4032829],[-13044206,4032840]],[[-13044206,4032840],[-13044286,4032865]],[[-13044286,4032865],[-13044391,4032910]],[[-13044391,4032910],[-13044509,4032958]],[[-13044509,4032958],[-13044658,4033187]],[[-13044658,4033187],[-13044265,4033451]],[[-13044265,4033451],[-13044065,4033580]],[[-13044065,4033580],[-13043994,4033655]],[[-13043994,4033655],[-13043946,4033713]],[[-13043946,4033713],[-13044097,4033954]],[[-13044097,4033954],[-13043891,4034095]],[[-13043891,4034095],[-13043482,4034361]],[[-13043482,4034361],[-13043381,4034203]]],"spatialReference":{"wkid":102100}};                var inputJson = {"paths":[[[-82.28059583333333,37.676645],[-82.22337388888888,37.649078]],[[-82.22337388888888,37.649078],[-82.21678694444445,37.63686]],[[-82.21678694444445,37.63686],[-82.217025,37.63654722222222]],[[-82.217025,37.63654722222222],[-82.19833694444445,37.628648]],[[-82.19833694444445,37.628648],[-82.16454388888888,37.622905]],[[-82.16454388888888,37.622905],[-82.13079694444444,37.593836]],[[-82.13079694444444,37.593836],[-82.13404388888888,37.555935]],[[-82.13404388888888,37.555935],[-82.06316083333333,37.537762]],[[-82.06316083333333,37.537762],[-81.99972083333333,37.543205]],[[-81.99972083333333,37.543205],[-81.96431777777778,37.544662]],[[-81.96431777777778,37.544662],[-81.94330777777777,37.5179]],[[-81.94330777777777,37.5179],[-81.9128361111111,37.503762]],[[-81.9128361111111,37.503762],[-81.9016338888889,37.48501]],[[-81.9016338888889,37.48501],[-81.89493333333333,37.482933333333335]],[[-81.89493333333333,37.482933333333335],[-81.86131388888888,37.47141]],[[-81.86131388888888,37.47141],[-81.83945277777778,37.482038]],[[-81.83945277777778,37.482038],[-81.81833861111111,37.47138508333333]],[[-81.81833861111111,37.47138508333333],[-81.80213388888889,37.44844]],[[-81.80213388888889,37.44844],[-81.78444722222222,37.40136944444444]],[[-81.78444722222222,37.40136944444444],[-81.7851338888889,37.40085]],[[-81.7851338888889,37.40085],[-81.80295083333332,37.392735]],[[-81.80295083333332,37.392735],[-81.80213083333333,37.372201]],[[-81.80213083333333,37.372201],[-81.79958583333334,37.356641]],[[-81.79958583333334,37.356641],[-81.75790277777777,37.344669]],[[-81.75790277777777,37.344669],[-81.73648888888888,37.340101]],[[-81.73648888888888,37.340101],[-81.7152938888889,37.33817]],[[-81.7152938888889,37.33817],[-81.70774194444445,37.318557]],[[-81.70774194444445,37.318557],[-81.69520388888888,37.320108]],[[-81.69520388888888,37.320108],[-81.68616694444444,37.301731]],[[-81.68616694444444,37.301731],[-81.66487083333334,37.270696]],[[-81.66487083333334,37.270696],[-81.63983083333333,37.232655]],[[-81.63983083333333,37.232655],[-81.63202777777778,37.193307]],[[-81.63202777777778,37.193307],[-81.63247222222222,37.192480555555555]],[[-81.63247222222222,37.192480555555555],[-81.70073388888889,37.143483]],[[-81.70073388888889,37.143483],[-81.75858194444444,37.082746]],[[-81.75858194444444,37.082746],[-81.80376083333333,37.094014]],[[-81.80376083333333,37.094014],[-81.82804888888888,37.094674]],[[-81.82804888888888,37.094674],[-81.85555777777777,37.08610566666667]],[[-81.85555777777777,37.08610566666667],[-81.89637,37.043704]],[[-81.89637,37.043704],[-81.94194583333333,37.028608444444444]],[[-81.94194583333333,37.028608444444444],[-81.98889638888889,37.01555091666667]],[[-81.98889638888889,37.01555091666667],[-82.05962,36.991273]],[[-82.05962,36.991273],[-82.15301277777777,36.9442]],[[-82.15301277777777,36.9442],[-82.15268888888889,36.94458888888889]],[[-82.15268888888889,36.94458888888889],[-82.19889277777777,36.921662805555556]],[[-82.19889277777777,36.921662805555556],[-82.224405,36.912338]],[[-82.224405,36.912338],[-82.2793138888889,36.892602777777775]],[[-82.2793138888889,36.892602777777775],[-88.05388944444445,30.714161027777777]]],"spatialReference":{"wkid":4326}};                 // Setup the Symbol         var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([102,0,51]), 4);                     // Updating the Symbol after initial Creation         polylineSymbol.setStyle(SimpleLineSymbol.STYLE_DASH);         polylineSymbol.setColor(new dojo.Color([102, 0, 0, .5]));         polylineSymbol.setWidth(4);                  //Create Graphic for Route         var runningRoute = new Polyline(inputJson);                map.graphics.add(new Graphic(runningRoute,polylineSymbol));                 }      });   </script> </head>     <body class="claro"></body> </html>  


Try checking the console for errors and maybe a try/catch block if you can pinpoint the offending code.

View solution in original post

0 Kudos
7 Replies
JonathanUihlein
Esri Regular Contributor
Hi and welcome to the forums!

Below is some code that may help.
The code itself is from this sample, but modified to use both 3.9 and AMD style syntax.

<!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">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>testing</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.9/"></script>
  <style type="text/css">
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script>

    var map;

    require([
      "dojo/ready", 
      "esri/map",
      "esri/graphic",
      "dojo/on",
      "esri/symbols/SimpleLineSymbol",
      "esri/geometry/Polyline"

    ], function(
      ready, 
      Map,
      Graphic,
      on,
      SimpleLineSymbol,
      Polyline
    ) { 

      // set up the map
      map = new Map("mapDiv", {
        basemap: "topo",
        center: [-117.17, 34.03],
        zoom: 15
      });
      
      // Dom Ready Event
      ready(function () {
        
        // Map Load Event
        on(map, "load", function(){
          drawRoute();
        });

      });
      
      // Draw Route
      function drawRoute() {
      
        // Path Data
        var inputJson = {"paths":[[[-13043348,4034155],[-13043274,4034040]],[[-13043274,4034040],[-13043226,4034010]],[[-13043226,4034010],[-13043201,4034010]],[[-13043201,4034010],[-13043193,4033972]],[[-13043193,4033972],[-13043248,4033928]],[[-13043248,4033928],[-13043275,4033909]],[[-13043275,4033909],[-13043284,4033890]],[[-13043284,4033890],[-13043319,4033900]],[[-13043319,4033900],[-13043341,4033886]],[[-13043341,4033886],[-13043349,4033870]],[[-13043349,4033870],[-13043341,4033808]],[[-13043341,4033808],[-13043171,4033551]],[[-13043171,4033551],[-13043097,4033605]],[[-13043097,4033605],[-13043097,4033357]],[[-13043097,4033357],[-13042661,4033348]],[[-13042661,4033348],[-13042660,4033162]],[[-13042660,4033162],[-13042661,4032943]],[[-13042661,4032943],[-13042501,4032943]],[[-13042501,4032943],[-13042498,4032620]],[[-13042498,4032620],[-13042455,4032616]],[[-13042455,4032616],[-13042446,4032376]],[[-13042446,4032376],[-13042419,4032299]],[[-13042419,4032299],[-13042314,4032243]],[[-13042314,4032243],[-13042250,4032188]],[[-13042250,4032188],[-13042237,4032151]],[[-13042237,4032151],[-13042243,4032109]],[[-13042243,4032109],[-13042243,4032056]],[[-13042243,4032056],[-13042240,4032025]],[[-13042240,4032025],[-13042254,4032012]],[[-13042254,4032012],[-13042284,4032064]],[[-13042284,4032064],[-13042315,4032095]],[[-13042315,4032095],[-13042674,4032187]],[[-13042674,4032187],[-13042704,4032195]],[[-13042704,4032195],[-13042739,4032257]],[[-13042739,4032257],[-13042765,4032267]],[[-13042765,4032267],[-13042834,4032275]],[[-13042834,4032275],[-13042868,4032295]],[[-13042868,4032295],[-13042882,4032357]],[[-13042882,4032357],[-13042883,4032422]],[[-13042883,4032422],[-13042926,4032452]],[[-13042926,4032452],[-13042992,4032527]],[[-13042992,4032527],[-13043059,4032609]],[[-13043059,4032609],[-13043116,4032593]],[[-13043116,4032593],[-13043278,4032553]],[[-13043278,4032553],[-13043324,4032547]],[[-13043324,4032547],[-13043488,4032597]],[[-13043488,4032597],[-13043561,4032603]],[[-13043561,4032603],[-13043773,4032808]],[[-13043773,4032808],[-13043889,4032917]],[[-13043889,4032917],[-13043963,4032871]],[[-13043963,4032871],[-13044030,4032829]],[[-13044030,4032829],[-13044206,4032840]],[[-13044206,4032840],[-13044286,4032865]],[[-13044286,4032865],[-13044391,4032910]],[[-13044391,4032910],[-13044509,4032958]],[[-13044509,4032958],[-13044658,4033187]],[[-13044658,4033187],[-13044265,4033451]],[[-13044265,4033451],[-13044065,4033580]],[[-13044065,4033580],[-13043994,4033655]],[[-13043994,4033655],[-13043946,4033713]],[[-13043946,4033713],[-13044097,4033954]],[[-13044097,4033954],[-13043891,4034095]],[[-13043891,4034095],[-13043482,4034361]],[[-13043482,4034361],[-13043381,4034203]]],"spatialReference":{"wkid":102100}};
       
        // Setup the Symbol
        var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([102,0,51]), 4);   
        
        // Updating the Symbol after initial Creation
        polylineSymbol.setStyle(SimpleLineSymbol.STYLE_DASH);
        polylineSymbol.setColor(new dojo.Color([102, 0, 0, .5]));
        polylineSymbol.setWidth(4);
       
        //Create Graphic for Route
        var runningRoute = new Polyline(inputJson);       
        map.graphics.add(new Graphic(runningRoute,polylineSymbol)); 
        
      }

    });
  </script>
</head>
    <body class="claro"></body>
</html>




Here's a link to a working version on jsfiddle: http://jsfiddle.net/8qwdH/1/
0 Kudos
JasonMcGraw
New Contributor
Jon,
Thank you for your answer.
I'm still having no luck getting the line to show on my map.  I've structured my code to be similar to that which you posted

            var paths = [];
            for (var i = 1; i < data.length; i++) {
                paths.push([[data[i - 1].longitude, data[i - 1].latitude], [data.longitude, data.latitude]]);
            }

            var spatialReference = { wkid: 4326 };
            var route = {
                paths: paths,
                spatialReference: spatialReference
            };
            var inputJson = $.toJSON(route);
            var polylineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([102, 0, 51]), 4);

            // Updating the Symbol after initial Creation
            polylineSymbol.setStyle(esri.symbol.SimpleLineSymbol.STYLE_DASH);
            polylineSymbol.setColor(new dojo.Color([0, 0, 0]));
            polylineSymbol.setWidth(4);

            //Create Graphic for Route
            var runningRoute = new esri.geometry.Polyline(inputJson);
            map.graphics.add(new esri.Graphic(runningRoute, polylineSymbol)); 


Here is some of the JSON which is generated (cut some out due to post length limit)
{"paths":[[[-82.28059583333333,37.676645],[-82.22337388888888,37.649078]],[[-82.22337388888888,37.649078],[-82.21678694444445,37.63686]],[[-82.21678694444445,37.63686],[-82.217025,37.63654722222222]],[[-82.217025,37.63654722222222],[-82.19833694444445,37.628648]],[[-82.19833694444445,37.628648],[-82.16454388888888,37.622905]],[[-82.16454388888888,37.622905],[-82.13079694444444,37.593836]],[[-82.13079694444444,37.593836],[-82.13404388888888,37.555935]],[[-82.13404388888888,37.555935],[-82.06316083333333,37.537762]],[[-82.06316083333333,37.537762],[-81.99972083333333,37.543205]],[[-81.99972083333333,37.543205],[-81.96431777777778,37.544662]],[[-81.96431777777778,37.544662],[-81.94330777777777,37.5179]],[[-81.94330777777777,37.5179],[-81.9128361111111,37.503762]],[[-81.9128361111111,37.503762],[-81.9016338888889,37.48501]],[[-81.9016338888889,37.48501],[-81.89493333333333,37.482933333333335]],[[-81.89493333333333,37.482933333333335],[-81.86131388888888,37.47141]],[[-81.86131388888888,37.47141],[-81.83945277777778,37.482038]],[[-81.83945277777778,37.482038],[-81.81833861111111,37.47138508333333]],[[-81.81833861111111,37.47138508333333],[-81.80213388888889,37.44844]],[[-81.80213388888889,37.44844],[-81.78444722222222,37.40136944444444]],[[-81.78444722222222,37.40136944444444],[-81.7851338888889,37.40085]],[[-81.7851338888889,37.40085],[-81.80295083333332,37.392735]],[[-81.80295083333332,37.392735],[-81.80213083333333,37.372201]],[[-81.80213083333333,37.372201],[-81.79958583333334,37.356641]],[[-81.79958583333334,37.356641],[-81.75790277777777,37.344669]],[[-81.75790277777777,37.344669],[-81.73648888888888,37.340101]],[[-81.73648888888888,37.340101],[-81.7152938888889,37.33817]],[[-81.7152938888889,37.33817],[-81.70774194444445,37.318557]],[[-81.70774194444445,37.318557],[-81.69520388888888,37.320108]],[[-81.69520388888888,37.320108],[-81.68616694444444,37.301731]],[[-81.68616694444444,37.301731],[-81.66487083333334,37.270696]],[[-81.66487083333334,37.270696],[-81.63983083333333,37.232655]],[[-81.63983083333333,37.232655],[-81.63202777777778,37.193307]],[[-81.63202777777778,37.193307],[-81.63247222222222,37.192480555555555]],[[-81.63247222222222,37.192480555555555],[-81.70073388888889,37.143483]],[[-81.70073388888889,37.143483],[-81.75858194444444,37.082746]],[[-81.75858194444444,37.082746],[-81.80376083333333,37.094014]],[[-81.80376083333333,37.094014],[-81.82804888888888,37.094674]],[[-81.82804888888888,37.094674],[-81.85555777777777,37.08610566666667]],[[-81.85555777777777,37.08610566666667],[-81.89637,37.043704]],[[-81.89637,37.043704],[-81.94194583333333,37.028608444444444]],[[-81.94194583333333,37.028608444444444],[-81.98889638888889,37.01555091666667]],[[-81.98889638888889,37.01555091666667],[-82.05962,36.991273]],[[-82.05962,36.991273],[-82.15301277777777,36.9442]],[[-82.15301277777777,36.9442],[-82.15268888888889,36.94458888888889]],[[-82.15268888888889,36.94458888888889],[-82.19889277777777,36.921662805555556]],[[-82.19889277777777,36.921662805555556],[-82.224405,36.912338]],[[-82.224405,36.912338],[-82.2793138888889,36.892602777777775]],[[-82.2793138888889,36.892602777777775],[-88.05388944444445,30.714161027777777]]],"spatialReference":{"wkid":4326}} 



I'm using arcgis 3.5. Are polylines supported in this version?
0 Kudos
KenBuja
MVP Esteemed Contributor
You may need to convert the line into a WebMercator projection to show on the map. Have you zoomed over to 0°N, 0°W to see if the line is showing up off the coast of Africa?
0 Kudos
JasonMcGraw
New Contributor
Ken,
I scrolled throughout the map and didn't find the line anywhere.  I don't know if there's a difference between plotting points and lines (new to mapping and ArcGIS), but when I plot each of these points as SimpMarkerSymbols they show up in their proper places just fine.
0 Kudos
JonathanUihlein
Esri Regular Contributor
Hi Jason,

You must have a syntax error elsewhere in your application as I was able to draw a polyline using the JSON in your last post.

I also changed the version of my sample to 3.5 and it still works.

<!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">   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">   <title>testing</title>   <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/esri/css/esri.css">   <script src="http://js.arcgis.com/3.5/"></script>   <style type="text/css">     html, body, #mapDiv {       padding: 0;       margin: 0;       height: 100%;     }   </style>   <script>      var map;      require([       "dojo/ready",        "esri/map",       "esri/graphic",       "dojo/on",       "esri/symbols/SimpleLineSymbol",       "esri/geometry/Polyline"      ], function(       ready,        Map,       Graphic,       on,       SimpleLineSymbol,       Polyline     ) {         // set up the map       map = new Map("mapDiv", {         basemap: "topo",         //center: [-117.17, 34.03],         center: [-88.053, 30.714],         zoom: 5       });              // Dom Ready Event       ready(function () {                  // Map Load Event         on(map, "load", function(){           drawRoute();         });                  on(map, "click", function(evt){         try{           console.log(evt.mapPoint);           }catch(e){             console.log(e);           }                  });        });              // Draw Route       function drawRoute() {                // Path Data         //var inputJson = {"paths":[[[-13043348,4034155],[-13043274,4034040]],[[-13043274,4034040],[-13043226,4034010]],[[-13043226,4034010],[-13043201,4034010]],[[-13043201,4034010],[-13043193,4033972]],[[-13043193,4033972],[-13043248,4033928]],[[-13043248,4033928],[-13043275,4033909]],[[-13043275,4033909],[-13043284,4033890]],[[-13043284,4033890],[-13043319,4033900]],[[-13043319,4033900],[-13043341,4033886]],[[-13043341,4033886],[-13043349,4033870]],[[-13043349,4033870],[-13043341,4033808]],[[-13043341,4033808],[-13043171,4033551]],[[-13043171,4033551],[-13043097,4033605]],[[-13043097,4033605],[-13043097,4033357]],[[-13043097,4033357],[-13042661,4033348]],[[-13042661,4033348],[-13042660,4033162]],[[-13042660,4033162],[-13042661,4032943]],[[-13042661,4032943],[-13042501,4032943]],[[-13042501,4032943],[-13042498,4032620]],[[-13042498,4032620],[-13042455,4032616]],[[-13042455,4032616],[-13042446,4032376]],[[-13042446,4032376],[-13042419,4032299]],[[-13042419,4032299],[-13042314,4032243]],[[-13042314,4032243],[-13042250,4032188]],[[-13042250,4032188],[-13042237,4032151]],[[-13042237,4032151],[-13042243,4032109]],[[-13042243,4032109],[-13042243,4032056]],[[-13042243,4032056],[-13042240,4032025]],[[-13042240,4032025],[-13042254,4032012]],[[-13042254,4032012],[-13042284,4032064]],[[-13042284,4032064],[-13042315,4032095]],[[-13042315,4032095],[-13042674,4032187]],[[-13042674,4032187],[-13042704,4032195]],[[-13042704,4032195],[-13042739,4032257]],[[-13042739,4032257],[-13042765,4032267]],[[-13042765,4032267],[-13042834,4032275]],[[-13042834,4032275],[-13042868,4032295]],[[-13042868,4032295],[-13042882,4032357]],[[-13042882,4032357],[-13042883,4032422]],[[-13042883,4032422],[-13042926,4032452]],[[-13042926,4032452],[-13042992,4032527]],[[-13042992,4032527],[-13043059,4032609]],[[-13043059,4032609],[-13043116,4032593]],[[-13043116,4032593],[-13043278,4032553]],[[-13043278,4032553],[-13043324,4032547]],[[-13043324,4032547],[-13043488,4032597]],[[-13043488,4032597],[-13043561,4032603]],[[-13043561,4032603],[-13043773,4032808]],[[-13043773,4032808],[-13043889,4032917]],[[-13043889,4032917],[-13043963,4032871]],[[-13043963,4032871],[-13044030,4032829]],[[-13044030,4032829],[-13044206,4032840]],[[-13044206,4032840],[-13044286,4032865]],[[-13044286,4032865],[-13044391,4032910]],[[-13044391,4032910],[-13044509,4032958]],[[-13044509,4032958],[-13044658,4033187]],[[-13044658,4033187],[-13044265,4033451]],[[-13044265,4033451],[-13044065,4033580]],[[-13044065,4033580],[-13043994,4033655]],[[-13043994,4033655],[-13043946,4033713]],[[-13043946,4033713],[-13044097,4033954]],[[-13044097,4033954],[-13043891,4034095]],[[-13043891,4034095],[-13043482,4034361]],[[-13043482,4034361],[-13043381,4034203]]],"spatialReference":{"wkid":102100}};                var inputJson = {"paths":[[[-82.28059583333333,37.676645],[-82.22337388888888,37.649078]],[[-82.22337388888888,37.649078],[-82.21678694444445,37.63686]],[[-82.21678694444445,37.63686],[-82.217025,37.63654722222222]],[[-82.217025,37.63654722222222],[-82.19833694444445,37.628648]],[[-82.19833694444445,37.628648],[-82.16454388888888,37.622905]],[[-82.16454388888888,37.622905],[-82.13079694444444,37.593836]],[[-82.13079694444444,37.593836],[-82.13404388888888,37.555935]],[[-82.13404388888888,37.555935],[-82.06316083333333,37.537762]],[[-82.06316083333333,37.537762],[-81.99972083333333,37.543205]],[[-81.99972083333333,37.543205],[-81.96431777777778,37.544662]],[[-81.96431777777778,37.544662],[-81.94330777777777,37.5179]],[[-81.94330777777777,37.5179],[-81.9128361111111,37.503762]],[[-81.9128361111111,37.503762],[-81.9016338888889,37.48501]],[[-81.9016338888889,37.48501],[-81.89493333333333,37.482933333333335]],[[-81.89493333333333,37.482933333333335],[-81.86131388888888,37.47141]],[[-81.86131388888888,37.47141],[-81.83945277777778,37.482038]],[[-81.83945277777778,37.482038],[-81.81833861111111,37.47138508333333]],[[-81.81833861111111,37.47138508333333],[-81.80213388888889,37.44844]],[[-81.80213388888889,37.44844],[-81.78444722222222,37.40136944444444]],[[-81.78444722222222,37.40136944444444],[-81.7851338888889,37.40085]],[[-81.7851338888889,37.40085],[-81.80295083333332,37.392735]],[[-81.80295083333332,37.392735],[-81.80213083333333,37.372201]],[[-81.80213083333333,37.372201],[-81.79958583333334,37.356641]],[[-81.79958583333334,37.356641],[-81.75790277777777,37.344669]],[[-81.75790277777777,37.344669],[-81.73648888888888,37.340101]],[[-81.73648888888888,37.340101],[-81.7152938888889,37.33817]],[[-81.7152938888889,37.33817],[-81.70774194444445,37.318557]],[[-81.70774194444445,37.318557],[-81.69520388888888,37.320108]],[[-81.69520388888888,37.320108],[-81.68616694444444,37.301731]],[[-81.68616694444444,37.301731],[-81.66487083333334,37.270696]],[[-81.66487083333334,37.270696],[-81.63983083333333,37.232655]],[[-81.63983083333333,37.232655],[-81.63202777777778,37.193307]],[[-81.63202777777778,37.193307],[-81.63247222222222,37.192480555555555]],[[-81.63247222222222,37.192480555555555],[-81.70073388888889,37.143483]],[[-81.70073388888889,37.143483],[-81.75858194444444,37.082746]],[[-81.75858194444444,37.082746],[-81.80376083333333,37.094014]],[[-81.80376083333333,37.094014],[-81.82804888888888,37.094674]],[[-81.82804888888888,37.094674],[-81.85555777777777,37.08610566666667]],[[-81.85555777777777,37.08610566666667],[-81.89637,37.043704]],[[-81.89637,37.043704],[-81.94194583333333,37.028608444444444]],[[-81.94194583333333,37.028608444444444],[-81.98889638888889,37.01555091666667]],[[-81.98889638888889,37.01555091666667],[-82.05962,36.991273]],[[-82.05962,36.991273],[-82.15301277777777,36.9442]],[[-82.15301277777777,36.9442],[-82.15268888888889,36.94458888888889]],[[-82.15268888888889,36.94458888888889],[-82.19889277777777,36.921662805555556]],[[-82.19889277777777,36.921662805555556],[-82.224405,36.912338]],[[-82.224405,36.912338],[-82.2793138888889,36.892602777777775]],[[-82.2793138888889,36.892602777777775],[-88.05388944444445,30.714161027777777]]],"spatialReference":{"wkid":4326}};                 // Setup the Symbol         var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([102,0,51]), 4);                     // Updating the Symbol after initial Creation         polylineSymbol.setStyle(SimpleLineSymbol.STYLE_DASH);         polylineSymbol.setColor(new dojo.Color([102, 0, 0, .5]));         polylineSymbol.setWidth(4);                  //Create Graphic for Route         var runningRoute = new Polyline(inputJson);                map.graphics.add(new Graphic(runningRoute,polylineSymbol));                 }      });   </script> </head>     <body class="claro"></body> </html>  


Try checking the console for errors and maybe a try/catch block if you can pinpoint the offending code.
0 Kudos
JasonMcGraw
New Contributor
Jon,

Got it! Ended up my $.toJSON method was turning my route variable into a string, which was keeping the polyline from  reading the proper paths.  Instead - I just passed the route variable in.  Thank you for your help!!

 routeLayer.clear();

            var paths = [];
            for (var i = 1; i < data.length; i++) {
                paths.push([[data[i - 1].longitude, data[i - 1].latitude], [data.longitude, data.latitude]]);
            }

            var spatialReference = { wkid: 4326 };
            var route = {
                paths: paths,
                spatialReference: spatialReference
            };


            var polylineSymbol = new esri.symbol.SimpleLineSymbol();

            // Updating the Symbol after initial Creation
            //polylineSymbol.setStyle(esri.symbol.SimpleLineSymbol.STYLE_DASH);
            polylineSymbol.setColor(new dojo.Color([102, 0, 0, .5]));
            polylineSymbol.setWidth(4);

            //Create Graphic for Route
            var runningRoute = new esri.geometry.Polyline(route);
            routeLayer.add(new esri.Graphic(runningRoute, polylineSymbol));
0 Kudos
JonathanUihlein
Esri Regular Contributor
No problem!

Let me know if you have any other questions.

If you are satisfied, don't forget to mark this thread as answered.
0 Kudos