Drawing Shape Field

Introduction

The Drawing Shape Field adds one predefined shape to a connected Drawing Tools Field. Configure the shape through builder options or provide a GeoJSON Feature, then choose whether the visitor can move, resize, or edit it.

Available in: Agency.

The field requires a Drawing Tools Field connected to a Map Field. That map workflow requires Maps JavaScript API on the Browser API Key.

Add more than one Drawing Shape Field when the form should start with several independently configured shapes.

Configuring the Drawing Shape Field

Drawing Tools Field

Select the Drawing Tools Field that will manage and display this shape. The selected Drawing Tools Field must itself be connected to the intended Map Field.

Shape Source

• Field Options: Generate the shape from Shape Type, Size, Center Latitude, and Center Longitude.
• Raw JSON: Use a GeoJSON Feature as the authoritative geometry source.

Raw JSON accepts a single GeoJSON Feature, an array of Features, or a FeatureCollection. When an array or FeatureCollection contains more than one Feature, the field uses only the first one.

Shape Options

• Shape Type: Point, Line String, Polygon, Rectangle, or Circle.
• Size (meters): Default size used where the selected geometry requires it, such as a circle radius or generated rectangle dimensions.
• Center Latitude and Center Longitude: Center point used to generate the shape from Field Options.
• Raw JSON (Optional Override): GeoJSON geometry used when Raw JSON is selected.
• Default Label: Initial text label for the shape.
• Default Color: Initial shape color. The shipped default is #666666.

Different geometry types use the size and center values differently. Test the generated geometry on the frontend rather than assuming the same visual size for a point, line, polygon, rectangle, and circle.

User Interaction

• Show Shape Panel: Show the shape in the Drawing Tools panel.
• Allow Resizing: Allow supported shapes to change size.
• Allow Dragging: Allow the shape to move.
• Allow Editing: Allow supported geometry points or properties to be edited.

All four options are enabled by default. Not every operation applies to every geometry type; for example, a polygon is edited differently from a point.

Setting Up and Using the Drawing Shape Field

1. Add a Map Field.
2. Add a Drawing Tools Field and connect it to the Map Field.
3. Add a Drawing Shape Field and select the Drawing Tools Field.
4. Choose Field Options or Raw JSON as the Shape Source.
5. Configure the geometry, default label, and default color.
6. Choose whether to show the shape panel and allow resizing, dragging, or editing.
7. Save the form and verify the initial shape and every allowed interaction on the frontend.

For several predefined shapes, add several Drawing Shape Fields and connect each one to the same Drawing Tools Field.

Saved Value and Outputs

The Drawing Shape Field saves one normalized GeoJSON Feature as structured JSON. The connected Drawing Tools Field maintains the complete collection of shapes visible in that drawing workflow.

Geolocation merge-tag parts can request a map, metrics, text metrics, a map with metrics, JSON, serialized JSON, formatted serialized JSON, or text.

Dynamic Field Options can copy the following values into supported ordinary Ninja Forms fields:

• Area, perimeter, line length, or circle radius.
• Center latitude, center longitude, or serialized center.
• Southwest and northeast bounds, their individual coordinates, or serialized bounds.
• Label, fill color, shape mode, or geometry type.

Troubleshooting

Helpful Links

• Drawing Tools Field
• Google Map Field
• Dynamic Geolocation Field Options
• Google Maps API Keys