I Turned My Life Into an Interactive Map

Every place holds a memory.

This project is an interactive map that lets you explore life through locations. Each point on the map represents a moment, a feeling, or a story, revealed through visuals, motion, and interaction.

Instead of just showing geography, this map captures experiences. As you move through time, routes appear, memories unfold, and the journey becomes something you can actually see and feel.

This is not just a map.

It’s a story you can navigate.

Supplies

- HTML, CSS, JavaScript

- Leaflet.js (mapping library)

- OpenStreetMap / CartoDB tiles

- Code editor (VS Code)

- Web browser

- (Optional) Design tools like Figma/Canva

Concept & Idea

Maps are usually designed to show locations, routes, and data—but they rarely capture what those places actually mean to us.

The idea behind this project was to transform a traditional map into something more personal: a space where locations are tied to memories, emotions, and experiences. Instead of simply navigating geography, the goal was to create a system where users can explore a journey through meaningful moments.

This project answers a simple question:

What if a map could tell your story?

By combining interactivity with storytelling, the map becomes more than a tool—it becomes a narrative you can explore.

Designing the Experience

Before writing any code, I focused on how the project should feel.

The design uses a dark theme with glowing elements to create a cinematic and immersive atmosphere. This helps highlight the routes and locations while keeping the interface clean and focused.

Each interaction was designed to feel intentional:

- Locations glow to draw attention

- Memory cards appear smoothly to reveal stories

- The interface remains minimal so the experience feels natural

A timeline concept was also introduced to represent growth over time. Instead of showing everything at once, the map reveals the journey step by step, making the experience more engaging and meaningful.

The goal was not just functionality, but emotional connection.

Building the Interactive Map

The project was built using HTML, CSS, and JavaScript, with Leaflet.js as the mapping library.

First, a base map was created using OpenStreetMap tiles. Then, key locations were added using markers and circle markers to represent important places.

Each location is connected to a “memory card”—a small interface panel that displays:

- A title (city or place)

- An image

- A short description or memory

Event listeners were added so that when a user clicks on a location, the corresponding memory appears dynamically. This creates a direct interaction between the user and the map.

The system is lightweight, responsive, and runs entirely in the browser.

Adding Animations & Routes

To make the experience feel alive, animated routes were introduced.

Instead of static lines, the path between locations is drawn progressively, creating a sense of movement and progression. This visually represents the journey over time.

Additional enhancements include:

- Glowing route lines for a futuristic effect

- Smooth transitions when switching between locations

- Camera movement (fly-to animation) that focuses on selected places

These elements turn the map from a static display into an interactive experience that feels dynamic and engaging.

Timeline Feature

A timeline slider was added to allow users to explore the journey over time.

As the slider moves:

- New locations appear

- Routes extend gradually

- The map updates to reflect different stages of the journey

This feature transforms the project from a simple map into a story progression system.

Instead of seeing everything at once, users can move through moments step by step, making the experience more immersive and easier to connect with.

Final Result

The final result is an interactive map that blends design, technology, and storytelling.

What makes this project unique is that it focuses on experience rather than just functionality. It demonstrates how maps can be used not only to navigate places, but also to represent personal journeys.

Users don’t just view the map—they explore it, interact with it, and uncover stories along the way.

This concept can be extended further into physical installations using LEDs, touch sensors, or mobile applications, bridging the gap between digital and real-world interaction.

This is not just a map.

It’s a story you can navigate.

Code Here

<!--

Interactive Memory Map

Built using HTML, CSS, JavaScript, and Leaflet.js

-->

<!DOCTYPE html>

<head>

<title>Interactive Memory Map</title>

<style>

/* ===== GLOBAL STYLES ===== */

body {

margin: 0;

font-family: 'Segoe UI', sans-serif;

background: black;

color: white;

overflow: hidden;

}

#map {

height: 100vh;

filter: brightness(0.85) contrast(1.2);

}

/* ===== MEMORY CARD ===== */

.memory-card {

position: absolute;

bottom: 30px;

left: 30px;

width: 300px;

background: rgba(0,0,0,0.75);

border-radius: 15px;

padding: 15px;

backdrop-filter: blur(15px);

box-shadow: 0 0 25px rgba(0,150,255,0.4);

display: none;

animation: fadeIn 0.4s ease;

}

.memory-card img {

width: 100%;

border-radius: 10px;

margin: 10px 0;

}

/* ===== TIMELINE ===== */

#timeline {

position: absolute;

bottom: 25px;

right: 30px;

width: 220px;

background: rgba(0,0,0,0.6);

padding: 12px;

border-radius: 12px;

backdrop-filter: blur(10px);

}

#timeline label {

font-size: 14px;

opacity: 0.8;

}

input[type=range] {

width: 100%;

margin-top: 8px;

}

/* ===== ANIMATION ===== */

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

</style>

</head>

<body>

<label>Timeline</label>

</div>

/* =========================================

INITIALIZE MAP

========================================= */

const map = L.map('map').setView([20.5937, 78.9629], 4);

/* Dark themed map tiles */

L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {

attribution: '© OpenStreetMap & CartoDB'

}).addTo(map);

/* =========================================

UI ELEMENTS

========================================= */

const memoryBox = document.getElementById("memory");

const slider = document.getElementById("slider");

/* Show memory popup */

function showMemory(text) {

memoryBox.style.display = "block";

memoryBox.innerHTML = text;

}

/* =========================================

DATA (TIMELINE)

========================================= */

const timelineData = [

[

{

coords: [19.0760, 72.8777],

text: `

<h3>Mumbai</h3>

<p>Where everything began 🌆</p>

`

}

],

[

{

coords: [28.6139, 77.2090],

text: `

<h3>Delhi</h3>

<p>Chaos, growth, and dreams</p>

`

}

],

[

{

coords: [12.9716, 77.5946],

text: `

<h3>Bangalore</h3>

<p>Late nights & coding 💻</p>

`

}

]

];

/* =========================================

MAP RENDERING LOGIC

========================================= */

let markers = [];

let routeLine;

/* Render map based on timeline stage */

function renderStage(stage) {

// Clear previous elements

markers.forEach(m => map.removeLayer(m));

if (routeLine) map.removeLayer(routeLine);

markers = [];

const coords = [];

// Add markers + collect route coords

timelineData.slice(0, stage + 1).forEach(group => {

group.forEach(place => {

const marker = L.circleMarker(place.coords, {

radius: 8,

color: "#00aaff",

fillColor: "#00ccff",

fillOpacity: 0.9

}).addTo(map);

marker.on("click", () => showMemory(place.text));

markers.push(marker);

coords.push(place.coords);

});

/* Draw glowing route */

routeLine = L.polyline(coords, {

color: "#00ccff",

weight: 4,

opacity: 0.85

}).addTo(map);

/* Smooth camera movement */

map.flyTo(coords[coords.length - 1], 5, { duration: 1.5 });

}

/* =========================================

INITIAL LOAD

========================================= */

renderStage(0);

/* =========================================

TIMELINE CONTROL

========================================= */

slider.addEventListener("input", () => {

renderStage(parseInt(slider.value));

});

</script>

</body>

</html>