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 lesson, 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 lesson was last tested on April 23rd, 2021.

View final result

Requirements

• User, Publisher, or Administrator role in an ArcGIS organization (get a free trial)

Create a planning report story

Design the cover

You'll create a story map that focuses on chapters 1-4 of the PLAN South Boston Dorchester Ave report, which contain the history, current conditions of the location, outreach initiatives, and goals and objectives of the plan. Within these sections, you'll add participatory and feedback components 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 info, 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 StoryImages 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.

   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.

   Note:

   If you don't have an organizational account, you can sign up for an ArcGIS free trial.

3. Click New story.

   

   From the drop-down menu, 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, image, and more, to build the narrative of the planning report. You'll start by customizing the story cover.

4. Click Title your Story and type Reimagine Boston's Great Boulevards.
5. Click below the title and type 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 image or video.
7. In the File Upload window, browse to the StoryImages lesson folder and double-click Cover.jpg. Click Add.

   Note:

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

   

   You can change the title and images at any time. The title also appears on the ribbon, next to 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 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 Minimal.

   

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

    The cover changes to show 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.

11. On the cover image, click Properties.

    

    The Image properties 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.

12. Click near the lower left of the photo, where Dorchester Ave. is located.

    

13. For Attribution, type Aerial view of Dorchester Avenue, Boston, Massachusetts. Then click Save.

    To end 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 Add content block button and then choose the desired block. Blocks can dynamically be added, removed, and rearranged in the story.

14. Click the Add content block button and 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.

15. Browse to the lesson folder and choose Banner.png. Click Add.
16. Point to the image to see customization options and click Large.

    

Introduce the plan

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. Click in the story map body. Click the Add content block button and choose Text. Type EXECUTIVE SUMMARY.
2. Type EXECUTIVE SUMMARYand change the text type from Paragraph to Heading.
3. Add an Image block. Browse to the lesson folder, choose Blue_Separator.png, and click Add.
4. Add a Subheading block, then type THE PLAN.
5. Add an Image block. Browse to the lesson folder, choose Exec_Summary.png, and click Add.
6. Point to the image to see placement options and choose Float.

   

   The Float placement option allows you to inset images into the story text

7. Add a Paragraph block, then 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").

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

8. Add a Text block and type The goals of the plan are to create a framework for: and change the font to Subheading.
9. Add a Text block and chooseBulleted List and 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.

Illustrate past and present conditions

This section of the planning report will focus on communicating the historical context of the site text and images, then presenting the current conditions of the site as a 3D web scene.

1. Add a Heading text block and type PLANNING CONTEXT.
2. Add an Image block and choose Green_Line.png from the lesson folder.
3. Add an Image block and choose Context.png from the lesson folder.
4. Point to the image to see the placement options and click Float.
5. Add a Subheading text block and type HISTORY.
6. Below the subheading, add a Paragraph 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. Below the paragraph, add the Green_Line.png image again.

   

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

8. Add a Subheading text block and type HISTORY OF THE STUDY AREA.
9. Click the Add block content button and click Map tour.
10. In the new window, click Start from Scratch, then click Guided Tour.

    If necessary, read through and close the What is a guided tour? pop-up.

11. In the Change Layout window, click Media focused.

    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.

12. Click Slide Title and type 17th, 18th, & 19th CENTURIES.
13. 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).

14. Click Add image or video. Choose DOT_AVE_TIMELINE-1stHalf.jpg from the lesson folder and click Add.
15. On the image, click Properties. In the Image Properties window, select Fit (do not crop) and click Save.

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

16. Click Add Location. Search for Dorchester Avenue South Boston and click the first result.

    

17. Click Add to Map to add a point.

    After a point is added, you can click and drag to 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.

18. For Zoom level, Click Use the current zoom level.

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

19. In the lower right of the guided tour block, click New Slide.

    

20. For Slide Title, type 20th & 21st CENTURIES.
21. For Continue your story, 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.

22. Click Add image or video and choose DOT_AVE_TIMELINE-2ndHalf.jpg.
23. Set the image properties to Fit (do not crop).
24. Click Add Location and search for and select South Boston Waterfront. Add the point to the map, use the current zoom level, and place the map.

    Now, 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.

Since the web scenes and maps are hosted by another user, you'll need to add them as favorites first before you can access them in story maps.

1. Go to Dorchester Avenue Plan Area Boundary. On the item details page, click Add to Favorites.

   

2. Scroll down below the guided tour. Add a Paragraph 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.

3. 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.

4. Click My Favorites.
5. Search for and select Dorchester Avenue Plan Area Boundary.

   

   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.

6. Click Place scene.
7. Point to the map to see the placement options and click Large.

   

   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.

8. Add a Heading text block and type WORKSHOPS AND OUTCOMES.
9. Add an Image block and choose Green_Line.png from the lesson folder.
10. Add an Image block and choose Workshops_Outcomes.png. Choose the Float placement option.
11. Add a Subheading text block and type FINALIZE WITH US.
12. Add a Paragraph 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 a Dot Ave planning survey created in Survey123. Dot Ave is a nickname given to Dorchester Avenue in Boston.

13. Add a Button block. For the name, type View the Dot Ave Plan Survey.
14. In the URL box, paste the following URL: https://arcg.is/1TTqHD.

    

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 preconfigured web app that compares the zones of the area before and after the development.

1. Add a Heading block and type FRAMEWORK.
2. Add an Image block and choose Blue_Line.png from the lesson folder.
3. Add an Image block and choose Framework.png from the lesson folder. Choose the Float placement option.
4. Add a Subheading text block and type ECONOMIC DEVELOPMENT.
5. Add a Paragraph text block, then for the list choose Bulleted List blocks to add 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:

   • 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.

     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.

6. Add a Heading block and type COMPARISON OF EXISTING AND PROPOSED ZONING.
7. Add an Embed block and paste the following URL: https://www.arcgis.com/apps/Compare/index.html?appid=cd64aeb0d79a4368af8c847d016fbcf3
8. Point to the content to see the configuration toolbar. Click Display as interactive.

   

9. Add a Paragraph 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 customizations. 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 header, click Design.
2. In the Design panel, under Theme, click Slate.

   

   Browse and try other themes, find one that suits your project.

3. 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.

4. Scroll to the Credits section at the bottom of the page.
5. Where it says Add a credits heading, type DISCLAIMER.
6. 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.

7. On the header, click Publish.

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

8. Under Sharing settings, choose My Organization.

   

   Note:

   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.

9. Click Publish Story.

   After you publish, the header status changes to Published. Now you can share the story with colleagues for feedback, and 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:

   To learn more about ArcGIS Urban, you can sign up for a free trial.

In this lesson, 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 lessons in the Learn ArcGIS Lesson Gallery.

Acknowledgements

• Example project data provided by the Boston Planning & Development Agency.