polyline not visibel

LefterisKoumis · ‎07-09-2015

I have this simple code but the polyline is not drawing. The answer, I suspect is simple...but not for a novice in js. Thanks.

<!DOCTYPE html>

<html>

<head>

<style>

html, body, #map {

height: 100%; width: 100%; margin: 0; padding: 0;

}

</style>

var map;

require([

"esri/map",

"esri/geometry/Point",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/graphic",

"esri/geometry/Polyline",

"esri/SpatialReference",

"esri/layers/GraphicsLayer",

"dojo/domReady!"

], function(

Map, Point, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Polyline, SpatialReference, GraphicsLayer

) {

map = new Map("map", {

basemap: "streets",

center: [-122.16,37.7238],

zoom: 10

});

map.on("load", function() {

var gl = new GraphicsLayer();

var myspatialref = new SpatialReference({wkid:102100});

var p = new Point((-122.159, 37.724),new SpatialReference(102100));

var t = new Point((-122.169, 37.721),new SpatialReference(102100));

var coords=[];

coords.push([p,t]);

var polyline = new Polyline(myspatialref);

var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0xFF3333,1,3);

polyline.addPath(coords);

var polylineGraphic = new Graphic(polyline, polylineSymbol);

gl.add(polylineGraphic);

map.addLayer(gl);

});

</script>

</head>

<body>

</body>

</html>

ChrisSmith7 · ‎07-09-2015

Here's a working sample, slightly modified from yours:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>My Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
  </style>
  <script src="//js.arcgis.com/3.13/"></script>
  <script>
      require([
        "dojo/ready",
        "dojo/parser",
        "esri/map",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/graphic",
        "esri/geometry/Polyline",
        "esri/SpatialReference"
      ], function(
        ready,
        parser,
        Map,
        Point,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Graphic,
        Polyline,
        SpatialReference
      ) {
        ready(function() {
          parser.parse();
          myMap = new Map("map", {
            basemap: "streets",
            center: [-122.16,37.7238],
            zoom: 15,
            SpatialReference: 4326
          });
          myMap.on("load", function() {
            var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);      
            var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);      
            var line = new Polyline(myMap.SpatialReference); 
             
            line.addPath([point1, point2]); 
               
            var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),4);      
            var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5])); 
               
            myMap.graphics.add(new Graphic(point1, pointSymbol));      
            myMap.graphics.add(new Graphic(point2, pointSymbol));      
            myMap.graphics.add(new Graphic(line, lineSymbol));
          });
        });
      });
  </script>
</head>
<body>
  <div id="map" class="map">
  </div>
</body>
</html>

View solution in original post

JoelBennett · ‎07-09-2015

Set the wkid of your spatial reference to 4326 instead of 102100. Your coordinates are in WGS 84, not Web Mercator.

ChrisSmith7 · ‎07-09-2015

Here's a working sample, slightly modified from yours:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>My Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
  </style>
  <script src="//js.arcgis.com/3.13/"></script>
  <script>
      require([
        "dojo/ready",
        "dojo/parser",
        "esri/map",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/graphic",
        "esri/geometry/Polyline",
        "esri/SpatialReference"
      ], function(
        ready,
        parser,
        Map,
        Point,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Graphic,
        Polyline,
        SpatialReference
      ) {
        ready(function() {
          parser.parse();
          myMap = new Map("map", {
            basemap: "streets",
            center: [-122.16,37.7238],
            zoom: 15,
            SpatialReference: 4326
          });
          myMap.on("load", function() {
            var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);      
            var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);      
            var line = new Polyline(myMap.SpatialReference); 
             
            line.addPath([point1, point2]); 
               
            var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),4);      
            var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5])); 
               
            myMap.graphics.add(new Graphic(point1, pointSymbol));      
            myMap.graphics.add(new Graphic(point2, pointSymbol));      
            myMap.graphics.add(new Graphic(line, lineSymbol));
          });
        });
      });
  </script>
</head>
<body>
  <div id="map" class="map">
  </div>
</body>
</html>

LefterisKoumis · ‎07-10-2015

Thanks. I modified it so I can use the GraphicsLayer.