Drawing line graphics from a point

[EvonFranklin]

I want to draw 2 lines from the same starting point going in a V shape upwards after clicking on a map region. I have a defined line length and I can get the starting point from the mouseClick event, however I am looking for help with how to get the line path to be generated as the line geometry for the graphic. I saw in some examples where the path was predefined but for me case I just want the lines be drawn on the fly based on where the click was made.

[RobertScheitlin__GISP · Accepted solution]

Evon,

   This more of a math question... Depends on what length do you want the right and left halves of the V to be?

It would be as simple to just take the Y coordinate of the mouse click and add lets say 50 meters and then take the X and add 25 meters and create a new Point class from those coordinates to get the right side and then do the opposite subtracting from the X 25 meters and adding to the Y 50. Now you have three points your left point your mouse click and your right point. now you create a Polyline from the points:

polyline.addPath([new Point(evt.mapPoint.x - 25, evt.mapPoint.y + 50), evt.mapPoint, new Point(evt.mapPoint.x + 25, evt.mapPoint.y + 50)]);

[EvonFranklin]

I see your point more so a math question, are the points I need to use for the polyline based of lat,lng or X,Y coordinates? That way I can start tinkering around and try things on my own as well.

[RobertScheitlin__GISP]

If your map is using a standard esri basemap then the polyline will be based on XY in meters, since esri basemaps are in web Mercator.

[EvonFranklin]

Yes i am using the base map from esri, so I am to use X,Y which is expressed in meters got it. I can follow the examples and load the line with a defined path however adding paths manually seem to fail. 

var polyline = {
                       type: "polyline", // autocasts as new Polyline()
                      paths: [
                                    [screenClick.x, screenClick.y],
                                    [screenClick.x + 10, screenClick.y +5]
                                ]
                     };

[RobertScheitlin__GISP]

Evon,

  So you are using JS API 4.x?

var pLine = new Polyline({spatialReference: {wkid: 102100}});
pLine.addPath([new Point(evt.mapPoint.x - 25, evt.mapPoint.y + 50), evt.mapPoint, new Point(evt.mapPoint.x + 25, evt.mapPoint.y + 50)]);‍‍

[EvonFranklin]

Yes I am using JS 4.x

[RobertScheitlin__GISP]

The code I last post should work then

[EvonFranklin]

Giving it a try now, once I can get the graphics to be drawn successfully I will definitely tinker around and figure the rest out and maybe post my results afterwards so you can see what I was trying to achieve.

[EvonFranklin]

Eureka! I got it now haha well done Robert good looking out.