kmsagis

Kevin's Custom WAB Widgets

Blog Post created by kmsagis on Jun 9, 2015

This is a list of my custom widgets for the ESRI WebApp Builder.

 

    1. Pictometry

A widget that opens a link in a new window displaying your Pictometry at a location the user clicks on the map. It passes XY and authentication and works with internal ("EFS") viewers and the Pictometry Connect cloud site. In other words you can embed credentials.

Status: 1.2 beta 1, (Works in WAB 1.1-1.3)  See Read Me.  What's new in V 1.2 (July 9, 2015): works for sites in any projection (i.e. state plane etc)

 

Demo link ArcGIS Web Application

GitHub link to code:  kevinsagis/Pictometry-for-WebApp-Builder · GitHub

Discussion: Pictometry and Streetview

 

    2. Streetview

This was created mostly as a proof-of-concept while I was working on Pictometry. For a much better Streetview see either Robert Scheitlin or Stan McShinsky's widgets. However this could be a useful example since it's so simple, for people just starting on widget development.

Status: 1.0 beta 1

UPDATE:::  September 13th, 2016 --- Linking into Streetview from another mapping platform apparently does not conform with Google's Terms of Service.  Widget is therefore discontinued. I'll be researching using Bing StreetLevel API soon.

Demo app link :  ArcGIS Web Application

GitHub link - kevinsagis/Streetview · GitHub

 

 

    3.  Screenshot

This widget is designed to take a screenshot of the entire viewport of the WebApp window. Widgets and all. It then prompts the user to open or save it as an image file. Note: this wdget requires PHP.

 

Screenshot widget at kevinsagis/ScreenshotDemo · GitHub

Widget demo at:  ArcGIS Web Application

 

Why is Screenshot useful? Maybe your users want to see "exactly what you are seeing" which was my user request. This is powered by html2canvas, canvas to blob, and filesaver.js, Credits in documentation.

Status: 1.0 b 1 --   Screenshot works now, as in this link. Note sometimes minor graphical oddities like the button's CSS but these limitations are well explained by the html2canvas author Niklas. Also, minor caveat, at small-scale levels, i.e. zoomed out farther than 20,000, sometimes esri basemap tiles will not load. this appears to be a caveat with html2canvas and sporadic. Report results back. For our purposes this widget now works great!  I may turn it into a 'feedback' widget in the future.

 

I am using this proxy:  brcontainer/html2canvas-php-proxy · GitHub

Note as this uses PHP. There are also Python and ASP.NET proxies. These do not work inside WebApp Builder! WebApp Builder runs on node.js.  PHP will run inside node.js but only after you install some other libraries.  The simple solution I elected to follow is to put this widget into your application after Downloading it out of WebApp Builder, and tweak it after downloading, if desired.\

 

Screenshot "Alternate Version" 1.0:  If you need a true screenshot, use this: ArcGIS Web Application  Git: kevinsagis/ScreenshotAlternateVers · GitHub   it is just About with text instructing users to leverage the screenshot capability built in to the operating system (Windows).  For Mac, you'd add the text to press "Command (⌘)-Shift-3".  This is probably a better method anyway if you need a true screenshot. Javascript can never really do a true screenshot, by design, for security.  The Screenshot 1.0 original version just copies the DOM to a new canvas object, then other code pipes it to a Save As.   This 'alternate' widget has users leverage the screenshot Windows / MacOS provide.  You can edit the text easily in this because it is actually just the About widget.

 

 

 

    4. Selection widget: Enhanced Query

What does it do???  I will be reproducing the functionality of this widget:  Selection Widget Updated Version

Status: 

Enhanced Query 1.0 Alpha 1.    

***update***     4 January 2016--    I have finally begun to upgrade to WAB 1.3 and it appears it partially breaks this widget. I will work on it..hopefully sometime Q1.

 

It fully works, though with one service at a time. This is a 'alpha' release. I am working on adding multiple services and implementing Robert's UI suggestions. To use, create the query, click Add to Query, then 'Search'.

 

GitHub: EnhancedQuery/eQuery/widgets/Enhanced Query at master · kevinsagis/EnhancedQuery · GitHub

Demo: http://sagiscloud.thempc.org/eQueryB1/

(The first widget on the left is the "Enhanced Query" widget.  My Pictometry widget is also in here.)

 

ReadMe:

EnhancedQuery/readme.html at master · kevinsagis/EnhancedQuery · GitHub

 

Thanks and credit also go to Robert Scheitlin who gave advice and contributed substantially. Now, he strongly recommended adding ability to consume multiple services for a 1.0 release.  But I am seeing a growing number of requests for this widget, and I have many other projects at work so the completion of this widget may take a while. Thus am releasing this as an alpha version.  I am open to any collaboration, pull requests, code contributions or advice. Feel free to use or modify the widget in any way or let me know of bugs.

 

 

 

 


Kevin MacLeod - Savannah Area Geographic Information System - Savannah - Chatham County, Georgia

Outcomes