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

Draw line with several paths to esri map

JasonMcGraw

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

Encontre mais publicações marcadas com

Accepted answers

JonathanUihlein

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.

All comments

JonathanUihlein

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/

JasonMcGraw

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?

kenbuja

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?

JasonMcGraw

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.

JonathanUihlein

<!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.

JasonMcGraw

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

JonathanUihlein

No problem!

Let me know if you have any other questions.

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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