Add a snap grid to the map

A snap grid makes it easier to draw shapes with shared edges and nodes, and straighter lines. Snapping shapes to a grid is useful when drawing building outlines or network paths on the map.

The resolution of the snapping grid is in pixels. The grid is square and relative to the nearest integer zoom level. The grid scales by a factor of two relative to physical real-world area with each zoom level.

Use a snap grid

Create a snap grid using the atlas.drawing.SnapGridManager class and pass in a reference to the map you want to connect the manager to. Set the showGrid option to true if you want to make the grid visible. To snap a shape to the grid, pass it into the snap grid managers snapShape function. If you want to snap an array of positions, pass it into the snapPositions function.

The Use a snapping grid sample snaps an HTML marker to a grid when it's dragged. Drawing tools are used to snap drawn shapes to the grid when the drawingcomplete event fires. For the source code for this sample, see Use a snapping grid source code.

Snap grid options

The Snap grid options sample shows the different customization options available for the snap grid manager. The grid line styles can be customized by retrieving the underlying line layer using the snap grid managers getGridLayer function. For the source code for this sample, see Snap grid options source code.

Next steps

Learn how to use other features of the drawing tools module:

Get shape data

React to drawing events

Interaction types and keyboard shortcuts