Plotting SVG D3.js to ArcGIS map, need to stick with maps coordinate

PutriDewi_Purnamasari — Fri, 10 Dec 2021 21:57:31 GMT

I have some problem with sticking draggable SVG to ArcGIS map, using D3.js. Let's assume that I had latitude:-34.42507,longitude: 150.89315 to place some point that the SVG would be stick.

Here the point of code:

var newg = svg.append("g")
      .data([{x: width / 2, y: height / 2}]);

var dragline = newg.append("line")
                   .attr("x1", function(d) { return d.x + (width - 20); })
                   .attr("y1", function(d) { return d.y + (height - 20); })
                   .attr("x2", 700)
                   .attr("y2", 465)
                   .attr("stroke-width", 2)
                   .attr("stroke", "gray")
                   .attr("width",width)
                   .attr("height",height)
                   .attr("cursor", "move")
                   .call(drag);‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I drag the map, the SVG is stay on the screen, exactly with screen coodinates. What I want is the line is sticked with the coordinates.

What I supposed to do to insert coordinates and make them stick with maps? Thanks a lot.

topic Plotting SVG D3.js to ArcGIS map, need to stick with maps coordinate in ArcGIS JavaScript Maps SDK Questions

Plotting SVG D3.js to ArcGIS map, need to stick with maps coordinate