topic Re: Draw line with several paths to esri map in ArcGIS JavaScript Maps SDK Questions

Draw line with several paths to esri map

JasonMcGraw — Thu, 20 Mar 2014 20:40:50 GMT

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

Re: Draw line with several paths to esri map

JonathanUihlein — Sun, 12 Dec 2021 03:12:47 GMT

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/

Re: Draw line with several paths to esri map

JasonMcGraw — Sun, 12 Dec 2021 03:12:49 GMT

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?

Re: Draw line with several paths to esri map

KenBuja — Fri, 21 Mar 2014 14:10:36 GMT

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?

Re: Draw line with several paths to esri map

JasonMcGraw — Fri, 21 Mar 2014 14:33:49 GMT

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.

Re: Draw line with several paths to esri map

JonathanUihlein — Fri, 21 Mar 2014 14:49:16 GMT

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.

Re: Draw line with several paths to esri map

JasonMcGraw — Sun, 12 Dec 2021 03:12:52 GMT

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

Re: Draw line with several paths to esri map

JonathanUihlein — Fri, 21 Mar 2014 17:13:19 GMT

No problem!

Let me know if you have any other questions.

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