topic Re: Add graphic not successufl in ArcGIS JavaScript Maps SDK Questions

Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 13:07:02 GMT

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.

Re: Add graphic not successufl

ZachLiu — Sun, 12 Dec 2021 00:04:42 GMT

esri.Graphic requires four parameters instead of two (geometry, symbol, attributes, infoTemplate).

So even if you don't need the other two, I think you need them to be there.

try this:

map.graphics.add(new esri.Graphic(polyline, polylineSymbol, null, null));

Hope this helps.

Re: Add graphic not successufl

ZachLiu1 — Fri, 03 Jan 2014 13:17:07 GMT

Graphics need four parameters instead of two (geometry, symbol, attributes and infoTemplate)

try this:

map.graphics.add(new esri.Graphic(polyline, polylineSymbol, null, null));

hope it helps.

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 13:29:00 GMT

Tested but still the polyline is not dispalyed.

Re: Add graphic not successufl

ZachLiu1 — Fri, 03 Jan 2014 13:46:47 GMT

It's hard to see when you only posted a couple of code here.

Another potential problem maybe the map is not loaded when you call map.graphics.add() function.

Is the code called after map on "load" event?

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 14:20:04 GMT

See below:
function init() {
            map = new esri.Map("map", { extent: new esri.geometry.Extent
                ({ xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 26973} }) });
            dojo.connect(map, "onLoad", createToolbar);
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(basemap);
}
the map loads the basemap and and basemap displays.
At the line
            map.graphics.add(new esri.Graphic(polyline, polylineSymbol, null, null));
I can view the values like map.graphics[0].extend, .path[0], also the symbol values, .... But it does not show on the map. I am still looking for the possible reasons. Thanks.

Re: Add graphic not successufl

ZachLiu1 — Fri, 03 Jan 2014 14:46:19 GMT

so try to add the Graphic within the createToolbar() function,

also I noticed you use spatial reference other than 102100, it may cause problems when using ESRI basemap.

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 14:53:19 GMT

Changed wkid to 102100 but got the same thing. Thanks for your concern.

Re: Add graphic not successufl

JonathanUihlein — Sun, 12 Dec 2021 00:04:44 GMT

Here's a quick sample. Hopefully this helps.

<!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" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css" />
        <style type="text/css">
            html, body, #map {
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <script src="http://js.arcgis.com/3.7/"></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: [-122.67, 45.54], //longitude, latitude
          zoom: 12,
          basemap: "streets",
          slider: true, //default
          sliderPosition: "top-left" //default
        }); 

        ready(function (){
        
          on(map, "load", drawPath);
        
          function drawPath(){
            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 polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
            var g = new Graphic(polyline, polylineSymbol, null, null);
            map.graphics.add(g);
          }
          
        });
            });
        </script>
    </head>
    <body class="claro">
        <div id="map"></div>
    </body>
</html>

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 15:26:54 GMT

jonathan: Your code works fine. To apply it in my scenario, in which the data loaded in to the polylineJson are in double. What should be revised on the code (e.g. center - should it be decimals rather than in lat/lon?)? Any advice? Thanks.

Re: Add graphic not successufl

JonathanUihlein — Fri, 03 Jan 2014 15:55:43 GMT

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?

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 16:10:34 GMT

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

Re: Add graphic not successufl

JonathanUihlein — Fri, 03 Jan 2014 16:23:21 GMT

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.

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 16:32:22 GMT

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

Re: Add graphic not successufl

JonathanUihlein — Fri, 03 Jan 2014 16:36:00 GMT

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?

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 16:42:14 GMT

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

Re: Add graphic not successufl

JonathanUihlein — Fri, 03 Jan 2014 17:47:37 GMT

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?

Re: Add graphic not successufl

ShaningYu — Fri, 03 Jan 2014 18:04:13 GMT

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

Re: Add graphic not successufl

JonathanUihlein — Sun, 12 Dec 2021 00:04:47 GMT

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>

Re: Add graphic not successufl

ShaningYu — Fri, 10 Jan 2014 11:06:26 GMT

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>