Advanced Draw Widget for ArcGIS Experience Builder

An advanced drawing widget for ArcGIS Experience Builder with a full measurement system, live tooltips, snapping, buffers, line arrows, rich text styling, a My Drawings manager with local-storage save, and import/export across GeoJSON, KML, zipped shapefile, and legacy JSON.

• Authors: Brian McLeer (City of Grand Junction, CO) and Jeffrey Thompson (City of Arlington, TX)
• Built and tested on: ArcGIS Experience Builder Developer Edition 1.19 and 1.20
• Minimum supported: Developer Edition 1.17 (Enterprise 11.5)
• Discussion, feedback, and original post: Advanced Draw Widget on Esri Community

The widget folder itself lives in draw-advanced/. This repo wraps it with project files (license, this readme) so it works for both downloading a release and cloning.

Getting the widget

There are two ways to get it. Both end with you placing a draw-advanced folder into your Experience Builder install.

Option 1: Download a release (recommended)

1. Go to the Releases page.

2. Under the latest release, download the draw-advanced.zip asset.

3. Extract it. You will get a draw-advanced folder.

   The zip is the widget only. The Visual Studio type shims in the repo (draw-advanced/src/exb-editor-shims*.d.ts) are left out on purpose: their ambient declare module blocks are not file-scoped and would rewrite the react, jimu and esri types for every other widget in your your-extensions folder.

Option 2: Clone or download the repo

git clone https://github.com/brianmcleer/draw-advanced-widget.git

Or use the green Code button above and choose Download ZIP. The draw-advanced folder is inside. If you go this route, delete draw-advanced/src/exb-editor-shims.d.ts before building (see the note under Option 1); nothing else depends on it.

Installation

1. Copy the draw-advanced folder into your Experience Builder install:

   <ArcGISExperienceBuilder>/client/your-extensions/widgets/draw-advanced
   

   Keep manifest.json directly inside draw-advanced/, not nested a second level deep. Nesting is the usual cause of the widget not registering.

2. From the Experience Builder client directory, run the standard install for your version:

   pnpm install      # Experience Builder 1.21 and later
   npm install       # Experience Builder 1.20 and earlier

   Because the widget includes a package.json with both lockfiles (pnpm-lock.yaml, package-lock.json) and lives in your-extensions, Experience Builder installs its dependencies automatically. You do not install shp-write, shpjs, jszip, or proj4 by hand.

3. Start (or restart) the client and refresh the Builder window. The widget appears under Insert Widget > Custom.

If you add the widget to an Experience Builder that is already running, re-run the client install and restart the dev server so the new dependencies are picked up.

Requirements

• ArcGIS Experience Builder Developer Edition 1.17 or later. 1.21 (Maps SDK 5.1) is the build/test target; 1.19 and 1.20 (Maps SDK 4.3x) still work.
• The measurement functions use ArcGIS Maps SDK 4.32 features, so editions earlier than 1.17 are not supported.

Dependencies (installed automatically, pinned in draw-advanced/package-lock.json and draw-advanced/pnpm-lock.yaml): @mapbox/shp-write, shpjs, jszip, proj4. seamless-immutable resolves from the jimu framework.

Features

• Drawing tools for point, line, freehand line, text, rectangle, polygon, freehand polygon, circle, and an optional triangle tool, plus optional curve tools enabled in the widget settings.
• Real-time measurement (area, perimeter, length, radius, coordinates) with geodetic or planar calculation, custom units, per-segment labels, and configurable precision.
• Live tooltips, multi-layer snapping with a 15 pixel tolerance, and an optional alignment grid.
• Buffers (with outline-only and independent custom fill/outline colors), line arrows, an expanded text-styling tool, and drawing-layer management.
• A My Drawings manager: local-storage save, sorting, filtering, locking, notes, undo/redo, bulk operations, and draw-order control.
• Import and export across GeoJSON, KML, zipped shapefile, and legacy JSON, plus EB Draw widget compatible JSON.
• Optional integration with the Mailing Labels and Identify By Query custom widgets.
• Configurable settings: per-tool and per-feature toggles, default buffer and measurement options, and XML import/export to copy a configuration between applications.

See draw-advanced/README.md for the full feature reference, known issues, and changelog.

Feedback and issues

Please report bugs and enhancement requests either on the Esri Community blog post or in this repo's Issues tab.

Languages

The widget follows the Experience Builder app language: the ArcGIS profile language, the browser, ?locale=xx in the URL, or the Language Switcher widget. Interface text lives in src/runtime/translations/default.ts (and src/setting/translations/default.ts for the settings panel), with language files for all 39 Experience Builder locales made by exb-i18n-kit.

• Esri's own Experience Builder translations are used first, so shared words match the out-of-the-box widgets.
• Other strings come from the kit's shared translation memory. Machine translations are marked for review.
• Anything not translated yet shows in English.
• Coverage per language: draw-advanced/i18n/STATUS.md.
• To fix a translation for every widget that uses it, open a pull request on memory/<locale>.json in exb-i18n-kit.

License

Licensed under the Apache License 2.0. Copyright City of Grand Junction, CO.

Credits

Created by Brian McLeer (City of Grand Junction, CO) and Jeffrey Thompson (City of Arlington, TX), building on contributions from Robert Scheitlin, Adrien Hoff, Mattias Ekström, Jérôme Ray, and Nicholas Cramer. Thanks to the Esri Experience Builder community for feedback and testing.