Add graphic not successufl

[ShaningYu]

I tested my 1st JS API application.  My code is below:
            var polylineJson = {      'paths': [     [
                  [201394.01178484457,173661.08635829584],
                  [201392.0117168416,173661.08690949593],
                  ...
                ]  ]   };
            var polyline = new esri.geometry.Polyline(polylineJson);
            var polylineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([46, 139, 87, 1]), 5);
            map.graphics.add(new esri.Graphic(polyline, polylineSymbol));
But the polyline is not added on the map.  What's wrong in the code? Thanks if you can help.

[JonathanUihlein]

I don't have a good answer for you because I don't know what the numbers in your path represent. (e.g. What do you mean by 'double'?)

Are you able to change the numbers of the path to a spatial reference of either geographic (wkid: 4326) or web mercator (wkid: 102100)?


*edit

Could you post your entire polylineJson object definition so I can fiddle with it?

[ShaningYu]

Data are like that:
var polylineJson =   { 'paths': [  [
     [  201394.01178484457, 173661.08635829584 ],
     [  201392.0117168416,  173661.08690949593 ],
     [  201390.01164883861,  173661.08746069603 ],
     ... ] ] };
Thanks.

[JonathanUihlein]

Data are like that:
var polylineJson =   { 'paths': [  [
     [  201394.01178484457, 173661.08635829584 ],
     [  201392.0117168416,  173661.08690949593 ],
     [  201390.01164883861,  173661.08746069603 ],
     ... ] ] };
Thanks.

Having "..." isn't valid syntax for a polylineJson object.

[ShaningYu]

The "..." means more data.  There are hundreds of pairs.  You can eliminate the "..." and test others only.  Thank.
var polylineJson = { 'paths': [ [
[201394.01178484457,173661.08635829584],
[201392.0117168416,173661.08690949593],
     [ 201388.01158083565,  173661.08801189612 ],
     [  201386.01151283266, 173661.08856309619  ],
     [  201384.0114448297, 173661.08911429628 ],
     [  201382.0113768267, 173661.08966549637 ],
     [  201380.01130882374, 173661.09021669647 ],
     [ 201378.01124082075,  173661.09076789653 ]
] ] };

[JonathanUihlein]

The "..." means more data.  There are hundreds of pairs.  You can eliminate the "..." and test others only.  Thank.
var polylineJson = { 'paths': [ [
[201394.01178484457,173661.08635829584],
[201392.0117168416,173661.08690949593],
     [ 201388.01158083565,  173661.08801189612 ],
     [  201386.01151283266, 173661.08856309619  ],
     [  201384.0114448297, 173661.08911429628 ],
     [  201382.0113768267, 173661.08966549637 ],
     [  201380.01130882374, 173661.09021669647 ],
     [ 201378.01124082075,  173661.09076789653 ]
] ] };

Great! What coordinate system are these paths in?

[ShaningYu]

Either 102100 or 26973.  Thanks.
           map = new esri.Map("map", { extent: new esri.geometry.Extent
                ({ xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 102100} })
            });     // 26973
            dojo.connect(map, "onLoad", createToolbar);
            //add the basemap (replace with URL to your own map service)
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(basemap);

[JonathanUihlein]

It seems that your polyline is getting added after-all... only it was drawing off screen.

Your data needs to be in a recognizable spatial reference (geographic: 4326 or web-mercator: 102100 preferred).

I used an online converter to convert your data to wkid 102100 and was able to see the polyline on the map.

Basically, I couldn't work with data in the wkid 26973 format.

Are you using a custom basemap with a spatial reference of 26973 by chance?

[ShaningYu]

Jon:  Got the line drawn but not on DC area, in Potrland, WA.  I have to make this correction.  Thanks.

[JonathanUihlein]

Those center values are for Washington DC. I use them in my samples.

*edit

Just saw your edit. Glad it is working!

