Latest Contributions by Brian_McLeer

Is there an ETA for resolving this BUG? It was reported at 1.16 and is still present at 1.19 in DE.  https://support.esri.com/en-en/bug/the-order-of-attribute-fields-changes-in-the-output-whe-bug-000174735 ... View more

Overview https://github.com/brianmcleer/mapswitcher-widget The Map Switcher widget provides a dropdown interface for navigating between different Experience Builder applications while preserving the current map extent and zoom level. The widget captures the URL hash fragment from the source application and appends it to the destination URL. Note: An earlier version of this widget had hardcoded URLs in the code, which prevented it from being shared on the Esri Community. Experience Builder 1.19 introduced breaking changes that required the widget to be redeveloped. This version allows administrators to configure URLs through the widget settings panel, making it suitable for broader distribution. Configuration Settings The widget settings panel contains the sites configuration: Sites Configuration: Label: The display name that appears in the dropdown URL: The full URL to the target Experience Builder application Multiple sites can be added using the "Add Site" button. Sites can be removed using the "Remove" button for each entry. The widget does not require a map widget connection. Widget Functionality The widget displays a dropdown menu with the configured site options. The placeholder text reads "Select map to view". Functionality: When a user selects a destination from the dropdown: The widget captures the current URL hash fragment (everything after the # symbol) This hash contains map state parameters: center coordinates, zoom level, scale, rotation, and spatial reference The widget appends this hash to the selected destination URL The browser navigates to the new application Features: Works with any coordinate system (Web Mercator, State Plane, WGS84, etc.) Preserves center point, zoom level, and rotation URLs configured in settings panel Changelog: 07/23/2026: Updated the Map Switcher widget for Experience Builder 1.21 to resolve TypeScript editor errors, including React component typing and immutable configuration imports. The widget version was also bumped and the latest release is now available on GitHub. 06/04/2026: Added package.json and package-lock.json to the widget. This widget has no third-party dependencies, so there is nothing extra to install. Setup is just the standard npm install in your client folder that you are already doing. Thanks to @SunshineLuke90  for the suggestion and for walking through the packaging approach. ... View more

Enhanced Measurement Widget for ArcGIS Experience Builder Overview https://github.com/brianmcleer/enhanced-measurement-widget 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 Optional 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 7/23/2026 Updated for Experience Builder 1.21 (pnpm). Fixed a draw banner layout issue in narrow widgets and removed console noise. Ships with a tsconfig.json for a clean Visual Studio editing experience; no functional changes. 7/10/2026 Session persistence: measurements can be saved in the browser and restored after page reload (opt-in via new Power Features settings section) Live measurement readout while drawing Multi-select mode: bulk delete with one-click undo, bulk GeoJSON export Sortable measurement list (newest, oldest, name, type) Copy-to-clipboard on every value in the measurement detail view 6/03/26: Added package.json and package-lock.json to the widget. You no longer need to run the manual npm install commands listed at the top of this post. Since the widget lives in your-extensions, Experience Builder installs its dependencies automatically when you run npm install in your client folder, so it is just the standard setup you are already doing. Thanks to @SunshineLuke90  for the suggestion and for walking through the packaging approach. 5/14/2026: (1.20 version only) UI/UX Updates Import/Export XML from settings to transfer setting configurations between applications or for backup 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: Brian_McLeer_1-1769189405136.png   After Patch: Brian_McLeer_0-1769189385100.png   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