Drawing Tools Field

Introduction

The Drawing Tools Field lets visitors create and manage geographic shapes on a connected Map Field. It can support service areas, delivery zones, property boundaries, planned routes, and other workflows that need more than a single location marker.

Available in: Agency.

The field requires a connected Map Field and Maps JavaScript API on the Browser API Key. Ninja Geolocation uses its own drawing system on the Google map; a separate legacy Google Drawing API is not required.

Configuring the Drawing Tools Field

Map Field for Drawing

Select the Map Field on which the shapes will be created. The controls cannot draw until a valid target map is connected and initialized.

Drawing Tools Settings

• Drawing Tools UI Type: Display labeled Buttons or an Icons Bar.
• Drawing Tools UI Position: Place the controls Inside Form or Inside Map.
• Enabled Drawing Tools: Choose any combination of Marker, Polyline, Polygon, Rectangle, Circle, and Freehand.

Buttons, Inside Form, and all six drawing tools are enabled in a newly added field.

Shape Settings

Each enabled type has its own settings section:

• Marker Settings
• Polyline Settings
• Polygon Settings
• Rectangle Settings
• Circle Settings
• Freehand Settings

Customize each tool's button text and default color. Disable tools that visitors should not use rather than relying on the label alone to limit the workflow.

Action Buttons

Enable Action Buttons can expose Clear Shapes, Undo, Redo, Copy JSON, Export, and Import. All six actions are enabled by default, and each button label can be customized.

Disable JSON copy, export, or import on simplified public forms when visitors do not need to exchange raw shape data.

Shape Panel

• Enable Shape Labels: Let visitors add text labels to shapes.
• Enable Color Picker: Let visitors change shape colors.
• Delete Shape Button Text: Customize the action used to delete a selected shape.

Labels and the color picker are enabled by default.

Predefined Shapes

Predefined Shapes (JSON) loads an initial collection when the form starts. Use the exact JSON structure produced by the current Drawing Tools runtime:

1. Create the required shapes with the frontend Drawing Tools Field.
2. Use Copy JSON or Export.
3. Paste the unmodified output into Predefined Shapes (JSON).
4. Save and verify the form on the frontend.

Setting Up and Using the Drawing Tools Field

1. Add and configure a Map Field.
2. Add a Drawing Tools Field.
3. Select the target under Map Field for Drawing.
4. Choose the UI type and position.
5. Select the drawing tools visitors may use and customize their labels and colors.
6. Review the Action Buttons and Shape Panel controls.
7. Optionally add Predefined Shapes (JSON).
8. Save the form and test drawing, selecting, editing, deleting, and submitting each enabled shape type.

When using repeaters, keep the Drawing Tools Field and its target Map Field in the intended row and test adding, removing, and reindexing rows. On a page with multiple maps, confirm that each Drawing Tools Field targets the correct Map Field.

Saved Value and Outputs

The Drawing Tools Field saves the submitted shapes collection as normalized structured JSON. Submission and merge-tag output can render a readable map-and-totals view while preserving the structured collection for integrations.

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

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

• Total area, line length, and closed-shape perimeter.
• Southwest and northeast bounds coordinates.
• Shape count and comma-separated shape types.
• Shape-label summary.
• All shapes as serialized JSON.

Troubleshooting

Helpful Links

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