Nearby app: Map container size and Clear Search Results button

[NataliyaLys]

I was wondering if there is any way to resize the 'map container' in the NearBy app, so there is no blank white space on the right (see attached)?

Also, every time I want to do a new search I have to click on the 'Clear Search Result' button. Is there a way to by pass this, and/or hide the button. And instead have a new search initiated right away from a map click? (This was a functionality in a legacy 'Information lookup' template).

Thank you,

Nataliya

[NataliyaLys]

Tried the css, but it didn't do anything

[KellyHutchins]

Ok looks like the copy/paste left out some tags. I also added a little bit of extra css. Can you try this: 

.app-header {display: none;} .esri-slider {display: none;} 
@media screen and (max-width: 859px){
.buffer #mapPanel { top: 32px; height: calc(100% - 32px); }}
@media screen and (max-width: 859px){
#mapPanel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 34px;
    height: calc(100% - 34px);
}}

[NataliyaLys]

That worked. Thank you. 

[NataliyaLys]

Hi @KellyHutchins I have another NearBy instant app, where I would like to hide a  header, but I want to display the Information button (that seems to be a part of the header). Is there any way to move this button out of the header with just CSS? Perhaps put it on the map, under zoom buttons? (see attached image)

Appreciate any and all suggestions, 

Nataliya

[KellyHutchins]

Its not easily doable with just css and if the header is hidden the info button included within is also hidden. We've talked about exposing an option via the configuration experience to enable/disable the header. I can look at adding that for the next release of Online. 

In the meantime have you thought about using the cover page? You could add intro text there and the button to enable/disable it appears on the map. 

[CameronBlandy]

Yes I took out the css you gave me and the maps show full width on mobile device. Thanks for the quick turn around.
I did have another question that I posted last week,.
Are you able to add css (or other code) that can adjust the background of the each result based on an attribute value?

[KellyHutchins]

Hi Cameron,

Are you referring to the background color of the map symbol for the features?  Or the background of the content that appears in the results panel. For either case its not possible with just css but you may be able to use Arcade to modify the symbol or change the color of the text in the popup window based on an attribute value.  Here's some info: https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/bring-colors-from-your-map-into-your...

[CameronBlandy]

Hi Kelly,
I was actually referring to background colour in results panel to match the colour of the symbols in the map (attribute based).
I guess a follow up question would be: Can I download the nearby template and edit the source code??

[KellyHutchins]

The latest version of the nearby app source code is not currently available for download but we are working on making it available and hope to have it ready in early January. 

However I did some digging and it is possible to modify the background color using an arcade expression. It takes a bit of work and I think (at least in the example I'll share) it doesn't look that great. 

Here's a test app showing the results. 

https://www.arcgis.com/apps/instant/nearby/index.html?appid=488d3d71d295428998dcad18cd632faf

To achieve the above I followed the steps in this blog post from Lisa Berry. 

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/bring-colors-from-your-map-into-your...

In her post she shows how to modify the text color based on an attribute value. I think the results of this look good and can add an identifying pop of color to the popup. In order to get the background color I use the source editor available in the Map Viewer popup editor and set the background color a div that surrounds all the popup content to the color defined in the arcade expression. One update I'd make if you were going to publish this would be to also define a color value to apply to the text depending on the background color. For example in my app you'll see that for features with the red background the black text is hard to read. 

 

When editing the popup in source mode its important to know that not all html will be supported. This help topic outlines the HTML that you can use in online. https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm

[NataliyaLys]

@KellyHutchins regarding the 'Clear Search Results' button, I understand your point that while in the 'search mode' I can click on individual layers in result list and see them highlighted on the map, etc. But in my specific case, I don't really need an ability to interact with returned features, I just want to see results and that's it. And then, when I click on the map I just want the current  results to be cleared and new results displayed.

I was thinking that maybe it would be useful to have an option in the app configuration to allow users to interact/select layers in result list, but it's probably not that simple. 

If you have any suggestions/ideas about this  I would like to hear it. 

Thank you,

Nataliya