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.
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)]);
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.
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.
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]
]
};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)]);Yes I am using JS 4.x
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.
Eureka! I got it now haha well done Robert good looking out.
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
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: