Community

Click on Map Popup Doesnt Work After Upgrade in WAB

1154
18
09-20-2019 02:08 PM
joerodmey
by MVP Alum
MVP Alum
‎09-20-2019 02:08 PM

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);
          }));
        })); 
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
18 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-23-2019 06:45 AM

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?

0 Kudos
joerodmey
by MVP Alum
MVP Alum
‎09-24-2019 08:31 AM

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-24-2019 08:40 AM

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);
            }
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
joerodmey
by MVP Alum
MVP Alum
‎09-24-2019 08:53 AM

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-24-2019 08:58 AM

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'){
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-24-2019 09:00 AM

If that is not your desired outcome then remove the 

if(this.SERVICE_ID){

from the code blocks

0 Kudos
joerodmey
by MVP Alum
MVP Alum
‎09-24-2019 09:06 AM

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-24-2019 09:19 AM

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);
          }));
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-24-2019 09:23 AM

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

0 Kudos