topic Re: Customize Story Map Shortlist to add photo in header in Classic Esri Story Maps Questions

Customize Story Map Shortlist to add photo in header

NBurling — Fri, 06 Oct 2017 22:25:05 GMT

I am working with the Storymaps shortlist app and have seen some beautiful examples in the gallery but I can't figure out how reproduce some of the features. For example this map as a photo as the header. Can someone help me figure out how I can do that? thanks

Re: Storymaps shortlist photo in header

CarmelConnolly — Mon, 09 Oct 2017 12:51:09 GMT

Hi Nono,

It looks like that story map is hosted by Salt Lake County themselves rather than in ArcGIS Online - this means they can make additional styling changes to the app that you can't do in ArcGIS Online. It's possible to download the Shortlist app from here under the 'Host it yourself' section.

Carmel

Re: Storymaps shortlist photo in header

NBurling — Mon, 09 Oct 2017 18:21:45 GMT

Thanks Carmel, that makes sense. I wish I had the skills to develop something that sophisticated.

Re: Storymaps shortlist photo in header

RupertEssinger — Mon, 09 Oct 2017 21:50:52 GMT

Yes, the custom header graphic stylings you see in examples like:

https://slco.org/ghosts-west-temple/
Beaverton Restaurant Week: Where to Eat
http://www.forestrygis.com/saf2016/index.html (the tabs have also been customized)

are achieved by downloading the source code and hosting it on the web yourself so you can modify it. Doing these sorts of customizations are one of the reasons we provide the source code for these app templates. In this configuration, the web map and the data it displays are still hosted in ArcGIS, and you author your Shortlist the same way, and the app resides in ArcGIS too. You tell your self-hosted version of the app source code to display that app. To find out more about what is involved in general, see the 'If You're a Developer" section of the Story Maps website > Resources page.

We don't expect every GIS user to be able to do this sort of customization. I've been at Esri for more than 25 years and I don't know how to do this . But it is fairly straightforward if you know some web development and there may well be a web person in your organization who could work with you on it.

One trade off to remember with self-hosting our app code: as your source code is no longer hosted in our cloud, it doesn't automatically get updated when we fix issues or add enhancements.

Rupert

Re: Storymaps shortlist photo in header

NathanHeick — Sat, 11 Dec 2021 08:12:04 GMT

Hi Nono,

Earlier this year, I was in the same situation as you. I wanted to make a good looking story map with a lot of the cool features other people have employed. Initially, I had not previously done any customizations. There are two options here, download the ready-to-deploy app or download the source code here. The easiest way is to download the ready-to deploy app. If you unzip the application and open up index.html, Esri developers have left a spot for us to make CSS style changes to the application. With these style changes, you can do a lot to change the appearance of the app.

<style>
    /* CUSTOM CSS RULES */
</style>‍‍‍‍‍‍

You want to set the background image of the top portion of the application which is the element with id="header". To do this, you can do the following:

<style>
    /* CUSTOM CSS RULES */
    #header {
        background-image: url("resources/banner.jpg");
        background-size: 100% 100%;
    }
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You need to add the CSS rule above to index.html and save your banner image in the resources folder of the application as "banner.jpg". You could also pass in a URL to the image if it is hosted somewhere else.

Then, you will need to deploy the app on a web server. If that sounds like too much, this would be very easy for a web developer in your IT department. If you want to make changes beyond just style changes, you would need to download the source code, modify it, and compile it using Node.JS and Grunt.

Currently, I have a development version of the app I am working on here:

https://d315r0g26gh8i4.cloudfront.net/

This link will eventually go away, but the production app will be named Facilities and will be under the Los Angeles County Sanitation Districts AGOL organizational account under my username. I started out really simple and then continued to make more and more changes. I even tweaked the mobile layout. I will say that the CSS changes provide the most bang for the buck. I added about 4 CSS changes at the beginning and it really improved the app.

I hope that helps.

Nathan

Re: Storymaps shortlist photo in header

NBurling — Tue, 10 Oct 2017 16:01:07 GMT

