Add a logo to a story map hosted on portal

[Shauna-RaeBrown]

I'm using the "Basic Story Map". I'm trying to set up the story map and want to add a logo to the upper right-hand corner in the header panel.  I can't find where to add the logo anywhere in the "configure app".  Alternatively, where in the source code would I add the image's url?

Additionally, I'd like to have the app launch with the map legend open.  I'm trying to get this story map completed for our annual report, due next week. Please help!

[OwenGeo]

Hi Shauna-Rae,

The version of Story Map Basic that is currently included with Portal for ArcGIS 10.3.1 and earlier doesn't have the ability to add a logo in the header. However, the latest version released on ArcGIS Online in November 2015 does have this ability, and that version of the Basic app will be included in Portal for ArcGIS 10.4.

If you don't want to wait for 10.4, you can download the latest version of the Basic app from GitHub and install it on your Portal. Esri/basic-map-storytelling-template-js · GitHub

Also, I'll make sure a developer gets back to you on your other questions.

Owen

[StephenSylvia · Accepted solution]

As Owen mentioned you should start by downloading the code from Github: Esri/basic-map-storytelling-template-js · GitHub​.

The first thing you'll need to do is edit the config with your web map. Open the config > default.js file and replace the web map id with your webmap id: basic-map-storytelling-template-js/defaults.js at master · Esri/basic-map-storytelling-template-js ·...

While still in this config file, you can change the logo url and associated hyperlink:

The logoLink (https://github.com/Esri/basic-map-storytelling-template-js/blob/master/config/defaults.js#L38​) can be any valid website url. The will open a new tab when the user clicks on the logo. For the logo itself, replace the logo (basic-map-storytelling-template-js/defaults.js at master · Esri/basic-map-storytelling-template-js ·...​) with the url to a logo image. This needs to be the direct path or the image file (usually ends in .jpg or .png). If the logo is already hosted, just use the full http:// url. If you need a place to host your logo, just add the image file to the "images" folder and replace "esri-logo.png" with the filename of your logo.

To make the make the legend open by default, you will need to make two small changes to the code. First in the index.html file (basic-map-storytelling-template-js/index.html at master · Esri/basic-map-storytelling-template-js · ...​) you will want to change the "icon-down" class to "icon-up"

Change this (line 71)

<div id="legToggleIcon" class="fg icon-down toggle-icon"></div>

To this

<div id="legToggleIcon" class="fg icon-up toggle-icon"></div>

Finally, in the js > main.js file, remove like 213 basic-map-storytelling-template-js/main.js at master · Esri/basic-map-storytelling-template-js · Git...​.

Once you have done this, you can test it and upload it to your server.