How to move geojson polygon in leaflet?

Question

Say I have a geojson box I've added to leaflet. How can I allow the user to "click and drag the box" to a new location, which in turn updates all the coordinates automatically? I know how to edit the boundary/points that make up the shape using leaflet editing, but am not sure how to actually move the shape.

nathansnider nathansnider · Accepted Answer · 2016-04-08T08:28:08

There is a Leaflet.Draw.Drag plugin for Leaflet Draw that allows you to move polygons when you enter edit mode. It does seem to be a bit finicky about the version, though. At least in a few quick experiments, I was only able to get it to work using Leaflet Draw version 0.2.3. If you have an existing L.GeoJson layer, you can simply specify that as the featureGroup in the edit options of the draw control:

var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: yourGeoJsonLayer,
    edit: {
      selectedPathOptions: {
        maintainColor: true,
        moveMarkers: true
      }
    }
  }
});

In the selectedPathOptions, the maintainColor option just keeps the existing style of the layer while you're editing, and the moveMarkers option places a little square marker in the middle of the polygon as a reminder that you can drag the whole thing rather than just edit the vertices. Here is an example fiddle:

http://fiddle.jshell.net/nathansnider/qk5bsgn8/

How to move geojson polygon in leaflet?

1 Answers