Is it possible to change the symbol used to highlight a feature that has been clicked on (i.e. to show the popup info)? I can see and edit the symbols live through the debugger, but haven't been able to figure out where to make changes so that they'll be permanent.
On a related note, is there a preferred location for setting custom css properties to override existing ones?
I'm currently using Web AppBuilder-Developer's Edition 1.1.
Thanks,
Solved! Go to Solution.
Thank you Robert, I've been staring at code all day and this was my last endeavor... The thread is exactly what I needed!
Robert,
I have the code working correctly, but need one more adjustment. I have tried fruitlessly this morning to set the fill to 100 % transparent and can't seem to find the correct reference. I tried using "style": "esriSFSNull" which does not seem to work. Here is my current code that still puts a red fill with my updated yellow line (the red fill looks about 50% transparent??).
map.infoWindow.fillSymbol = new SimpleFillSymbol({
"type": "esriSFS",
"style": "esriSFSSolid",
"color": [0,0,0,0],
"outline": {
"type": "esriSLS",
"style": "esriSLSSolid",
"color": [255,255,51,255],
"width": 5
}
});
Lee,
Use:
"style": "esriSFSNull",
Coming back to the topic, then this suggested solution works very well on desktop layout, but as soon as the app switches to mobile version, then the highlight symbol is again the defaul "blue". Any ideas?
Ramon,
That is because the mobile version uses a different popup and thus you have to set the popup symbology for that popup.
In the MapManager.js
resetInfoWindow: function(isNewMap) { if(isNewMap){ this._mapInfoWindow = this.map.infoWindow; if(this._mapMobileInfoWindow){ this._mapMobileInfoWindow.destroy(); } this._mapMobileInfoWindow = new PopupMobile(null, html.create("div", null, null, this.map.root)); this.isMobileInfoWindow = false; } if (window.appInfo.isRunInMobile && !this.isMobileInfoWindow) { this.map.infoWindow.hide(); this.map.setInfoWindow(this._mapMobileInfoWindow); this.isMobileInfoWindow = true; } else if (!window.appInfo.isRunInMobile && this.isMobileInfoWindow) { this.map.infoWindow.hide(); this.map.setInfoWindow(this._mapInfoWindow); this.isMobileInfoWindow = false; } this.map.infoWindow.fillSymbol = new SimpleFillSymbol({ "type": "esriSFS", "style": "esriSFSSolid", "color": [255,0,0,25], "outline": { "type": "esriSLS", "style": "esriSLSSolid", "color": [255,0,0,255], "width": 2 } }); this.map.infoWindow.markerSymbol = new SimpleMarkerSymbol({ "color": [255,0,0,64], "size": 15, "angle": -30, "xoffset": 0, "yoffset": 0, "type": "esriSMS", "style": "esriSMSCircle", "outline": { "color": [255,0,0,255], "width": 2, "type": "esriSLS", "style": "esriSLSSolid" } }); },
Thank You once again, Robert Scheitlin, GISP
Robert, thanks for taking the time to give back to the community! Your responses are always RIGHT on!!!
Hi Robert,
Does this still work in WAB version 2.8? I have been trying to add in a new fillSymbol, but the color of the select is not changing. There's a bunch new code at the bottom of the _show2DWebMap function than there was when this question was answered in 2015. I don't know if that has any effect.
Thank you!
Never mind! I was trying to do a Fill Symbol when I should have been doing a Fill Line. I can confirm, this still works in 2.8.
Robert,
Will these changes work for WAB 2.4?
Thanks!