topic Re: Customized Layer Toggle Not Passing Layer Name in Web AppBuilder Custom Widgets Questions

Customized Layer Toggle Not Passing Layer Name

joerodmey — Sun, 12 Dec 2021 10:58:35 GMT

I've customized Robert's layer toggle widget to look at which layer is currently on and pass this into a popup link that I have. All of my layers follow the same naming scheme of "layername_Main" or "layername_Mezz". The code looks for the underscore symbol as the flag and then applies the main or mezz label to be passed into my link to Survey123.

I have all of this done in MapManager.js in the publishMapEvent function (included below)

Sometimes this works, other times it doesn't. Right now the toggle switches between the layers (from main to mezz) and the link updates properly. But when I toggle back to main, it stays at mezz label even though the layer changes back to main. I want the label to keep up with the toggle.

Any ideas?

Thanks

_publishMapEvent: function(map) {
	  
	  	  
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(visible && layer.title=='layername_Main'||layer.title=='layername_Mezz'){
            this.SERVICE_ID = layer.title;
          }
        }));
		
		
		
		// create node for the tooltip
         var tip = "Click on problem location";
         var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip, "style": "color: red; font-size:22px;width:200px"}, map.container);
          dojo.style(tooltip, "position", "fixed");

          // update the tooltip as the mouse moves over the map
          dojo.connect(map, "onMouseMove", function(evt) {
            var px, py;        
            if (evt.clientX || evt.pageY) {
              px = evt.clientX;
              py = evt.clientY;
            } else {
              px = evt.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
              py = evt.clientY + dojo.body().scrollTop - dojo.body().clientTop;
            }
                           
            // dojo.style(tooltip, "display", "none");
            tooltip.style.display = "none";
            dojo.style(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
            // dojo.style(tooltip, "display", "");
            tooltip.style.display = "";
            // console.log("updated tooltip pos.");
          });

          // hide the tooltip the cursor isn't over the map
          dojo.connect(map, "onMouseOut", function(evt){
            tooltip.style.display = "none";
          });
		  
		  

        //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, 0.01,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_CIRCLE,
            new Color([207, 16, 45, 0.9]),
            1
          ),
          new Color([207, 16, 45, 0.9])
        );
		
          map.on("click", lang.hitch(this, function(evt){
            var gra = new Graphic(evt.mapPoint, symbol);
            setTimeout(lang.hitch(this, function(){
              var selFeats = map.infoWindow.features;
              if(!selFeats){
                map.graphics.clear();
                map.graphics.add(gra);
				
				//PopupCenter('http://www.xtf.dk','xtf','900','500');  
				
				
				
                map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/surveycodexyz?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection=' + this.SERVICE_ID.split('_')[1]+"_Floor " + '" target="_"><font size="4">Click here to submit a service request</font></a>');
				
				SERVICE_ID: null;
				
                map.infoWindow.show(evt.mapPoint);
              }
            }), 1000);
          }));
        }));
      },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Wed, 06 Mar 2019 16:29:28 GMT

Joe,

Your code only executes if the layer is toggled to visible.

