Storify a planning report

People are deeply interested in the future of the places where they live, and planning reports are vital documents that governments use to communicate the development of urban areas to the public and stakeholders. Often, these reports are long documents and may be difficult for nonurban governance professionals to comprehend. ArcGIS StoryMaps offers an alternative platform to communicate planning initiatives that allows the public to engage with maps, images, and text that break down the big ideas shaping their communities.

In this tutorial, you'll transform a planning report from the Boston Planning & Development Agency into a story map that provides access to relevant content and highlights the essences of each section.

This tutorial was last tested on March 4, 2024.

View final result

Requirements

• Publisher or Administrator role in an ArcGIS organization: ArcGIS Online (see options for software access) or ArcGIS Enterprise (learn more)

Create a planning report story

Add a web map to your favorites

First, you'll add a pre-configured web map to your favorites. You'll later use this web map in your story.

1. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

2. On the ribbon, click the search button.

   

3. In the search bar, type Dorchester Avenue Plan Area Boundary owner:Learn_ArcGIS and press Enter.

   By default, the search covers only content in your organization. You'll expand the search to all content in ArcGIS Online, across all organizations.

4. If necessary, under Filters, toggle off Only search in (Your Organization).

   

5. In the search results, for Dorchester Avenue Plan Area Boundary owned by Learn_ArcGIS, click the web scene name.

   

   A details pane appears.

6. In the details pane for the web scene, click Add to favorites.

   

   You've added the web map to your favorites. Now, you'll be able to access it more easily when you want to add it to your story.

Design the cover

You'll create a story map that focuses on chapters 1 through 4 of the PLAN South Boston Dorchester Ave report, which contain the history and current conditions of the study area, as well as the outreach initiatives and objectives of the plan. You'll add participatory and feedback components to your story to allow readers to share their opinions on the development. This method of participatory planning and communication will allow you to more actively and dynamically engage with the community and stakeholders of the development.

Each story map has a cover section that includes a title, graphic, author information, and publish date. A well-designed and descriptive cover draws in your readers. Since this story map is based on a planning report, you'll transfer the text used there into the title and subtitle.

1. Download the StoryImages zipped folder and unzip it to a location you can easily access.

   This folder contains images you'll add to the story map.

2. Go to ArcGIS StoryMaps and sign in.

   Note:

   If you are signing in using your Enterprise account you must access ArcGIS StoryMaps from the app selector.

   When you sign in, the Stories page appears. All your stories are accessible here, as well as any stories you have added as favorites, or those that are shared with you.

3. Click New story and choose Start from scratch.

   

   The builder opens and a blank story template appears.

   In the builder, you'll add content blocks from the block palette, such as paragraph and image, to build the narrative of the planning report. You'll start by customizing the story cover.

4. Click Story title and type Reimagine Boston's Great Boulevards.
5. Click below the title and type or copy and paste The Dorchester Ave Planning Initiative is dedicated to "Preserve, Enhance, and Grow" Dorchester Ave, a 21st century industrial use corridor.

   The author and publishing status are visible below. You can edit the author name to reflect yourself or your organization. The publishing status will update to display the date once you finish your story map. Next, you'll add a background image to the cover.

6. Click Add cover image or video.

   

7. In the Add an image or video window, click Browse your files. Browse to the StoryImages folder that you downloaded, double-click Cover.jpg, and click Add.

   Note:

   Alternatively, you can drag and drop images from an open folder onto the upload page.

   The cover image adds to the story.

   

   You can change the title and images at any time. The title also appears on the ribbon, under an orange badge indicating that your story is an unpublished draft (meaning it is only visible to you). Next to the badge, you'll see evidence of the autosave feature in ArcGIS StoryMaps; any time you edit your story, that text will let you know your story is saving, and then confirm that your changes have been saved.

8. On the ribbon, click Design.

   

   The Design panel appears. Here you can choose different layouts for your story cover, turn on or off optional sections, choose a theme and accent color, select font pairings, and upload your organization's logo.

9. Under Cover, click the different options to see how they affect your story.
10. When you are done exploring, click Minimal.

    

11. Click anywhere outside of the Design panel to close it.

    The cover shows the image as a banner with the title and subtitle text below. You'll change the focal point of the cover image to display the development area.