Thanks Nathan, your map is beautiful. I will look into it though I suspect my skills will not be up to it. More to learn I guess. I sure appreciate this community and also Storymaps in general. You make it so easy for even a non coder to create something of beauty and value.

Re: Storymaps shortlist photo in header

NathanHeick — Tue, 10 Oct 2017 17:31:34 GMT

Let me add that I think that most of the beauty in story maps comes from the underlying content. Beautiful pictures make a big difference, without any customization at all. That's really the first step of getting the most out of the story maps. Next, CSS style changes give you more control over the presentation. Finally, modifying the HTML and JavaScript let you change the style and behavior of the app. For example, if you click on Scholl Canyon Landfill on my app, it turns on a layer unique to that facility. Remember, many of Esri's story map gallery applications are not custom, but they have really good photographs and good stories to tell.

Try this out yourself and let me know if you have any issues.

Nathan

Re: Storymaps shortlist photo in header

FengChen2 — Wed, 11 Oct 2017 14:46:24 GMT

Hi Nathan, your map is beautiful and thank you for share the info. I have a few questions:

I try to add background image as you suggested, but my image only shows until the top of the tabs, not as the same as yours – your image shows as the background of the tabs in between, how do you do that?
Where do you customize the color of the inactive tab?
Do you customize the content of story at CSV file using html?

Thank you.

Feng

Re: Storymaps shortlist photo in header

NathanHeick — Wed, 11 Oct 2017 17:03:47 GMT

Hi Feng,

Here are the answers to your questions:

1. First, you have to make the background of the header and the navigation bar transparent. To do that, you could add the following CSS rules to index.html:

#header {

background-color: transparent;

}

        #nav-bar {
                background-color: transparent !important;
        }
</style>

Then you need to set the background image on the entire area including both the navigation bar and the header. This area is called the headerNavBarPanel. To do this, you can change the CSS I provided earlier to the following:

#header {

background-color: transparent;

}

        #nav-bar {
                background-color: transparent !important;
        }
</style>

There is actually code in the application setting the header and nav-bar colors using jQuery. This CSS overrides the styles set in the code and is easier for you to add and remove later.

2. You will have to download the source code to change the tab colors and tab text colors. It is stored in an object on line 897 of the MainView.js file. The location of the MainView.js file in the source code hierarchy is shown on the linked GitHub page. You can easily do a file search for MainView.js as well.

var colors = {
        header: app.data.getWebAppData().getThemeOptions().headerColor,
        tabText: '#d8d8d8',
        tab: '#666',
        tabTextActive: '#fff',
        tabActive: '#999',
        tabTextHover: '#fff',
        tabHover: '#666'
};

If you replace the line:

header: app.data.getWebAppData().getThemeOptions().headerColor,

with:

header: 'transparent',

it has the same effect as:

        #nav-bar {
                background-color: transparent !important;
        }

although it may have some other side effects I haven't researched.

3. The version of the code I am using uses a feature collection stored in the web map. Early in the process I realized that I did not want to edit the data as features in the web map. Also, I knew I wanted the description field to have HTML so that I could make the detail panel have a paragraph, a table of information, and a link to a more detailed facility web page. So, I created a feature class in a geodatabase with all of the natural data fields that I wanted to store and present. Then, I wrote a Python script that would read the features and their 19 fields, generate the HTML for the description field, and update the web map in ArcGIS Online. I had written my own library of tools for working with AGOL items, but you could do the same with the new ArcGIS API for Python,with urllib and urllib2 in Python 2.7, or manually using the ArcGIS Online Assistant. I can make changes in ArcMap to the data and republish the web map in 20 seconds and never touch any HTML.

Now, I am a little rusty on CSV files and feature collections. You should be able to delete the point layer in the web map and readd it using a CSV file with the correct fields. That would make it easier for you to type in the HTML in the CSV file. Otherwise, the Map Viewer and the App Builder, I believe, will take any HTML code you write and escape the <, >, and & characters when it stores it in the feature collection. When it displays it on the page, it will look like the code you entered, not the web page elements it represents, like images or hyperlinks. With the CSV file approach, the feature collection will store HTML and the web map and web app will render the HTML elements correctly.

Also, the latest version of the shortlist story map supports feature services, so it becomes a little easier to understand what's going on.