<!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>Build your first application</title>
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style type="text/css">
    html, body, #map {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
  </style>
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
    var map;
    require([
      "esri/map", 
      "esri/dijit/HomeButton", 
      "dojo/ready", 
      "dojo/on", 
      "esri/geometry/Polyline", 
      "esri/geometry/Extent", 
      "esri/graphic", 
      "esri/symbols/SimpleLineSymbol", 
      "dojo/domReady!"
    ], function(
      Map, HomeButton, ready, on, Polyline, Extent, Graphic, SimpleLineSymbol
    ) { 

      //var ext = new Extent({ xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 102100} });
      
      var map = new Map("map", { basemap: "streets",  zoom: 11, center: [-122.67, 45.54]});
      var home = new HomeButton({map: map}, "HomeButton");
      home.startup();
      window.map = map;

      ready(function (){

        on(map, "load", drawPath);

        function drawPath(){
        
          var polylineJson1 = { "paths":[[[-122.68,45.53], [-122.58,45.55], [-122.57,45.58],[-122.53,45.6]]], "spatialReference":{"wkid":4326}};
          var polylineJson2 = { "paths":[[[-122.68,45.53], [-122.58,45.55], [-122.57,45.58],[-122.53,45.6]]], "spatialReference":{"wkid":4326}};

          var polyline1 = new Polyline(polylineJson1);
          var polyline2 = new Polyline(polylineJson2);
          
          var polylineSymbolRed = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 9);
          var polylineSymbolBlue = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 3);
          
          var redLine = new Graphic(polyline1, polylineSymbolRed, null, null);
          var blueLine = new Graphic(polyline2, polylineSymbolBlue, null, null);

          map.graphics.add(redLine);
          map.graphics.add(blueLine);
        }

      });
    });
    </script>
    </head>
    <body class="claro">
    <div id="map">
    <div id="HomeButton"></div>
    </div>
    </body>
</html>

[ShaningYu]

Jon: Attached below is the script that was sourced from you but I had minor change.  I remember that it worked as adding
var polylineJson2 = { 'paths': [ [ [201394.01178484457,173661.08635829584], ...],  "spatialReference":{"wkid":102100} } //(or wkid=4326)
But now, it losses its function by adding this polyline.  If you have time, could you take a look.  Great appreciation!

<!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>Build your first application</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
        <style type="text/css">
            html, body, #map {
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <script src="http://js.arcgis.com/3.8/"></script>
        <script>
            var map;
            require(["esri/map", "dojo/ready", "dojo/on", "esri/geometry/Polyline", "esri/graphic", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"], function(Map, ready, on, Polyline, Graphic, SimpleLineSymbol) {
     
        var map = new Map("map", {
          center: [-77.1, 38.9], //longitude, latitude
          zoom: 11,
          basemap: "streets",
          slider: true, //default
          sliderPosition: "top-left" //default
        });

        ready(function (){
          on(map, "load", drawPath);     
          function drawPath(){
      var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
         var polylineJson = { "paths":[[[-122.68,45.53], [-122.58,45.55], [-122.57,45.58],[-122.53,45.6]]], "spatialReference":{"wkid":4326}};
            var polyline = new Polyline(polylineJson);
            var g = new Graphic(polyline, polylineSymbol, null, null);
            map.graphics.add(g);
            var polylineJson2 = { "paths":[[[201394.01178484457,173661.08635829584],[201392.0117168416,173661.08690949593],[ 201388.01158083565, 173661.08801189612 ],[ 201386.01151283266, 173661.08856309619 ],[ 201384.0114448297, 173661.08911429628 ],[ 201382.0113768267, 173661.08966549637 ],[ 201380.01130882374, 173661.09021669647 ],[ 201378.01124082075, 173661.09076789653 ] ] ],"spatialReference":{"wkid":102100} };
      var polyline2 = new Polyline(polylineJson2);
      var g2 = new Graphic(polyline2, polylineSymbol, null, null);
            map.graphics.add(g2);
          }    
        });
     });
        </script>
    </head>
    <body class="claro">
        <div id="map"></div>
    </body>
</html>