Custom URL parameter problems - symbology and extent.

4712
9
Jump to solution
04-19-2016 10:01 PM
JamesPreston
Occasional Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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;
}

View solution in original post

9 Replies
KellyHutchins
Esri Frequent Contributor

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
Occasional Contributor

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

0 Kudos
AmyRoust
Occasional Contributor III

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!

0 Kudos
ArielLow2146
Occasional Contributor II

@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?

0 Kudos
KellyHutchins
Esri Frequent Contributor

@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? 

0 Kudos
ArielLow2146
Occasional Contributor II

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.

0 Kudos
KellyHutchins
Esri Frequent Contributor

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. 

0 Kudos
ArielLow2146
Occasional Contributor II

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?  

0 Kudos
KellyHutchins
Esri Frequent Contributor
Unfortunately not.
0 Kudos