ArcGis Javascript API draws a polyline, but polyline does't show up.

EddyH_ · ‎02-17-2017

Hi, there,

I am new and just start to learn arcgis Javascript API, I try to draw a polyline on map using following code, but polyline doesn't show up. I have searched solution online and have tried so many ways, but can not make it work. Could you please take a look what is missing? I really appreciate your clue.

Thanks a lot.

Eddy H.

<!DOCTYPE html>

<html>

<head>

<title>Maps Electrical Power Distribtution</title>

<style>

html, body, #mainWindow {

font-family: sans-serif;

height: 100%;

width: 100%;

}

html, body {

margin: 0;

padding: 0;

}

#header {

height: 80px;

overflow: auto;

padding: 0.5em;

}

</style>

var map, toolbar, symbol, geomTask;

require([

"esri/map",

"esri/toolbars/draw",

"esri/graphic",

"esri/geometry/Polyline",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"dojo/parser",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane", "dojo/domReady!"

], function(Map, Draw, Graphic, Polyline, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, parser)

{

parser.parse();

map = new Map("map", {

basemap: "streets",

center: [-122.148466, 47.585580],

zoom: 13

}

);

var singlePathPolyline = new Polyline();

singlePathPolyline.addPath([[-123.2, 48.9], [-122.148, 47.585], [-124.50, 49.4]]);

}

);

</script>

</head>

</div>

</body>

</html>

thejuskambi · ‎02-17-2017

You are just creating a geometry and not adding it to map. Try this.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Maps Electrical Power Distribtution</title>
    
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
    <style>
      html, body, #mainWindow {
        font-family: sans-serif; 
        height: 100%; 
        width: 100%; 
      }
      html, body {
        margin: 0; 
        padding: 0;
      }
      #header {
        height: 80px; 
        overflow: auto;
        padding: 0.5em;
      }
    </style>
    <script src="https://js.arcgis.com/3.19/"></script>
    <script>
      var map, toolbar, symbol, geomTask;
      require([ "esri/map", 
               "esri/toolbars/draw",
               "esri/graphic",
               "esri/geometry/Polyline",
               "esri/symbols/SimpleMarkerSymbol",
               "esri/symbols/SimpleLineSymbol",
               "esri/symbols/SimpleFillSymbol",
               "dojo/parser", 
               "dijit/layout/BorderContainer", 
               "dijit/layout/ContentPane",  "dojo/domReady!"
              ], function(Map, Draw, Graphic, Polyline, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,  parser) {
        parser.parse();
        map = new Map("map", {
          basemap: "streets",
          center: [-122.148466, 47.585580],
          zoom: 13
        });
        
        map.on("load", function(){
          var singlePathPolyline = new Polyline();
          singlePathPolyline.addPath([[-123.2, 48.9], [-122.148, 47.585], [-124.50, 49.4]]);

           var graphic = new Graphic(singlePathPolyline, new SimpleLineSymbol());
           map.graphics.add(graphic);
        });
      });

    </script>
  </head>
  
  <body class="nihilo">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