ESRI’s developer edition of their Web App Builder (WAB) is a
handy stand-alone tool for creating web mapping apps. While the WAB is a tool
for building an app without needing to code anything, the developer edition
allows users to create their own widgets and extend current functionality or
themes. Even with this capability, however, there are some situations where the
pre-formed development framework just doesn’t go far enough.
This was the situation I found myself in recently when trying to use the WAB to replace our custom built web map viewer at work. Our current viewer interfaces with a few third-party apps by accepting URL parameters that turn on or off layers and query various layers. The WAB does allow for querying layers using URL parameters but it doesn’t have the ability to toggle layers using the URL method.
I searched around the internet trying to find someone who has solved this problem but never found a useable solution. ESRI provides URL parameter layer visibility functionality on their ArcGIS Online platform but this hasn’t made it to the WAB Developer Edition yet. I’m not sure when or if it will.
Since layer toggling is a must-have functionality for us I decided to work up a solution myself. Thankfully, the developers at ESRI named the WAB’s URL handling module mapUrlParamsHandler.js so it was pretty easy to figure out what needed to be modified.
Parameter Modeling
To fix my problem I just had to add one new function. The actual turning on and off of the layers in this function was taken care of by the WAB API. The biggest concern for me was deciding on how the parameters should be passed in the URL so they would be easy to use on the client side and easy (and fast) to process on the server.
I considered using the Esri ArcGIS Online model of ?layers=show:0,1,2,3 for passing in layer visibility parameters. However, this becomes very cumbersome when considering showing and hiding both layers and sublayers. It would look something like ?layers=show:0,1.0-2-5,3,4;hide:6,7 or some other cryptic looking mash of numbers and characters. I wasn’t even sure the online API accepted a hidden parameter. They don’t show one in their documentation.
I then considered using two separate parameters for showing and hiding (?showLayers=1,2,3&hideLayers=1,2,3) but this just adds more complexity to the code on the back side as well as the parameters the client has to plug in. Ultimately I settled on using a single parameter called layers. But then I needed to decide how to reference those layers.
If I used a zero-based index URL parameter list, then if the layers in the web map ever change position, I’ll have to go in and change the URL references to those layers. On the other hand, if I used the titles of the layers, it wouldn’t matter what the index position of the layer is. The name of the layer and the title would still be the same.
It’s true that the title of the layer could change too. In that case, we’d still have to update the URLs we’re passing into the app. But in our situation, this is less likely to happen than the position changing. Using titles has another advantage of making it clear to the casual observer exactly what layers are being acted upon. This wouldn’t matter that much since the public isn’t going to be encouraged to pass parameters into the URL. But it might be nice for us developers to know what we’re doing.
I ended up using layer titles since they’re human readable and don’t rely on positioning within the web map that drives the web app. However, I created both versions of my modifications so that someone else who wants to use layer indices can do so just as easily.
In my parameter, layers are separated by commas with layers
to be shown represented by the layer title (or positive index integers) and
layers to be hidden represented by layer titles with a minus(-) symbol in front
of them (or negative index integers).
Toggling Sub Layers
I also wanted to be able to toggle sub-layers on and off. Sublayers to be toggled will be shown by separating the parent layer from the sublayers with a colon. The sublayers themselves will be separated by semicolons.
In WAB apps, sublayers are 0 indexed underneath their parent. Suppose you have an active layer called School Boundaries with a map index position of 6 and it has three sublayers for High Schools, Middle Schools, and Elementary Schools. These sub-layers would be indexed as 0, 1, 2.
I decided to stick with index references for the sublayers since it was easy to do so and makes sense. It’s also easier to read in and understand within the URL since the parent layer is text so there’s some contrast.
With the above model of building your URL for layer toggling, you can take care of almost any layer manipulation scenario you can think of.
This would turn on the Schools layer as well as the first, second and third sublayers:
?layers=Schools:0;1;2
This would turn off the Schools layer and deselect sublayer 0, then turn the schools back on and select sub layers five and six:
?layers=-Schools:0,Schools:5;6
Edit: Having to turn an entire layer off and then on again, just to get at the sublayer, was cumbersome. Now you can use the minus symbol in front of the layer title or the sublayer index to turn them on and off independently. For example – ?layers=Schools:-0;5;6
Multiple Params
Another problem I have with the URL parameter handling capabilities of the Web App Builder is that you can’t add multiple parameters. In other words, you can’t pass in layers to turn on and do a query on a layer at the same time. To solve that problem I just modified the main function in the module to check all URL parameters rather than stopping after finding the first one.
mo.postProcessUrlParams = function(urlParams, map){
//urlParams have been decoded.
for(var key in urlParams){
//Loop through the urlParams object
if(urlParams.hasOwnProperty(key)){
//For each parameter found, run its function
if('layers' === key){
toggleLayers(urlParams, map);
}else if('extent' === key){
setExtent(urlParams, map);
}else if('center' === key){
setCenter(urlParams, map);
}else if('marker' === key){
createMarker(urlParams, map);
}else if('find' === key){
sendMessageToSearch(urlParams);
}else if('query' === key){
queryFeature(urlParams, map);
}
}
}
};
How to Use
In order to use the modified mapUrlParamsHandler module in your WAB project, you first need to download the appropriate one (index driven or title driven) from Github at https://github.com/RyanDavison/WAB_URL_Parameters. Then replace the native file located in \WebAppBuilderForArcGIS\server\apps\<Your Apps ID Number>\jimu.js .
If you’ve already exported your app and are hosting it on your own server just find the jimu.js folder and paste the file in there. Alternatively, you could just copy the code out of the files on Github and paste it right into the native mapUlrParamsHandler.js file. That’s all you have to do to get layer toggling functionality through your URL.
In the future, ESRI might enable this same functionality in the WAB Developer Edition. If they do, it’s a good bet they won’t have the same URL structure as me. As I’m writing this, The Web App Builder is at version 2.9. So if you start using my modified code now, you might be changing your own URL structures to match the ESRI API in the future.
If you have any questions, comments or problems feel free to leave them in the comments section below or contact me on Github.
EDIT:
When I first wrote the modification You could only turn sub-layers on and off along with their parent layer. So, if you wanted to turn off sub layer 2 but turn on sub layer 3 of LayerX you would have to write
?layers=-LayerX:2,LayerX:3
It was a two-step process that was very clunky. Now, you can turn off sublayers independently. So the query above would now simply read:
?layers=LayerX:-2;3
Of course you can still turn off an entire layer like this:
?layers=-LayerX