Select to view content in your preferred language

Add graphic not successufl

4183
30
Jump to solution
01-03-2014 05:07 AM
ShaningYu
Honored Contributor
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.
0 Kudos
30 Replies
JonathanUihlein
Esri Regular Contributor
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?
0 Kudos
KenBuja
MVP Esteemed Contributor
It's not that these coordinate aren't 10200. They're just located very close to 0°N, 0°W
0 Kudos
JonathanUihlein
Esri Regular Contributor
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!!!
0 Kudos
ShaningYu
Honored Contributor
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.
0 Kudos
ShaningYu
Honored Contributor
This is the message for you to catch up my updated thread.
0 Kudos
JonathanUihlein
Esri Regular Contributor

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}));
0 Kudos
ShaningYu
Honored Contributor
No map displays on my IE.  Totally empty page.  I don't know why.  Maybe the basemap not added?
0 Kudos
JonathanUihlein
Esri Regular Contributor
Please, no reason to be rude Shaning.

Still waiting for Ken to generate a working sample.
0 Kudos
ShaningYu
Honored Contributor
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.
0 Kudos
KenBuja
MVP Esteemed Contributor
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).
0 Kudos