Merge pull request #69 from mapbox/refresh-2024

updates to minimap, mapboxgl, instructions, etc

src/config.js.template → config.js

@@ -1,27 +1,32 @@
 var config = {
-    style: 'mapbox://styles/mapbox/streets-v11',
-    accessToken: 'YOUR_ACCESS_TOKEN',
+    // style: 'mapbox://styles/mapbox/streets-v12',
+    // leave commented to use Mapbox Standard Style
+    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
     showMarkers: true,
     markerColor: '#3FB1CE',
     //projection: 'equirectangular',
     //Read more about available projections here
     //https://docs.mapbox.com/mapbox-gl-js/example/projections/
     inset: true,
+    insetOptions: {
+        markerColor: 'orange'
+    },
+    insetPosition: 'bottom-right',
     theme: 'dark',
     use3dTerrain: false, //set true for enabling 3D maps.
     auto: false,
-    title: 'The Title Text of this Story',
-    subtitle: 'A descriptive and interesting subtitle to draw in the reader',
-    byline: 'By a Digital Storyteller',
+    title: 'Your Title Goes Here',
+    subtitle: 'The Storytelling Template helps you create an awesome animated map story with ease.',
+    byline: 'By a I.M. Amapper',
     footer: 'Source: source citations, etc. <br> Created using <a href="https://github.com/mapbox/storytelling" target="_blank">Mapbox Storytelling</a> template.',
     chapters: [
         {
             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.',
+            title: 'San Francisco',
+            image: './assets/san-fran.jpeg',
+            description: 'The first chapter contains a title, image, and camera view for San Francisco, California. Update the chapter data to make it your own.',
             location: {
                 center: [-122.418398, 37.759483],
                 zoom: 8.5,
@@ -49,9 +54,9 @@ var config = {
             id: 'second-identifier',
             alignment: 'right',
             hidden: false,
-            title: 'Second Title',
-            image: './path/to/image/source.png',
-            description: 'Copy these sections to add to your story.',
+            title: 'Washington, D.C.',
+            image: './assets/washington-dc.jpg',
+            description: 'The second chapter flies to Washington, D.C., updates the camera pitch, and slowly rotates. <br>  <br> Washington, D.C., the capital of the United States, is a vibrant city known for its iconic landmarks, including the White House, the U.S. Capitol, and the Washington Monument. It serves as the political heart of the nation and a center for history, culture, and international diplomacy.',
             location: {
                 center: [-77.020636, 38.886900],
                 zoom: 8.5,
@@ -74,9 +79,9 @@ var config = {
             id: 'third-identifier',
             alignment: 'left',
             hidden: false,
-            title: 'Third Title',
-            image: './path/to/image/source.png',
-            description: 'Copy these sections to add to your story.',
+            title: 'Geneva',
+            image: './assets/geneva.jpg',
+            description: 'Geneva, Switzerland, is a picturesque city nestled along the shores of Lake Geneva, surrounded by the Alps and Jura mountains. Known as a global hub for diplomacy and finance, it is home to numerous international organizations, including the United Nations and the Red Cross.',
             location: {
                 center: [6.15116, 46.20595],
                 zoom: 12.52,
@@ -93,9 +98,9 @@ var config = {
             id: 'fourth-chapter',
             alignment: 'fully',
             hidden: false,
-            title: 'Third Title',
-            image: './path/to/image/source.png',
-            description: 'Copy these sections to add to your story.',
+            title: 'Buenos Aires',
+            image: './assets/buenos-aires.jpg',
+            description: 'Buenos Aires, the capital of Argentina, is a dynamic city known for its European-inspired architecture, vibrant tango culture, and rich culinary scene. Often called the "Paris of South America," it blends historic charm with modern energy.  You can add as many chapters as you need, just copy the JSON data and make changes.',
             location: {
                 center: [-58.54195, -34.71600],
                 zoom: 4,