Click on Map Popup Doesnt Work After Upgrade in WAB

[joerodmey]

Hi,

I have a WAB app with some modified code. I've been running this code in WAB V2.8 for awhile without issue and need to upgrade to V2.13. This code has failed in V2.13

This code allows the user to click on the map, coordinates are collected, popup is shown with URL link to Survey123. Right now it does everything but show the popup.

I will include the code below which sits in server->apps->2->jimu.js->MapManager.js-> in the publish map event function:

_publishMapEvent: function(map) {
        
		topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(visible && layer.title=='t_Main_Floor'||layer.title=='t_Mezz_Floor'){
            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/surveyID?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 </font></a>');
				
				SERVICE_ID: null;
				
                map.infoWindow.show(evt.mapPoint);
              }
            }), 1000);
          }));
        })); 
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Joe,

  Based on your graphic you are adding to the map being so small. Can I assume you really don't want to the graphic to be seen?

[joerodmey]

Hi Robert Scheitlin, GISP‌

I want the poop to be shown to the user so they can click on the link that is found in the popup.

Thanks,

Joe

[RobertScheitlin__GISP]

Joe,

  Here is my edits of your code to remove calls to depreciated methods and things I think needed to be tweaked (tested in WAB 2.13).

      _publishMapEvent: function(map) {
        require([
          'dojo/_base/window'
        ],
        lang.hitch(this, function(win){
          topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
            if(visible && layer.title=='t_Main_Floor'||layer.title=='t_Mezz_Floor'){
              this.SERVICE_ID = layer.title;
            }
          }));
          
          // create node for the tooltip
          var tip = "Click on problem location";
          var tooltip = html.create("div", { "class": "tooltip", "innerHTML": tip }, map.container);
          html.setStyle(tooltip, "position", "fixed");
            
            
          // update the tooltip as the mouse moves over the map
          map.on("mouse-move", function(evt) {
            if(this.SERVICE_ID){
              var px, py;        
              if (evt.clientX || evt.pageY) {
                px = evt.clientX;
                py = evt.clientY;
              } else {
                px = evt.clientX + win.body().scrollLeft - win.body().clientLeft;
                py = evt.clientY + win.body().scrollTop - win.body().clientTop;
              }
    
              html.setStyle(tooltip, "display", "none");
              html.setStyle(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
              html.setStyle(tooltip, "display", "");
            }
          });
  
          // hide the tooltip the cursor isn't over the map
          map.on("mouse-out", function(evt) {
            if(this.SERVICE_ID){
              html.setStyle(tooltip, "display", "none");
            }
          });
            
          //add this property for debug purpose
          window._viewerMap = map;
  
          MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);
  
          if (this.map) {
            this.map = map;
            this.resetInfoWindow(true);
            topic.publish('mapChanged', this.map, this.layerInfosObj);
          } else {
            this.map = map;
            this.resetInfoWindow(true);
            topic.publish('mapLoaded', this.map, this.layerInfosObj);
          }
        
          map.on("click", lang.hitch(this, function(evt){
            if(this.SERVICE_ID){
              setTimeout(lang.hitch(this, function(){
                var selFeats = map.infoWindow.features;
                if(!selFeats){
                  map.infoWindow.setContent(
                    '<a href="https://survey123.arcgis.com/share/surveyID?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 </font></a>'
                  );
                  map.infoWindow.show(evt.mapPoint);
                }
              }), 1000);
            }
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[joerodmey]

Now the tooltip has disappeared and I cant click on the map

[RobertScheitlin__GISP]

the tooltip and the click will not appear until you have turned on one of the two layers you are using in your toggle event.

if(visible && layer.title=='t_Main_Floor'||layer.title=='t_Mezz_Floor'){

[RobertScheitlin__GISP]

If that is not your desired outcome then remove the 

if(this.SERVICE_ID){

from the code blocks

[joerodmey]

Removed all those if references and the tooltip works now but again the click for popup option doesn't work

[RobertScheitlin__GISP]

Hmm.. Sounds like your change messed something up then.

Here is the code again with the ifs removed (the popup with the survey link is working fine for me):

      _publishMapEvent: function(map) {
        require(['dojo/_base/window'], lang.hitch(this, function(win){
          topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
            if(visible && layer.title=='t_Main_Floor'||layer.title=='t_Mezz_Floor'){
              this.SERVICE_ID = layer.title;
            }
          }));
          
          // create node for the tooltip
          var tip = "Click on problem location";
          var tooltip = html.create("div", { "class": "tooltip", "innerHTML": tip }, map.container);
          html.setStyle(tooltip, "position", "fixed");
            
            
          // update the tooltip as the mouse moves over the map
          map.on("mouse-move", function(evt) {
            var px, py;        
            if (evt.clientX || evt.pageY) {
              px = evt.clientX;
              py = evt.clientY;
            } else {
              px = evt.clientX + win.body().scrollLeft - win.body().clientLeft;
              py = evt.clientY + win.body().scrollTop - win.body().clientTop;
            }
  
            html.setStyle(tooltip, "display", "none");
            html.setStyle(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
            html.setStyle(tooltip, "display", "");
          });
  
          // hide the tooltip the cursor isn't over the map
          map.on("mouse-out", function(evt) {
            html.setStyle(tooltip, "display", "none");
          });
            
          //add this property for debug purpose
          window._viewerMap = map;
  
          MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);
  
          if (this.map) {
            this.map = map;
            this.resetInfoWindow(true);
            topic.publish('mapChanged', this.map, this.layerInfosObj);
          } else {
            this.map = map;
            this.resetInfoWindow(true);
            topic.publish('mapLoaded', this.map, this.layerInfosObj);
          }
        
          map.on("click", lang.hitch(this, function(evt){
            setTimeout(lang.hitch(this, function(){
              var selFeats = map.infoWindow.features;
              if(!selFeats){
                map.infoWindow.setContent(
                  '<a href="https://survey123.arcgis.com/share/surveyID?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 </font></a>'
                );
                map.infoWindow.show(evt.mapPoint);
              }
            }), 1000);
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Where in your code are you setting the value for this.SERVICE_ID?