Listener for layer toggle widget

[MarkLache1]

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

[RobertScheitlin__GISP]

Mark,

   I don't have a clue what you are doing wrong. Here are my files (I have updated the LayerToggle widget to send different info on the toggle event) the MapManager.js and Widget.js for the LayerToggle widget are included. I have it working just fin in my local 2.9 WAB Dev.

[MarkLache1]

Robert,

Replaced my JS files with yours and I got the following result (attached)

[RobertScheitlin__GISP]

Mark,  Great so you now have the visible state of the layer and the layer object that was toggled. The cross-origin stuff are just warnings not error so you are good to go.

[MarkLache1]

Thanks Robert!

Currently I have a link in a popup window that is hardcoded into my code. Any suggestions for pulling the current layer that its currently on (True) and passing that into the link?

[RobertScheitlin__GISP]

Just use the popups set content function to send the correct url to the popup.

[MarkLache1]

I have that in my publishMapEvent function (below), but I need a way to pull the layer toggle status and place it in the URL string I've hard coded in (line 39)

_publishMapEvent: function(map) {
        //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);
        }
        require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ], lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
          map.on("click", function(evt){
            map.graphics.clear();
            map.graphics.add(new Graphic(evt.mapPoint, symbol));
             map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/SERVICE_ID?center='+evt.mapPoint.getLatitude().toString() +","+ evt.mapPoint.getLongitude().toString()+'" target="_blank"><font size="4">Click here to submit a service request</font></a>');
                map.infoWindow.show(evt.mapPoint)
          });
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Mark,

   So where is your topic subscribe to the "toggleChanged" in the above code?..

      _publishMapEvent: function(map) {
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
           //console.info(visible, layer);
           if(visible){
             this.SERVICE_ID = layer.id;
           }
        }));
        //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);
        }
        require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ], lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
          map.on("click", lang.hitch(this, function(evt){
            map.graphics.clear();
            map.graphics.add(new Graphic(evt.mapPoint, symbol));
            map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/' + this.SERVICE_ID + '?center='+evt.mapPoint.getLatitude().toString() +","+ evt.mapPoint.getLongitude().toString()+'" target="_blank"><font size="4">Click here to submit a service request</font></a>');
            map.infoWindow.show(evt.mapPoint)
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MarkLache1]

Everytime I push this.Service_ID I get undefined retuned. Its like its not seeing the layer that's toggled on

_publishMapEvent: function(map) {
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
           //console.info(visible, layer);
           if(visible){
             this.SERVICE_ID = layer.id;
           }
        }));
        //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);
        }
        require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ], lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
          map.on("click", lang.hitch(this, function(evt){
            map.graphics.clear();
            map.graphics.add(new Graphic(evt.mapPoint, symbol));
            map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/AGOLServiceID?center='+ evt.mapPoint.getLatitude().toString() +","+ evt.mapPoint.getLongitude().toString() + "&" + "field:Floor_Selection="+ this.SERVICE_ID + '  " target="_blank"><font size="4">Click here to submit a service request</font></a>');
            map.infoWindow.show(evt.mapPoint)
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Mark,

   Here is that issue resolved.

      _publishMapEvent: function(map) {
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(visible){
            this.SERVICE_ID = layer.id;
          }
        }));

        //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);
        }

        require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ], lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
          map.on("click", lang.hitch(this, function(evt){
            map.setInfoWindowOnClick(false);
            map.graphics.clear();
            map.graphics.add(new Graphic(evt.mapPoint, symbol));
            map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/AGOLServiceID?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection='+ this.SERVICE_ID + '" target="_blank"><font size="4">Click here to submit a service request</font></a>');
            map.infoWindow.show(evt.mapPoint);
            map.setInfoWindowOnClick(true);
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MarkLache1]

Hi Robert,

So close, but I still get undefined when I click the link and look in the address bar. Address bar looks like this: https://survey123.arcgis.com/share/123SERVICEID?center=49.89009508007153,-97.06169069998111&field:Fl... 

Mark