Inspiration
I always loved stories--especially the kind that are passed down through generations, like the Ramayana. But reading about them in books or watching videos felt kind of static. I thought, "What if I could bring these epic journeys to life--right on the map?". That simple idea became the seed for Legends Atlas: an interactive way to follow legends across real-world geography.
What it does
Legends Atlas lets you experience stories chapter as they unfold across a real map. You pick a legend, and it takes you through each key moment using animated paths, visuals, and smooth camera movement. Whether you're tracing Rama's exile or Vasco da Gama's journey around the Cape, it feels like you're travelling alongside them.
How I built it
I used React for the frontend and Google Maps for the interactive part. Story data--like chapters, coordinates, and images is stored in Firebase. For the map animations, I wrote custom logic for different journey types: by land, sea, or by air. That way, every transition feels just right for the story. I also focused on performance, making sure map transitions were smooth, markers loaded in the right sequence, and each part felt immersive.
Challenges I ran into
One of the hardest parts was syncing the story flow with animations--especially when midpoints or complex routes were involved. I also had some tricky issues with how the map loads when switching stories or chapters, and had to carefully manage marker logic so nothing stayed behind when it shouldn't. And also loading data into the Firebase database and finding the right images for each substory was a huge, time-consuming process.
Accomplishments that I am proud of
- Brought ancient stories to life on a dynamic, interactive map
- Built custom animation logic for land, sea, and flight paths that made each journey feel unique and immersive.
- Created a platform that blends history, culture, and storytelling with modern tech and actually made it work smoothly.
What we learned
- How to work with Google Maps beyond just dropping pins.
- Making animations feel fluid without overwhelming the user.
- How small UI details--like marker timing can change the feel of a story.
- Telling stories through code can be just as powerful as writing them.
What's next for Legends Atlas
Future improvements that I think are :
- Audio narration and background sounds
- Let users add their own stories.
- Bring the Legends Atlas to your mobile
Built With
- firebase
- google-maps
- react.js
- tailwind
- vite
Log in or sign up for Devpost to join the conversation.