DRAW A LINE BETWEEN TWO POINTS

[bharathreddy]

Hi,

how to draw a polyline between two points

[RobertScheitlin__GISP]

Bharath,

   Just use some code like this:

require([
  "esri/geometry/Polyline", "esri/SpatialReference",
  "esri/geometry/Point", ... 
], function(Polyline, SpatialReference, Point, ... ) {
  var polyline = new Polyline(new SpatialReference({wkid:4326}));
  polyline.addPath([new Point(10,10), new Point(20,20)]);‍‍‍‍‍‍

[bharathreddy · Accepted solution]

Thanks Robert,

I got to work with following code

function init() {

dojo.connect(map, "onLoad", function () {

debugger;
dojo.connect(dijit.byId("map"), "resize", map, map.resize);
var p1 = new esri.geometry.Point(217370.447, 1172344.449, map.spatialReference);
// var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-90, 40, map.spatialReference));
line = new esri.geometry.Polyline();
line.addPath([p1]);
// lineGraphic = map.graphics.add(new esri.Graphic(line, new esri.symbol.SimpleLineSymbol()));
// map.graphics.add(new esri.Graphic(p1, new esri.symbol.SimpleMarkerSymbol()));
// map.graphics.add(new esri.Graphic(p2, new esri.symbol.SimpleMarkerSymbol()));

dojo.connect(map, "onClick", addPt);
});

}

function addPt(e) {
debugger;
// create a new path using the current line endpoint and the click point
//var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(e.mapPoint.x, e.mapPoint.y, map.spatialReference));
//line.addPath([p2]);
var pathCount = line.paths.length;
line.addPath([line.paths[pathCount - 1][line.paths[pathCount - 1].length - 1],[e.mapPoint.x, e.mapPoint.y]]);
lineGraphic = map.graphics.add(new esri.Graphic(line, new esri.symbol.SimpleLineSymbol()));
lineGraphic.setGeometry(line);
map.graphics.add(new esri.Graphic(e.mapPoint, new esri.symbol.SimpleMarkerSymbol()));
}

 dojo.ready(init);

[RobertScheitlin__GISP]

Bharath,

   You Really need to get away from using Legacy coding style like that. When you More to JS API 4.0 you will Not be able to use Legacy anymore. And Dojo Connect is depreciated you should be using AMD coding style and Dojo on instead of connect.

<script>
      var map, line;
      require([
        "esri/map", 
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/Graphic",
        "esri/symbol/SimpleMarkerSymbol",
        "esri/symbol/SimpleLineSymbol",
        "dojo/domReady!"
      ], function(
          Map,
          Point,
          Polyline,
          Graphic,
          SimpleMarkerSymbol,
          SimpleLineSymbol
         ) {

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-92.315097, 34.733316],
          zoom: 16
        });

        map.on("onLoad", function () {
        //map.on("resize", map.resize);
          var p1 = Point(217370.447, 1172344.449, map.spatialReference);
          line = new Polyline();
       line.addPath([p1]);
        });
     map.on("onClick", addPt);

     function addPt(e) {
          var pathCount = line.paths.length;
          line.addPath([line.paths[pathCount - 1][line.paths[pathCount - 1].length - 1],[e.mapPoint.x, e.mapPoint.y]]);
          lineGraphic = map.graphics.add(new Graphic(line, new SimpleLineSymbol()));
          lineGraphic.setGeometry(line);
          map.graphics.add(new Graphic(e.mapPoint, new SimpleMarkerSymbol()));
        }
 
     });
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[bharathreddy]

Robert,

    Thanks for the suggestion