Enhanced Locate Widget 1.9 - 8/4/22

5425
25
02-07-2022 01:13 PM

Enhanced Locate Widget 1.9 - 8/4/22

Note: This is an EB 1.9 Widget (not backward compatible).

 Live Preview Site

Changes in 1.9

  • Updated for EB 1.9

Older Changes in 1.7.1:

  • Auto Close Popup now works.
  • Added "Coordinate precision in popup results" setting that controls the number of digits to the right of the decimal for coordinates listed in the pop-up.
  • Setting the "WKID for coordinates displayed in popup" now controls the only displayed coordinates in the popup (no longer does it display the map WKID or the set WKID and Lat and Lon coordinates). If this value is not set then coordinates will be displayed as the maps WKID.
  • Fixed some widget settings getting entered in the config as strings instead of numbers as expected.

Features:

  • Locate an address (like the search widget, but gives you the ability to limit the address search to the maps current extent).
  • Locate coordinates using user defined spatial reference coordinates (i.e. DMS, State Plane, Etc).
  • Reverse Geocode capability called Address Inspection. Address Inspection is clicking on the map and getting the address of the map click point.

To install this widget extract the contents of the zip file to your EB\client\your-extensions\widgets. So once you extract the whole path would look like: \client\your-extensions\widgets\eLocate. Refresh your client and server windows (easiest way is to close both and 'npm start' them like you normally do to start EB). Now the draw widget will appear in your apps widget menu. Add the widget to your app. Now use the widgets settings panel to configure the widget.

Enjoy, Robert

Attachments
Comments

 

Hi Robert,

 

Thanks a million for porting so many of your essential WAB Custom Widgets over to the EXB platform!

 

All your Custom Widgets for Experience Builder Version 1.7 are working flawlessly on our Parcel Map

 

  • Measurement Widget
  • Draw Widget
  • Print Widget
  • Enhanced Locate Widget
  • Feature Panel Widget

 

You would have to use Firefox to open this:

 

http://davidapps.net/exb/ParcelMapV6/

 

DavidDas__GISP_0-1645767778949.png

 

I had a simple enhancement request on the Popup for the Address Inspector Tool in your Enhanced Locate Widget.

 

The Popup shows both the Map Coordinates and the Lat/Long Coordinates.

The Map Coordinates are displaying Web Mercator (WGS84) meters:

X = -12478362 m

Y = 3954782 m

 

DavidDas__GISP_1-1645767778952.png

 

Can you add an option to display only the Lat/Long Coordinates like so:

 

DavidDas__GISP_2-1645767778955.png

 

This would make the Popup less cluttered.

 

I see there is an option to specify the WKID for the coordinates displayed in the Popup.

 

I have set it to 102100 = Web Mercator (WGS84) meter

 

DavidDas__GISP_3-1645767778968.png

 

Best regards,

 

David Das

 

@RobertScheitlin__GISP @DavidDas__GISP  - I downloaded the Zip file, extracted, and copied the contents of such to:

\client\your-extensions\widgets\eLocate\

I did do the 'npm start' (ie. restart) of the client.  While I can add and configure the Enhanced Locate in EB, when in preview mode I click on the widget icon and see a blank dialog box:

JohnSasso2_0-1645804197570.png

 

 

Below is the configuration I have for it in EB:

 

JohnSasso2_1-1645804252284.png

 

@JohnSasso2 

Any errors in the browsers web console?

@RobertScheitlin__GISP yes this one, which I circled in red, below, which is new following the add of the widget:

JohnSasso2_0-1645806688281.png

 

@JohnSasso2 

That is a warning. None of those warning or errors have anything to do with the eLocate widget. Have you tried shutting down EB and restarting?

@RobertScheitlin__GISP yes I did, restart of both server and client.

To implement the widget, once I copy the contents of the zip file to \client\your-extensions\widgets\eLocate\, do I need to modify any of the files in there?

@JohnSasso2 

Nope. Just to check:

  1. you are using EB Developer 1.7 right?
  2. You have added the contents of the zip file (which is a folder named eLocate) directly under \client\your-extensions\widgets\? What I am asking is the is not "\client\your-extensions\widgets\eLocate\eLocate"

@RobertScheitlin__GISP yes, using EB 1.7

Yes, here is what I see in File Explorer

JohnSasso2_0-1645812710018.png

 

@JohnSasso2 

I have never seen this before...

  1. Which app template are you using?
  2. Have you tried creating a new app?

@DavidDas__GISP 

New version available that addresses your enhancement request.

@RobertScheitlin__GISP  sigh.  I feel like an idiot.  I had all 4 eLocate tabs disabled.  When configuring w/o looking closely, I thought I was enabling all four, since it seems this has been the way to enable things in other widgets.   It is now working.  Sorry my bad!

JohnSasso2_0-1645816101541.png

 

Hi Robert,

 

Thanks so much for your superfast response!

 

I will test it out today.

@JohnSasso2 

Maybe I need to look at some warning that will be displayed if you disable all the tabs.

@RobertScheitlin__GISP  also, your new widget is working fine.  I've been testing it out.  Thank you!

 

Hi Robert,

 

I have tested your enhancement.

 

I tested these 6 cases setting different WKID values for the Coordinates displayed in the Popup.

 

Everything is working like a charm, except that the minimum precision defaults to 2.

You cannot change the minimum precision to 0

I don’t thing anyone would complain about this. In general, it is good to display at least 2 decimal places.

 

