Introduction to StoryMaps
ArcGIS StoryMaps is a web-based content-creation and communication tool that allows you to share maps, apps, and multimedia in the context of a narrative. You can use ArcGIS StoryMaps to author stories, which are similar to articles or blogs. Stories offer a scrolling narrative experience with immersive sections and can integrate maps and data from your organization. It is an application supported in both ArcGIS Enterprise and ArcGIS Online.
from arcgis.gis import GIS
from arcgis.apps import storymap
from arcgis.apps.storymap import StoryMap, Themes, Cover
from arcgis.apps.storymap.story_content import Text, TextStyles, Image, Image360, Gallery, Separator, Audio, Video, Map, Button, Sidecar, SidecarSlide, Swipe
from arcgis.map import Map
from arcgis.layers import ServiceWe start by connecting to our ArcGIS Online organization and creating a new story.
gis = GIS(profile='your_online_profile')my_story = StoryMap()Adding content to your StoryMap
ArcGIS StoryMaps provides a single authoring experience that allows you the flexibility to create content with a variety of media in several formats. The following content element types are supported within the ArcGIS API for Python.
- Image
- Image360
- Video
- Audio
- Embed
- App
- Map
- Text
- Button
- Gallery
- Swipe
- Sidecar
- Timeline
- MapTour
- Places
- Code
- Briefing
- Table
- ExpressMap
- Infographic
- Navigation
- Cover
- Separator
As we see in the list above, content can be of various class types and you have the option to specify a caption, alt_text, display style, and the position at which it will be in your story while adding the particular content element to your story.
Below we will go through different examples of content being added to a story.
1. Adding text to describe the theme of the StoryMap
You can add Text to your story by providing the text string of choice to thetext parameter of this Text class.
You can also specify the style you would like to render your text in, using the following TextStyles enumeration values supported in the ArcGIS API for Python.
- BULLETLIST = 'bullet-list'
- NUMBERLIST = 'numbered-list'
- HEADING = 'h2'
- SUBHEADING = 'h3'
- HEADING1 = 'h2'
- HEADING2 = 'h3'
- HEADING3 = 'h4'
- PARAGRAPH = 'paragraph'
- QUOTE = 'quote'
We will start by adding a Heading for the story using the style parameter.
heading = Text(
text="Nature themed story",
style=TextStyles.HEADING,
)
my_story.add(heading)my_story.save(title="Nature Themed Story")
StoryMap by MMajumdar_geosaurus
This method will save your StoryMap to your active GIS.
Note: The story will be saved with unpublished changes unless
publishparameter is specified to True.
2. Image and Image 360
We will proceed by adding Image and Image360 content elements to our story.
Image is a traditional static image, whereas Image360 is a 360-degree interactive panoramic image.
img = Image("https://www.nps.gov/npgallery/GetAsset/69680c29-caa3-42da-93d9-32925e9ed409/proxy/hires")
my_story.add(img, caption = "Trees with a deer", alt_text = "Sequoia trees in the distance")True
The Image class takes either the file path or url to the image as input.
Note: The Image360 class shown below takes only the url as input.
img360 = Image360("D:/Github Projects/geosaurus/tests/resources/storymap/storymap_image_river.jpg")
my_story.add(img360, position = 1)True
my_story.save()We save the story and verify the Image360 and Image added to the story.
3. Adding a gallery of images
We can expand this concept of adding an Image to add a Gallery of images.
We learned how to create images with the Image class. We now create images, and then add them as inputs to the Gallery class. You can added up to 12 images to a Gallery in a StoryMap.
image1 = Image("https://www.nps.gov/npgallery/GetAsset/57fb2a13-2920-408c-b143-182eef9c4dec/proxy/hires")
image2 = Image("https://www.nps.gov/npgallery/GetAsset/9336aae7-821b-4a1a-85d0-24419249e3ec/proxy/hires")We add these two images to the gallery, and add the gallery to the story.
gallery.add_images([image1, image2])[Image(image='https://www.nps.gov/npgallery/GetAsset/57fb2a13-2920-408c-b143-182eef9c4dec/proxy/hires'), Image(image='https://www.nps.gov/npgallery/GetAsset/9336aae7-821b-4a1a-85d0-24419249e3ec/proxy/hires')]
my_story.add(gallery)True
You can also add an image to the gallery after the gallery has been added to your StoryMap.
image3 = Image('https://www.nps.gov/npgallery/GetAsset/b37968ce-603d-4468-a9bf-150fc1380a72/proxy/hires')
gallery.add_images([image3])[Image(image='https://www.nps.gov/npgallery/GetAsset/57fb2a13-2920-408c-b143-182eef9c4dec/proxy/hires'), Image(image='https://www.nps.gov/npgallery/GetAsset/9336aae7-821b-4a1a-85d0-24419249e3ec/proxy/hires'), Image(image='https://www.nps.gov/npgallery/GetAsset/b37968ce-603d-4468-a9bf-150fc1380a72/proxy/hires')]
We will save this story and verify that the gallery is added to our story.
my_story.save()4. Adding a separator
A Separator is used to add a subtle break in between different sections of your story. The exact look of the separator will vary based on the theme you have chosen.
We will add a Separator now to differentiate between the images and the multimedia content elements to follow.
separator = Separator()
my_story.add(separator)True
5. Add audio and video
Media helps bring a story to life. Images, videos, and other media are important because they break up a long narrative and keep your readers engaged.
audio = Audio("D:/Github Projects/geosaurus/tests/resources/storymap/rocks.mp3")
my_story.add(audio)True
video = Video("https://www.youtube.com/embed/8wY14zHDmEs")
my_story.add(video)True
my_story.save()Our story now includes the audio and the video too.
6. Add a Sidecar with a Map and Button
Sidecars are a set of slides that combine maps, pictures, videos, web content, and text to help you tell your story. As you go through the slides, the pictures and videos change to match what you are reading, and you can adjust maps in the slides to show different locations and layers.
A Sidecar is composed of slides. Slides are composed of two sub structures:
- a narrative panel and
- a media panel.
The media panel can be a(n): Image, Image360, Video, Embed, Map, or Swipe.
The narrative panel can contain multiple types of content including Image, Image360, Video, Embed, Button, Text, Map, and more.
What sets ArcGIS StoryMaps apart from other web-based authoring tools is the ability to integrate maps with other multimedia elements (words, images, videos, audio, and embedded content). Maps guide readers from place to place, they show change over time, and reveal patterns and relationships. Maps add dimensions to stories that are difficult or impossible to achieve with other media.
We will add a Map to a Sidecar along with a Button in this section.
For the example below, we will create a new Web Map using the Python API's mapping module. We will add a layer to this map and save it for use in the rest of our storymap.
map1 = Map()
map1.content.add(Service("https://services.arcgis.com/JJzESW51TqeY9uat/arcgis/rest/services/National_Parks_England/FeatureServer/0"))
map1_item = map1.save(
item_properties={
"title": "National parks of UK WebMap",
"tags": ["python", "nature", "storymaps"],
"snippet": "A Map for the Nature StoryMap",
}
)We can now use the Storymap Map content class to add our newly created Web Map item to the storymap.
media_panel = storymap.Map(map1_item)We can also update extent or scale for a Map in a StoryMap as follows:
media_panel.set_viewpoint(extent = {'spatialReference': {'latestWkid': 3857, 'wkid': 102100},
'xmin': -2357466.358090248,
'ymin': 5398560.851584372,
'xmax': 983749.0223104877,
'ymax': 8333742.73773436})We will now define the Button or navigation panel for the Sidecar.
navigation_panel = Button(
link="https://www.nps.gov/subjects/forests/leaf-peeping.htm",
text="Autumn Colors",
)We have established above that a Sidecar is composed of slides, and each SidecarSlide is composed of two sub structures: a narrative panel and a media panel.
Having defined our inputs above for the media_panel (Map) and navigation_panel (Map), let's now proceed to construct a Sidecar with one SidecarSlide using the classes from the ArcGIS API for Python.
slide = SidecarSlide(content=navigation_panel,
media=media_panel)
sidecar = Sidecar(style="floating-panel")
sidecar.slides = [slide]my_story.add(sidecar)True
my_story.save()7. Add Swipe with images
The final content element we add is a Swipe, that can be thought of as an interactive comparison tool to compare two images, maps or scenes in the same frame.
image1 = Image("https://www.nps.gov/npgallery/GetAsset/36106ED0-1DD8-B71C-07ED73544EA246C7/proxy/hires")
image2 = Image("https://www.nps.gov/npgallery/GetAsset/36106ED0-1DD8-B71C-07ED73544EA246C7/proxy/hires")
swipe = Swipe([image1, image2])my_story.add(swipe)True
Publish this StoryMap
To conclude this guide, we will now publish this story by setting publish=True in the save() function.
Note: While we have demonstrated the process to programmatically
save()the StoryMap throughout this guide, it is strongly encouraged to view and verify the StoryMap in the UI and publish it there, especially for the first time you publish a StoryMap.
my_story.save(publish=True)We have a separate guide that covers Cloning and Editing of StoryMaps.