![image](https://storage.googleapis.com/3d-solutions-assets/v1_03_User_App_3D_Storytelling.gif) ## Introduction The Storytelling Solution is a versatile tool for journalists, travelers, and enthusiasts to weave narratives into geographic landscapes. It offers an engaging platform where stories come to life using [Google Maps Platform photorealistic 3D Tiles](https://developers.google.com/maps/documentation/tile/3d-tiles). Whether you're a journalist conveying a narrative with geographic context or a traveler documenting your adventures, this solution provides a user-friendly interface to bring your stories forward. ### Purpose The 3D Storytelling solution aims to enhance communication of stories by integrating geographic information. It's a digital storytelling tool that enables creators to craft immersive and interactive narratives using Google Maps Platform photorealistic 3D Tiles. Its purpose is to bridge the gap between storytelling and geography, enabling captivating experiences for users. ### Target Use Cases #### 1. Journalism Journalists can use the 3D Storytelling solution to enhance their stories with location-based context. Embedding narratives within specific geographical settings adds depth and authenticity to news articles, making them more impactful and engaging. #### 2. Travel Documentation Travelers can chronicle their journeys in a visually stunning way. By incorporating geo-tagged chapters, users can create an interactive travelog that not only shares experiences but also provides a spatial perspective of their adventures. #### 3. Educational Storytelling Educators can use the platform to create immersive learning experiences. By narrating historical events, scientific phenomena, or cultural stories within a geographical context, educators can enhance understanding and engagement. ## Getting started > [!TIP] > **Use the hosted** [3D Storytelling Admin app](https://js-3d-storytelling-admin-t6a6o7lkja-uc.a.run.app/) > > Or > [Get an API Key](https://console.cloud.google.com/google/maps-apis/credentials?utm_source=3d_solutions_storytelling). and **download** the code from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling). **Enable** - [Photorealistic 3D tiles API](https://console.cloud.google.com/marketplace/product/google/tile.googleapis.com?utm_source=3d_area_explorer) - [Places API](https://console.cloud.google.com/marketplace/product/google/places-backend.googleapis.com?utm_source=3d_area_explorer) ### Key Features - **Configurability**: The solution offers a configurable JSON structure, enabling users to tailor their storytelling experiences. Whether using the intuitive UI in the Admin app or directly editing the JSON, customization is at your fingertips. - **Interactive chapters**: Dive into the details with individual story chapters, each offering a unique blend of text content, media elements (images, gifs, or videos), and geographic coordinates. - **Dynamic camera control**: Take control of the narrative flow with dynamic camera options. Position, pitch, and roll settings allow creators to frame scenes precisely, providing an immersive viewing experience. - **Hosted demo**: Explore the capabilities without local installation. The hosted demo offers a glimpse into the storytelling potential of this solution. ## Use the app Once you launch the application, the story panel on the right side becomes your guide. This is your hub for an exploring a particular story. Here's how to navigate: **Start your story:** Start your interactive experience with the bold "Begin Interactive Story" button. ![image](https://developers.google.com/static/maps/architecture/3d-storytelling-getting-started/images/begin-interactive-storytelling-button.png) **Automated slideshow mode:** The play button unlocks the slideshow mode, seamlessly guiding you through each chapter of the story. **Navigate between chapters:** Use the navigation arrows to explore the story at your own pace, moving back and forth between chapters. ![image](https://developers.google.com/static/maps/architecture/3d-storytelling-getting-started/images/storytelling-control-panel.gif) **Jump to a chapter:** The story cards offer shortcuts -- click a card to instantly load its chapter. **Rich Multimedia:** Discover chapters filled with captivating images, engaging GIFs, and embedded YouTube videos. Click the play button within a video to watch it directly in your story panel. ## Key components The application is divided into two different apps, namely: - Admin app - Demo app This diagram gives an overview of the differences and correlation between the two applications: ![image](https://developers.google.com/static/maps/architecture/3d-storytelling-getting-started/images/areaexplorerge--sgpx43v9x9.jpg) ## Demo app This is the final, user-facing application that loads the configuration you created in the Admin app. In this immersive, 3D environment, users will be able to explore the selected areas and discover the POIs that you have highlighted. Once you have customized your look and feel using the Admin app, you can download the configuration and run your custom application from the source code. ## Admin app This application provides a user-friendly interface that lets you to customize the 3D experience: Learn more about how to create and customize your story using the Admin app [here](https://developers.google.com/maps/architecture/3d-storytelling-customizations.md.txt) ## Prerequisites Google API Key: You must use a Google Could API key that's enabled for the following APIs: - [Maps Tiles API](https://developers.google.com/maps/documentation/tile) - [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview.md.txt) - [Places API](https://developers.google.com/maps/documentation/places/web-service/overview.md.txt) Web server: You can host the application from either: - A local web server (e.g., using Node.js, http-server) - A web hosting service (The application comes with a Dockerfile) ## Deployment You can deploy the app as a simple node application or a docker in any container environment like [GKE](https://cloud.google.com/kubernetes-engine) or [GAE](https://cloud.google.com/appengine). For the hosted demo we are are using the following architecture: ![image](https://developers.google.com/static/maps/architecture/3d-storytelling-getting-started/images/storytellingge--yv1f09uj7c.png) ## Billing Information The Storytelling Solution uses Google Maps Platform services to provide an immersive, dynamic experience. Some APIs may incur charges. Here's an overview of the APIs and links to pricing. ### Google Maps Platform - 3D Tiles API The Storytelling Solution utilizes the 3D Tiles API to enhance the visual experience with geospatial data. For pricing details related to the 3D Tiles API, refer to the Google Maps Platform - [3D Tiles API Pricing](https://developers.google.com/maps/documentation/tile/usage-and-billing). ### Google Places API The Places API is employed for location-based data, adding rich information to the storytelling experience. To understand the costs associated with the Google Places API, visit Google Maps Platform - [Places API Pricing](https://developers.google.com/maps/documentation/places/web-service/usage-and-billing). ### Google Maps Autocomplete API Autocomplete feature enhances user interaction. For pricing details regarding the Google Maps Autocomplete API, kindly visit Google Maps Platform - [Places Autocomplete Pricing](https://developers.google.com/maps/documentation/places/web-service/usage-and-billing). ### CesiumJS CesiumJS is used for the 3D globe visualization. While CesiumJS itself is open-source, additional features or services may have their own associated costs. Refer to the CesiumJS Documentation for any premium offerings. It is crucial to review the pricing details for each respective API, as charges are determined individually based on usage. Note that Google Maps Platform offers a free tier with a certain amount of usage at no cost, and pricing specifics may vary based on factors such as the number of requests and usage region. Always refer to the official pricing pages for the most accurate and up-to-date information on Google Maps Platform and CesiumJS usage costs. Ensure compliance with the terms and conditions outlined by these services to manage and understand any associated expenses effectively. ## Conclusion The 3D Storytelling solution is a powerful tool that enables the creation of immersive and captivating narratives by seamlessly integrating storytelling with geographic context. Whether used for journalism, travel documentation, or educational purposes, this solution empowers creators to engage their audience in a uniquely captivating way. With its user-friendly interface, customizable features, and dynamic camera control, the 3D Storytelling solution offers a seamless storytelling experience. Explore the potential of this innovative tool and unleash your creativity to bring stories to life in a whole new dimension.