Draw and edit on the map, 1.109

A map beside a grid has been something you look at. The rows are on it, the selection follows, and that is where it stops. The moment someone says “that cabinet is on the wrong side of the road” or “mark the area we dig on Thursday”, they leave your app for another tool, draw it there, and paste coordinates back by hand.

The example above is a small asset grid beside a map. Press Polygon and click out an area; the readout beside the cursor gives its size, and a double-click finishes it. Press Edit and the shape moves and reshapes. Then drag an asset’s point on the map and watch its latitude and longitude cells change in the grid. Press Undo move and it goes back. This is 1.109: the map is somewhere people can work, not only look.

Draw

map.draw.setMode turns a click or a drag into a shape: 'point', 'line', 'polygon', 'circle' (dragged from its centre) or 'rectangle' (dragged corner to corner). Click to add a vertex, double-click to finish, and press Escape to drop the shape in progress. Each finished shape comes back as a GeoJSON Feature.

map.draw.setMode('polygon');
map.on('draw:finish', ({ feature }) => save(feature));   // a GeoJSON Feature
map.draw.getFeatures();                                   // every shape, as a FeatureCollection

Drawn shapes are separate from the grid’s rows, so a sketch never changes your data until you choose to store it.

Edit

setMode('edit') is the other half. Click a shape to select it (Shift-click adds another), drag a corner to reshape, drag a midpoint to add a corner, drag the shape to move it, and press Delete to remove it. Every create, edit, move and delete steps back with map.draw.undo() or Ctrl/Cmd-Z, and forward with redo().

Precision

A shape that is nearly right is the usual complaint about drawing tools, so there are three aids. While you draw or edit, a readout beside the cursor gives a line’s length or an area’s size, in the grid’s locale. Snapping pulls a corner onto the vertices, then the segments, of a layer of your own map, and a ring shows the target. Rules refuse what should not be allowed.

map.draw.setMode('polygon', {
  snap: { layers: ['ducts'], tolerance: 10 },
  constraints: { noSelfIntersection: true, maxVertices: 20, minSegmentLength: 5 },
});
map.on('draw:refused', ({ rule }) => console.log(rule));

Press Snap to ducts in the example, then draw a line near the dashed route. A vertex that would break a rule is not added, and the readout says why.

Move a row by dragging its point

This is the part a read-only map could never do. Set moveRows: true and, in edit mode, a row placed by geometry: { lat, lng } can be dragged on the map.

const map = createMapView(grid, {
  geometry: { lat: 'lat', lng: 'lng' },
  moveRows: true,
  radiusUnits: 'pixels',
});
map.draw.setMode('edit');

On release the new position is written through the grid’s own editing, as if someone had typed it into the two cells. Column validation and beforeEdit apply, the change events fire, the two cells are one edit and one undo step, and a refused edit puts the point back. A row whose cells are read-only cannot be dragged. The option is off by default; with it off, a drag pans the map as before.

Touch

Drawing and editing work on a tablet. Tap to add a vertex, long-press to finish a line or polygon, and drag a handle with one finger. Handles are at least 24 pixels across and grow once a finger has touched the map. Two fingers always pan and zoom, and never add a vertex.

Upgrading from 1.108

There is nothing to change for the map view; drawing is opt in by use. Two things look different on upgrade:

• A dashboard narrower than 600px now stacks its panels one per row. Set stackBelow: 0 to keep the old layout.
• Map points no longer keep growing when you zoom in. They stop at radiusMaxPixels (24 by default) instead of covering buildings.

The changelog has the full list, and the map view page has the options. Open the example, draw a polygon, then drag a cabinet.