Custom URL parameter problems - symbology and extent.

[JamesPreston]

Hi there. I am having a few issues with URL parameters while using the Basic Template.

I am using a suburb polygon layer in the map, which I do not want to be visible, and have set the symbology to be transparent, and have also disabled the pop-up. I have set up a URL parameter, based on the suburb object ID field. When I use a URL parameter to navigate to the map it highlights the polygon, but there are two issues I have with the way it displays.

1. It applies an orange, transparent symbology to the polygon. I was hoping that it would just highlight the boundary of the polygon, and leave the fill transparent as specified. This is not ideal as the colour obscures the data and basemap.
2. Sometimes, depending on how I have my browser window sized, it will not include the entire polygon within the extent. Small portions of the polygon are not visible without scrolling out to a larger scale. It was my understanding that the entire feature would be contained within the extent.

The application is hosted in our AGOL account servers, so I only have access to the basic template configuration.

Any help would be appreciated.

Thanks.

[KellyHutchins · Accepted solution]

James Preston​

One option that may work is to provide some custom css that will modify the symbol. You can specify custom css when configuring the Basic Viewer template  in the Theme section. At the bottom of the Theme section there's a text box that allows you to paste in custom css. This css will overwrite the app defaults.  If you paste in this css then save the app you should see that the selection is no longer orange - it now has a transparent fill with a blue border. You can change these values to set any color you'd like.

g#mapDiv_graphics_layer path {
    fill-opacity: 0.1;
    fill: rgba(0, 0, 0, 0);
    stroke: rgba(0, 188, 212, 0.84);
    stroke-width: 2;
}

[JamesPreston]

Hi Kelly - I have only just managed to get the time to test this out. It works perfectly! Thanks!

[AmyRoust]

Just wanted to add my experience with this code snippet from Kelly. We are using the Map Tools template for our county property viewer and the orange highlight has been on my hit list for a while now. Since we are hosting the app template on our server, I was able to take this bit of code and paste it into the main.css file to overwrite the orange box. I put it in directly below the other two style blocks that reference #mapDiv and it worked like a charm. Thanks, Kelly!

[ArielLow2146]

@KellyHutchins I'm not seeing a place in the Basic Instant App to paste in CSS anymore. I tried using this snippet in the Media Map Instant App but could not get it to work. Is this still accomplishable?

[KellyHutchins]

@Anonymous User  Basic doesn't support custom CSS since we are trying to keep that app config experience as streamlined as possible.  The app referenced in this thread uses version 3.x of the JSAPI and media is using 4.x so the css won't work as expected. Can you provide a few details about what you want to modify? Is it the selection color? 

[ArielLow2146]

Hi @KellyHutchins, yes I'm trying to modify the selection color. I was hoping to use URL parameters to filter the data but since that isn't possible I was thinking a work around could be to have no fill or outline on the layer then make the selection color and outline match what I would want for the symbology so it looks like only the feature specified by the URL parameter is on the map.

[KellyHutchins]

Thanks for the extra info. Unfortunately we can't change the selection color via css for that app. We are looking to expose a config option that will let you modify the selection symbology but I don't yet have a date on when that capability will be in the app. 

[TatanaBlahova]

Hello @KellyHutchins,

I am dealing with similar issue as user in the original post here - I am using Instant Apps Basic template and would like to modify the feature selection color (highlight fill and highlight outline) as it can be done in Experience Builder.
Is this capability already in the app? Because I was not able to find any ways to change selection symbology in Instant Apps templates.

Thanks for an answer!

[ArielLow2146]

Thanks @KellyHutchins! One more thought/question, are there any of the 4x instant apps like minimalist, media map, or sidebar where  it is possible to change the selection color via css?