topic Re: Enhanced ExB Coordinate widget in Experience Builder Custom Widgets

Enhanced ExB Coordinate widget

FredericPoliart_EsriAU — Fri, 23 Jun 2023 04:17:17 GMT

Hi,

I have create an Enhanced Coordinate Widget display, with quick-link to Google3D

Very simple (just drag&drop and link to the map)
Works with 2D maps and 3D scenes
Shows Zoom level, Scale,
Optionally shows Tilt (3D) and rotation
Can customize background color

How to use

download from https://poliart.com/experiencebuilder/widgets/get-map-coordinates-class.zip
unzip in your ExB Developer Edition: C:\ArcGISExperienceBuilder\client\your-extensions\widgets
Restart your client/servers using npm start
Drop this new widget onto your ExB Map Widget
Settings: select the web-map
Settings: select Show Tilt/ Rotation if you need
done.

Let me know if you encounter any issue

Re: Enhanced ExB Coordinate widget

DavidDas__GISP — Thu, 27 Jul 2023 17:46:38 GMT

Hi Frederic,

We love your Enhanced EXB Coordinate Widget!

It is working like a charm in EXB version 1.12 (July, 2023).

I have added your Custom Widget to the Widget Controller.

This is how your Widget appears:

It tracks the Lat/Long Coordinates as you move the cursor over the map.

When you click on the [Link], it opens a separate Google Maps Window.

https://www.google.com/maps/@33.44849,-112.09398,1131m/data=!3m1!1e3?entry=ttu

Hover your mouse over the Map Layers thumbnail.

Select More

Activate Globe View

Turn on the Satellite Imagery

You can now use your mouse wheel to zoom in/out.

You can hold down the Control Key while dragging your mouse to get the full 3D experience in Google Maps.

To change the Tilt, move the mouse up or down while holding down the Control Key.

To change the Rotation, move the mouse to the left or right while holding down the Control Key.

You did a terrific job with this Custom Widget for making Google Maps readily accessible to all our EXB Apps.

I hope you will continue to keep this Custom Widget updated through all future releases of the Experience Builder.

I had 1 Enhancement Request.

Would it be possible to modify the look and feel of this Custom Widget when added to the Widget Controller?

For example, what if instead of the [Link] I wanted to have a button with the Text = Select Location.

The user would click anywhere on the map to get the map coordinates.

Your Custom Widget would read these map coordinates and launch a separate Google Maps window.

I had a second Enhancement Request.

Could you make this Custom Widget more universal so that the user can attach a custom string to the Lat/Long Coordinates to open some other program like a Pictometry Window?

Let me explain this through an example.

Here is our highly popular Historical Aerial Photography App.

https://gis.maricopa.gov/GIO/HistoricalAerial/

You can enter this Parcel Number in the Search Tool = 112-08-134B

The map will zoom to the Arizona State Capitol Building.

Open the Pictometry Widget.

You get a button to Select a Location.

Click on the State Capitol.

This opens a separate Pictometry Window with this URL:

https://gis.maricopa.gov/pictometry/default.aspx?&qlat=33.44806452764903&qlong=-112.09737111757926

It is very easy to construct this URL if you have the Lat/Long Coordinates.

Your Custom Widget can already pick up these Lat/Long Coordinates.

So, if you allow the user to append a custom string to your Lat/Long Coordinates, I can repurpose your Custom Widget to make it our Pictometry Widget in EXB.

For reference, this is our Config.json file for the WAB version of the Pictometry Widget.

{

"configText": "//gis.maricopa.gov/pictometry/default.aspx?"

}

Once again, thanks a million for all your efforts in creating this valuable Custom Widget and making it freely available to use.

This is the ideal way to launch Google Maps at your selected location to explore the world in 2D and 3D and get the Street View information.

Best regards,

David

Re: Enhanced ExB Coordinate widget

DavidDas__GISP — Fri, 28 Jul 2023 18:27:21 GMT

Hi Frederic,

Success!!!

I was able to modify your custom widget to turn it into our Pictometry Widget.

Your widget captures the Lat/Long coordinates of the centroid of your map and constructs the necessary URL to launch Google Maps in a separate window.

Here is an example of the Google 3D URL:

https://www.google.com/maps/place/@33.44849,-112.09398,489a,35y,0.0h,0t,489m/data=!3m1!1e3

This widget can be easily repurposed to open a Pictometry Window which requires the same Lat/Long coordinates to be formatted in a different way like so.

