I've customized Robert's layer toggle widget to look at which layer is currently on and pass this into a popup link that I have. All of my layers follow the same naming scheme of "layername_Main" or "layername_Mezz". The code looks for the underscore symbol as the flag and then applies the main or mezz label to be passed into my link to Survey123.
I have all of this done in MapManager.js in the publishMapEvent function (included below)
Sometimes this works, other times it doesn't. Right now the toggle switches between the layers (from main to mezz) and the link updates properly. But when I toggle back to main, it stays at mezz label even though the layer changes back to main. I want the label to keep up with the toggle.
Any ideas?
Thanks
_publishMapEvent: function(map) {
topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
if(visible && layer.title=='layername_Main'||layer.title=='layername_Mezz'){
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, "style": "color: red; font-size:22px;width:200px"}, 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/surveycodexyz?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 a service request</font></a>');
SERVICE_ID: null;
map.infoWindow.show(evt.mapPoint);
}
}), 1000);
}));
}));
},
Joe,
Your code only executes if the layer is toggled to visible.
if(visible && layer.title=='layername_Main'||layer.title=='layername_Mezz'){
Could this be your issue?
Have you added breakpoints in your code to see what is or is not happening then the label does not change as expected?
weird part is that sometimes it works if I copy the feature in ArcMap and rename it to the appropriate name rather than just publishing a new service and naming it accordingly. If I were to change the "if" would this work:
if(visible && layer.title=='layername_Main'||visible && layer.title=='layername_Mezz'){
Joe,
No, both of those expressions are equivalent.
suggestions?
Do you hit your breakpoint in the code when you toggle all the time?
But when I toggle back to main, it stays at mezz
So do you hit the breakpoint in this instance?
When I toggle from mezz back to main the link still stays at mezz. When examined thru a breakpoint (at the if statement level) the if statement is executed at this point as visible is set to true.
Joe,
So do you have multiple layer toggle buttons in the app? I set two up and added your code to the MapManager and when I toggles on layer off and another on the serviceId updated just fine to the last layer I toggled on.
I only have one toggle button in my app
Joe,
OK. So I am confused then what do you mean by
When I toggle from mezz back to main the link still stays at mezz.
Then?