topic Re: Listener for layer toggle widget in Web AppBuilder Custom Widgets Questions

Listener for layer toggle widget

MarkLache1 — Fri, 20 Jul 2018 14:37:44 GMT

How would I add a listener to Robert's layer toggle widget that would be able to tell what layer is on? I want this so that the info can be passed into Survey123 via custom URL

Thanks

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Wed, 25 Jul 2018 13:04:10 GMT

Mark,

Where will you be listening to this event from? Another widget?

Re: Listener for layer toggle widget

MarkLache1 — Wed, 25 Jul 2018 15:37:58 GMT

Not necessarily. Just need to capture the layer (or if the toggle is on or off) so that I can use it in Survey123 to populate a question. Will be used to determine if on main floor or second floor of a building

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Wed, 25 Jul 2018 15:44:42 GMT

Mark,

The 2.8 version of the layer toggle button dispatches a "toggleChanged" event that can be listened to using dojo/topic subscribe in your code.

Re: Listener for layer toggle widget

MarkLache1 — Wed, 08 Aug 2018 20:05:01 GMT

How would I incorporate this into my app?

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Wed, 08 Aug 2018 20:14:25 GMT

Mark,

As I mentioned in my last post you would add the require for dojo/topic and then use topic.subscribe('toggleChanged', function(){ //your code });

Re: Listener for layer toggle widget

MarkLache1 — Tue, 14 Aug 2018 18:14:24 GMT

Which file in the WAB structure do I incorporate this?

Do you have a larger code example?

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Tue, 14 Aug 2018 18:46:22 GMT

Mark,

No I do not have a sample for this. You implement the dojo topic subscribe in whatever file that you will need to do something with the event in.

Re: Listener for layer toggle widget

MarkLache1 — Tue, 14 Aug 2018 18:50:21 GMT

I just need to capture which layer is turned on (in my case its floor 1 or floor 2 of a building) and ad this into the URL to pass into Survey123. Not really doing anything with it in WAB

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Tue, 14 Aug 2018 19:10:34 GMT

Mark,

Well you need to listen for this event somewhere so that you add it to your url.. So I guess you can do that in the MapManager.js or some file that is used automatically in WAB.

Re: Listener for layer toggle widget

MarkLache1 — Thu, 16 Aug 2018 20:44:43 GMT

All I really need to do is capture the layer name that is currently on in a text string. Something like:

topic.subscribe('toggleChanged', function()
{
var URL =….;

}

Or just a way to identify one layer from another. Even having an ID of 1 when the button is off and an ID of 2 when the toggle button is turned on.

Suggestions?

Thanks

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:37:18 GMT

Mark,

Something like:

topic.subscribe('toggleChanged', function(event){ 
   console.info(event);
//Now that you can see the contents of the event in your browsers console
//you will know what to add to your url.
   var URL ='…';
}‍‍‍‍‍‍

Re: Listener for layer toggle widget

MarkLache1 — Fri, 17 Aug 2018 14:13:34 GMT

I've tried pushing this to the console and I keep getting "Cross-Origin Request Blocked" errors. I'm using publishMapEvent function

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Fri, 17 Aug 2018 14:22:45 GMT

Mark,

Show me all the code from your modified publishMapEvent function.

Re: Listener for layer toggle widget

MarkLache1 — Sun, 12 Dec 2021 10:37:20 GMT

_publishMapEvent: function(map) {
        //add this property for debug purpose
        window._viewerMap = map;

        MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

                    
     
     topic.subscribe('toggleChanged', function(event){ 
               
          console.log(event)

   
             }
          )
     
                    
        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else 
          {
               
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:37:23 GMT

Mark,

That change would not produce a cross origin error.

Here is what I have working fine in that exact function:

      _publishMapEvent: function(map) {
        topic.subscribe('toggleChanged', function(visible, layer){
           console.info(visible, layer);
        });

        //add this property for debug purpose
        window._viewerMap = map;

        MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Listener for layer toggle widget

MarkLache1 — Fri, 17 Aug 2018 16:13:23 GMT

Get the same error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at..." but only when I click the layer toggle widget. Get this error twice

Re: Listener for layer toggle widget

RobertScheitlin__GISP — Fri, 17 Aug 2018 16:17:03 GMT

Mark,

I have no idea where that error is coming from. Does it prevent your app from working?