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

    Note:

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

  3. Click New story and choose Start from scratch.

    ArcGIS StoryMaps home screen

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

    Add cover image or video button

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

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

    Title, subtitle, and cover image

    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 the different options to see how they affect your story.

    Cover image configuration options

  10. When you are done exploring, click Minimal.

    Minimal cover design

  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. Point to the cover image and click Properties.

    Image placement configuration button

    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.

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

    Image centered on lower left.

  14. For Attribution, type Aerial view of Dorchester Avenue, Boston, Massachusetts and click Save.

    The cover image updates to Dorchester Ave.

    Cover image updated

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

  15. Click the Tell your story button and choose Image.

    Tell your story button

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

    Image block selected in the block palette.

    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.

  16. Click the Browse your files button, browse to the lesson folder where you stored the images and double-click Banner.png. Click Add.

    Add banner image

  17. Point to the image to see customization options and click Large.

    Image placement options with Large selected

    Now the banner takes up the entire width of the screen. Next, you will add content blocks to introduce the plan and expand on the narrative.

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

    Add content block button

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

    Change Paragraph to Heading.

    Now the text is formatted as a heading.

    Text formatted as a heading

  4. Click the Add content block button and choose Image. Browse to the lesson folder, choose Blue_Separator.png and click Add.
  5. Add a Subheading block, then type THE PLAN.
  6. Add an Image block. Browse to the lesson folder, double-click Exec_Summary.png and click Add.
  7. Point to the image to see placement options and choose Float right.

    Image placement options with Float selected

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

  8. Add a Text 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.

  9. Add a Text block and type The goals of the plan are to create a framework for: and change the font to Subheading.

    Change to Subheading

  10. Add a Text block and choose Bulleted List.

    Add a Bulleted list

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

    The bulleted list displays in the story.

    Bulleted list added to story

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

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, browse to the lesson folder, and choose Green_Line.png. Click Add.
  3. Add an Image block and from the lesson folder, choose Context.png. Click Add.
  4. Point to the image to see the placement options and click Float right.
  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.

    Planning context section of the report

    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 content block button and click Map tour.

    Map tour

  10. For How would you like to create your tour?, click Start from Scratch and click Guided.

    Select Guided map tour.

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

    Select Media focused map tour.

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

    Empty tour

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

    Century information added to tour

  15. In the middle of the screen, click Add image or video. Click Browse your files and browse to the lesson folder. Double-click DOT_AVE_TIMELINE-1stHalf.jpg and click Add.
  16. On the image, click Options.

    Options button

  17. In the Image Properties window, choose Fit (do not crop) and click Save.

    Fit (do not crop) option

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

  18. Click Add Location. In the search box, type Dorchester Avenue South Boston and click the first result.

    Search results for Dorchester Avenue, South Boston

  19. Click Add to Map to add a point.

    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.

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

    Choose the zoom level.

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

  21. Click Add location.
  22. In the lower right of the guided tour block, click New Slide.

    Add new slide button

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

  25. Click Add image or video, browse to the lesson folder and choose DOT_AVE_TIMELINE-2ndHalf.jpg.
  26. Set the image properties to Fit (do not crop).
  27. Click Add Location and search for and select South Boston Waterfront. Click Add to map, choose to Use the current zoom level, and click Add location.

    Slides in the tour

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

  2. Under the paragraph, add a Map block.

    Add a map to the story.

    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.

  3. Click My Organization.

    My Organization option

  4. In the Search box type Dorchester Avenue Plan Area Boundary. Click the only result for the Dorchester map.

    Dorchester Avenue Plan Area Boundary item card

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

    Place scene button

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

    Image placement options with Large selected

    The scene now takes up the entire screen. 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 Heading text block and type WORKSHOPS AND OUTCOMES.
  8. Add an Image block and choose Green_Line.png from the lesson folder.
  9. Add an Image block and choose Workshops_Outcomes.png. Choose the Float right placement option.
  10. Add a Subheading text block and type FINALIZE WITH US.
  11. 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.

  12. Add a Button block. For the name, type View the Dot Ave Plan Survey.
  13. Click the button clock and click the Edit button.

    Edit button

  14. In the URL box, paste the following URL: https://arcg.is/1TTqHD.

    Button URL configuration

    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 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.
  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 (press the Tab key to indent the bullets):

    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.

    Economic Development section

  6. Add a Heading block and type COMPARISON OF EXISTING AND PROPOSED ZONING.
  7. Add an Embed block.

    Add an Embed block.

    The Add web content window appears where you can enter a link.

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

    Add web content window

  9. Click Add.
  10. Point to the added content to see the configuration toolbar.

    The content is automatically added as an interactive embed item.

    Display content as interactive.

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

    Design the story

  2. In the Design panel, under Theme, click Slate.

    Accent color customization

    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.

    Optional story section configurations

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

    Story map navigation bar

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

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

    Credits section of the story

  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.

    Disclaimer information

    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. Under Sharing level, choose My 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.

    Sharing permissions

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