Enhanced Measurement Widget

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.