How to edit Feature position on map by draging?

Question

I need to move a feature position on a map, by dragging it on the map.

When using the map server, I'm able to do that, but I can't implement that on my HTML Map. Couldn't find anything related to this on the documentation or searching for questions.

Thanks

Answer 1

Suppose your features are Graphic objects.

1. Add a mousedown event listener to the map
2. On map mousedown, verify if a feature intersect with a circle centered at the mousedown position (you will have to convert pixel to map units here);
3. If a feature intersects, add a map mousemove and a mouseup event listener

4. On map mousemove, modify the geometry of the feature with the position of the cursor (that will be easy for point feature, but more complex for polyline and polygon). Also you, should use a debounce or throttle function for this event listener to prevent over calculations.

5. On map mouseup, remove the mousemove and the mouseup event listeners

To calculate the radius of the circle, you will have to take in consideration the current extent of the map. Here is how you can calculate the radius:

function getSearchAtPointRadius(mapView) {
    //20m if your map units are in meters
    return 20 * (mapView.extent.xmax - mapView.extent.xmin) / mapView.width
}