Advanced Draw Widget Improvements: Import, Export, Save Drawings, Tool Tips, Snapping, Measurements

Brian_McLeer · ‎05-28-2025

Advanced Draw Widget Capabilities

This widget release builds upon contributions by @JeffreyThompson2 , @RobertScheitlin__GISP , and @AdrienHoff11 , incorporating all functions from prior iterations while adding significant new capabilities across two main areas, the Draw tab and My Drawings tab.

This release builds upon these prior releases:

Additional Draw Widget Improvements (4/10/2025)

Re-designed Draw widget (11/21/2023)

Draw Widget EB 1.7.0 (1/28/2022)

Draw Tab Enhancements

Measurement System

A comprehensive measurement system providing professional-grade accuracy and real-time calculations:

Real-time calculations – Automatic area, perimeter, length, and coordinate calculations that update as graphics are modified.
Multiple unit support – Distance units (kilometers, miles, meters, nautical miles, feet, yards) and area units (square kilometers, square miles, acres, hectares, square meters, square feet, square yards).
Custom unit definitions – User-defined distance and area units with conversion factors.
Coordinate display – XY coordinates, Lat/Long coordinates, and spatial reference WKID information.
Advanced measurements – Circle radius calculation and individual line segment measurements for complex shapes.
Intelligent processing – Geodetic vs planar calculations based on spatial reference, with automatic label management.
Configurable controls – Individual toggles for length, area, perimeter, radius, and segment displays.

Tooltips

Real-time measurements – Live tooltips with length, area, perimeter, radius, and coordinate updates as drawing progresses.
Configurable units & precision – Custom unit support and decimal rounding controls.
Smart placement & display – Automatic positioning and styling for clear visibility.
Interactive integration – Adapts to active drawing tools and user interactions like resizing and editing.
Coordinate display – Optional X/Y, Lat/Long, and WKID information for points.
Segment labels – Supports segment-specific tooltips for polylines.
Error handling – Fallbacks for unsupported geometries and projection warnings.
Performance optimized – Efficient rendering with minimal impact on performance.

Snapping

Advanced snapping functionality for precise drawing alignment:

Multi-layer snapping – Detects all visible snappable layers with recursive layer hierarchy search.
Comprehensive layer support – Includes feature layers, graphics layers, CSV, GeoJSON, WFS, and sublayers.
Smart functionality – 15-pixel snap tolerance, self-snapping, and temporary disable via Ctrl/Cmd key.
Automatic optimization – Layer loading and efficient snapping management with user feedback.

Drawing Tool Improvements

Reorganized layout – Two-row button arrangement with logical grouping (Point/Line/Freehand Line/Text top row; Rectangle/Polygon/Freehand Polygon/Circle bottom row).
Enhanced feedback – Clear indicators for "Drawing Mode," "Edit Mode," and "No Drawings Yet."
Dual-tab interface – Seamless sync between "Draw" and "My Drawings" tabs.

Text Tool Enhancements

Expanded font library – 11 font families including Alegreya, Josefin Slab, Merriweather, Montserrat, Noto Sans/Serif, Open Sans, Playfair Display.
Advanced styling – Real-time preview, enhanced rotation, multi-line support.
Sophisticated effects – Text outline/halo with size and opacity controls, font family selector.

Layer Management

Dynamic controls – Toggle visibility of the drawing layer in the map layer list.
Customization – Custom layer naming with collapsible settings panel.
Configuration options – Toggle between show/hide modes for the graphics layer.

My Drawings Tab

Storage & Data Management

Local storage integration – Saves drawings in browser with user consent management.
Session continuity – Remembers drawings across sessions on the same device/browser.
Load options – Detects existing drawings with options to load or start fresh.
Import/Export – JSON file-based backup and restore.

Drawing Organization

Selection system – Individual and bulk selection with checkboxes.
Sorting options – Sort drawings by name, type, or creation date.
Search and filter – Easy navigation through large drawing collections.

Editing Capabilities

Name editing – Inline renaming of drawings.
Symbol modification – Edit drawing symbols and styles.
Text styling – Full text formatting including alignment, color, font, and decorations.
Copy/duplicate – Clone drawings for reuse.

User Experience Features

Confirmation dialogs – For single and bulk deletions.
Visual feedback – Selection highlighting and map interaction.
Accessible design – Tooltips, keyboard navigation, screen reader compatibility.
Responsive layout – Mobile-friendly with touch support.

Advanced Operations

