![image](https://storage.googleapis.com/3d-solutions-assets/v1_01_User_App_3D_Area_Explorer.gif) ## Overview The 3D Area Explorer solution gives you an entirely new way to discover and experience locations. This solution leverages the capabilities of [Google Maps Platform Photorealistic 3D Tiles](https://developers.google.com/maps/documentation/tile/3d-tiles) and the [Places API](https://developers.google.com/maps/documentation/places/web-service/overview) to create captivating, interactive 3D environments. The 3D Area Explorer is designed to serve multiple purposes: - **Enhance area exploration:** Users can explore neighborhoods virtually with a high degree of visual detail, gaining insights into local features and landmarks. - **Promote location-based narratives: :** The ability to incorporate POIs (Points of interest) with rich descriptions enables the creation of narrative-driven experiences that educate and inform users about specific locations. - **Inspire development using Google Maps 3D capabilities:** It demonstrates the potential of Google's 3D mapping data for creating immersive, interactive maps ## Getting started > [!TIP] > **Use the hosted** [3D Area Explorer Admin app](https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/) > > Or > [Get an API Key](https://console.cloud.google.com/google/maps-apis/credentials?utm_source=3d_area_explorer) and **download** the code from [GitHub](https://github.com/googlemaps-samples/js-3d-area-explorer). **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 technologies This solution is built using two key technologies: ### Google Maps Platform APIs We use several APIs from Google Maps Platform to get the base map and the data to create this experience: - [Google Maps Photorealistic 3D Tiles](https://developers.google.com/maps/documentation/tile/3d-tiles.md.txt): High-resolution 3D models of buildings and terrain provide a realistic and visually engaging representation of urban environments. - [Places API](https://developers.google.com/maps/documentation/places/web-service/overview.md.txt): The app can identify and display detailed information about Points of Interest (POIs) within the explored area, enriching the user experience with local knowledge. - [Autocomplete](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete.md.txt) helps users search for specific locations or areas of interest. ### CesiumJS CesiumJS is responsible for rendering and displaying the high-resolution 3D globe. It handles the loading and visualization of Google's Photorealistic 3D Tiles, which provide a 3D mesh model of buildings and terrain. **Camera Management:** CesiumJS provides the tools to control the camera's position, orientation, and movement. This includes: - Setting the initial viewpoint to focus on the specified neighborhood upon loading the app. - Implementing dynamic camera movements, such as the automated orbit animations for exploration. - Handling user interactions with the globe if such features are included (panning, zooming, rotating). Learn how Photorealistic 3D tile can [Work with a 3D Tiles renderer](https://developers.google.com/maps/documentation/tile/use-renderer.md.txt). ## 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-area-explorer-getting-started/images/areaexplorerge--sgpx43v9x9.jpg) It would be beneficial to investigate each app further: ## Admin app This application provides a user-friendly interface that lets you customize the 3D experience: - **Location search :** Use the integrated Google Maps Platform Autocomplete search bar to find the area you want to showcase. Once you select a location, the camera will seamlessly fly to that area. - **Camera:** Adjust the camera movement speed and orbit type to create the selected viewing experience. - **Places (POIs):** Define the density, search radius, and types of points of interest (e.g., restaurants, cafes, landmarks) that you'd like to feature. Use this app to customize the experience for your end users. > [!NOTE] > **Note:** You can use the Admin app as a demo app as well which will just expose different configurations to the end user. This is what we have done here: - Explore [Google's Chicago office following a slow camera path](https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#location.coordinates.lat=41.8872571&location.coordinates.lng=-87.65266679999999&camera.orbitType=dynamic-orbit&camera.speed=0.4). - [See all Chicago area airports](https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#location.coordinates.lat=41.8872571&location.coordinates.lng=-87.65266679999999&camera.orbitType=dynamic-orbit&camera.speed=0.4&poi.searchRadius=23400&poi.density=10&poi.types=airport) - See [A dense view of tourist attractions around the Las Vegas strip](https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#location.coordinates.lat=36.1147065&location.coordinates.lng=-115.1728484&camera.orbitType=dynamic-orbit&camera.speed=0.4&poi.searchRadius=1500&poi.density=50&poi.types=tourist_attraction&poi.types=airport). - Now [Explore Las vegas following a high speed sinusoidal camera path](https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#location.coordinates.lat=36.1147065&location.coordinates.lng=-115.1728484&camera.orbitType=dynamic-orbit&camera.speed=3.9&poi.searchRadius=1500&poi.density=50&poi.types=tourist_attraction&poi.types=airport) - [Explore grand canyon](https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#location.coordinates.lat=36.09976309999999&location.coordinates.lng=-112.1124846&camera.orbitType=dynamic-orbit&camera.speed=0.8&poi.searchRadius=14100&poi.density=50&poi.types=tourist_attraction&poi.types=airport) with all key tourist attractions There is a detailed description of all the customizations [3D Area Explorer customizations](https://developers.google.com/maps/architecture/3d-area-explorer-customizations.md.txt). ## 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 places 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. ## User Experience ![image](https://developers.google.com/static/maps/architecture/3d-area-explorer-getting-started/images/areaexplorerge--yv45wmauhag.gif) Some of the key features of the application are: 1. Users can interactively explore an area in 3D, including buildings, landmarks, and terrain. 2. Users can search and discover nearby places (e.g., museums, parks, restaurants). 3. Upon selecting a place, users can view detailed information or narratives related to that location. 4. Developers can personalize their exploration experience through settings and controls (if using the Admin app). 5. Auto rotation is enabled, allowing the camera to automatically rotate around the center of the area selected. ## Prerequisites 1. Google Maps API Key: You will need a valid API key with the following APIs enabled: - [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) - [Maps Tiles API](https://developers.google.com/maps/documentation/tile) 2. Web Server: You can serve the application from either: - A local web server (e.g., using Node.js, http-server) - A static web hosting service (the application comes with a Dockerfile) You can find a detailed description of the deployment options in the readme section of the GitHub project. ## Deployment You can deploy the app as a node application or a Docker container in any container environment like [GKE](https://cloud.google.com/kubernetes-engine) or [GAE](https://cloud.google.com/appengine). The hosted demo uses the following architecture: ![image](https://developers.google.com/static/maps/architecture/3d-area-explorer-getting-started/images/areaexplorerge--qyt5yngq3kf.png) - In this architecture, the code resides in a GitHub project. - Cloud build picks up the code on any push to main and triggers off a build operation. - As part of the build, it injects API key and creates an image which is then stored in the artifact registry. - Finally, it deploys the latest stable image from Artifact registry to Cloud run. - We also have some health checks and monitoring running to check the health of the deployed apps. ## Billing information The 3D Area Explorer 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 3D Area Explorer 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 Maps Platform - Places API The Places API is employed for location-based data, adding rich information to the 3D Area Explorer 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 Platform - 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](https://cesium.com/platform/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 This document provides an overview of the 3D Area explorer's capabilities, components, user experience, and technical requirements. Leveraging Google's Photorealistic 3D Tiles and the Places API, it enables virtual exploration of neighborhoods, discovery of points of interest, and learning about local history. Whether showcasing an area, enhancing exploration, or promoting digital storytelling, the 3D Area Explorer offers a visually stunning platform. Try the demo and customize it using the Admin app to create an engaging and informative 3D experience.