[Mapbox Scrollytelling Template](https://www.mapbox.com/solutions/interactive-storytelling/) ## Getting Started Follow these instructions to set up a project. 1. Create a new project directory. 2. Navigate to the [Mapbox Storytelling repo](https://github.com/mapbox/storytelling) on GitHub. 3. Copy the contents of the `src/` folder into your project folder. You should have three files in your project folder: `config.js`, `index.html`, `helper.html`. - The `helper.html` file is optional; use it to define map zoom and tilt options in the story or use the [online version](https://demos.mapbox.com/location-helper/). - You may need to rename `config.js.template` to `config.js`. 4. Open VSCode and select 'Go Live' to preview the template in your browser. ## Create an access token Best practice is to set up a specific token for each project in Mapbox. 1. In your browser, navigate to Mapbox, login, and go to the [Access tokens page](https://account.mapbox.com/access-tokens/). 2. Click the **Create a token** button 3. Using the default settings, create a token. You may want to return later to restrict the URL. 4. Copy/Paste the token into the section of `config.js` where it says `YOUR_ACCESS_TOKEN`. Note that in this case, it is ok to include this API token directly in the code because it is a public token. ## Configure story settings Update the overall settings by changing the title, subtitle, footer, and any others in the `config.js` file. Note that you can use HTML tags in these settings to style text or create links. You can also update the basemap, turn on/off markers or change their color, and change the theme (light or dark). ### Basemaps A number of basemaps are available from Mapbox, see [here](https://www.mapbox.com/maps). Options include light, dark, streets, outdoors, and imagery. Click the **Preview style** button to preview, and see the url to get the name to provide in your `config.js` file (e.g., `dark-v10`). You can also create a custom basemap in [Mapbox Studio](https://www.mapbox.com/maps). See the [Styles Guide](https://docs.mapbox.com/studio-manual/reference/styles/) for step-by-step instructions. Note that it can take up to 15 minutes for a new basemap to be available after it's published. ## Updating Chapters Chapters represent the building blocks of the story. The user navigates between chapters by scrolling through the story. Before diving into the code, sketch a [[storyboard]] to guide how you want the story to be told, including text, images or other media, and - `id` must always be unique. If animations or other functionality is not working, it's likely because you have a duplicate `id`. - `alignment`: options are `left`, `right`, `center`, and `full` - `image`: specify a relative path to your `assets` folder or provide a url. You can also embed videos or other media. - `location`: use the `helper.html` file or the [online version](https://demos.mapbox.com/location-helper/) to get the exact specs ### Display layers ### Callbacks