You can also add other supporting layers to the web map. Just add them after the story points layer.

Enjoy,

Nathan

Re: Storymaps shortlist photo in header

FengChen2 — Wed, 11 Oct 2017 19:39:16 GMT

Thank you so much Nathan for the quick reply.

I try the first one right away and change the CSS as you suggested, however my map does show the background image at the headerNavBarPanel area, maybe I missed something else?

Also, once I download the source code MainView.js, which folder at the template should I save it at?

Lots of helpful info at #3 for me to digest, thank you!

Re: Storymaps shortlist photo in header

NathanHeick — Thu, 12 Oct 2017 03:28:29 GMT

Hi Feng,

I updated my original post after doing some testing. My code also had a CSS rule to make the header background color transparent. You need to add that. Also, the CSS rule for making the nav-bar transparent was not accurate. The JavaScript code sets a CSS rule on the nav-bar background color to !important, which overrides the CSS rule I told you to add. If you add !important to yours too, it will override the one from the JavaScript. I didn't actually use !important in my code. I ended up modifying the JavaScript, which would be harder for you to understand up front.

I had never touched CSS before this app. I just used the developer tools (F11) to navigate the DOM and see which CSS classes and element ids were being used. I looked at the CSS rules to see how they related to what's on screen. In the developer tools, you can modify the web page styles in memory to test things out before you make the change in index.html. Furthermore, I didn't touch the JavaScript until I had accomplished everything I could in CSS. Once you get into the JavaScript, you have to follow the execution of the JavaScript code starting in index.html. After a little filtering of information, you realize that almost everything is in six files. There is a file for config, the MainView, the NavBar, the TilePanel, the DetailPanel, etc. There are a lot of files you don't need to understand. I added a Search widget in the map with custom behavior, a basemap toggle, layers that turn on and off with individual tabs, layers that turn on and off with individual points, tab specific zoom extents, and a county specific zoom button. Some of these things Esri had already started in the code or have implemented since.

Have fun,

Nathan

Re: Customize Story Map Shortlist to add photo in header

BrandonPrice — Fri, 03 Nov 2017 15:55:53 GMT

Hi Nathan,

How were you able to add the basemap toggle? Was this easy to do? I have a storymap series I would like to add that to that I have downloaded to my server at work.

-Brandon

Re: Customize Story Map Shortlist to add photo in header

NathanHeick — Fri, 03 Nov 2017 20:41:21 GMT

Hi Brandon,

You need to start by reading the JavaScript API documentation and become familiar with adding widgets to applications. There are two options for basemap widgets, the BasemapGallery widget and the BasemapToggle widget. The basic pattern is to add a div element as a child to the map div. This will hold the layout of the widget. Next, you need to create an instance of the widget in the JavaScript code, setup any event handlers, and start the widget up. Finally, you need to modify the CSS if you don't like the styling of the widget.

I chose the BasemapGallery widget and made it look like the BasemapToggle by using only one basemap at a time and wiring an event handler that changes the basemap everytime the widget is clicked. I built my own basemap that combines the World Imagery service with a vector tile service for reference labels. I put the JavaScript code in the initializeUI function in the Core.js file and added the appropriate module imports to the top of the file. I tweaked the CSS to give it a different look and feel. Finally, I added some code to resize the widget so that it is smaller on a mobile device.

You may have to use jQuery's .append method to add the widget div to the map div. I just edited index.html because the map div was defined there already. If you have multiple maps in your story map, the map divs may get injected at run time. Also, you may need one widget for each map in the story. So, you need to understand the particular code base you are working with and how to create widgets using the API. I had never done this before, but I figured out the concept and applied it. The JavaScript API is doing most of the work. You are just specifying where the widget will go, configuring the widget, and starting it up.

Nathan

Re: Customize Story Map Shortlist to add photo in header

BrandonPrice — Mon, 06 Nov 2017 03:58:07 GMT