12. On the cover image, click the Options button.

    

    The Image options window appears. You can click the cover image to change the focal point and preview how it will appear on different devices. Below, you can add alternative text, which will help people using screen readers understand the content.

13. Under Image preview, click near the lower left of the photo, where Dorchester Ave. is located.

    

14. Click the Properties tab. For Alternative text, type Aerial view of Dorchester Avenue, Boston, Massachusetts.
15. Click Save.

    The cover image updates to center on Dorchester Avenue.

    

    To complete the cover section, you'll add a section divider. Throughout the story map, section dividers will be used to define the breaks between sections of the report. To add content blocks, you'll click the Tell your story button and choose the desired block. Blocks can dynamically be added, removed, and rearranged in the story.

16. Click the Add content block button.

    

    A list of options you can add to your story appears.

17. Choose Image.

    

    The Add an image window appears. You can upload images from your computer or link to images on the web. You'll add an image from the downloaded folder.

18. Click Browse your files, browse to the StoryImages folder you downloaded, and double-click Banner.png. Click Add.

    

    The banner image is added to the story.

19. Point to the banner image. On the toolbar, click Large.

    

    Now the banner spans the entire width of the screen.

Introduce the plan

Next, you'll add content blocks to introduce the plan and expand on the narrative. The first part of the narrative will contain key points from the executive summary and first section of the planning report. You'll title the section, add a separator, and add the content.

1. Point to the empty space under Add a caption for this image (optional) and click the Add content block button.

   

2. Click Text. Type EXECUTIVE SUMMARY.
3. Highlight EXECUTIVE SUMMARY and change the text type from Paragraph to Heading 1.

   

   Now the text is formatted as a heading.

   

4. Point under the EXECUTIVE SUMMARY heading, click the Add content block button, and choose Image.
5. Browse to the tutorial folder, choose Blue_Separator.png and click Add.
6. Under the blue separator, add a Text block and type THE PLAN. Change the text's formatting from Paragraph to Heading 2.

   

7. Under THE PLAN, add an Image block. Browse to the tutorial folder, double-click Exec_Summary.png, and click Add.

   The image is added to the center of the story. You'll change its placement.

8. Point to the image. On the toolbar, click Float left.

   

   Now that the image is aligned to the left side of the page, you can add text to the right.

9. Point to the upper right corner of the image, click Add content block, and choose Text. Copy and paste the following text:

   Boston is a growing city. Reversing decades of declining population during the last half of the 20th century, Boston's population is projected to increase by 91,000 to 709,000 by 2030. Growth at this scale needs to be planned and managed in order to ensure a healthy city and quality of life throughout its neighborhoods. Shifts in household size and composition come with population growth. Finally, Bostonians have changed how they live, work, play, and get around.

   The PLAN: South Boston Dorchester Avenue Planning Initiative represents an opportunity to build a 21st-century district by strategically planning for a broader type of uses and a scale of development best suited for the future of the Dorchester Avenue Corridor. The outcome of the planning initiative is a Strategic Plan (the "Plan").

   

   Tip:

   If the parts of your story aren't arranged the way they are in the example images, you can move the blocks around by pointing to them and dragging the Drag to reorder button that appears to the left of the block.

   Next, you'll add a bulleted list of development plan goals.

10. Under the second paragraph, add a Text block and type The goals of the plan are to create a framework for:. Change the text style to Heading 2.

    

11. Under the Heading 2 text, add a Text block. Change the format to Bulleted List.

    

12. Type (or copy and paste) the following text:
    • A new, urban, mixed-use 21st-century district in Boston.
    • New streets, blocks, and open spaces form the framework of a new district.
    • New housing at a variety of prices and rental rates relieves pressures on housing stock.
    • Planning and zoning tools to implement a coordinated, integrated new district consistent with the vision established by the public process documented by this plan.
    • Zoning that allows for new models of commercial/industrial development.
    • Requirements for the provision of public benefits in exchange for bonus height.
    • Inclusive development that improves awareness and access to funding resources.
    • Best practices to encourage job creation and small-business growth.

    

    You've added text and images to your story. Next, you will add historical context to your story.

Illustrate past and present conditions

