diff --git a/README.md b/README.md
index c6a27da..91f8f53 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
- [Interactive Storytelling](#interactive-storytelling)
+ - [Live Demo](#live demo)
- [Prerequisites](#prerequisites)
- [Getting Started](#getting-started)
- [Steps](#steps)
@@ -27,15 +28,19 @@ Optionally, you can input a custom Mapbox Style with layers styled in Studio and
The output is an HTML and JavaScript file. These outputs can be hosted on any web-accessible location, with no extra code or infrastructure required. Note that embedding the output as an iFrame in another page will not work as expected. The scroll-driven interface requires the full page.
+## Live Demo
+
+You can view a live demo of this storytelling framework at [https://labs.mapbox.com/storytelling/](https://labs.mapbox.com/storytelling/)
+
## Prerequisites
-This template is for data journalists and digital storytellers of any kind. No coding experience is required. If you are planning to include some custom map layers, you will need some familiarity with [Mapbox Studio](https://studio.mapbox.com).
+This template is for data journalists and digital storytellers of any kind. If you are planning to include some custom map layers, you will need some familiarity with [Mapbox Studio](https://studio.mapbox.com).
To configure and publish a story, you will need:
- A Mapbox [access token](https://docs.mapbox.com/help/glossary/access-token). Sign up for a free account at [mapbox.com](https://www.mapbox.com/signup/) to get one.
-- A text editor. Atom, Sublime Text, and Visual Studio Code are all fine choices.
+- A text editor. Visual Studio Code is a fine choice.
-- A place to publish your work. Any service that hosts static files that can be accessed with a browser will do.
+- A place to publish your work. Any service that hosts static files that can be accessed with a browser will do. [Github Pages](https://pages.github.com/) is a good free option.
- A story. This is unquestionably the hardest part. The best stories for this template will have sections that benefit from a map.
@@ -49,10 +54,7 @@ The template does not rely on any particular CSS framework, fonts, or images. Th
## Getting Started
-- Download this repository as a ZIP file using the button above, and unzip it. If you are using `git`, clone this repository.
-
-
-In your local copy of this repository (the unzipped file you downloaded), navigate to the `src/` directory.
+Clone this repository. Navigate to the `src/` directory.
Make a copy of `config.js.template` and name it `config.js`. Open the new `config.js` file in your text editor.
@@ -81,31 +83,33 @@ Make a copy of `config.js.template` and name it `config.js`. Open the new `confi
byline: 'By a Digital Storyteller',
footer: 'Source: source citations, etc.',
chapters: [
- {
+ ...
+ ]
+{
```
6. **Add as many `chapters` in your template as needed.** You'll need a `,` between each section, but no comma at the end. Here is what a `chapter` looks like:
```
{
- id: 'slug-style-id',
- alignment: 'left',
- hidden: false,
- title: 'Display Title',
- image: './path/to/image/source.png',
- description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
- location: {
- center: [-122.418398, 37.759483],
- zoom: 8.5,
- pitch: 60,
- bearing: 0
- },
- mapAnimation: 'flyTo',
- rotateAnimation: false,
- callback: '',
- onChapterEnter: [],
- onChapterExit: []
- },
+ id: 'slug-style-id',
+ alignment: 'left',
+ hidden: false,
+ title: 'Display Title',
+ image: './path/to/image/source.png',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ location: {
+ center: [-122.418398, 37.759483],
+ zoom: 8.5,
+ pitch: 60,
+ bearing: 0
+ },
+ mapAnimation: 'flyTo',
+ rotateAnimation: false,
+ callback: '',
+ onChapterEnter: [],
+ onChapterExit: []
+},
```
7. **Fill out your sections as needed.** Give each section a unique name in the section `id` property. This will become the HTML `div` `id`, so avoid spaces in the name. The `title`, `description` properties are optional. The `description` supports HTML tags. If you have an image that goes with that section of the story, add the path to the image in the `image` property.
@@ -116,15 +120,11 @@ Make a copy of `config.js.template` and name it `config.js`. Open the new `confi
10. Open `index.html` in a browser, and scroll. Voila!
-#### Generate Map Position Using `Helper.html`
+#### Generate Map Position
-Using the `helper.html` file, you can search for places, zoom, pan, tilt, and rotate the map to get the desired map position (_Hint_: To tilt and rotate the map, right-click and drag the map).
+Use the [Mapbox Location Helper](https://labs.mapbox.com/location-helper/) to search for locations and get the center, zoom, pitch, and bearing for use in your storytelling map.
-Notice the location parameters are updated in the upper left corner with everytime you move the map. You can copy the location definition from that page into the `config.js` `location` property section.
-
-There is also a hosted version of this file at [https://demos.mapbox.com/location-helper/](https://demos.mapbox.com/location-helper/)
-
-
+
#### Configuration File and Layer Settings
@@ -265,13 +265,6 @@ Add and style each custom layer in your Studio style. Before the final publish,
This will ensure that the map appears correctly when the story page loads. To adjust the opacity of the layers as the reader scrolls through the story, use the `onChapterEnter` or `onChapterExit` configuration options to set your desired opacity for the layer.
-### Organization
-
-- `src`: Code for the template
-- `example`: Example stories
- - `glacier`: Glaciers of Glacier National Park example
- - `bike-philly`: Philadelphia bicycle infrastructure example
-
## Deployment
Host the `index.html` and `config.js` files in the same directory in a web-accessible location. If you don't know where to start, look into GitHub Pages or Netlify.
@@ -312,5 +305,6 @@ BSD 3-Clause License
- [The Guiana Shield: The Amazon Conservation Team](https://www.amazonteam.org/maps/guiana-shield/)
- [Watchlist 2021: International Rescue Committee](https://theirc.github.io/watchlist2021/)
- [A River Drained: Kontinentalist](https://cdn-images.kontinentalist.com/static-html/food-security-mekong-river-hydropower-dam-climate-change/index.html)
+- [Climate Gentrification and its impact on New York City: Judy Huynh](https://www.climategentrification.info/)
[mapbox.com/resources#solutions](https://www.mapbox.com/resources#solutions)
diff --git a/assets/location-helper.gif b/assets/location-helper.gif
new file mode 100644
index 0000000..2e5a0eb
Binary files /dev/null and b/assets/location-helper.gif differ
diff --git a/assets/locationhelper.gif b/assets/locationhelper.gif
deleted file mode 100644
index 927388c..0000000
Binary files a/assets/locationhelper.gif and /dev/null differ
diff --git a/example/bike-philly/config.js b/example/bike-philly/config.js
deleted file mode 100644
index c7aeec8..0000000
--- a/example/bike-philly/config.js
+++ /dev/null
@@ -1,157 +0,0 @@
-var config = {
- style: 'mapbox://styles/branigan/cjzsvonse027m1co4nkxp13b3',
- accessToken: 'pk.eyJ1IjoibWJ4c29sdXRpb25zIiwiYSI6ImNrMm01aG9hdTBlZGwzbXQ1ZXVrNHNmejAifQ.QHQA0N6XPWddCXtvoODHZg',
- showMarkers: false,
- theme: 'light',
- title: '',
- subtitle: '',
- byline: '',
- footer: '',
- chapters: [
- {
- id: 'phl',
- alignment: 'right',
- title: 'Philadelphia Bicycle Infrastructure',
- image: '',
- description: 'Getting around Philadelphia on two wheels is fast, fun, and cheap. As a typical East Coast large city, the urban core is dense, so there is a lot within reach of a 15 minute ride... even mountain bike trails. Paired with the public transit infrastructure, cycling can be more efficient and much less expensive than driving (and parking) a car.',
- location: {
- center: [-75.13080, 39.97790],
- zoom: 9.83,
- pitch: 0.00,
- bearing: 0.00
- },
- onChapterEnter: [
- {
- layer: 'phl-city-limits',
- opacity: .45
- }
- ],
- onChapterExit: [
- {
- layer: 'phl-city-limits',
- opacity: 0
- }
- ]
- },
- {
- id: 'bike-lanes',
- alignment: 'right',
- title: 'Bike Lanes',
- image: '',
- description: 'Philadelphia has XX miles of bike lanes, XX miles of which are protected. Drivers are getting more used to sharing the road, but ride defensively.',
- location: {
- center: [-75.13901, 39.97085],
- zoom: 11.62,
- pitch: 55.50,
- bearing: -7.20
- },
- onChapterEnter: [
- {
- layer: 'phl-bike-network',
- opacity: 1
- }
- ],
- onChapterExit: []
- },
- {
- id: 'indego',
- alignment: 'right',
- title: 'Indego Bike Share',
- image: '',
- description: 'Indego has been operating in Philadelphia since 20XX. The system initally was focused on Center City, but has expanded service to neighboring areas to support equitable mobility options to the city\'s residents.',
- location: {
- center: [-75.16468, 39.94503],
- zoom: 13.15,
- pitch: 60.00,
- bearing: -16.80
- },
- onChapterEnter: [
- {
- layer: 'indego-stations',
- opacity: 0.8
- }
- ],
- onChapterExit: [
- {
- layer: 'indego-stations',
- opacity: 0
- }
- ]
- },
- {
- id: 'belmont',
- alignment: 'right',
- title: 'Belmont Plateau Trails',
- image: '',
- description: 'A short ride along the Schuylkill River Trail from the Art Museum, Belmont is a twisty, log-ridden rollercoaster of a trail network. It is easy to get turned around, the underbrush is at times impenetrable, and short steep sections come out of nowhere. In other words, it\'s really fun',
- location: {
- center: [-75.20325, 39.99574],
- zoom: 14.99,
- pitch: 44.00,
- bearing: -40.00
- },
- onChapterEnter: [
- {
- layer: 'belmont',
- opacity: 1
- }
- ],
- onChapterExit: [
- {
- layer: 'belmont',
- opacity: 0
- }
- ]
- },
- {
- id: 'wiss',
- alignment: 'right',
- title: 'Wissahickon Park Trails',
- image: '',
- description: 'This steep, rocky gorge can be surprisingly technical. Follow the orange and yellow trails to repeatedly climb and descend through the schist hillsides (careful of the cliffs), or stick to the gravel Forbidden Drive for a relaxing ride along the creek. You\'ll forget you\'re in a city.',
- location: {
- center: [-75.21223, 40.05028],
- zoom: 13.08,
- pitch: 47.50,
- bearing: 32.80
- },
- onChapterEnter: [
- {
- layer: 'wissahickon',
- opacity: 1
- }
- ],
- onChapterExit: [
- {
- layer: 'wissahickon',
- opacity: 0
- }
- ]
- },
- {
- id: 'pennypack',
- alignment: 'right',
- title: 'Pennypack Park Trails',
- image: '',
- description: 'Pennypack is a great introduction trail system. Not too steep and not too technical, the beautiful wooded park also provides a great escape from urban life. The south side trails are originally bridle trails, so be nice to equestrians and dismount when you approach them.',
- location: {
- center: [-75.05685, 40.06839],
- zoom: 13.73,
- pitch: 43.50,
- bearing: 96.80
- },
- onChapterEnter: [
- {
- layer: 'pennypack',
- opacity: 1
- }
- ],
- onChapterExit: [
- {
- layer: 'pennypack',
- opacity: 0
- }
- ]
- }
- ]
-};
diff --git a/example/bike-philly/index.html b/example/bike-philly/index.html
deleted file mode 100644
index 877585e..0000000
--- a/example/bike-philly/index.html
+++ /dev/null
@@ -1,334 +0,0 @@
-
-
-
-
- Mapbox Storytelling
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/example/glacier/config.js b/example/glacier/config.js
deleted file mode 100644
index e2c2ed4..0000000
--- a/example/glacier/config.js
+++ /dev/null
@@ -1,287 +0,0 @@
-var config = {
- style: 'mapbox://styles/branigan/cjz37rcb003ib1cr3s8rnkt2d',
- accessToken: 'pk.eyJ1IjoibWJ4c29sdXRpb25zIiwiYSI6ImNrMm01aG9hdTBlZGwzbXQ1ZXVrNHNmejAifQ.QHQA0N6XPWddCXtvoODHZg',
- showMarkers: false,
- theme: 'dark',
- use3dTerrain: true,
- title: 'Glaciers of Glacier National Park',
- subtitle: 'Change in coverage from 1998 to 2015',
- byline: '',
- footer: 'Source: Story text from Wikipedia, August 2019. Data from USGS',
- chapters: [
- {
- id: 'glacier-np',
- alignment: 'full',
- title: 'Glacier National Park Glaciers',
- image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/2015-06-19_Glacier_National_Park_%28U.S.%29_8633.jpg/800px-2015-06-19_Glacier_National_Park_%28U.S.%29_8633.jpg',
- description: 'Glacier National Park is dominated by mountains which were carved into their present shapes by the huge glaciers of the last ice age. These glaciers have largely disappeared over the last 12,000 years. Evidence of widespread glacial action is found throughout the park in the form of U-shaped valleys, cirques, arêtes, and large outflow lakes radiating like fingers from the base of the highest peaks. Since the end of the ice ages, various warming and cooling trends have occurred. The last recent cooling trend was during the Little Ice Age, which took place approximately between 1550 and 1850. During the Little Ice Age, the glaciers in the park expanded and advanced, although to nowhere near as great an extent as they had during the Ice Age.',
- location: {
- center: [-113.91666, 48.66451],
- zoom: 8,
- pitch: 0.00,
- bearing: 0.00
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-1998',
- opacity: 0.25
- },
- {
- layer: 'glaciernp-boundary',
- opacity: 0.25
- }
- ],
- onChapterExit: [
- {
- layer: 'glaciernp-boundary',
- opacity: 0
- }
- ]
- },
- {
- id: 'harrison1998',
- alignment: 'left',
- title: 'Harrison Glacier, 1998',
- image: '',
- description: 'Harrison Glacier is located in the US state of Montana in Glacier National Park. Situated on a southeast facing ridge immediately south of Mount Jackson, Harrison Glacier is the largest glacier in Glacier National Park. Compared to many of the vanishing glaciers in Glacier National Park, Harrison Glacier has a much higher altitude accumulation zone (approximately 9,000 feet (2,700 m)) which has allowed it to maintain some equilibrium in its glacier mass balance.',
- location: {
- center: [-113.72917, 48.58938],
- zoom: 12.92,
- pitch: 39.50,
- bearing: 36.00
- },
- onChapterEnter: [],
- onChapterExit: [
- // {
- // layer: 'gnpglaciers-2015',
- // opacity: 0
- // }
- ]
- },
- {
- id: 'harrison2015',
- alignment: 'left',
- title: 'Harrison Glacier, 2015',
- image: '',
- description: 'Between 1998 and 2015, Harrison Glacier lost 169 acres of surface area (about 37%).',
- location: {
- center: [-113.72917, 48.58938],
- zoom: 12.92,
- pitch: 39.50,
- bearing: 36.00
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0.25
- }
- ],
- onChapterExit: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0
- }
- ]
- },
- {
- id: 'blackfoot1998',
- alignment: 'left',
- title: 'Blackfoot Glacier, 1998',
- image: '',
- description: 'Blackfoot Glacier is the second largest of the remaining 25 glaciers in Glacier National Park, Montana. Blackfoot Glacier is just to the north of Blackfoot Mountain and near Jackson Glacier. When first documented in 1850, the glacier also included the now separate Jackson Glacier and together, they covered 1,875 acres (7.59 km2). In 1850, there were an estimated 150 glaciers in the park. Glaciologists have stated that by the year 2030, all the glaciers in the park may disappear.',
- location: {
- center: [-113.66573, 48.59181],
- zoom: 12.92,
- pitch: 51.50,
- bearing: -26.40
- },
- onChapterEnter: [],
- onChapterExit: []
- },
- {
- id: 'blackfoot2015',
- alignment: 'left',
- title: 'Blackfoot Glacier, 2015',
- image: '',
- description: 'Between 1998 and 2015, Blackfoot Glacier lost 31 acres of surface area (about 8%).',
- location: {
- center: [-113.66573, 48.59181],
- zoom: 12.92,
- pitch: 51.50,
- bearing: -26.40
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0.25
- }
- ],
- onChapterExit: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0
- }
- ]
- },
- {
- id: 'agassiz1998',
- alignment: 'left',
- title: 'Agassiz Glacier, 1998',
- image: '',
- description: 'Agassiz Glacier is in Glacier National Park in the U.S. state of Montana. It is named after Louis Agassiz, a Swiss-American glaciologist. The glacier is situated in a cirque to the southeast of Kintla Peak west of the Continental Divide. Agassiz Glacier is one of several glaciers that have been selected for monitoring by the U.S. Geological Survey\'s Glacier Monitoring Research program, which is researching changes to the mass balance of glaciers in and surrounding Glacier National Park.',
- location: {
- center: [-114.15881, 48.93439],
- zoom: 13.51,
- pitch: 41.00,
- bearing: 78.33
- },
- onChapterEnter: [],
- onChapterExit: []
- },
- {
- id: 'agassiz2015',
- alignment: 'left',
- title: 'Agassiz Glacier, 2015',
- image: '',
- description: 'Between 1998 and 2015, Agassiz Glacier lost 108 acres of surface area (about 37%).',
- location: {
- center: [-114.15881, 48.93439],
- zoom: 13.51,
- pitch: 41.00,
- bearing: 78.33
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0.25,
- }
- ],
- onChapterExit: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0
- }
- ]
- },
- {
- id: 'rainbow1998',
- alignment: 'left',
- title: 'Rainbow Glacier, 1998',
- image: '',
- description: 'Rainbow Glacier is in Glacier National Park in the U.S. state of Montana. The glacier is situated immediately to the east of Rainbow Peak at an elevation between 8,500 feet (2,600 m) and 8,000 feet (2,400 m) above sea level. The glacier has visible crevasses in satellite imagery. Rainbow Glacier has shown modest retreat compared to other glaciers in Glacier National Park.',
- location: {
- center: [-114.08659, 48.88039],
- zoom: 13.09,
- pitch: 50.00,
- bearing: -53.60
- },
- onChapterEnter: [],
- onChapterExit: []
- },
- {
- id: 'rainbow2015',
- alignment: 'left',
- title: 'Rainbow Glacier, 2015',
- image: '',
- description: 'Between 1998 and 2015, Rainbow Glacier lost 17 acres of surface area (about 6%).',
- location: {
- center: [-114.08659, 48.88039],
- zoom: 13.09,
- pitch: 50.00,
- bearing: -53.60
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0.25
- }
- ],
- onChapterExit: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0
- }
- ]
- },
- {
- id: 'kintla1998',
- alignment: 'left',
- title: 'Kintla Glacier, 1998',
- image: '',
- description: 'Kintla Glacier is in Glacier National Park in the U.S. state of Montana. The glacier is situated on a plateau 2 miles (3.2 km) southwest of Kintla Peak at an elevation between 8,700 feet (2,700 m) and 7,700 feet (2,300 m) above sea level. The glacier has numerous crevasses and is actually two glaciers.',
- location: {
- center: [-114.18755, 48.92880],
- zoom: 13.09,
- pitch: 48.50,
- bearing: 164.00
- },
- onChapterEnter: [],
- onChapterExit: []
- },
- {
- id: 'kintla2015',
- alignment: 'left',
- title: 'Kintla Glacier, 2015',
- image: '',
- description: 'Between 1998 and 2015, Harrison Glacier lost 24 acres of surface area (about 10%).',
- location: {
- center: [-114.18755, 48.92880],
- zoom: 13.09,
- pitch: 48.50,
- bearing: 164.00
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0.25
- }
- ],
- onChapterExit: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0
- }
- ]
- },
- {
- id: 'sperry1998',
- alignment: 'left',
- title: 'Sperry Glacier, 1998',
- image: '',
- description: 'Sperry Glacier is a glacier on the north slopes of Gunsight Mountain west of the Continental Divide in Glacier National Park in the U.S. state of Montana. Although many geologic features of Glacier National Park were formed during the much longer period of glaciation ending over 10,000 years ago, Sperry Glacier — like all the glaciers in the park today — is a product of the recent Little Ice Age, the period of cooler average temperatures starting in about the 13th century and concluding in the mid-19th century.',
- location: {
- center: [-113.75672, 48.62433],
- zoom: 13.68,
- pitch: 34.50,
- bearing: 106.40
- },
- onChapterEnter: [],
- onChapterExit: []
- },
- {
- id: 'sperry2015',
- alignment: 'left',
- title: 'Sperry Glacier, 2015',
- image: '',
- description: 'Between 1998 and 2015, Harrison Glacier lost 37 acres of surface area (about 16%).',
- location: {
- center: [-113.75672, 48.62433],
- zoom: 13.68,
- pitch: 34.50,
- bearing: 106.40
- },
- onChapterEnter: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0.25
- }
- ],
- onChapterExit: [
- {
- layer: 'gnpglaciers-2015',
- opacity: 0
- }
- ]
- }
- ]
-};
\ No newline at end of file
diff --git a/example/glacier/index.html b/example/glacier/index.html
deleted file mode 100644
index 97f3043..0000000
--- a/example/glacier/index.html
+++ /dev/null
@@ -1,333 +0,0 @@
-
-
-
-
- Mapbox Storytelling
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/helper.html b/src/helper.html
deleted file mode 100644
index d5747e6..0000000
--- a/src/helper.html
+++ /dev/null
@@ -1,93 +0,0 @@
-
-
-
-
- Position Helper
-
-
-
-
-
-
-
-
-
-
-
