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.
Solved! Go to 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)]);
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
The code I last post should work then
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.