Advanced Draw Widget Improvements: Import, Export, Save Drawings, Tool Tips, Snapping, Measurements
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/27/2025:
Bug fix: When going from Draw to My Drawings with a tool selected, the tool will stay active so you can still draw graphics when on the My Drawings Tab. The ZIP has been updated to resolve this bug.
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.
- 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.
