Advanced Draw Widget Improvements: Import, Export, Save Drawings, Tool Tips, Snapping, Measurements

3665
40
05-28-2025 07:15 AM
Brian_McLeer
Frequent Contributor
26 40 3,665

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/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.JeffreyThompson2_1-1748439750037.png

       

    • 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.JeffreyThompson2_2-1748439913820.png
40 Comments
JeffreyThompson2
MVP Frequent Contributor

Give this a thumbs-up if you download. @Brian_McLeer deserves MVP status!

polkor_mcavoye
New Contributor

@Brian_McLeer this is really exciting! I can't wait to test it out! 

RodWoodford
Regular Contributor

Great work All. Can't wait to test tomorrow.

cheers

Rod

ElisabethFenn
Occasional Contributor

Wow, this is fantastic!

Marshal
Frequent Contributor

Amazing job!!  Really appreciate the effort and collaboration for everyone involved here!

I will be publishing this to my production apps in the coming week.

Thanks!!!

RodWoodford
Regular Contributor

Hi All,

Set the widget up and its really well done. The segments lengths, export/import functions are fantastic. Really appreciate the work gone into this widget. I hope the development continues as we will be going live with this widget as we can't see ESRI evolve there own draw widget to much. It really helps us start to transition out of WABD. Well done.

cheers

Rod 

Brian_McLeer
Frequent Contributor

Thank you for the feedback all. If you see any issues or enhancements that may be possible, please feel free to post them in this thread. 

PierreloupDucroix
Frequent Contributor

Hello,

great job ! The import/export functionality is very useful.

We once developed similar widget for WAB 😉https://github.com/magis-nc/esri-webappbuilder-widget-eDraw

I am wondering whether it could be possible to list custom styles that are shared with the Portal ?

Following this documentation, we can share a style and use it in the mapviewer for feature symbology, but it could be very useful to use these styles in the draw widget, too.

Brian_McLeer
Frequent Contributor

Thank you @PierreloupDucroix, we can make a note to look into this, but my time to spend on this widget is limited now. Thank you for the eDraw widget, that was motivation to create this widget as users in my organization did not like that import/export/save function went away with default EB draw widget. Used that as motivation and a framework to work with @JeffreyThompson2 to build upon the custom draw widget. 

Marshal
Frequent Contributor

Been using the widget a decent bit now, and it is absolutely great!  Just have a couple issues to report.

Major

  • When renaming a text object in My Drawings; the text value is replaced by the new given name.
    • It is pretty useful to give text annotations meaning names for reference in My Drawings, but not possible currently
  • When import json with text objects using the "Add" method; the text value is replaced by the name
    • Using "Replace" method correctly preserves the text value

Minor

  • While using Edit mode, the symbol selector is not synced with the chosen graphic geometry type and users are unable to change the symbol style (if not geometry has been initialized yet), or potentially shown the wrong symbol type for the selected geometry (e.g. point instead of polygon)
    • It would be handy if selecting a graphic in the map using Edit mode set the geometry type for the symbol selector, so that it stays in sync.
    • Currently the symbol selector is synced with the last chose graphic type.  So if a user draws a point, then deactivates Draw mode and goes into Edit mode.  Selects a polygon in the map and opens the symbol selector, it will then show styles for point geometry instead of polygon.
    • Minor issue since restyling graphic in My Drawing works as expected, and is likely a better workflow
  • Default UI does not translate well to dark mode apps, but was easily resolved with some restyling for my app theme (yes, I know dark mode was a choice!!)

Enhancement

  • Would be useful to change the layer/draw order for graphics in My Drawings, but I realize that is likely no easy task and a low priority enhancement.

Thanks again for all the hard work on this widget!

Brian_McLeer
Frequent Contributor

Thank you @Marshal for the feedback, I sent you a direct message to get more information. 

OneSpatialDude
New Contributor

Does this work in Enterprise 11.5? I keep getting a failed to load error. I was able to load the SaveInstance widget without issue so trying to figure out what I'm doing incorrectly.

JeffreyThompson2
MVP Frequent Contributor

@OneSpatialDude I'm not sure. The widget was built for 1.17. The compatibility table has not been updated for Enterprise 11.5. @Jianxia, please keep this table up to date. It is very important.

You might be able to make it work by changing the version in the manifest.json to 1.16 and compiling in that version of Developer Edition. I don't think we used any very new features from the API. 

Edit: The measurement functions use several API features that were introduced in the 4.32 version of the API. This widget will not work in any version before 1.17.

Brian_McLeer
Frequent Contributor

Update on 7/23/25: Tested widget on EB DE 1.18 and works as normal, but if anyone encounters issues in 1.18, please post them here. 

