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

Brian_McLeer

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

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.