Customized Layer Toggle Not Passing Layer Name

1174
23
03-05-2019 07:42 AM
joerodmey
MVP Alum

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);
          }));
        }));
      },
0 Kudos
23 Replies
joerodmey
MVP Alum

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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";
          }
        }));
....
0 Kudos
joerodmey
MVP Alum

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Joe,

  It would be:

this.SERVICE_ID = null;

0 Kudos
joerodmey
MVP Alum

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Joe,

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

0 Kudos
joerodmey
MVP Alum

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sorry I am out of ideas

0 Kudos
joerodmey
MVP Alum

Should I look at something else than layer title?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos