Story Map
| Page | app/(dashboard)/story-map/page.tsx |
| Route | /story-map |
| Access | Dashboard navbar (🗺️ button) |
What it does
A visual, interactive world map that shows where each child's stories take place. Every story is automatically placed on the map based on keywords detected in the story prompt and title. Kids can tap a location pin to see all stories set in that place.
Screenshot: World map
How location detection works
The system scans the story's prompt and title fields for keywords and maps them to predefined locations on the map.
User creates story: "A brave bunny explores the ocean"
│
▼
detectLocation() finds keyword "ocean"
│
▼
Pin placed at Ocean coordinates (x: 35%, y: 60%) with 🌊 emojiSupported locations (30+)
| Keyword(s) | Location | Emoji |
|---|---|---|
| ocean, sea | Ocean | 🌊 |
| underwater | Deep Sea | 🐠 |
| forest | Enchanted Forest | 🌲 |
| jungle | Jungle | 🌴 |
| mountain | Mountains | ⛰️ |
| castle, kingdom, princess, prince | Kingdom | 🏰 |
| dragon | Dragon's Lair | 🐉 |
| space, planet | Outer Space | 🚀 |
| moon | The Moon | 🌙 |
| desert | Desert | 🏜️ |
| island | Treasure Island | 🏝️ |
| pirate | Pirate Cove | 🏴☠️ |
| farm | Sunny Farm | 🌾 |
| garden | Magic Garden | 🌸 |
| city | Big City | 🏙️ |
| snow, ice, winter, arctic | Frozen North | ❄️ |
| dinosaur | Dino Valley | 🦕 |
| fairy | Fairy Meadow | 🧚 |
| magic, wizard | Wizard Tower | 🪄 |
| rainbow | Rainbow Valley | 🌈 |
| cloud, sky | Cloud Kingdom | ☁️ |
| animal, zoo | Animal Kingdom | 🦁 |
| safari | Safari Plains | 🦒 |
| robot | Future City | 🤖 |
| superhero | Hero HQ | 🦸 |
| candy, cake | Candy Land | 🍭 |
If no keyword matches, the story defaults to "Storybook Land" at the center of the map.
UI features
- Animated pins — each pin gently bounces with a staggered delay
- Story count badge — pins with multiple stories show a count indicator
- Pin detail panel — tapping a pin reveals all stories at that location with cover images
- Navigate to story — tap any story in the detail panel to open the story reader
- Dark/light theme — respects the user's dashboard theme preference
- Empty state — friendly message encouraging kids to create their first story
- Decorative map — abstract land masses and dot grid for a fantasy map feel
Data flow
Page loads
│
▼
useUserStories(uid) → fetches all stories from Firestore
│
▼
For each story:
detectLocation(story.prompt, story.title)
│
▼
Group stories by location label → Map<label, MapPin>
│
▼
Render pins on the map at (x%, y%) coordinatesDesign decisions
- No external map API — the map is a styled div with CSS, not Google Maps. This keeps it lightweight, kid-friendly, and avoids API costs.
- Keyword-based detection — simple and deterministic. No LLM call needed. Works instantly.
- Multiple stories per pin — stories at the same location are grouped, showing a count badge.
- Responsive — the map uses percentage-based positioning so it works on all screen sizes.