Latest Contributions by Brian_McLeer

Enhanced Measurement Widget for ArcGIS Experience Builder Overview This custom widget provides comprehensive measurement capabilities for ArcGIS Experience Builder applications. The widget was built on ArcGIS Experience Builder Developer Edition 1.18. The widget supports eight measurement tool types with extensive configuration options and export functionality. End users can create measurements and export them in multiple formats. This is the first release of the widget and should be considered a beta version. Users are encouraged to provide feedback on bugs, requested enhancements, or suggested changes through comments on this post. Required Dependencies Before implementing this widget, install the following npm packages: npm install @turf/turf npm install jspdf These dependencies provide geometric calculation functionality (Turf.js) and PDF export capabilities (jsPDF). Developer Configuration (setting.tsx) The setting.tsx file provides developers with a comprehensive configuration interface within Experience Builder. The configuration is organized into multiple sections that control widget behavior and appearance. Map Connection Developers select which map widget the measurement widget will interact with using the MapWidgetSelector component. This establishes the connection to the map view where measurements will be drawn. Measurement Tools Configuration The widget supports eight measurement tool types: Point measurement (coordinate display) Distance measurement (linear distance) Area measurement (polygon area) Circle measurement (radius and area) Rectangle measurement (dimensions and area) Triangle measurement (dimensions and area) Freehand polyline (drawn distance) Freehand polygon (drawn area) Each tool can be individually enabled or disabled. Developers can configure: Default tool selection on widget startup Auto-start behavior to activate the default tool immediately Continuous drawing mode for repeated measurements without tool reselection Auto-clear behavior when switching between tools Unit Configuration Default measurement units are configurable for: Linear units: meters, kilometers, feet, miles, yards, nautical miles Area units: square meters, square kilometers, square feet, square miles, acres, hectares Users can change units at runtime, but developers set the initial defaults. Segment Labeling For polyline and polygon measurements, segment labeling can be enabled to display individual segment distances. Configuration options include: Enable/disable segment labeling feature Default visibility state for segment labels Auto-save segments option Customizable segment label prefix (default: "Seg") Segment label font size (8-24px range) Display Features Toggleable features that developers can enable: Statistics panel showing count, total distance, and total area across all measurements Tooltips during active drawing Snapping to vertices and edges Live measurement display while drawing Total distance display for polyline measurements Each feature includes a configurable default state (enabled/disabled on startup) and visibility toggle option (whether users can change the setting). Coordinate Display Coordinate format options include: Decimal Degrees (DD): 34.0522, -118.2437 Degrees Minutes Seconds (DMS): 34°03'08"N, 118°14'37"W Degrees Decimal Minutes (DDM): 34°03.133'N, 118°14.622'W Developers can set the default format and configure whether coordinates display in Web Mercator or the map's spatial reference. Import/Export Configuration Export functionality supports four formats: JSON: measurement data with geometry and metadata CSV: tabular data with coordinates and measurements GeoJSON: standardized geographic data format PDF: formatted document with measurement summary Developers can customize button text for import and export operations and configure default export format. Symbol Styling Symbol appearance is fully configurable: Point symbol size (4-32px) Line width (1-10px) Polygon outline width (1-10px) Fill opacity (0-100%) Color palette: 10 customizable colors for different measurement types Label Customization Measurement label appearance can be configured: Font size (8-24px range) Label position (center, top, bottom) Label background color Label text color Label visibility controls User Interface Customization Developers have extensive control over the UI: Button layout: 2-column, 3-column, 4-column, or vertical Compact mode for space-constrained layouts Always show button text option Show/hide widget title Custom widget title text Show/hide hint messages Show/hide Clear All button Show/hide icons on buttons Custom text for empty state message Custom measurements header text Tool Button Text Overrides Every measurement tool button has customizable text: Point tool button Distance tool button Area tool button Circle tool button Rectangle tool button Triangle tool button Freehand line tool button Freehand area tool button Additional button text overrides include: Clear All button Undo button Redo button Show/Hide Statistics toggle Show/Hide Segment Labels toggle Show/Hide Tooltips toggle Show/Hide Snapping toggle Import button Export All dropdown text Dialog Customization Confirmation dialogs have configurable text: Clear All dialog title Clear All dialog cancel button text Clear All dialog confirm button text Toggle Display Configuration Developers can configure which toggle controls are visible to end users: Show Statistics toggle Show Segment Labels toggle Show Tooltips toggle Show Snapping toggle Reset Functionality A "Reset All Settings to Defaults" button allows developers to quickly restore all configuration options to their default values during development. End User Functionality (widget.tsx) The widget.tsx file implements the runtime functionality that end users interact with in published Experience Builder applications. Measurement Tools Users access measurement tools through a button grid. The active tool is highlighted, and clicking a tool button either activates it or deactivates it if already active. Tool functionality: Point Tool: Single click places a point. Displays X,Y coordinates in the configured format and coordinate system. Distance Tool: Creates polyline measurements. Each click adds a vertex. Double-click completes the measurement. Displays total distance and optionally shows individual segment distances with labels. Area Tool: Creates polygon measurements. Click to add vertices, double-click to close the polygon. Displays total area and perimeter. If segment labeling is enabled, shows distances for each edge. Circle Tool: Click to set center point, drag to set radius, click again to complete. Displays radius, diameter, circumference, and area. Rectangle Tool: Click to set first corner, drag to opposite corner, click to complete. Displays width, height, perimeter, and area. Triangle Tool: Three clicks create a triangle. Displays three side lengths, perimeter, and area. Freehand Polyline: Click and drag to draw freely. Displays total distance. Release completes the measurement. Freehand Polygon: Click and drag to draw freely. Release automatically closes the polygon. Displays area and perimeter. Live Measurement Display While actively drawing, a live measurement value appears at the cursor showing the current measurement in real-time. This provides immediate feedback before completing the measurement. Unit Conversion Each measurement includes dropdown controls to change display units without redrawing. Distance measurements can convert between all configured linear units. Area measurements can convert between all configured area units. Unit changes apply immediately to the displayed values. Measurement Management Completed measurements appear in a list below the tools. Each measurement entry shows: Measurement type icon Timestamp of creation Primary measurement value with unit selector Expand/collapse control for additional details Expanded measurements display: All calculated values (e.g., for circles: radius, diameter, circumference, area) Coordinates (start/end points or vertices depending on geometry type) Segment details for polylines and polygons Export dropdown for individual measurement export Segment Labels When segment labeling is enabled, polyline and polygon measurements display individual segment distances directly on the map. Each segment shows: Segment identifier (e.g., "Seg 1", "Seg 2") Distance value with units Segment labels remain visible and update if measurement units are changed. The expanded measurement panel lists all segments with start/end coordinates. Statistics Panel When enabled, the statistics panel displays aggregate information: Total count of all measurements Combined total distance from all polyline measurements Combined total area from all polygon measurements Statistics update automatically as measurements are added or removed. Coordinate Display Modes Point measurements and polyline/polygon vertex coordinates can display in two modes: Web Mercator coordinates (WKID 3857) Input spatial reference (map's coordinate system) Users toggle between modes using a coordinate system selector. The widget handles transformation between coordinate systems automatically. Undo/Redo Functionality The widget maintains a history of all measurement operations: Add measurement Delete measurement Modify measurement (unit changes, coordinate system changes) Undo and redo buttons appear in the toolbar when history is available. History persists during the session but clears when the application is closed. Import Functionality The Import button opens a file selector. Supported import formats: JSON: imports measurements with full metadata GeoJSON: imports geometric features, creates appropriate measurement types The widget validates imported data, transforms coordinates to the map's spatial reference if needed, and adds measurements to the list. An import success dialog displays the number of measurements imported. Export Functionality Users can export measurements individually or all at once. Export formats: JSON Export: Creates a JSON file with complete measurement data including: Measurement type Geometry coordinates Calculated values Units Timestamp Metadata CSV Export: Generates a tabular CSV file with columns for: Measurement type Primary value Units Coordinates (formatted string) Timestamp GeoJSON Export: Produces standard GeoJSON with: Feature collection structure Geometry in geographic coordinates (WGS84) Properties with measurement values and metadata Coordinate transformation applied automatically GeoJSON exports can be re-imported in future sessions to restore measurements. PDF Export: Creates a formatted PDF document using jsPDF with: Measurement summary header List of all measurements with values and units Timestamp information Coordinate details where applicable Geometric Calculations The widget uses Turf.js for accurate geometric calculations: Distance calculations use geodesic methods for accuracy across large areas Area calculations account for coordinate system distortion Circle measurements use true geodesic circles, not map projection circles Coordinate transformations preserve geometric accuracy Clear All Functionality The Clear All button removes all measurements from the widget and map. A confirmation dialog appears before clearing to prevent accidental deletion. Dialog text is configurable by developers in the settings. Responsive Design The widget adapts to different panel widths: Button layout adjusts based on configured column count Measurement list scrolls independently when content exceeds height Dropdown menus position intelligently to avoid viewport edges Compact mode provides optimized layout for narrow panels Error Handling The widget includes error handling for: Module loading failures (ArcGIS JavaScript API modules) Invalid import data Geometric calculation errors Coordinate transformation failures Error messages display in the widget when operations fail, allowing users to understand and correct issues. Changelog 3/26/26: Resolved issue for 1.20. Version 1.19 and 1.20 available for download. Please report any issues on this blog post.  3/25/26: DE 1.20 broke something in this widget, need to troubleshoot 2/26/2026: Add custom measurement units via settings to appear in linear and area unit drop downs. Thank you @ncramer11 for idea and beta testing Add import/export XML in settings to transfer/backup settings configurations Updated settings UI to match more to Jimu standards 1/28/2026: Add ability to edit vertices of existing measurements to update as needed.  1/25/2026: UI BUG where show segment labels, show tooltips, and enable snapping would overrun at certain widths of widget container.  Before patch:   After Patch:   12/10/2025: Theme Typography Update – All widget text now uses Experience Builder’s Theme Typography for consistent styling. Accessibility Improvements – Added multiple WCAG-compliant updates across widgets for better usability and accessibility.     ... View more

In ArcGIS Experience Builder, it would be very useful to have the ability to dynamically resize the left Outline panel and the right Settings panel by dragging their edges. Currently, both panels have fixed widths, which can feel restrictive when working with complex applications. For example, the Outline panel often contains long layer or widget names that get cut off, making it hard to distinguish between items at a glance. Similarly, the Settings panel—especially when configuring detailed map layers, Arcade expressions, or widget settings—can feel cramped, forcing constant horizontal scrolling or tooltip hovering just to read full labels or property names. Allowing users to expand these panels would make the design experience smoother and more efficient. Wider panels would provide better visibility into hierarchical structures, reduce the need for excessive scrolling, and make it easier to edit long text fields or view configuration details without losing context. This flexibility would help users tailor the workspace to their monitor size and workflow—whether they prefer a compact view for layout adjustments or a wide, detailed view for configuration and debugging.       ... View more