The next section of the planning report will communicate the historical context of the site text and images, then present the current conditions of the site as a 3D web scene.

1. Under the bulleted list, add a Text block and type PLANNING CONTEXT. Change the text style to Heading 1.
2. Under the heading, add an Image block that contains Green_Line.png from the image folder you downloaded.
3. Under the green line, add a Text block and type HISTORY. Change the text style to Heading 2.
4. Under the subheading, add an Image block that contains Context.png from the image folder you downloaded.
5. Point to the image and click Float left.
6. Next to the upper right corner of the image, add a Text block and copy and paste the following text:

   Since its origins in the early seventeenth century, when it was known as Dorchester Neck or Great Neck, the Study Area has witnessed significant transformations. Native Americans called the South Boston peninsula Mattaponnock. When English settlers arrived, the area was primarily used for grazing cattle. One of the earliest paths on the peninsula, now known as Dorchester Street, served as the main route leading cows to the higher feeding grounds along today's Broadway.

   Great Neck was annexed to Boston in 1804 to accommodate Boston proper's need for additional land for its growing population and manufacturing needs. South Boston began as a neighborhood based on a planned urban design. A street plan established in 1805 is reflected in today's enumerated and alphabetical street pattern. More than two hundred years later, a new street network is contemplated to connect to this established pattern.

   

7. Under the last paragraph, add the Green_Line.png image again.

Create a map tour

Next, you'll design a guided tour to walk people through the timeline of Dorchester Avenue. A guided tour combines a map with media and descriptive text to present a series of related places as slides.

1. At the end of the story, add a Text block and type HISTORY OF THE STUDY AREA. Change the text to the Heading 2 format.
2. Under the text, click the Add content block button and choose Map tour.

   

3. For How would you like to create your tour?, click Start from scratch.
4. For Choose a layout, under Guided, choose Media focused.

   

5. Click Done.

   An empty tour appears with three main components: a narrative, media, and map panel. These elements together make up a slide. You'll add two slides to create the timeline.

   

6. Click Title and type 17th, 18th, & 19th CENTURIES.
7. For the Description, copy and paste the following text:

   Since its origins in the early seventeenth century, when it was known as Dorchester Neck or Great Neck, the Study Area has witnessed significant transformations.

   One of the earliest paths on the peninsula, now known as Dorchester Street, served as the main route leading cows to the higher feeding grounds along today's Broadway.

   Great Neck was annexed to Boston in 1804. South Boston began as a neighborhood based on a planned urban design. A street plan established in 1805 is reflected in today's street pattern.

   The opening of the Old Colony Railroad in 1844 surpassed the ability of the toll road to move goods through Boston and to points beyond. Within ten years, the toll road became a public street. Eventually, a tunnel was built below Dorchester Avenue and that became the Red Line branch of the MBTA subway system.

   Portions of the Study Area were still underwater in the late 19th century. The filling of land along the South Bay created new acreage west of present-day Dorchester Avenue (see Timeline).

   

8. In the middle of the screen, click Add image or video. Browse to your tutorial folder and add DOT_AVE_TIMELINE - 1stHalf.jpg.
9. On the image, click Options.

   

10. In the Image options window, choose Fit (do not crop).

    

11. Click Save.

    Next, you'll orient your map. As you move through the guided tour, the map will pan and zoom to each location.

12. Under the map, click Add location. In the Tour point location window, in the search bar, type Dorchester Avenue South Boston and choose Dorchester Ave, South Boston, MA, 02127.

    

    The map zooms to the address and a pop-up appears.

13. On the pop-up, click Add to Map.

    After a point is added, you can reposition it as needed. You'll also set a custom zoom level—doing so will override the default, which shows all tour points at a single scale.

14. For Zoom level, click Use the current zoom level.

    

15. Click Add location.

    You'll add a second slide to include information on the 20^th and 21^st centuries.

16. At the bottom of the guided tour block, click the New Slide button.

    