MattiasEkström
Frequent Contributor

Thanks for this widget that solves a lot of missing functionality in the draw widget!
I still need to customize it a bit, mainly translating to Swedish, but also some minor UI adjustments and maybe adding some new functionality if I succeed.
However when adding this wdget code to my Visual Studio Code project I get 280 problems only in the widget.tsx file. The code seems to be working fine but I think it is ESLint that has a lot of complaints.
I set up my developement enviroment accorrding to the documentation here: https://developers.arcgis.com/experience-builder/guide/getting-started-widget/ inclunding ESLint.

Do you guys use ESLint? and if so, how do you handle all the problems and warnings?

Brian_McLeer
Frequent Contributor

Hi @MattiasEkström, thank you for the feedback. In my setup of VS I am not using ESLint. I would be curious to see any modifications you make for new functionality when it is ready!

TobySemroc
New Contributor

Hi @Brian_McLeer we are stuck at Enterprise 11.3/EB Dev Edition 1.14 for now. Is there a way to get a previous build of this widget that is compatible with 11.3? 

Brian_McLeer
Frequent Contributor

Hello @TobySemroc. Unfortunately I do not have EB DE 1.14, I built this in 1.17 and now I am on 1.18. However, our organization is on Enterprise 11.2 (soon to be 11.5) and we have had no issues using the latest version of DE as they are released. On one support case I had with Esri, they said it is best practice to stay within the compatibility matrix between EB DE and Enterprise, but usually it does not cause issue. If you are able to go to 1.17 or 1.18, I would recommend that. 

MattiasEkström
Frequent Contributor

Hi @Brian_McLeer, At first I really liked the idea of the IDE telling me as I type if the code is correct or not. I missed that in WAB development coming from Flex and actions script years ago, but I'm starting to question ESLint because it's lying to me.
Apart from all the problems in this widget code that I can just ignore, my first addition is a new draw style to draw arrows. It's really just a copy of the polyline tool, but it adds an arrow marker at the end of the line. ESLint is telling me that there is no marker property on the SimpleLineSymbol, but the documentation says it's been there since ArcGIS Maps SDK for JavaScript 4.16 , pretty annoying...

Brian_McLeer
Frequent Contributor

@MattiasEkström I had a user call and ask about the arrows as we had that in our WAB apps, and not currently present in our EB apps. That would be a nice feature to add. 

McKinneyPatrick_PA
Occasional Contributor

I tried to add this widget to my Portal using the advice found at https://doc.arcgis.com/en/experience-builder/11.4/configure-widgets/add-custom-widgets.htm.

It appears this method expects a "dist" directory.  Is there a way that the downloaded zip can be built and a "dist" folder can be created?

Or is this custom widget only intended to be used with Developer Edition of Experience Builder?

 

JeffreyThompson2
MVP Frequent Contributor

@McKinneyPatrick_PA As this Widget was developed with Developer Edition 1.17, the earliest compatible version of Enterprise is 11.5.

For general information, please see this comment as to why the dist folder is not included and what you can do about it.

cdevault_pickett
Regular Contributor

@Brian_McLeer I have this widget deployed on EB 1.18 and Enterprise 11.4 and we just noticed that the JSON downloads can't be opened by ArcGIS Pro's JSON to Feature tool, Global Mapper or Google Earth. All report something about invalid JSON. ArcGIS Pro returns Error 001558

Has anyone else experienced this? Thanks for this widget! It's solved some of my user's major complaints about Experience Builder. 

