Point me in the right direction for making this custom widget

2387
6
01-04-2017 01:28 PM
AdrianWelsh
MVP Honored Contributor

Hi, I want to create a 'simple' custom widget for Web AppBuilder (Developer edition 2.2) and not sure on the right path to take in making it happen.

I have run through this little tutorial

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer... 

Which was good and all but I was wondering if there were something more specific for what I want to do.

I hope this is simple but here is what I am thinking. I have a point layer that contains URLs for spherical photos. I want to be able to open a widget that has a tool (similar to the Google Streetview widget from Robert) that when you click on the point, it pops up a small box (like Google Streetview) that contains the spherical image (using iFrame html, I would think). I hope this makes sense.

Here is a sample link to a spherical image: https://cdn.pannellum.org/2.3/pannellum.htm#panorama=https://meiamerica.com/GIS/Images/15055/Spheric... 

[I am trying to embed it into this thread using 'iframe' so we will see if it works - well, it worked when I composed the message...]

Is there an example I can look at that makes a custom widget that brings up its own pop up box that can embed an image like this? (and hopefully in terms that a non-programmer, but wanna-be-programmer, can understand)?

Thanks,

Adrian

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

Adrian,

   There is not really a widget out there that you can use as an example for what you are wanting to do. My StreetView widget open the streetview in a separate window. The StreetView popup by Stan is the closest and probably here I would say you should begin.

AdrianWelsh
MVP Honored Contributor

Robert,

Thanks for the reply. I was initially thinking of having it open in a separate window like your streetview widget but I also like Stan's method of it opening in an on-screen popup. The main thing is that I'm not educated enough to make this happen the way I want, but I will attempt to look through Stan's widget code and make some changes in order for my popup to reflect what I want it to reflect.

One thing that I am unsure of is how the location selector tool will choose one of my features. In Stan's Widget.js file, it looks like he is using a geoPoint.y and geoPoint.x for his location which makes sense. Is there a way to make it choose the point that was clicked on as opposed to the location where it was clicked?

Thanks again.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Adrian,

   To do that you would take the geoPoint  and use that as the input geometry for a QueryTask. You now get in to an area where your widget get more complicated.

QueryTask | API Reference | ArcGIS API for JavaScript 3.19 

Query | API Reference | ArcGIS API for JavaScript 3.19 

Related sample

Select with Feature Layer | ArcGIS API for JavaScript 3.19 

AdrianWelsh
MVP Honored Contributor

Thanks Robert. Yeah, I can see how that can get more complicated. I'll take a look at those examples and see what I can come up with.

0 Kudos
TimDine
Occasional Contributor II

Did you ever get anywhere with building this widget?

I've been experimenting with the same thing.  I've got a sample put together that can query a service for an attribute of a point feature from a map service (like a url of a panorama) with a queryTask.  Then a pannellum box appears in the widget's panel containing the panorama that is at the returned url.  The pannellum framework handles the ability to expand to full screen.  I haven't bothered to try to create links between images at this point, and may not do that.  Each time that you click on the map it replaces the panorama in the widget.

AdrianWelsh
MVP Honored Contributor

Tim,

This sounds cool. And no, I have not really had the chance to spend a ton of time on this, unfortunately. Are you able to share your web app?

0 Kudos