https://gis.maricopa.gov/pictometry/default.aspx?&qlat=33.44849&qlong=-112.09398

I am including a ZIP file that shows the changes that were made to make create the Google Maps and Pictometry Widgets and make them work in EXB Developer Edition 1.12 with Node.js 14.21.3.

Here is how I got them working side by side.

The Google Map Widget launches the Google Maps Window.

https://www.google.com/maps/@33.44849,-112.09398,518m/data=!3m1!1e3?entry=ttu

The Pictometry Widget launches the Pictometry Window.

https://gis.maricopa.gov/pictometry/default.aspx?&qlat=33.44849&qlong=-112.09398

The included ZIP file contains the fully configured Google Maps and Pictometry Widgets and a ReadMe PDF that contains all the instructions.

I have one enhancement request.

Could you change the [Link] into a large button?

Before:

After:

Best regards,

David

Re: Enhanced ExB Coordinate widget

ZhujingXia — Tue, 03 Oct 2023 14:29:09 GMT

The widget worked in WGS84 coordinate, but my State Plane coordinate system would not work, is there a way to covert the lat and long into state plane?

Thank you .

Re: Enhanced ExB Coordinate widget

Martin1 — Thu, 11 Apr 2024 11:21:43 GMT

Hi,
This seems to be a widget which could help me a lot.
Is there are a newer version available which works with EXB Dev 1.14.
I always get an error message when starting npm in the client directory (without the widget in the respective folder it works fine) :

"Field 'browser' doesn't contain a valid alias configuration
C:\...\ArcGISExperienceBuilder 1.14\client\src doesn't exist"

Re: Enhanced ExB Coordinate widget

FredericPoliart_EsriAU — Thu, 18 Apr 2024 21:17:26 GMT

@DavidDas__GISP @ZhujingXia Good work David! thank you for improving and sharing.

Re: Enhanced ExB Coordinate widget

FredericPoliart_EsriAU — Wed, 01 May 2024 22:21:04 GMT

