Click on Map Popup Doesnt Work After Upgrade in WAB

179
18
09-20-2019 02:08 PM
Highlighted
MVP Regular Contributor

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);
}));
}));
},
Reply
0 Kudos
18 Replies
Highlighted
MVP Esteemed Contributor

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?

Reply
0 Kudos
Highlighted
MVP Regular Contributor

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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);
}
}));
}));
},
Reply
0 Kudos
Highlighted
MVP Regular Contributor

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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'){
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

If that is not your desired outcome then remove the 

if(this.SERVICE_ID){

from the code blocks

Reply
0 Kudos
Highlighted
MVP Regular Contributor

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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);
}));
}));
},
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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

Reply
0 Kudos