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

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.

Vind meer berichten getagd met

Accepted answers

JonathanUihlein

It's not that these coordinate aren't 10200. They're just located very close to 0°N, 0°W

Could you take my code and modify it to work with his path by chance?
Should be a 5 minute job with the code posted above.

Thanks!!!

All comments

ShaningYu

Jon: My prob. got solved. The reason was the incorrect SR in my MapService that generates some incorrect map point values. Thanks for your help.

kenbuja

I think what you're going to have to do is use a Geometry Service to project it. If I use Jon's code, I get a point at 0, 0.

[ATTACH=CONFIG]30405[/ATTACH]

I went to this sample, added the wkid 26973 to the list, and used the geometry service to get the projected coordinate, which comes out to be somewhere in Kentucky (-84.5304109050132, 36.8066895277335). Not surprising, since this wkid is Indiana State Plane (NAD_1983_StatePlane_Indiana_East_FIPS_1301).

project.png

ShaningYu

Of course no reason to be rude. Actually, your work is very APPRECIABLE. Have a nice weekend. I will continue my work next Monday. Again, THANKS so much for you valuable time and experience.

JonathanUihlein

Please, no reason to be rude Shaning.

Still waiting for Ken to generate a working sample.

ShaningYu

No map displays on my IE. Totally empty page. I don't know why. Maybe the basemap not added?

JonathanUihlein

By the way, your previous script (received 2 days ago) works, but the 1 you posted today does not. I just wonder why the polyline2 could not be drawn. Thanks.

Opps! Forgot a ) on this line:

var testPoint = new Point(201394.01178484457, 173661.08635829584, new SpatialReference({wkid:26973}));

ShaningYu

This is the message for you to catch up my updated thread.

ShaningYu

To Jon:
Changed the wkid to 26973 but still not drawing. Wish have additional hint from you. Thanks.
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":26973} };
By the way, your previous script (received 2 days ago) works, but the 1 you posted today does not. I just wonder why the polyline2 could not be drawn. Thanks.

JonathanUihlein

It's not that these coordinate aren't 10200. They're just located very close to 0°N, 0°W

Could you take my code and modify it to work with his path by chance?
Should be a 5 minute job with the code posted above.

Thanks!!!

kenbuja

It's not that these coordinate aren't 10200. They're just located very close to 0°N, 0°W

JonathanUihlein

It's because you are still using points and assigning the wrong spatial reference.

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

These points are not 102100.

An example of coordinates with a spatial reference of 102100: [-7900279.71, 5103864.38]

I tried taking one of your path coordinates and was able to add a point to the map using a spatial reference of 26973 (as you mentioned earlier in the thread) and it was successful.

Sample below; click on the points to print data about that point in the console.

However, like I said, you will need to convert your data into a usable format.

The other potential option is to use a custom basemap with a spatial reference of 26973 (but I feel like this is more work overall).

<!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", "esri/symbols/SimpleMarkerSymbol", "esri/SpatialReference", "esri/geometry/Point", "dojo/domReady!"], function(Map, ready, on, Polyline, Graphic, SimpleLineSymbol, SimpleMarkerSymbol, SpatialReference, Point) {

  var map = new Map("map", {
  center: [-122.58, 45.55], //longitude, latitude
  zoom: 3,
  basemap: "streets",
  slider: true, //default
  sliderPosition: "top-left" //default
  });

  ready(function (){
  
    on(map, "load", drawPath);
    
    on(map, "click", function(evt){
       if (evt.graphic) {
       console.log("Graphic Object:", evt.graphic);
       console.log("Spatial Reference Object:", evt.graphic.geometry.spatialReference);
       console.log("type:", evt.graphic.geometry.type);
       console.log("wkid:", evt.graphic.geometry.spatialReference.wkid);
       console.log("X:", evt.graphic.geometry.x);
       console.log("Y:", evt.graphic.geometry.y);
       }
    });
    
    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 polylineGraphic = new Graphic(polyline, polylineSymbol, null, null);  
      map.graphics.add(polylineGraphic);
      
      var pSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setColor("#FFFF00");
      var pnt = new Point(-122.58, 45.55, new SpatialReference(4326));
      var pointGraphic = new Graphic (pnt, pSymbol);
      map.graphics.add(pointGraphic);
      
      try{
        
        var testSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setColor("#FF0000");
        var testPoint = new Point(201394.01178484457, 173661.08635829584, new SpatialReference({wkid:26973});
        var testGraphic = new Graphic (testPoint, testSymbol);
        map.graphics.add(testGraphic);

      }catch(e){
        console.log(e);
      }
    }
  });
});
</script>
</head>
<body class="claro"></body>
</html>

Could you post the latitude and longitude of your coordinates?

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>

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: Got the line drawn but not on DC area, in Potrland, WA. I have to make this correction. Thanks.

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

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

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

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

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

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

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

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.

JonathanUihlein

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>

ShaningYu

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

ZachLiu1

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.

ShaningYu

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.

ZachLiu1

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?

ShaningYu

Tested but still the polyline is not dispalyed.

ZachLiu1

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.

ZachLiu

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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