Interesting feed back.
I invite you to check the Geovonic Connect widget . It has StreetView and Google Map integration as well as many other 3rd party apps (ex : select on the map, click the Geovonic Connect launch button > it launches your Asset application and shows the selected records.

https://www.geovonic.com/geovonic-connect/

https://www.esri.com/partners/boustead-geospatial-a2T5x000008Dt9sEAC/geovonic-connect-a2d5x000006jPlrAAE
https://connect.geovonic.com/

Re: Enhanced ExB Coordinate widget

FredericPoliart_EsriAU — Wed, 01 May 2024 22:22:25 GMT

I haven't tested against 1.14 version of ExB dev edition.

I invite you to check the Geovonic Connect widget . It has StreetView and Google Map integration as well as many other 3rd party apps (ex : select on the map, click the Geovonic Connect launch button > it launches your Asset application and shows the selected records. )

https://www.geovonic.com/geovonic-connect/

https://www.esri.com/partners/boustead-geospatial-a2T5x000008Dt9sEAC/geovonic-connect-a2d5x000006jPlrAAE
https://connect.geovonic.com/

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Wed, 04 Sep 2024 16:40:30 GMT

I was wondering the same thing, @ZhujingXia did you ever find a solution?

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Fri, 23 May 2025 16:36:06 GMT

@FredericPoliart_EsriAU @DavidDas__GISP @ZhujingXia I have worked on David's most recent download above and modified it with the following:

Allow hyperlinks to multiple URLs based on coordinates (Pictometry, Google Street View, Google Maps, Copy Lat/Long.
Have the user hover and click on the map, then click on buttons to be linked out to the page.
Remove Tilt/Rotation
For my application, we publish in this WGS 84 / UTM zone 12N. Functionality has been added to convert from that system to Web Mercator or WGS84, which is a similar issue @ZhujingXia posted about on 10/3/23.
Changed icon.svg to a map pin.
Built on Experience Builder Developer Edition 1.15.

@FredericPoliart_EsriAU @DavidDas__GISP I updated the manifest.json to include you both as authors and and updated description. I can post the updated widget to this message thread, but wanted to get your thoughts first.

Re: Enhanced ExB Coordinate widget

JohnWatson_EBA — Thu, 14 Nov 2024 19:50:12 GMT

Brian, would you mind posting the widget? I would love to drop that in our new ExB Dev template and see how that looks. We didn't have anything like this in WAB, so this would be a great new feature. Thanks!

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Wed, 08 Apr 2026 19:53:01 GMT

@JohnWatson_EBA, someone messaged me last week asking for it so I uploaded the ZIP I provided to them. Please let me know if you have any questions or can suggest improvements. Again, credit goes to @FredericPoliart_EsriAU and @DavidDas__GISP.

Update on 11/19/24: Fixed an issue where closing the widget on the toolbar and reopening it caused the widget to remain active at the previous location with buttons not greyed out, even though no point was present on the map. This issue also prevented users from adding a new point, as the widget continued to launch from the prior location state instead of resetting. The ZIP widget below has been updated with the bug fix.

Update on 12/4/24: Esri released Developer Edition 1.16 today. I tested the widget on this version and it looks to function as it did in 1.15. I ran through the same npm commands as above for 1.16.

Update on 3/24/25: I have added the function to disable pop-ups and feature highlights for when the widget is in use.

Update on 3/27/25: Updated how buttons appear before user clicks on map. The buttons are always present, but greyed out until user clicks on the map.

Update on 3/28/25: Add accessibility updates to add tooltips when hovering over buttons.

Update on 5/21/25: Add links to Bing Satellite Maps and Bing Streetside.

Update on 5/23/25 Added updates to the configurations in DEV so that buttons can be toggled on/off (for example showing Google Maps 3D but turning off Google Street view). The other update is that the URL for Pictometry can now be configured in the DEV settings. With both of these updates, there is no need to go into the code to customize to your parameters and can all be done in Developer Edition.

Update on 11/13/25: Breaking changes going from DE 1.18 to 1.19:

Experience Builder 1.19 introduces two critical breaking changes that prevent widgets built for 1.18 from loading. First, the WidgetState enum has been removed from 'jimu-core', requiring developers to replace WidgetState.Opened with the string literal "OPENED" in widget lifecycle methods. Second, and more significantly, the jsx() function signature has changed to align with React 17+'s new JSX transform—children must now be passed as a children property within the props object rather than as separate function arguments. This means jsx('div', {props}, child1, child2) must be rewritten as jsx('div', {props, children: [child1, child2]}) throughout the entire render method. While this is a substantial refactoring effort requiring updates to every jsx call in your widget, it brings Experience Builder in line with modern React standards and is a one-time migration requirement for the 1.18 to 1.19 upgrade path.

12/10/2025 (for 1.19 version only):

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.

Update on 03/26/26: Breaking changes going from DE 1.19 to 1.20. Fix has been applied, both 1.19 and 1.20 available for use.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Mon, 18 Nov 2024 22:21:12 GMT

I received a few messages about an error. I remembered that I had to run npm install esri-loader on the client folder before npm ci, npm fund, and npm start. After that on the server folder, I ran npm ci, npm fund, and npm start as well.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Wed, 04 Dec 2024 20:38:31 GMT

Update on 12/4/24: Esri released Developer Edition 1.16 today. I tested the widget on this version and it looks to function as it did in 1.15. I ran through the same npm commands as above for 1.16.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Thu, 09 Jan 2025 16:06:26 GMT

I've had a request from a user to disable map pop-ups when the widget is opened. I did not see documentation for this on the API Reference site. Ideally, it would be similar to other widgets like measure, draw, etc. that when the widget is opened, map pop-ups are disabled. Any suggestions on how to accomplish this?

Re: Enhanced ExB Coordinate widget

LefterisKoumis — Thu, 13 Feb 2025 18:19:16 GMT

Does this widget complies with the Google terms or service for their products? Google TOS prohibits the use of their products on non Google based apps.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Thu, 13 Feb 2025 18:59:53 GMT

From my interpretation of the TOS you can you can provide hyperlinks to Google Maps from a popup, attribute table, etc. to Google Maps which this widget does by passing coordinates in the URL.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Mon, 24 Mar 2025 21:56:19 GMT

Update on 3/24/25: I have added the function to disable pop-ups and feature highlights for when the widget is in use. The ZIP file at the top of this thread has been updated.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Thu, 27 Mar 2025 22:44:34 GMT

Update on 3/27/25: Updated how buttons appear before user clicks on map. The buttons are always present, but greyed out until user clicks on the map.

Re: Enhanced ExB Coordinate widget

Brian_McLeer — Fri, 28 Mar 2025 15:00:54 GMT

Update on 3/28/25: Add accessibility updates to add tooltips when hovering over buttons.