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);
}));
}));
},
I have 2 layers in play. My main floor feature service and my second floor (or mezzanine floor) feature service. When the user clicks anywhere on the map, the coordinates are captured which are then passed into a strong which brings them to a link when clicked. This link should also contain if its on the main floor or mezz floor.
Right now the link being passed in the correct floor name only up till switching to mezz layer. When switching back to the main floor via the toggle, the floor ;layer physically changes, but the link that I have isn't updated with the proper floor name. Toggling from main to mezz is fine, but mezz to main the link stays on mezz.
This has worked before so I am unsure why its causing me issues now. Would it have something to do with the layer name? In the past sometimes the feature service says the name I've setup but it still holds onto the original name in the backend. When this has occurred I've exported the feature class in ArcMap to a new feature class with the correct name and republished which seems to have fixed my problem. This has not unfortunately worked this time.
Joe,
So you have one toggle and you are only doing something when the toggle is visible and not when that layer is turned off. I think this is your problem in your logic. I am not sure which layer you have toggling (main or Mez) but lets just say it is Mez and Main is the default. So the SERVICE_ID needs to be defaulted to main all the time unless the user toggles on the Mez layer and makes it visible. then when the user toggles it off then you react to the visible being false and set SERVICE_ID back to main.
Something like this:
_publishMapEvent: function(map) {
topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
if(layer.title=='layername_Main' && visible){
this.SERVICE_ID = layer.title;
} else {
this.SERVICE_ID = "layername_Mezz";
}
}));
....
When the app fires up the main layer is on while the mezz layer is off. The toggle reverses this so main is off and mezz is on. But when I toggle back to main on and mezz off the link doesn't update.
Tried your suggestion with no luck.
Is there an option to set it to default right out side the "if" as such: SERVICE_ID: null;
Ive tried altering the code a bit:
topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
if(layer.title=="layername_Main" && visible){
this.SERVICE_ID = layer.title;
}
else{
this.SERVICE_ID = "_Mezz";
}
}));
This way when this code runs:
map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/ID?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>');
It will search for the "_" which acts as my flag and pass that over. Same thing though, the link wont switch back to main from mezz even though the layer has physically toggled successfully.
Joe,
It would be:
this.SERVICE_ID = null;
Setting the layer to null didn't solve anything. Looking at the breakpoint I can see both the if and else running at the correct times, but the layer name isn't updating
Joe,
Sorry that just does not make sense. I am not sure what to tell you.
Robert,
That aside, is there anything else that you can suggest to try from a logic perspective? It seems to get stuck on the mezz title even though the toggle physically switches the layer back to main from mezz.
Sorry I am out of ideas
Should I look at something else than layer title?
Joe,
Like I said I am not sure. You said that when you debug you are getting to the break point when you expect to and the ServiceId is getting updated. So why the url is not reflecting the updated ServiceId is the big question.