Undo/Redo system – Full action history management.
Bulk operations – Multi-select delete, export, and modification.
Error handling – Robust error feedback and handling.
Performance optimization – Efficient rendering and memory management.

Features Not Currently Supported By ESRI Draw/Measure Widgets

XY Point Locations
Make Your Own Units of Measure
Measure Line Segments and Radius
Snapping Is An Easy-to-find User Option
Users Can Control The Number Of Decimal Places in Measurement
Users May Add/Remove Measurements After Drawing
Measurement Text Style Is Controllable
Freehand Polylines and Polygons
Change Drawing Styles and Text Options After Drawing
Point Symbol Rotation
Accurate Text Previews
User Options For Choosing the Name of the Drawing Layer and If It Displays in Map Layer List
Save Drawings To Local Storage and Retrieve Them in a Future Session
Import/Export Drawings to File
List of Drawings For Easy Management

Changelog

10/15/2025: Version 2 released

Buffer

Add buffers to drawings including points, lines, polygons, and circles.
Configure buffer distance, unit, and opacity interactively.
Buffers update automatically when the parent drawing is reshaped or moved.
Buffers can be removed individually or cleared all at once.
Buffers are included in import and export operations.

Line Arrows

Add arrowheads to line drawings to indicate direction.
Arrowheads can be toggled on or off while drawing or after creation.
Works with both straight and freehand line tools.
Arrow styling integrates with existing line symbol settings.

Import/Export (GeoJSON)

Drawings can be imported from or exported as valid GeoJSON files.
Import GeoJSON created from other GIS tools or previous sessions.
Export GeoJSON for use in other applications, including ArcGIS Online and ArcGIS Pro. Note: For KML/KMZ, a third party or additional ArcGIS Pro geoprocessing operation will be needed (https://mygeodata.cloud/converter/, https://mapshaper.org, or others may be a viable option).
Maintains geometry and attributes for consistent round-tripping.
When importing into ArcGIS Pro single drawings in a GeoJSON file, use the JSON to Features geoprocessing tool and ensure the valid geometry is selected in the Geometry Type drop-down (text not supported).
When importing into ArcGIS Pro with multiple drawings in a GeoJSON file, use the Batch Import Data geoprocessing tool. This supports importing multiple geometry types from a single GeoJSON file (text not supported).
Legacy JSON files from previous versions of the widget can still be imported for compatibility.

Measurement Label Editing

Measurement labels can be repositioned by dragging.
Text properties such as size, color, font, halo, bold, italic, and underline can be adjusted.
Updates are applied instantly to labels on the map.
Supports editing labels for points, lines, polygons, and circles.
Improves map readability and customization without redrawing geometries.

Measurement Label Improvements – Special thanks to @MattiasEkström for assistance on this portion

Segment labels for lines and polygons can now be rotated to match the orientation of the underlying segment.
Users can toggle between oriented labels (aligned with the line or polygon segment) and straight horizontal labels.
Rotated labels dynamically follow the shape of the line as it is edited.
This improves readability on curved or angled segments and provides more control over how measurements are displayed.

Delete All (My Drawings)

A new Delete All button has been added to the My Drawings panel.
Allows users to quickly remove all drawings at once.
Includes a confirmation step to prevent accidental deletion.

UI Updates

Known Issues

Circles Aren't Real - Circles generated by this Widget are actually 60-sided polygons and there is no good way to tell how a drawing was created after the fact. As far as this Widget is concerned, any polygon with exactly 60-sides is a circle. If you create your own polygon with exactly 60-sides or distort a circle so that it is no longer circular, it will be treated as if it is a circle and calculate a radius.
Freehand Line Segments - Technically, freehand line segments work fine, but they generate too many labels to be useful. For reasons similar to the circle problem above, there wasn't a good way of disabling the line segment option for freehand drawings, but it's a bad idea to use them.
Make Your Own Units Will Clear Your Default Unit Selection - After creating or editing your units in the Builder, your selected default unit will be cleared. You may need to select a unit of measure other than your desired choice, save Experience Builder and then switch back to your desired choice and save again. This issue is semi-intentional for the following reasons:
- I could not get Experience Builder to recognize changes to the unit list and unlock the save button.
- The default unit is passed as the index of an array, so creating or deleting units could result in the incorrect unit being selected or an out-of-range error.
Text Color Problems -
- When first selecting a Background Color, you must first change to one of the Standard Colors. After selecting a Standard Color, all of the options will work.
- In all of the Text Color Pickers, dragging the sliders will result in many duplicated copies of the text being edited. Clicking on the sliders will not cause a duplication issue.