Enhanced ExB Coordinate widget
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
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
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
@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.
