Add chapters

Now that you have the basic configuration of your storymap, it is time to add data to your chapters. Chapters contain the contents of your story. Each of them is a box with text and mutimedia that will scroll on top of your basemap.

You will need to add and set some details in the config.js file to create the chapters of your story. Starting on line 18 of the config.js file, you will see the chapters and its properties.

At the bottom of this page you have a detail on the function of each property of the chapters in the config.js file. We will go through the basic properties in the following steps.

1 Setting up your first chapter.

Step 1

Add an id to your fist chapter. Just type any text that will identify your firts chapter.

Input

20  id: 'my-first-chapter'

Remember to use dashes to separate words and lowercase letters for the chpater id.

Step 2

Add a title to your chapter. On line 23, add a text to be your chapter title.

Input

23  title: 'Chapter 1'

Step 3

Add a description to your chapter. This section will contain the main text of this chapetr. On line 29, add all the text for this chapter.

Input

29  description: 'This is the greatest story in the world. It takes place in the city of Philadelphia'

2 Adding an image to your chapter.

Step 1

Give the image you are going to use a simple but easy to identify name. For example img_chapter1.png.

Step 2

1. On your system browser, navigate to the maplibre-storymap repository folder.

2. Inside this folder you will see another folder named images.

3. Save your image img-chapter1.png into this folder.

Step 3

Go back to the config.js file on Visual Studio Code and add the following:

Input

24  image: './images/img-chapter1.png'

3 Setting the location of the chapter in the map.

Another feature of storymaps is the ability to center the basemap on a specific point to higlight the story you are telling. In this demo, we are telling a story about the city of Philadelphia, we are going to locate the map so that it displays an overview of the city with the centerpoint on City Hall.

The map view is controlled by the properties under location: from line 31 to 34 in the confi.js file. The first two options, center and zoom being the most important as the set the coordinates where the map is centered and how far in or out is is zoomed in. To help you decide this properties values we are going to use the Location Helper web app.

Step 1

On your internet browser, navigate to the Location Helper web app.

You are going to see a map and a window with some numeric values for center (array), center (object), zoom, bearing, pitch and others on the left side of the screen. Notice a circle marking the center of the map.

Navigate the map using the Navigation controls or the Search bar on the top right corner of the screen, untill you see the map as you want it to be displayed in your chapter.

In this demo, we typed on the search bar Philadelphia, Pennsylvania and the resulting map looks good for the purpose of the first chapter.

Step 2

Copy the values on the center (array) peoperty of the Location Helper web app and paste it in the center: property on line 31 of the config.js file you have opened in Visual Studio Code.

Input

31  center: [-75.15911, 39.97307],

Note that the coordinates are within [ ] symbols and separated by a comma.

Step 3

Copy the values on the zoom peoperty of the Location Helper web app and paste it in the zoom: property on line 32 of the config.js file you have opened in Visual Studio Code.

Input

32  zoom: 10.89,

4 Adding more chapters to your story map.

The Digital Democracy template has two chapters added to the map.

A chapter has the following structure:

{
            id: 'chapter-id',
            alignment: 'left',
            hidden: false,
            title: 'Chapter title',
            image: './images/name.png',
            caption: 'Source image caption',
            website: '<a href="" target="_blank">Website</a>',
            author: 'Digital Storyteller',
            legend: '<span style="font-size: 0.85em;"><em>Legend content</em></span>',
            description: 'Your chapter content',
            location: {
                center: [-75.15911, 39.97307],
                zoom: 10.89,
                pitch: 0,
                bearing: 0
            },
            mapAnimation: 'flyTo',
            rotateAnimation: false,
            spinGlobe: false,
            mapInteractive: true,
            callback: '',
            onChapterEnter: [],
            onChapterExit: []
        },

To add new chapters to your storymap, simply copy this text and paste it right after the } symbol that closes the previous chapter. Be sure to include a , after the symbol and paste the text before the ] that closes the chapters section on the code.

Add as many chapters as you like.

Don’t forget to add th data and specifications needed in each chapter. In the next section of this tutorial you will learn how to preview your storymap.

Go ahead and play around changing some chapter settings like aligment and rotateAnimantion.