17. For Slide Title, type 20th & 21st CENTURIES.
18. For Description, copy and paste the following text:

    The first building boom, post annexation, occurred from 1868 to 1914. Filling of land along the waterfront for railroad tracks and warehouses was key for the port.

    Not until the 1970s and later did subsequent major building and economic changes occur in South Boston. Transformations in the shipping and container industry and the surplussing of Army and Navy facilities were major factors, opening up new areas for redevelopment.

    Today, major development is occurring on South Boston's waterfront and is anticipated to accelerate within the Study Area. This Plan envisions a new 21st-century district along the neighborhood's western edge to accommodate physical and economic changes underway.

19. Click Add image or video. Browse to the tutorial folder and add DOT_AVE_TIMELINE - 2ndHalf.jpg.
20. For the image, click the Options button. In the Image options window, choose Fit (do not crop) and click Save.
21. Click Add location. Search for South Boston Waterfront and choose South Boston Waterfront, Boston, MA.
22. Click Add to map. Choose Use the current zoom level and click Add location.

    You now have two slides in your guided tour. As the user interacts with the story map, they can read the text and take time to study the map.

    

Integrate interactive components

To help users visualize the area and the development, you'll add a web scene to the story map. A web scene is a 3D visualization that allows users to view geographic information in an intuitive and interactive 3D environment.

1. In the story, scroll under the guided tour. Add a Text block and copy and paste the following text:

   The Dorchester Avenue Project is dedicated to the improvement of Dorchester Avenue, one of Boston's greatest boulevards. The project focuses on four miles of Dorchester Avenue, addressing transportation, neighborhood businesses, neighborhood housing, and streetscape issues between Lower Mills and the intersection of Columbia Road and Dorchester Avenue.

2. Under the paragraph, add a Map block.

   

   The Add a map window appears. You can add content hosted on your ArcGIS account, content that you've added as favorites or is shared in your organization, or curated content from ArcGIS Living Atlas of the World. You'll add the map you added to your favorites at the beginning of the tutorial.

3. Click My Favorites.

   

4. In the list of your favorites, click the Dorchester Avenue Plan Area Boundary web scene.

   

   After you select the 3D scene, you're able to adjust how the content will appear in the story map. You can turn layers off and on, add bookmarks, and configure navigation settings. This scene is already set, so you'll accept the defaults.

5. Click Place map.

   

6. Point to the map to see the placement options and click Large.

   

   The scene now takes up the entire screen.

   Note:

   Feel free to experiment with viewing the web scene. Try looking at the development area from different angles to understand what a citizen of the area would look for.

   The benefit of using a story map to communicate a planning report is not only that web elements allow it to become more engaging and dynamic, but that you can implement tools that allow a community to talk back to planners.

7. Under the scene, add a Text block and type WORKSHOPS AND OUTCOMES. Change the text's format to Heading 1.
8. Under the heading, add an Image block and choose Green_Line.png from the tutorial folder.
9. Under the green line, add a Text block and type FINALIZE WITH US. Change the text's format to Heading 2.
10. Under the subheading, add an Image block and choose Workshops_Outcomes.png. Choose the Float left placement option.
11. Next to the upper right of the image, add a Text block and copy and paste the following text:

    After working with the community through a series of workshops and Study Area tours over the past year, the planning team held its second Open House.

    This Open House asked participants to comment on the work conducted over the past year. Elements of the draft Plan framework were on display. More than 70 residents, business and property owners, stakeholders, advocates, and visitors had a chance to review and comment on the draft Plan as well as continue conversations with the planning team and other city officials.

    An example of one way to continue gathering feedback from the community is to use online surveys. Below is an example of using ArcGIS Survey123 to gather public opinion about the South Boston Dorchester Avenue Planning Initiative.

    

    To gather feedback, you'll add a button that links to the Dot Ave Planning Survey created in Survey123. Dot Ave is a nickname given to Dorchester Avenue in Boston.

12. Under the text, add a Button block. For the name, type View the Dot Ave Plan Survey.
13. Click the button to select it and click the Edit button.

    

14. In the URL box, paste https://arcg.is/1TTqHD and press Enter.

    

    When users click the button, the survey link will open for them to explore.

Present zoning changes

Story maps can incorporate other web content, either as a link or a fully interactive item. You can do this by using the Embed block. To illustrate the zoning changes regarding economic development, you'll add a web app that compares the zones of the area before and after the development.

