topic Re: Drawing line graphics from a point in ArcGIS JavaScript Maps SDK Questions

Drawing line graphics from a point

EvonFranklin — Wed, 20 Dec 2017 23:52:02 GMT

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.

Re: Drawing line graphics from a point

RobertScheitlin__GISP — Thu, 21 Dec 2017 00:19:31 GMT

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)]);

Re: Drawing line graphics from a point

EvonFranklin — Thu, 21 Dec 2017 01:02:39 GMT

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.

Re: Drawing line graphics from a point

RobertScheitlin__GISP — Thu, 21 Dec 2017 04:05:30 GMT

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.

Re: Drawing line graphics from a point

EvonFranklin — Thu, 21 Dec 2017 14:06:33 GMT

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]
]
};

Re: Drawing line graphics from a point

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:46:46 GMT

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)]);‍‍

Re: Drawing line graphics from a point

EvonFranklin — Thu, 21 Dec 2017 15:53:02 GMT

Yes I am using JS 4.x

Re: Drawing line graphics from a point

RobertScheitlin__GISP — Thu, 21 Dec 2017 16:03:18 GMT

The code I last post should work then

Re: Drawing line graphics from a point

EvonFranklin — Thu, 21 Dec 2017 16:09:40 GMT

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.

Re: Drawing line graphics from a point

EvonFranklin — Thu, 21 Dec 2017 16:37:00 GMT

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

Re: Drawing line graphics from a point

RobertScheitlin__GISP — Thu, 21 Dec 2017 16:50:08 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.