Roadith Maps
Trip Planner & Route Map
Overview
Roadith Maps is the geospatial experience layer within Roadith, designed to empower users to visually explore, plan, document, and share their travel stories. It combines the flexibility of the Google Maps Platform with custom-built layers for collaborative editing, media-rich trip representation, and cost-efficient content rendering.
Built not just as a planner, but also a discovery and storytelling tool, Roadith Maps enables a new form of travel inspiration—where people can follow and remix trips from others, just like open-source itineraries.
Project Goals
- Deliver an interactive and editable map interface for both planning and social discovery.
- Enable review-based storytelling, allowing users to annotate locations with media and tips.
- Encourage trip sharing and reuse through a structured "Copy Trip" feature.
- Reduce map-related costs by optimizing Google Maps usage and bypassing expensive endpoints where possible.
- Allow real-world travel content (e.g., YouTube vlogs) to translate directly into editable, day-by-day itineraries on the platform.
Key Features
Multi-Day Route Planning
Plan day-by-day routes, with each day color-coded and visualized on the map.
Location Reviews with Media
Write experience-based reviews for each place, adding context, notes, and photos.
Copy Trip Mechanism
Duplicate existing trips from content creators, including routes, notes, and annotations.
Collaborative Editing
Invite friends to co-edit trips in real time for flexible group planning.
Photo Layer (Public Image Scraping)
A headless browser scrapes public media, processed and cached via imgproxy, avoiding costly APIs.
Map-Based Discovery
Browse and filter public trips via interactive maps with clickable routes and details.
Tech Stack
Frontend
React
Next.js
Tailwind CSS
Google Maps API
Headless UIBackend
Node.js
Express.js
Redis
MongoDB
Socket.io
PuppeteerInfrastructure & Others
Docker
Elasticsearch
JWT
Prometheus
Kibana
Google Cloud
DigitalOcean
imgproxy
AWS S3Testing
vitest
PlaywrightChallenges & Learnings
- API Cost Optimization: Google Maps' Place Photo API was prohibitively expensive. Solved by integrating a scraping pipeline that pulls public images based on place metadata, filtered and cached efficiently.
- Trip Remixing Design: Building the Copy Trip system required thoughtful data modeling to preserve original context (notes, days, places) while making it editable for new users.
- Map Styling and Overlay Management: Overcame Google Maps' styling restrictions by layering dynamic elements (polylines, markers, infoboxes) to simulate a more customizable UX.
- Review & Media Sync: Ensured place reviews, notes, and media are context-aware and correctly bound to geospatial markers, requiring precise location resolution and fallback logic.
Outcome
Roadith Maps became the interactive heart of the Roadith platform:
- Enhanced user expression through detailed location reviews and media attachments.
- Promoted content reuse, with 30% of newly created trips starting from a copied template.
- Slashed API costs, particularly for images, without compromising visual quality.
- Simplified planning by turning influencer/vlogger trips into editable itineraries.
- Reusable map modules now power other Roadith features, like profile maps and personalized feed visuals.
