Customize Story Map Shortlist to add photo in header

[NBurling]

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

[NathanHeick]

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

[BrandonPrice]

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

[NathanHeick]

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

[BrandonPrice]

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.

[BrandonPrice]

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

[BrandonPrice]

Thank you for response by the way.

[NathanHeick]

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/top..."

});

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/resource...",

   type: "VectorTileLayer"

});

var imageryBasemap = new Basemap({

   layers: [imageryLayer, hybridReferenceLayer],

   title: "Satellite",

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

});

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

[BrandonPrice]

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

[BrandonPrice]

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

[NathanHeick]

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.