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
- 3 people found this helpful
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
Thanks Carmel, that makes sense. I wish I had the skills to develop something that sophisticated.
- 3 people found this helpful
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
- 2 people found this helpful
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
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
- 3 people found this helpful
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:
<style>
/* CUSTOM CSS RULES */#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:
<style>
/* CUSTOM CSS RULES */
#headerNavBarPanel {
background-image: url("resources/banner.jpg");
background-size: 100% 100%;
}#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
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!
- 1 person found this helpful
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
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.
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
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
- 1 person found this helpful
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
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.
I also would like to try the banner image in the header when I get the toggle to work.
Thank you for response by the way.
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({
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
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
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
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.
Hi Nathan,
I am using a dojo button to call from with the id "toggle basemap" in the html for my script:
var togglebasemap = dom.byId("togglebasemap");
on(togglebasemap, "click", function () {
var baseLyr = app.map.getLayer(app.map.layerIds[0]);
if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json"){
app.map.removeLayer(baseLyr);
var tiled = new ArcGISTiledMapServiceLayer("http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer");
app.map.addLayer(tiled, 0);
} else if(baseLyr.url === "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer"){
app.map.removeLayer(baseLyr);
var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");
app.map.addLayer(vectorTileLayer, 0);
}
});
The bottom part seems off maybe.
Brandon
The toggle only seems to fire within each map instance. The button is basically removing off the [0] layer set in each web map and then creating a new tiled layer which is added to the map.
var vectorTileLayer = new VectorTileLayer({
styleUrl: "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json",
type: "VectorTileLayer"
});
var vectorBasemap = new Basemap({
layers: [vectorTileLayer],
title: "Vector",
thumbnailUrl: "https://caltrans.maps.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/info/thumbnail/ago_downloaded.jpg?token=Do3lEzHoScB93459ECsBMPuBbLDp0fJwag_zLpoByDyG_2YYO3kPw9PnT1b-3b24k-RitFx8ge4QNwuCCF6Rv0k9RL0ptRqR2fVw-7wHkY2zSPYti3QFtohzW_V3PNeIKHc9rpUID0Jj8v1JDnbi_0O_voZLqO71vV7dV9WEsgWZO_5levlM1esCrZZdh4ebF_MakjfSB2FAeyB9YJeB7A.."
});
var imageryLayer = new BasemapLayer({
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
var imageryBasemap = new Basemap({
layers: [imageryLayer],
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] === vectorBasemap) {
basemapGallery.remove(vectorBasemap.id);
basemapGallery.add(imageryBasemap);
} else if (basemapGallery.basemaps[0] === imageryBasemap) {
basemapGallery.remove(imageryBasemap.id);
basemapGallery.add(vectorBasemap);
};
});
basemapGallery.startup();This is what I have for the script (AMD not include). Does this look right? Is the css and html tricky?
Brandon
Good Morning Brandon,
Let me provide all the code changes that I made for you. It's similar to what you were doing, but I modified the style and made the widget smaller as the window shrinks.
1. index.html - Here I made the following CSS changes.
#basemapGallery {
position: absolute;
bottom: 55px;
right: 10px;
z-index: 50;
}
.esriBasemapGalleryNode {
border: 1px solid #ccc;
box-shadow: 0px 0px 7px #000;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
}
.esriBasemapGalleryLabelContainer {
font-size: 12px;
background-color: #FFFFFF;
height: 1.75em;
border-top: 1px solid #ccc;
}
.esriBasemapGalleryThumbnail {
border: 0px;
margin: 0px;
width: 100%;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {
border: 0px;
margin: 0px;
}
Then, I added a div called basemapGallery inside the map div.
<div id="map">
<div id="basemapGallery"></div>
</div>
2. Core.js - Here I added the following code inside the function initializeUI to create and configure the basemap gallery.
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://yourstyleurl",
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);
};
_mainView.resizeBasemapGallery();
});
basemapGallery.startup();
3. MainView.js - Here I added the following code inside the constructor function for the MainView class. This resizes the basemap gallery widget based on how big the screen is.
this.resizeBasemapGallery = function() {
if ($('.map .logo-sm').length === 1) {
$('.esriBasemapGalleryLabelContainer').css('display', 'none');
$('#basemapGallery').css({
'height': '40px',
'width': '72px',
'bottom': '30px',
'right': '0px'
});
$('.esriBasemapGalleryNode').css({
'height': '35px',
'width': '52px'
});
$('.esriBasemapGalleryThumbnail').css({
'height': '33px',
'width': '50px'
});
}
else {
$('.esriBasemapGalleryLabelContainer').css('display', 'block');
$('#basemapGallery').css({
'height': '95px',
'width': '120px',
'bottom': '55px',
'right': '10px'
});
$('.esriBasemapGalleryNode').css({
'height': '88px',
'width': '98px'
});
$('.esriBasemapGalleryThumbnail').css({
'height': '67px',
'width': '96px'
});
}
}
Hi Nathan,
Thanks for the sample. This is great material to work with. I am going mull over this for a bit and get back to this thread with the my final code. I don't have a div id=map. I am using a regular tabbed story map series downloaded from ArcGIS Online. Are you maybe using a hybrid story of some sort? Was yours downloaded off github or Agol?
-Brandon
No, I'm using a Shortlist story map, which also has tabs but only has one map. I believe the one you are using has one map per tab. When you switch tabs, it turns the map on the new tab on and the map on the previous tab off.
If you want to continue with the approach above, you would need to create one BasemapGallery widget for each map. You would probably want to add a variable to _mainView that points to an array of the BasemapGallery widgets and they would be indexed the same way as the tabs and maps. Then, you would add one more block of code to the on selection change callback function. If the active map index equals the index of the BasemapGallery widget that was just selected, then call the select method on the BasemapGallery widgets of the other maps. This will trigger the selection-change event on the non-active widgets, but they will just update themselves and not start an infinite loop.
It looks like the maps array is called app.maps. The expression $('.mainMediaContainer.active').index() produces the index of the active tab. You need to wrap the code in step 2 in a for loop iterating over app.maps. Then, you need to add the condition I talked about above in the selection-change event handler to make the active widget update the non-active widgets. You'll need to add divs inside each map div using jQuery to store the widgets. Explore the DOM using the Developer Tools (F12) in most browsers to see the structure of the DOM. You can also see how Esri uses jQuery and CSS classes to store some of the application state.
As for resizeBasemapGallery, I would probably add a parameter called index and modify the code to only apply to the tab with the given index. Then, on a basemap selection-change, only resize the BasemapGallery widget for the active map. I forgot something else. I am calling resizeBasemapGallery in a few other places in the code so that it resizes when you change the window size, etc. I can't look up those other places sometime. The jQuery Pocket Reference from O'Reilly is a good way to pickup the basics of jQuery. I started with the code from GitHub and set up Node and Grunt to automate the build process.
Have a good weekend!
Nathan
Wow Nathan. This is great. Thanks for your time explaining this. I checked out the shortlist to use for my project instead but it doesn't seem you can use anything other than point markers and not map services which are what my maps have. I am going to review what you found on $('.mainMediaContainer.active').index() for the tabs. This is what I have so far (same solution as above that doesn't change all tabs, just active map, but with thumbnails instead of a button (like yours)):
var togglebasemap = dom.byId("togglebasemap");
on(togglebasemap, "click", function () {
var baseLyr = app.map.getLayer(app.map.layerIds[0]);
if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json"){
app.map.removeLayer(baseLyr);
var tiled = new ArcGISTiledMapServiceLayer("http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer");
app.map.addLayer(tiled, 0);
$('#togglebasemap').css('background-image', 'url(http://caltrans.maps.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/info/thumbnail/thumbnail.png)');
} else if(baseLyr.url === "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer"){
app.map.removeLayer(baseLyr);
var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");
app.map.addLayer(vectorTileLayer, 0);
$('#togglebasemap').css('background-image', 'url(http://caltrans.maps.arcgis.com/sharing/rest/content/items/10df2279f9684e4a9f6a7f08febac2a9/info/thumbnail/ago_downloaded.jpg)');
}
});I will repost with any changes.
Brandon
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