Thanks Nathan. I will attempt this further on Monday. So far I have added a basemap toggle to my map using the example in the api reference but it is on all tabs, even the one that has no map. Maybe the append method will fix this. Also, even though the toggle works, it has issues. I am using a custom vector basemap that blocks the toggle. When I remove the custom basemap in my web maps, my story web maps load with no basemap, and then when the toggle is clicked, a basemap appears. Maybe I could remove the custom basemap when the toggle is clicked. Ideally, I would rather use my custom basemap in the toggle.

Re: Customize Story Map Shortlist to add photo in header

BrandonPrice — Mon, 06 Nov 2017 03:58:53 GMT

I also would like to try the banner image in the header when I get the toggle to work.

Re: Customize Story Map Shortlist to add photo in header

BrandonPrice — Mon, 06 Nov 2017 15:23:52 GMT

Thank you for response by the way.

Re: Customize Story Map Shortlist to add photo in header

NathanHeick — Tue, 07 Nov 2017 02:24:36 GMT

Hi Brandon,

The BasemapToggle seems to be simpler than the BasemapGallery widget. It may not support your basemap. I think that is why I ended up using the BasemapGallery widget and tried to make it behave like a BasemapToggle. I only have one basemap in the gallery and I use the selection-change event to toggle the basemaps. One of my basemaps includes the World Imagery service and an Esri vector tile reference service. Here is a portion of the JavaScript I used. This doesn't include loading the modules, the HTML, or the CSS. However, you can see that I created BasemapLayers to make Basemaps, then used the Basemaps in the BasemapGallery widget. This would probably work for you and is highly flexible about the source services you use. I don't have any experience with your story map type, so I don't want to make any recommendations about how to handle each map. I can imagine that each Map object needs this process repeated so that it has its own set of objects.

var topoLayer = new BasemapLayer({

url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"

});

var topoBasemap = new Basemap({

layers: [topoLayer],

title: "Topo",

thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/topo_map_2.jpg"

});

var imageryLayer = new BasemapLayer({

url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"

});

var hybridReferenceLayer = new BasemapLayer({

styleUrl: "http://lacsdgis.maps.arcgis.com/sharing/rest/content/items/af6063d6906c4eb589dfe03819610660/resources/styles/root.json",

type: "VectorTileLayer"

});

var imageryBasemap = new Basemap({

layers: [imageryLayer, hybridReferenceLayer],

title: "Satellite",

thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/imagery_labels.jpg"

});

var basemapGallery = new BasemapGallery({

map: app.map,

basemaps: [imageryBasemap],

showArcGISBasemaps: false

}, "basemapGallery");

basemapGallery.on("selection-change", function () {

if (basemapGallery.basemaps[0] === topoBasemap) {

basemapGallery.remove(topoBasemap.id);

basemapGallery.add(imageryBasemap);

} else if (basemapGallery.basemaps[0] === imageryBasemap) {

basemapGallery.remove(imageryBasemap.id);

basemapGallery.add(topoBasemap);

};

});

basemapGallery.startup();

Sorry for the code formatting, but I can't find the tools for formatting it properly. I just see really basic tools.

Nathan

Re: Customize Story Map Shortlist to add photo in header

BrandonPrice — Wed, 08 Nov 2017 04:33:09 GMT

Hey Nathan,

I have been trying to get it going and reviewing everything you sent. Sorry that I have not replied. Thanks. This was very helpful. I am still in the process of figuring it out on my end with the story map series template. I will keep you posted.

Thanks,
Brandon

Re: Customize Story Map Shortlist to add photo in header

BrandonPrice — Fri, 15 Dec 2017 04:04:51 GMT

Hey Nathan,

I have been trying to figure out how to get the basemap to stay put when it switches tabs. My toggle resets to the original basemap that loads at start whenever the tabs are switched. Thanks a lot for the help so far. I went with an approach similar to yours above that had a button instead of a basemap widget.

Brandon

Re: Customize Story Map Shortlist to add photo in header

NathanHeick — Fri, 15 Dec 2017 04:45:04 GMT

Hi Brandon,

I’ll check my code tomorrow, but I don’t remember that being an issue and it seems strange. Can you post your code for the button you made? I really just used a BasemapGallery widget and used an event handler on the basemap change to toggle between two maps. It might be the way you’re setting the basemap. It doesn’t sound like it withstands a map refresh.