ArcGIS StoryMaps: Getting Started with the New Story Builder

like to thank you guys for joining us today and tuning in to this technical session about our K s story Maps our topic today is getting started with the new story builder so by way of introduction we are product engineers on the Archaea story maps team in the technical session today we have Arvind my name is Joseph and we're also joined by Sarah so to start with let's review some of the objectives for this technical session primarily we want to introduce the new RTS story maps and give an overview of the story authoring tool which we call the story builder and our goal here is really to equip you with the knowledge and resources you'll need to start telling your own stories with some tips and tricks sprinkled in so to get started what is our kiss story maps well story maps is a story authoring and web based application on the RTS platform that enables you to share your maps in the context of narrative text and other multimedia content you can use our clear story maps to do things like the following you can of course author's stories and collections and these stories can include things like maps narrative text lists images videos embedded items and other media once you've authored a story you can publish and share these stories both within your organization into a broader worldwide audience and the tool also comes with management capabilities that allow you to keep up to date with previous stories that you've authored and change settings at any time the history and background of story maps is really interesting the first story map template was introduced in back in 2012 with the basic story map template and this template gave authors on the Archaea store map or a darkess platform an opportunity to put a little bit of context around the maps that they have been authoring with a simple narrative text panel and the ability to configure pop-ups the popularity of that first template drove the introduction of a half dozen more templates over the next few years including some popular ones like story map journal and cascade in the summer of 2019 Ezra introduced the next generation of storytelling on the RTS platform with the new RTS story maps this new next-generation version of story maps combined the best features of the classic templates into a modern and flexible authoring and reading experience with the mobile first design and with constant updates of new features and capabilities so that kind of begs the question what kind of stories are people telling with the new Arcadia story maps we'd like to share a few of the ones that are our favorites starting with one that was authored by a nonprofit called nature serve now nature serve is a nonprofit organization that's focused on providing scientific resources for effective conservation action and what we're seeing here is the cover of that story one of the things I really like about this is their use of a video to kind of set the mood and set the tone for what they then dive into here in their narrative text which is an introduction to their story with narrative text followed by this really attractive gallery of images that highlight some of the biodiversity that their organization was mapping the author of the story then included their map of the biodiversity importance in the United States and as the reader we scroll through this story and it zooms to specific locations that the author wants us to focus on great story Joe I really like her nature served he's captivating maps and other media to tell their story about the importance of biodiversity another story I found really interesting is the voices of Grand Canyon by the Grand Canyon trust these storytellers talk about their connection to the Grand Canyon and how that ties to their culture work views and livelihoods as we scroll through we can see they use immersive blocks with large media and quotes a floating text to layout with media on the left and text on the right and embedded audio to bring their story to life engage readers we'll talk more about how they did this throughout the presentation next up is Arvind to show you a story about smokejumpers thanks sir I really like stories that teach me something new that I didn't know and one of my favorite stories recently is the narrative about smokejumpers from US Forest Service's in Missoula in collaboration with s3 they crafted a visually compelling story with images videos and right here you can see they start off a story with a bang and have this powerful audio that really shows us what they do day to day and as you scroll through the story here you find that they go through their background the history of their profession and with the help of powerful images and videos in there and as you scroll further you'll see that they incorporated the different layouts within the same story to talk about how the different federal lands and areas that they operate in with the help of Archie's web maps and as you scroll through the story the employee different tricks and tips that we'll show you later as to how visually compelling the story is so if you have a chance to check that out and by the way if you took a look at the header in the story that we're presenting today you look you'll notice it's a little different from the story header and that's because we are presenting all of this to you with the new collections that we've added to our share story Maps recently they're a quick and easy way to group stories and apps together based on a common theme or narrative and present them together so stay tuned about this we'll talk a lot more about how you can create and share them later so getting back to stories this is a quick way or a bird's-eye view of how you can see stories that you've created your favorite it or stories that we shared with you by members from your organization or other organization groups that you're part of simply clicking any of these stories launches the new builder but for today's session we would like to share a story with you that we've all been working on which is documenting world heritage sites that UNESCO has classified that are endangered so we have the story here every story begins with a private draft that you will begin working on and stories have created and authored by adding different types of content blocks the very first content block in the new story builder is cover and we've already shown you the importance of the story cover in some of the examples before they are the first impressions your readers have when they visit the story so having a compelling one is pretty important and as you see here we've gotten some of the information about the story filled out we've gotten a good working title and description and I really like that I can change the name of the byline here so you'll see that it's visual empty I'm going to go ahead and credit the entire team that I'm working with as part of the story and then I'd like to spruce up this cover a little bit so let me go ahead and add some media to it so I'm adding an image and I can pull in something that's relevant to the story that I'm authoring and one thing that I really like is the ability to adjust the focus of the image by just deciding where to focus on it so my readers can see what the subject of the image is and I can also go ahead and add some alt text for accessibility to my audience who use screen readers great so we've now got that set up we can customize this cover even further by using the design panel in the new builder and there are a lot of different options that we provide the thing that I want to focus on here is the cover section by default this covered uses the side by side layout as the name implies it separates the story info from the media if I switch to the minimal layout it focuses on the story in four more and makes the media sort of a banner but I can also choose to go back and make that a full cover layout and that really makes my story immersive and I can also choose to position this differently by moving the image and the text to the top so great we've spent a lot of time making sure our readers stay on the story now I'll hand it over to Sir will tell you how we can build your story from them thanks Ivan so story maps are and have always been a way to bring your story to life using a variety of media content like images videos and of course maps and themes and this has not changed the unified builder allows you to mix and match content blocks layouts and narratives all in one place now let's dive into authoring the story the block palette allows you to add different content blocks to this story from here you can add text images videos and special blocks we call immersive you'll see all those come to life as we build out the story here we have some text that has already been added to this story clicking and highlighting the text brings up the rich text editor with the rich text editor I can change the formatting or convert between block types for example let's convert this paragraph text to heading with the design panel I can also choose to adjust my fonts if I choose I've already added an image into my story and can quickly adjust the size using the media toolbar depending on how much I want to emphasize the image here I like to use the float option which automatically wraps my text around the image as I scroll down I see that one of my colleagues has added a link to a YouTube video but there's a more engaging way to show this in the story using the video block again I'll use the block palette to bring in a video from YouTube Arvin will not talk to a little bit more about how to embed web content into your story thanks Sarah this seems like a perfect spot to talk about the same media - about the Sarah just mention to you before images can be resized as you saw two different options and the same is true for video blocks and embed blocks as well but when you add in a content that uses a URL we provide other options so you can choose how to display them in the story builder so as you see - all the way to the left you have two options what's diff what's default enabled is the ability to show your content as inline so your readers can interact with it you can also choose to show the same video as a card which pulls in all the information from YouTube such as the title description and a link to it your readers can click on it and open it a new tab to interact outside of the story so it's up to you how you want your authors to work with it similarly we support so many different types of services that's great that you can embed things like tweets websites images videos but what about bringing in sound like we saw in the Grand Canyon story that's right that's a really good question we support more than 500 different services in story Maps this includes different types of audio video and rich content providers out there you can leverage them all using the embed block from the block palette so let's go ahead and see how you can do that so in this specific cases one of the services I want to highlight is a tweet that I want to bring in from Twitter I already have the URL to it when I click on the embed from the block palette I can paste that URL in just before I do that one thing I want to mention is you can paste in a URL or you can also paste in an iframe code to any of the web content you want to bring into your story so in this case once I go ahead and add it we choose to automatically display this content in a very smart way we fix the content size and position for you within these stories and just like the video that you saw before you can choose to also display it as a simple card which pose similar metadata information from Twitter so continuing on with this specific story I would like to have my readers learn a little bit more about how UNESCO uses their selection criteria to deem what is a World Heritage Site for that purpose I'll add the URL to their web page using the embed block that I see by before me so if I go ahead and click on the embed and paste the URL in will automatically bring in the entire website for you and I can also click to interact on it so my web page becomes active and I can start scrolling through the story but wait what is this new layout that I'm seeing here Joe can you help me out here yeah so you may have noticed that Arvind showed how it embeds work and one of the immersive blocks called sidecar before you go any further it would probably be helpful to introduce the immersive blocks sidecar slideshow and guided tour so first off what is an immersive block well immersive czarek special kind of content block that filled the display and focus on specialized media and narrative panels each kind of immersive block is composed of slides that follow a standard layout that can emphasize different kinds of content this is a sidecar sidecars the sidecar layout includes a large media panel that is stationary or docked next to a smaller narrative panel that Scrolls one of the really great things about the narrative panel in a sidecar is that many of the content block options that are available in the main story are available here as well we have all of the different narrative text options as well as buttons separators images videos and embeds really the only thing that we can't add in here is another immersive as a user Scrolls through the narrative panel the media panel stays docked until they get to the end of the narrative and then we seamlessly transition to the next slide we can see all the slides in this story builder by opening up the slide panel at the bottom and we can see now that there are three slides in this sidecar as I scroll through the second one the third one will come on and we'll talk a little bit more about how this map choreography works in a later time the second term mersive is called slideshow in a slideshow the media takes front stage as it fills the entire display with a small floating narrative panel on top this narrative panel is somewhat restricted compared to sidecar in that it's limited to both a title simple narrative text without the ability to add images or other content block types readers navigate through the slideshow by clicking the arrows on the side for a horizontal scrolling effect and just like in sidecar we can add images video and maps hey Joe that's all really great but it looks like that narrative panel is covering the camels is there anything we can do about that oh yeah for sure we don't want to cover up the camels one of the great things about the floating panel in a slideshow is that we can use these arrows to change their positions we can also change the panel style it's by default themed with a solid background but we can also change to a transparent text style with white text or a transparent style with darker text I think that looks a lot better what do you think Sarah looks good excellent let's take a look at the final immersive block that we have this one is called guided tour and guided tour each slide consists of a map location and a corresponding floating narrative panel that includes a place the name description and media as the reader Scrolls the map focus transitions from place to place so we can see that we moved from Easter Island here to an island off the coast of Portugal and as I scroll further were taken to the Everglades National Park in the United States the map focused layout is great for locations that are geographically connected but for this story I'd like to focus it on my image and images and media and said so I'll go ahead and select the media focused layout don't worry this won't require any rework it's easy to switch back and forth that's a great point if we were using a classic template we would be starting over from zero but with the new story builder we can come into the settings on the slide panel and go to change layout and from here I can select media focused instead of map focused and now we have media taking frontstage and a map moves up to the upper left-hand corner you wanted to add a new spot yeah let's show how easy it is to continue building our turbine in media and adding it to the map for my next tour point I want to show machu picchu i'll click add a location search for it and add it to the map you'll notice that there's an option to add a custom zoom level to the map since I want my tour to zoom to this location I'll go ahead and toggle that on and placed finally I'll add my media and some information into the narrative panel great that's looking a lot better awesome so it looks like a massive block seemed really easy to create and what a great way to tell a narrative but let's take a detour back to the content blocks in the block palette and one of the most powerful content block in our cheer story Maps as the name implies is all the powerful arches mapping capabilities that come with the platform you can add a 2d or 3d archers map into your story by simply using the block palette and selecting the map block you can use this map browser here to select web maps and scenes that you've authored you've favorited all that we shared to you by your members you can also choose to bring in content from the living atlas of the world so for this story I'll go ahead and select a web scene from an organization that I've already favorited the Heritage in danger clicking it opens this map designer so let's take a moment here to walk through all the different things we can do with this web scene to make it stand out in our story first I can change the layer visibility to either show or hide and I can also change the name of the layer from this layer panel so let me go ahead and remove some spaces here I'm going to add some spaces make it a little bit more readable yeah it looks like the publisher heading through the publishing process okay and I can also use existing bookmarks from the web scene that were saved as part of it so let's select one that highlights a heritage site and you'll notice it uses the proper animation and zoomin controls now let me use the same controls to adjust how readers can see this and make it look much better yeah that looks much better okay now let's add the scene into our story so this workflow is pretty similar to how you add web Maps and also living Atlas content in line in your story but immersive blocks which we talked about earlier are more effective when used with web maps and scenes as they allow authors to create a logical sequence of related map and scene views so let's go back to that sidecar above and see how all of this works one of the powerful abilities of immersive as Joe explained is to transition from one slide to another and we provide that transition for you when you create a new slide and sometimes these lights can contain different types of media as you saw before but you can also sometimes want to reuse the same content in those different slides and you can do that by duplicating a slide that contains any content in it so in this specific case when I duplicate a web map or scene I can choreograph the map so to speak by changing the map's content by either adjusting layer visibility or changing its geographic focus by adjusting its extent in this sidecar you'll notice as I scroll from one slide to another the maps extent changes to focus on Asia and I can as you notice if I continue to add more I can gradually zoom into a different study area if I so wish by duplicating this map again in a new slide and continuing my narrative on what we've shown you so far is a linear reading experience where your readers are experiencing the narrative that you've set for them but sometimes you want to keep that open-ended and have the reader choose their own adventure in the sidecar for that purpose we introduce you map action which are configurable toggle buttons that you see in that narrative panel right there when when you have a web map or scene in the media panel you can then add this to a sidecar and when a reader selects the map action the appearance of the map changes let's see how easy it is to create a new action in the same sidecar here when I create a new action from the block palette I can choose the map action and by default it shows the map's initial state without any of these changes so I'd like to call this a reset action more or less and in order to configure a new action I can edit it and that opens up that familiar map designer that we talked about earlier right and so here I can really change the visibility of the layers by toggling off all sides and turning on the natural sights in the map and just to make sure that my readers feel like the map had some motion to it I'll zoom in a little bit into India and once I'm done I can save this specific action back to the button by clicking save action now when I click on the map since its active you'll notice that it toggle the layer on that I wanted and zoom to that extent but as I click on different action buttons you'll see how that effect changes I can go on and on about our arches mapping capabilities but I'll hand it over to Sarah who will now introduce you to something brand-new in the Archaea story maps builder great so arvind highlighted how we can use the power of arcgis to add geographic context to story but one thing we've heard from storytellers is they need the ability to create simple maps for example reference maps locator maps in minutes we're excited to introduce express maps a new map making tool which allows you to create these maps directly from the Builder here we have an express map highlighting some of the threatened unesco world heritage sites let's go in and edit this map when creating an express map you'll notice a variety of drawing tools available to you from the drawing toolbar this is the heart of the express map authoring process use it to add points lines areas to your map is needed it also includes helpful annotation tools for labeling the map directly and arrows that can be curved to fit your exact needs you can customize Express map pop-ups using the map designer I'll go ahead and search for Machu Picchu add it to the map and in the layer panel add an image and information and the layered panel you can also change the color of your drawing features or choose a different base map one of my favorite things about Express Maps is the option to add curved arrows here I'll use the arrow to highlight a trip for Machu Picchu to timbuktu give it a little curve I'll add an annotation to highlight the point you also have the option to drag out leader lines from the annotation text by grabbing the handles at the top or bottom of the text box we've heard a lot of questions from people about the difference between web Maps and Express maps as arvind showed you can still bring powerful web maps from ArcGIS online in your organization Express maps are different because it created rape from the Builder and live within the story they're created in we've seen our storytellers use Express Maps for a variety of purposes such as highlighting different locations at an event trips and vacations flight plans hikes and more so now that we're done editing this Express map we'll go ahead and place the map great so at this point in our story we have configured our cover to be both engaging and beautiful we've completed all of our narrative text added a number of immersive slides as well as some quality web maps web scenes and an express map at this point the story is just about finished but there's a few final things we'd like to do before we're ready to publish and share it out the first thing we'd like to do is down at the bottom in the credits section it's important to include a credit section to give credit where credit is due and in this case much of the text that we received came from our colleagues Cooper and Hanna and data came from UNESCO so those have been added into the credit section here however I feel like we've put a lot of work into this and I want to make sure we're recognized for our contributions as well so I'm going to add another slot here for authoring and I'm going to attribute Arvin Sarah and Joe and because I like to keep things alphabetical I'm going to use the drag handle here for this content piece as we see in many other places in the story builder and I'm going to drag this up to the top of the credit section so that we get the prominence that Arvin feels we deserve mm-hmm another thing that I'd like to point out here is that the text in the credit section as in many other places in the story has the ability to be configured to be bold italicized hyperlinked or we can even change the color with our credit section in place we're ready to put our final finishing touches on this story going back to the design panel we now have the opportunity to look at themes so previously Arvind is able to show us some of the options that are available for covers and Sarah pointed out that we can always change the font parents to match more specifically to the look and feel of our story or to match our organizational requirements however one of the things that I find most interesting about story maps is the ability to quickly change the look and feel of the story with one-click themes by default stories are authored in a light theme that we call summit but with one click we can dramatically change the look of this story by giving it a darker background striking red accented colors and even changes to the font pairings that are used and the shapes of these buttons other themes include Ridge line which has a more natural feel and uses a terrain base map for the express Maps and Mesa with its muted colors and striking accent color at any point I can change both the accent colors which is reflected here in the buttons the annotations of my web map and also in separators as well as the font pairings so I may find that while I prefer this color scheme I prefer the Clint and real head for my font pairings another finishing touch is to add my organizational logo to the top of my story in the header I can do that from the design panel as well by selecting upload logo selecting the logo and then adding in a URL story maps is calm and alternative text for screen readers with those finishing touches in place I'm ready to preview this story to get a better idea of how this will look to my readers and the header I can select preview and I'll get a real view of what this will look like when the story is published one of the great parts about this preview is the ability to see what this looks like on multiple different devices selecting preview on desktop lets me see what this will look like rendered on a desktop browser I can also see what this might look like on a tablet or on a mobile phone which is really important because so many of our readers are accessing and looking at these stories on their mobile devices once I'm satisfied that this story matches the look and feel and the experience that I expect I can return to the story builder and publish my story when I select publish I have the option to decide who the audience will be for my story and who will have access to see it by default stories are published privately so that only you can see them however I can select to publish to other people inside my organization or depending on the audience I can share this to everyone in the public alternatively if I belong to a group and have the correct permissions I can share these two inside of groups for this story I want everyone to be able to see it so I'm going to select everyone and click publish story as the story publisher runs it checks to make sure that the maps and scenes that have been shared will be viewable by all the readers of my selected audience in this case I have the option now to change the heritage and danger web scene that are been added so that my readers will be able to see that as well oh that's my bad - I should have shared this funny thing it's shared publicly now cool says nice work I think we've made a good story after the story is published we get to see it in the read view or in the viewer mode and because I shared with everyone I have some options in the top of the header to share this story on popular social media networks such as Facebook and Twitter there's also a quick and easy link to copy the story URL for sharing and other channels such as email in some cases authors want the ability to take their stories offline so through this print dialog we can print stories as well as save them to pdfs for archival purposes perfect so let's take a moment to recap all of that we showed you how you can author a new story and add a series of content blocks to it and immersive blocks you can then design that story to fit the tone and style you're looking for and finally you're ready to share this and publish the story with the audience of your need so we've seen how easy and important it is to share your work with whomever you like but story authoring and sharing isn't alone apart of our share story Maps experience we've introduced a new feature called collections and collections is a quick way to group stories and apps together and you can share and present them as a cohesive and navigable set you'll find the user experience for the most part for authoring collections and stories to be pretty much the same I've already started working on a collection here that I would like to add rated stories and our chairs apps to highlight World Heritage Sites in danger I've got a cover tightly and some description let's go ahead and add some items to this collection opening the add item button gives you this browser which allows you to search for stories and apps that you've created favorited or were shared with you so let's select that story that we just published and then let's switch over to apps to select a web app builder app that I just made to highlight Heritage Sites that are near readers using the near major so once I'm done I can go ahead and add this to a collection and so now that I've added all the content similar to stories I can now get ready to publish this collection and share it with my audience when I click on the publish dialog you'll notice that it's very familiar with how we just published it and publish the story just now so let's go ahead and select everyone because I want all of my audience to see this and then publish that what's interesting about collections is that it has two types of views this is called the overview which lists all the items your collection has and allows your readers to quickly see the contents of the collection but I can also either click on a specific collection or click on the present button and it opens a presenter view and this view allows your readers to navigate between these different items if they choose to do so and in this specific case this is the web app builder app and my god my readers can interact with the app and search for Heritage Sites there any of them so with that we're nearing the end of our session here today so I'll hand it off to Joe who will now walk you through what you should take away from our session today that's great Arvind I can't wait to find a heritage site near me so at this point we've talked a little bit about the background in history of Archaea story Maps we introduced the story map builder going through both the cover and all of the options that are available in the content block palette we talked about using different immersive blocks we talked about using maps and slides Arvind just took us through how we can then bundle different stories and Arceus apps into collections and at this point we'd like to share with you some of the resources that we've collected that are most helpful for both novice users and veterans story map authors as we wrap up this session so the first thing that we'd like to highlight is the RTS story Maps resources website if you go to the story Maps website on ESRI comm you'll find this great resources page that's constantly being updated with materials and content that is specific to building up the skills for authors with story maps some of our favorite links from the resources page include getting started with RTS story maps blog the nine steps to great storytelling followed shortly by how to make an awful story map and a really great document that walks through outlining called planning and outlining your story aside from the great resources on that page we also curate a playlist on YouTube that's constantly updated with new videos that highlight different features of story maps and walk through different workflows that are popular for storytellers every time we release a new version of Archaea story maps it's accompanied by a blog that is posted to the ArcGIS blog if you're interested in staying up to date with the new things that are happening on RTS story maps we highly encourage you to check the rks blog regularly this is where we will highlight all the new features that are available as well as other enhancements and fixes that are coming with each release of Archaea story maps for authors that are interested in getting a more detailed description of the features and capabilities of Archaea story maps we have thorough product documentation that includes all of the specific capabilities and system requirements of the product as well as an informative frequently asked questions page that's frequently updated with new information Ezra's training department offers a number of tutorials and training courses that are specific to workflows and processes for authoring and our clear story maps these include authoring and publishing your first story the Arceus learn lessons and of course the catalog of training courses found on training ESRI comm as we're getting close to the end we want to talk a little bit about what's coming up next for our K s story maps we're really excited to be able to share as its share this with you because there's been a lot of interest from the community about what we can expect next now that we've added in all the things that existed in the previous classic templates so some of the things that we can expect in the near future include bookmarks audio inline tab layout for collections and cascade style immersive hey Joe don't forget that custom themes people have been asking custom themes are on their way as well we just want you to note that the dates and features for here are subject to change but we're committed to continuing to enhance story maps as we move forward and we're really excited about what the future holds another really important thing for people that are just getting started with story maps is understanding what they'll need to get started and that includes getting an artists account that has permissions to use story maps you can find out more about the different user types and licensing options on our pricing page one of the things that we're most excited about is a new user type called storyteller that's specifically for people inside of an organization an artists organization that want to tell stories but don't need to be authoring story maps or using or don't need to be authoring web Maps or using other apps inside of that ecosystem so if there's people inside of your organization that want to use this tool but don't need access to the other parts of Arceus online storyteller may be the right fit for them this resources story is available publicly and you can find it by visiting our Twitter handle at our KS story maps we look forward to seeing you there and thanks for joining us today

Channel: Esri Events

Views: 14,091

Rating: 4.9731545 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: t_oFnIIJA-A

Length: 39min 25sec (2365 seconds)

Published: Fri Apr 24 2020