Journey Simulator

Journey Simulator turns routes into visual experiences using Google Street View. Enter your start and end points, and watch your trip animate turn by turn—perfect for planning or exploring.

Comment

Inspiration

Exploring new places is exciting — but navigating unfamiliar routes, especially in dense cities or scenic but complex areas, can be stressful. We wanted to create a way to visualize a journey before taking it, using real imagery, not just lines on a map. That’s where the idea for Journey Simulator came from: an animated, immersive way to experience any route powered by Google Street View.

What it does

Journey Simulator lets users enter a starting location and destination, choose a travel mode (driving or walking), and watch the journey unfold turn by turn. It uses Google Street View to simulate the route visually, with interactive features like playback speed control (0.5x to 2x), manual skipping, and optional map or direction panels. It also shows real-time stats like total distance, estimated duration, and progress — with units localized by region (e.g., miles in the U.S., kilometers in Singapore).

How we built it

We built the project using Bolt.new, a powerful visual builder for web apps. Key components include:

  • Frontend: Built using React within Bolt.new’s UI framework.
  • Mapping API: Google Maps Platform (Street View, Directions API, and Maps JavaScript API).
  • Playback Logic: Custom animation engine to progress through street view steps and sync them with turn-by-turn directions.
  • UI Panels: Modular panels for map view, direction list, and playback controls (slider, speed settings).

Challenges we ran into

  • Stitching together Street View steps accurately from the route geometry was tricky — not all segments have complete imagery.
  • Syncing turn-by-turn directions with visual playback required fine-tuned interpolation.
  • Designing a UI that’s responsive and intuitive while juggling multiple panels and control options.
  • Handling international localization for distance units and ensuring consistency in different environments.

Accomplishments that we're proud of

  • Delivering a seamless and interactive journey playback experience using real-world visuals.
  • Creating an educational, planning, and exploratory tool that’s useful for tourists, commuters, and even educators.
  • Building the entire experience within Bolt.new, showcasing its power for fast prototyping and design iteration.

What we learned

  • How to work with Google Maps Platform beyond just displaying maps — including deeper integrations with Street View and routing data.
  • Building user-friendly playback controls and visual feedback loops.
  • Balancing animation with UX to make sure the journey feels smooth and informative.

What's next for Journey Simulator

  • Mobile optimization to allow on-the-go simulation.
  • Adding voice navigation-style narration during the simulation.
  • Route bookmarking and shareable simulation links.

Built With

  • bolt.new
Share this project:

Updates