Help adding a search bar to a Story Map?

[CoryBoschman]

Hello,

I'm hoping to find a way to add a search bar to either the side bar of my Journal Story Map, or to a map on the main stage of one of my slides.

I'd like to configure it to search through a layer of named lines. I have been able to set this up in the template apps on arcgis online, but the journal story map doesn't seem to have a search tool option.

I am able to host the app on a web server and have added some google fonts to customize it.

Any suggestions on where to start?

Thanks.

[OwenGeo · Accepted solution]

Hi Cory,

This is easy to do and it sounds like you already have another app that does what you want, so you're already halfway there! Just add the URL of your app with search to a section of your story map as a web page. Be sure to use the "Stretch" position option to the app fills the entire main stage. If you're not familiar with how to do that there's more information in this blog post.

There are several configurable apps that have search capabilities, so just pick the one that provides the best experience for your story. Here's an example of a Map Journal with an embedded Web AppBuilder app with search: http://arcg.is/1FugOFu

Let me know if this is helpful!
Owen

P.S. After the November 2015 update to ArcGIS Online the "Stretch" position option will be renamed to "Fill," and it will be the default position for web pages.

[CoryBoschman]

Hi Owen,

thanks yeah i had done that, and is seems to work when the app is hosted on arcgis online, but my customized app on aws.amazon.com doesn't load the page

you can compare the two on the "Check out all the Runs" pages on each story app

https://s3.amazonaws.com/cboschmaps.com/index.html

http://arcg.is/1P5HHRO

Do you know of a way to add the search bar to the side panel?

Thanks,

Cory

[OwenGeo]

Hi Cory,

I took a look at the developer tools in my browser and it looks like this is a mixed-content issue (https & http content in the same app). If you access your Amazon-hosted app over http instead of https the embedded app loads.

If you require https for the Amazon-hosted app then make sure to use the https URL when embedding the basic viewer app in your story map configuration.

Let me know if you are able to use one of these solutions.

Owen

[OwenGeo]

For adding a search bar that searches features in the map to the side panel, that would be a customization that you'd need to download the source code and develop on your own. Map Journal code is available here on GitHub.

Owen