topic Click on Map Popup Doesnt Work After Upgrade in WAB in Web AppBuilder Custom Widgets Questions

Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Sun, 12 Dec 2021 08:55:52 GMT

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);
          }));
        })); 
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Mon, 23 Sep 2019 13:45:23 GMT

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?

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Tue, 24 Sep 2019 15:31:10 GMT

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

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:55:55 GMT

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);
            }
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Tue, 24 Sep 2019 15:53:45 GMT

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

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Tue, 24 Sep 2019 15:58:58 GMT

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'){

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Tue, 24 Sep 2019 16:00:01 GMT

If that is not your desired outcome then remove the

if(this.SERVICE_ID){

from the code blocks

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Tue, 24 Sep 2019 16:06:30 GMT

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

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:55:58 GMT

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);
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Tue, 24 Sep 2019 16:23:23 GMT

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

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Tue, 24 Sep 2019 16:25:14 GMT

Copied exactly and popup works but when I click on map the popup doesn't show. in the console the there are a few warnings but only one error is: "TypeError: this.SERVICE_ID is undefined". This shows every time I click on the map.

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Tue, 24 Sep 2019 16:30:53 GMT

Joe,

So like my previous question. Where in your code are you defining this.SERVICE_ID? I have it defined at the beginning of the MapManager code along with the other this vars.

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Tue, 24 Sep 2019 16:34:14 GMT

In V2.8 it was taking the current layer (Main or Mezz) floor that was active at the time via the toggle. When main was selected the code should be main (which passed into the Survey123 link) and mezz if that floor was toggled on. It worked fine in V2.8

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Tue, 24 Sep 2019 16:40:21 GMT

All I did was defined a value for Service_ID from the start and now it works fine

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Tue, 24 Sep 2019 17:05:42 GMT

Joe,

So it sounds like the "toggleChanged" event is not firing and that event is dependent on my LayerToggle widget. In your 2.13 project are you using the LayerToggle widget and is it set to open at start?

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Thu, 26 Sep 2019 12:52:38 GMT

Joe,

So do you have the Layer Toggle Widget in your 2.13 app?

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Mon, 30 Sep 2019 19:08:48 GMT

Yes I do

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

RobertScheitlin__GISP — Mon, 30 Sep 2019 19:51:23 GMT

And is it set to open at start for one of those two layers you are listening for?

Re: Click on Map Popup Doesnt Work After Upgrade in WAB

joerodmey — Mon, 30 Sep 2019 21:17:34 GMT

Yes