if(visible && layer.title=='layername_Main'||layer.title=='layername_Mezz'){‍

Could this be your issue?

Have you added breakpoints in your code to see what is or is not happening then the label does not change as expected?

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Wed, 06 Mar 2019 17:47:54 GMT

weird part is that sometimes it works if I copy the feature in ArcMap and rename it to the appropriate name rather than just publishing a new service and naming it accordingly. If I were to change the "if" would this work:

if(visible && layer.title=='layername_Main'||visible && layer.title=='layername_Mezz'){‍‍

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Wed, 06 Mar 2019 18:03:43 GMT

Joe,

No, both of those expressions are equivalent.

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Wed, 06 Mar 2019 18:25:22 GMT

suggestions?

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Wed, 06 Mar 2019 21:04:31 GMT

Do you hit your breakpoint in the code when you toggle all the time?

But when I toggle back to main, it stays at mezz

So do you hit the breakpoint in this instance?

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Wed, 06 Mar 2019 21:45:32 GMT

When I toggle from mezz back to main the link still stays at mezz. When examined thru a breakpoint (at the if statement level) the if statement is executed at this point as visible is set to true.

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Thu, 07 Mar 2019 04:35:52 GMT

Joe,

So do you have multiple layer toggle buttons in the app? I set two up and added your code to the MapManager and when I toggles on layer off and another on the serviceId updated just fine to the last layer I toggled on.

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Thu, 07 Mar 2019 14:14:58 GMT

I only have one toggle button in my app

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Thu, 07 Mar 2019 16:42:38 GMT

Joe,

OK. So I am confused then what do you mean by

When I toggle from mezz back to main the link still stays at mezz.

Then?

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Thu, 07 Mar 2019 16:51:56 GMT

I have 2 layers in play. My main floor feature service and my second floor (or mezzanine floor) feature service. When the user clicks anywhere on the map, the coordinates are captured which are then passed into a strong which brings them to a link when clicked. This link should also contain if its on the main floor or mezz floor.

Right now the link being passed in the correct floor name only up till switching to mezz layer. When switching back to the main floor via the toggle, the floor ;layer physically changes, but the link that I have isn't updated with the proper floor name. Toggling from main to mezz is fine, but mezz to main the link stays on mezz.

This has worked before so I am unsure why its causing me issues now. Would it have something to do with the layer name? In the past sometimes the feature service says the name I've setup but it still holds onto the original name in the backend. When this has occurred I've exported the feature class in ArcMap to a new feature class with the correct name and republished which seems to have fixed my problem. This has not unfortunately worked this time.

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:58:38 GMT

Joe,

So you have one toggle and you are only doing something when the toggle is visible and not when that layer is turned off. I think this is your problem in your logic. I am not sure which layer you have toggling (main or Mez) but lets just say it is Mez and Main is the default. So the SERVICE_ID needs to be defaulted to main all the time unless the user toggles on the Mez layer and makes it visible. then when the user toggles it off then you react to the visible being false and set SERVICE_ID back to main.

Something like this:

      _publishMapEvent: function(map) {
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(layer.title=='layername_Main' && visible){
            this.SERVICE_ID = layer.title;
          } else {
            this.SERVICE_ID = "layername_Mezz";
          }
        }));
....‍‍‍‍‍‍‍‍‍

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Sun, 12 Dec 2021 10:58:41 GMT

When the app fires up the main layer is on while the mezz layer is off. The toggle reverses this so main is off and mezz is on. But when I toggle back to main on and mezz off the link doesn't update.

Tried your suggestion with no luck.

Is there an option to set it to default right out side the "if" as such: SERVICE_ID: null;

Ive tried altering the code a bit:

   topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(layer.title=="layername_Main" && visible){
            this.SERVICE_ID = layer.title;
          }
		  else{
			  this.SERVICE_ID = "_Mezz";
		  }
        }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This way when this code runs:

map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/ID?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection=' + this.SERVICE_ID.split('_')[1]+"_Floor " + '" target="_"><font size="4">Click here to submit a service request</font></a>');‍‍‍‍

It will search for the "_" which acts as my flag and pass that over. Same thing though, the link wont switch back to main from mezz even though the layer has physically toggled successfully.

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Thu, 07 Mar 2019 22:29:40 GMT

Joe,

It would be:

this.SERVICE_ID = null;

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Fri, 08 Mar 2019 22:03:36 GMT

Setting the layer to null didn't solve anything. Looking at the breakpoint I can see both the if and else running at the correct times, but the layer name isn't updating

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Sat, 09 Mar 2019 00:14:32 GMT

Joe,

Sorry that just does not make sense. I am not sure what to tell you.

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Mon, 11 Mar 2019 14:25:15 GMT

Robert,

That aside, is there anything else that you can suggest to try from a logic perspective? It seems to get stuck on the mezz title even though the toggle physically switches the layer back to main from mezz.

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Mon, 11 Mar 2019 16:11:04 GMT

Sorry I am out of ideas

Re: Customized Layer Toggle Not Passing Layer Name

joerodmey — Mon, 11 Mar 2019 16:43:30 GMT

Should I look at something else than layer title?

Re: Customized Layer Toggle Not Passing Layer Name

RobertScheitlin__GISP — Mon, 11 Mar 2019 16:51:54 GMT

Joe,

Like I said I am not sure. You said that when you debug you are getting to the break point when you expect to and the ServiceId is getting updated. So why the url is not reflecting the updated ServiceId is the big question.