Here are the details of my testing.

 

Case 1: Default Precision Setting = 2 worked

 

WKID = 102100

Web Mercator (WGS84) Meters

Coordinate Precision = 2

 

DavidDas__GISP_0-1645825587118.png

 

DavidDas__GISP_1-1645825587133.png

 

Case 2: Precision setting = 0 did not work

 

WKID = 102100

Web Mercator (WGS84) Meters

Coordinate Precision = 0

 

DavidDas__GISP_2-1645825587143.png

 

DavidDas__GISP_3-1645825587146.png

 

Case 3: Precision setting = 4 worked

 

WKID = 102100

Web Mercator (WGS84) Meters

Coordinate Precision = 4

 

DavidDas__GISP_4-1645825587150.png

 

DavidDas__GISP_5-1645825587158.png

 

Case 4: Lat/Long, Precision = 6 worked

 

WKID = 4326

Decimal Degrees (WGS84)

Coordinate Precision = 6

 

DavidDas__GISP_6-1645825587163.png

 

DavidDas__GISP_7-1645825587170.png

 

Case 5: Lat/Long, Precision = 0 did not work

 

WKID = 4326

Decimal Degrees (WGS84)

Coordinate Precision = 0

 

DavidDas__GISP_8-1645825587174.png

 

It appears the minimum precision defaults to 2

 

DavidDas__GISP_9-1645825587181.png

 

Case 6: Stateplane Feet, Precision = 0 did not work

 

WKID = 2868

Stateplane AZ Central (NAD83-HARN) feet

Coordinate Precision = 0

 

DavidDas__GISP_10-1645825587196.png

 

The minimum precision defaults to 2 decimal places

 

DavidDas__GISP_11-1645825587203.png

 

Conclusion:

 

The Popup honors the WKID value that is set.

It can be Web Mercator (WGS84) meters, or Decimal Degrees (WGS84) or Stateplane feet.

Any precision value can be set so long the minimum precision is 2.

 

Best regards,

 

David Das

 

@DavidDas__GISP @RobertScheitlin__GISP 

I would like to propose a feature addition to the Enhanced Locate widget.  I think I mentioned to one of you that it would be very helpful to have a widget where, when you pin an arbitrary point on the map, a pop-up box will show you the GPS coordinates and links to one or more maps which, if you click on their links, will bring you to another browser window for the map at that location.

For example, a link to Google Maps would bring you to Google Maps in a separate browser window at that location.  Similarly for Bing Maps, Caltopo, Open Street Maps, etc.   I thought the Enhanced Locate widget widget would be the best place to add this, but my TypeScript programming skills, esp in the EB environment, are practically nil.   As shown below, I hacked some of the code in widget.ts to include logic to show the custom links to the following maps crafted to go to the location:  Google Maps, Google Maps Street View, Google Earth, Bing Maps, Open Street Maps, and Caltopo.

JohnSasso2_0-1646321004378.png

Thus, when I use Inspector to pin-point a particular location on the map, the pop-up box presents to me links to the various aforementioned maps.  Click on a link (e.g. "location link" for Google Maps), and another browser window to that map at that location will come up.

As I said, my coding skills in TypeScript and EB are to where its not possible for me to add such a feature at this time or even in the near term.   I would be happy to share the code with you to examine.  Yes, I admit what I did was a kludge and the interface could be much nicer.

@RobertScheitlin__GISP Using EXB 1.9 this Widget just spins. 

MicahWilliamson_0-1659546141346.png

Am I missing something? 

Also When I do get it to work Does this Locate widget search features or just addresses? 

Can we use a URL Parameter to activate it? 

@MicahWilliamson I have yet to test EB Dev 1.9. There could be some breaking changes. What error is in your browsers web console?

This widget searches addresses, locates user entered coordinates, and returns addresses based on user clicking on the map.

Currently there are no URL parameter capabilities.

@MicahWilliamson I have now updated the widget for 1.9's breaking changes.

This has been a very helpful widget, thank you! 
Minor coding flaw I found: the address locator "no results found" message is never displayed due to the else statement setState command in Line 406 of Widget.tsx not opening the results tab with a selTab: 'resultslabel' setting. 

Adjusted line:  this.setState({showProgress: false, locating: false, selTab: 'resultslabel'})

 

 

Hi @RobertScheitlin__GISP,

This is a great app and one I've used many times in WAB. Thanks for creating it. I'm just wondering if it will work in EB in ArcGIS Portal 1.9.1? Or will it only work in the Dev edition of EB?

@JohnKennedyTailteEireann The ability to add custom Experience Builder widgets to an Enterprise portal was added with Enterprise 11.0. You will need to use Developer Edition.

@RobertScheitlin__GISP Hey Robert! Is this widget forward compatible with ExB 1.13? There have been several breaking changes in the last couple of releases and I was unsure if it has been tested for use in the current build?

I am running ExB Dev 1.14 and when I added this widget it keeps giving me "Cannot read properties of undefined (reading 'addEventListener')"  I am new to this, therefore I am inexperienced.  Any suggestions or fixes would be greatly appreciated.

@johndixonldeq, a lot of changes were made in 1.14 that appear to be breaking widgets written for previous versions.  Unfortunately, Robert's not around anymore, and it doesn't look like anyone is willing to fill his large shoes yet in terms of widget development for the masses.

Version history
Last update:
‎08-04-2022 11:31 AM
Updated by: