Listener for layer toggle widget

4900
68
Jump to solution
07-20-2018 07:37 AM
MarkLache1
New Contributor III

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

0 Kudos
68 Replies
MarkLache1
New Contributor III

Each layer is its own service

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mark,

   OK, I tried to adding a second map service and I still don't get undefined.

0 Kudos
MarkLache1
New Contributor III

Robert,

Now the other layer I have is conflicting with my layer in question. By this I mean that the secondary layers in another toggle button are conflicting with my main toggle button (only one I need the listener on). The secondary toggle takes over the listener and that layer name is retuned instead.

Mark

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mark,

 Each toggle widget will send the toggle event. There is no way for one to publish the event and the other not.

0 Kudos
MarkLache1
New Contributor III

Robert,

Have a workaround in mind?

Thanks, Mark

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Check if it is the layer you are interested in before you act on the event.

0 Kudos
MarkLache1
New Contributor III

Something like this?

_publishMapEvent: function(map) {
     
        
              
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(visible && layer.title=building1){
            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 }, 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/xyz123?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection=' + this.SERVICE_ID.split('_')[1]+"_Floor " + '" target="_parent"><font size="4">Click here to submit a service request</font></a>');
                    
                    SERVICE_ID: null;
                    
                map.infoWindow.show(evt.mapPoint);
              }
            }), 1000);
          }));
        }));
      },
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mark,

   Yes but you need to fix your condition logic.

if(visible && layer.title === 'building1'){
MarkLache1
New Contributor III

Thanks it worked

0 Kudos