1. Under the button, add a Text block and type FRAMEWORK. Change the text's format to Heading 1.
2. Under the heading, add an Image block and choose Blue_Line.png from the tutorial folder.
3. Under the blue line, add a Text block and type ECONOMIC DEVELOPMENT. Change the text's format to Heading 2.
4. Under the subheading, add an Image block and choose Framework.png from the tutorial folder. Choose the Float left placement option.
5. Next to the upper right of the image, add a Text block and copy and paste the following text:

   The Plan is intended to help guide the market-driven transition of predominantly heavy commercial and industrial land uses to a transit-oriented mixed-use district.

   The vision for the district includes significant new residential opportunities, 21st-century industrial, and neighborhood retail that provide accessible economic opportunity for Boston residents.

   The new zoning that will result from the Plan will do the following:

6. Under the text, add a Text block that uses the Bulleted List format. Add the following text:
   • Improve awareness of and access to funding resources within workforce training.
   • Promote beneficial residential and commercial development within the community.
   • Encourage the use of best practices for job creation and small-business growth.
7. Under the bulleted list, add a Text block. Copy and paste the following text:

   Using ArcGIS Urban, we can propose new zoning changes and explore build-out scenarios based on that underlying zoning code. We can also compare the scenarios with development based on existing zoning.

   

8. Under the text, add a Text block and type COMPARISON OF EXISTING AND PROPOSED ZONING. Change the text's format to Heading 1.
9. Under the heading, add an Embed block.

   

   The Add web content window appears. You can use this window to embed content using a URL.

10. In the Add web content window, for Link, paste the following URL: https://www.arcgis.com/apps/Compare/index.html?appid=cd64aeb0d79a4368af8c847d016fbcf3

    

11. Click Add.

    An app that compares existing and proposed zoning is added to the story.

12. Point to the added content to see the configuration toolbar.

    The content is automatically added as an interactive embed item.

    

13. Under the app, add a Text block and copy and paste the following text:

    The proposed zoning illustrates a shift from primarily industrial (I-1) and manufacturing (M-1 & M-2) land use zones to a mix of residential and retail (DOT-Zone 2 and DOT-Zone 3) and open space (O-S). This zoning change is responsive to the context and encourages uses that are reflective of the community vision for a walkable district with a robust network of open space and a diverse mix of uses.

Prepare to publish

Once your story map is populated with content, you're ready to finalize the design theme and enable other custom features. Similar to the static planning document, the design of the story map contributes to the overall feel and professional presentation. In the Design panel, you can choose a theme, select accent colors, and make other design-related changes. You'll change the design to match the color scheme of the images you've added into the story and enable other features for ease of navigation.

1. On the page header, click Design.

   

2. In the Design panel, under Optional story sections, ensure that Navigation and Credits are turned on.

   

   Each Heading block becomes a bookmark within a navigation bar at the top of the story, allowing readers to quickly jump between sections.

   

   Since this story is not an official Boston Planning & Development Agency document, you'll add some disclaimers.

3. In the story, scroll to the credits section at the bottom of the page.

   

4. Where it says Add a credits heading, type DISCLAIMER.
5. Where it says Add a credits description, type This is not an official Boston Planning & Development Agency document and should be used for demo purposes only.

   

   Now that your story map is finalized, you'll publish it. You can publish the story map privately, within your organization, to specific groups, or to the public.

6. On the header, click Publish.

   

7. Under Share, for Set sharing level, choose Organization.

   Before the report is shared with the public, you want internal stakeholders to review the report. For now, you'll publish to your organization.

   As part of the publishing process, the story checker will review all content for permission issues and flag anything with sharing permissions that are more restrictive than that of your story.

8. Click Publish.

   After you publish, you are taken to the live version of your story. Now you can share the story with colleagues for feedback. You can return to edit at any time. If you do make further edits, you'll see the status change to Unpublished. Changes and any edits you make won't affect the published story until you click Publish again.

   Note:

   Learn more about ArcGIS Urban.

In this tutorial, you took a static planning report document and transformed it into a dynamic, interactive, and engaging story map. You could edit this story as development proceeds, or you could create a series of story maps to keep the community informed on progress.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• Dorchester Avenue Plan Area Boundary data, layer, and images, was provided by the Boston Planning & Development Agency and is used with permission.
• Light Gray Canvas map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community