Integrates Vizzuality's Layer manager with mapbox/storytelling to be able to display external layers
- Copy .env.template and rename it to .env
- Add Mapbox access token to the new .env
- Update config.js with the desired chapters and layers
- External layers config should be specified on the map-external-layers.js file
- Update index.html and manifest.json inside public folder to update title and SEO
Definition of the chapter options on the config file:
chapters: [
{
id: 'amazon-region', // Id of the mapbox or external layer
title: 'Turning the Amazon river into an industrial waterway', // Title of the chapter
intro: { // Add this to have an intro screen
title: 'Amazon Soy Ports', Title of the intro
date: 'Nov. 10 2020' Date of publishing
height: '1300' // optional - height of the intro screen. default: full screen
social: [
{
name: 'twitter',
src: 'twitter.svg',
href: 'https://twitter.com/mongabay'
}
]
},
logos: [ // Array of logos to be shown on the bottom right of the screen
{
name: 'mongabay', // Name to add on the alt text
src: 'logos.png', // logo image in public folder
width: '200' // optional, size in pixels
href: 'www.mongabay.org' // optional, link to url
}
],
images: [ // Array of images to be displayed on the chapter
{ src: 'chapter1_legend.png', // File
position: 'top', // position of the image, top. before the text, bottom: after the text
title: 'legend', // Title in the image caption
author: 'Mongabay', // Author in the image caption
},
{ src: 'chapter1_legend.png', position: 'bottom'}
],
legend: [
{
title: 'Industrial port facilities in the Amazon basin',
color: '#7259A8',
border: 'black', // Not required. Default is none
type: 'circle' // Default is square
},
{
title: 'Soy Storage Facilities',
color: '#BAA4F5'
}
],
sources: 'Sources: ANTAQ (Ports), Trase.earth (storage facilities)', // Sources line below the legend
description: // Main text of the chapter
'Brazil’s government has had major plans to exploit large portions of its 35,000-kilometers (22,000-miles) of waterways since the 1970s. But it was mostly privately funded projects that went ahead, with just a third of the nation’s navigable waterway potential now fulfilled.',
location: { // Start location
center: [-57.15869, -3.85456],
zoom: 4.70,
pitch: 43.50,
bearing: 54.23
},
onChapterEnter: [ // Layers and opacity to display on enter
{
layer: 'amazon-ports',
opacity: 1
},
{
layer: 'soy-storage-facilities',
opacity: 1
}
],
onChapterExit: [ // Layers and opacity to display on exit
{
layer: 'soy-storage-facilities',
opacity: 0.3
}
],
}
The app is using i18next and react-i18next npm packages. The text will be translated to the browser selected language.
Define the translations in translations.js file on the root directory:
You can have as many languages as you want just add all the keys with the selected language code and pick every text displayed on the app as a key the translation as the value.
E.g.
export default {
es: {
"Amazon Soy Ports": 'Puertos de soja en el Amazonas',
...
},
de: {
...
}
};
Install dependencies listed in the package.json file:
yarn install
Run the development server:
yarn start
Follow the instructions above for setting up your configuration file and building out your story. Once the application is ready for deployment, run:
yarn build
This command will generate a build directory that contains everything you will need to deploy your story.