It looks to be a units issue, the coordinates are exporting as meters instead of degrees.

  {
    "aggregateGeometries": null,
    "geometry": {
      "spatialReference": {
        "latestWkid": 3857,
        "wkid": 102100
      },
      "paths": [
        [
          [
            -907115.167536391,
            308295.316683118
          ],
          [
            -906101.916831046,
            307208.7882656357
          ]
        ]
      ]
    },
MattiasEkström
Frequent Contributor

I've made some adjustments to the widget. I started by translating everything to Swedish, I thought about replacing hardcoded text and making the widget translatable by the book, but it was a bit much so I took the quick route of just changing hardcoded text, which makes it pretty pointless to share my code here. But I'll try to describe the changes I made for a couple of specific featuresin case anyone finds it useful.

Buggfix:
When user have an active draw tool and clear all graphics, the draw tools gets inactive but the button is still selected so it looks like the drawtool should be selected.
In widget.tsx function ”drawClearBtnClick” either remove the line ” this.sketchViewModel.cancel();” this was my choice, or make sure to disable all buttons.

Added a draw arrow tool:

Make a copy of everything for drawing a polyline but change name to draw arrow or something, and add ’arrow’ to the list of possible drawtools.
In the function ”setDrawToolBtnState” ad a case to the switch(toolBtn) for arrow

case 'arrow':
		cState.currentSymbol = this.sketchViewModel.polylineSymbol;
		cState.currentSymbolType = JimuSymbolType.Polyline;
		this.sketchViewModel.polylineSymbol.marker = {
			color: cState.currentSymbol.color,
			placement: 'end',
			style: 'arrow'
		}
		if(this.state.arrowBtnActive){
			this.sketchViewModel.cancel();
		}else{
		  this.sketchViewModel.create("polyline");
		  cState.arrowBtnActive = true;
		}
		break;

where we’re adding an arrow marker at the end of the line with the same color as the line.

To make sure there are no arrows added to polylines drawn after the user has drawn an arrow we have to add  this.sketchViewModel.polylineSymbol.marker = null; to the polyline and freepolyline cases.

To make sure the arrow doesn’t disappear when editing symbology of an existing line I added this code:

if(this.state.currentTool === 'arrow'){
		this.sketchViewModel.polylineSymbol.marker = {
			color: evt.color,
			placement: 'end',
			style: 'arrow'
		}
	  } else {
		this.sketchViewModel.polylineSymbol.marker = null;
	  }

to the onPolylineSymbolChanged function.

Rotate segment measurements along lines:

I prefer segment measurements to be rotated along the segment lines, but obviously not upside down. I gave it a try and managed to accomplish something that works fairly well.
All modifications where made in measure.tsx

I added a new parameter called ‘angle’ to the function  “_addMeasurement”

const _addMeasurement = async (graphic: ExtendedGraphic, parentGraphic = null, angle:number = null) => {

And after this code (in that function)
 //for new graphics
} else {
    //copy textSymbol and insert measurement text
    const textSymbol = currentTextSymbol.clone()
    textSymbol.text = text

I added:

//If angle is passed, it is a segment mesurement and we will set rotation and override text vertical alignment and set offset based on angle.
			if(angle !== null){
				textSymbol.angle = angle
				textSymbol.verticalAlignment = 'bottom'
				//calculate offset depending on angle
				const distance = 4
				const angleRad = angle * Math.PI / 180;
  				const perpendicular = angleRad + Math.PI / 2;
				textSymbol.yoffset = Math.sin(perpendicular) * distance;
  				textSymbol.xoffset = Math.cos(perpendicular) * distance * -1.5;
			}

I wrote a new function called _calculateAngle  to calculate the angle/rotation

const _calculateAngle = (x1:number, y1:number, x2:number, y2:number) => {
		const dx = x2 - x1;
		const dy = y2 - y1;
		const angleRad = Math.atan2(dy, dx);
		let angleDeg = angleRad * -180 / Math.PI;
		if (angleDeg > 90 || angleDeg < -90) {
  			angleDeg = (angleDeg + 180) % 360;
		}
		return angleDeg
	}

And makes call to that function and passes the angle three times in the liveMeasure function.


//make a templine for each segment and add a measurement for it
for (let j = 1; j < pointArray.length; j++) {
   const tempGraphic = makeTempLineGraphic(pointArray[j - 1], pointArray[j], geometry)
   const angle = _calculateAngle(pointArray[j - 1][0], pointArray[j - 1][1], pointArray[j][0], pointArray[j]    [1])
   _addMeasurement(tempGraphic, graphic, angle)
}


//line must have at least two points
if (geometry.paths[0].length > 1) {
   const lastPoint = geometry.paths[0][geometry.paths[0].length - 1]
   const nextToLastPoint = geometry.paths[0][geometry.paths[0].length - 2]
   const tempGraphic = makeTempLineGraphic(nextToLastPoint, lastPoint, geometry)
   const angle = _calculateAngle(nextToLastPoint[0], nextToLastPoint[1], lastPoint[0], lastPoint[1])
   _addMeasurement(tempGraphic, graphic, angle)
}

 


//calculate polygon segments
} else {
   const rings = geometry.rings
   for (let i = 0; i < rings.length; i++) {
      const ring = rings[i]
      for (let j = 1; j < ring.length; j++) {
          const tempGraphic = makeTempLineGraphic(ring[j - 1], ring[j], geometry)
          const angle = _calculateAngle(ring[j - 1][0], ring[j - 1][1], ring[j][0], ring[j][1])
         _addMeasurement(tempGraphic, graphic, angle)
     }
   }

shodge_fsu
Occasional Contributor

It would be nice to be able to move your measurements slightly off of the lines segments so they are a bit easier to read.  Allowing the user to change their style would help too to make them easier to see and read.  

Thank you for all the work here.  I am using this so I can add a small piece of text in your widget above the drawing mode icons to remind my users to double click to end lines and polygons.  

Brian_McLeer
Frequent Contributor

Sorry to respond to these all in one post, it looks like in a blog post you cannot reply to comments individually. 

@cdevault_pickett I am not sure if we could get the JSON exports to be able to be viewed in ArcGIS Pro / Google Earth / etc. The intent of the JSON was to be read between various Experience Builder clients, but not beyond any EB apps with the Draw Advanced widget. 

@MattiasEkström Thank you for the improvements, we may have a future release down the road with some bug fixes and enhancements, we can look to incorporate these into that release

@shodge_fsu it may be possible, @JeffreyThompson2 did all the heavy lifting for the measurement labels.

Nick_Rorke
Occasional Explorer

@Brian_McLeer We would love to install this in our Enterprise 11.3 site. Can you please provide installation instructions (apologies in advance if you've already done this and we've failed to find this info). Many thanks, Nick

JeffreyThompson2
MVP Frequent Contributor

@Nick_Rorke The earliest compatible version is Enterprise 11.5.

RodWoodford
Regular Contributor

Hi,

Would it be possible to include a rotation on polylines and include directional arrows as part of the enhancement. Great tool. We are upgrading to 11.5 enterprise in the coming weeks and have version 1.18, is there likely to be any issues? I cant afford for this widget to break, our organization love it. Hopefully ESRI will catchup one day.

cheers Rod

JeffreyThompson2
MVP Frequent Contributor

@RodWoodford This Widget runs fine in 1.18 and should be compatible with registering in Enterprise 11.5. We, mostly @Brian_McLeer, are currently working on an update that includes arrowhead options for polylines.

RodWoodford
Regular Contributor

Excellent

RickEhlin__Jr
Occasional Contributor

I just upgraded to 11.5 yesterday and tried to bring this draw advanced widget into my experience builder application....I'm able to get it to show up in my custom widget section of insert widgets, but it never loads.  I've tried a few things, but unfortunately can't seem to get it to work.  Any ideas or help would be appreciated.  Thanks.

 

drawadvancederror 1.png

drawadvancederror 2.png

  

JeffreyThompson2
MVP Frequent Contributor

@RickEhlin__Jr Did you compile in Developer Edition 1.18 before uploading? I am still on 11.3 so I can't upload test myself, but the error suggest the dist folder has not been created yet.

https://community.esri.com/t5/experience-builder-tips-and-tricks/registering-a-custom-widget-in-arcg...

RickEhlin__Jr
Occasional Contributor

@JeffreyThompson2 I did not compile...I was under the impression this widget was already compiled and everything I needed was in the zip file.  I don't have developer edition of any kind....are there any custom widgets that are already compiled and ready to consume in 11.5?  Or do all of the custom widgets posted here need compiling?  Thanks for the response.

cdevault_pickett
Regular Contributor

Thanks @Brian_McLeer , I had a feeling that was the answer regarding the JSON exports.

Brian_McLeer
Frequent Contributor

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

Brian_McLeer
Frequent Contributor

@cdevault_pickett V2 supports GeoJSON Exports

@RodWoodford V2 supports arrows on lines

@Marshal BUG you reported should be resolved in V2

@shodge_fsu in V2 Measurement labels have been improved with custom controls for moving and changing label

@MattiasEkström thank you for label improvements and BUG you reported should be resolved

Special thanks to @JeffreyThompson2 for collaborating on this version so we could get V2 out

shodge_fsu
Occasional Contributor

@Brian_McLeer and @JeffreyThompson2 -- Thank you both for your work on this awesome widget.  The labels look great!  I know you are not looking for more things to do with this widget, but.....

It would be nice while you are drawing a multi-vertex line, each segment's length was displayed with each click, instead of only when you finish the drawiing.  That way if the user has some kind of directions that say, for example, go east for 125 feet, then north for 40 feet, then 600 feet north, they could easily track their progress.  I see how I can do this by turning on snapping and doing 3 individual line segments so this should be a LOW prriority.

Again - thanks for making this widget availible for everyone.

JeffreyThompson2
MVP Frequent Contributor

@shodge_fsu Even easier, you can turn on Tooltips. The Distance value is the segment length and you can also use the Tab key to manually enter a Distance or Deflection.

JeffreyThompson2_0-1760627679636.png

shodge_fsu
Occasional Contributor

@JeffreyThompson2 

Brilliant!  Just s short explanation in my splash page and I got it covered.  

Thanks for the tip

About the Author
GIS Administrator/Developer at City of Grand Junction, CO.