diff --git a/map.html b/map.html
new file mode 100644
index 0000000..26a9483
--- /dev/null
+++ b/map.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Map Project</title>
+    
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            height: 100vh;
+            display: flex;
+        }
+
+        #map {
+            flex: 1;
+            height: 100%;
+        }
+
+        .sidebar {
+            width: 300px;
+            background: #f8f9fa;
+            padding: 20px;
+            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+            overflow-y: auto;
+        }
+
+        .map-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+            z-index: 1000;
+        }
+
+        .btn {
+            padding: 8px 12px;
+            border: none;
+            border-radius: 4px;
+            background: #3887be;
+            color: white;
+            cursor: pointer;
+            font-family: Arial, sans-serif;
+        }
+
+        .btn:hover {
+            background: #2c6d95;
+        }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <h1>Map Project</h1>
+        <button class="btn" id="add-marker">Add Marker</button>
+        <button class="btn" id="clear-markers">Clear Markers</button>
+        <div id="marker-list"></div>
+    </div>
+    
+    <div id="map"></div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    
+    <script>
+        // Initialize the map
+        const map = L.map('map').setView([8.5, 47.3], 10);
+        
+        // Add tile layer
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Add controls
+        const controls = document.createElement('div');
+        controls.className = 'map-controls';
+        
+        // Zoom controls
+        const zoomInBtn = document.createElement('button');
+        zoomInBtn.className = 'btn';
+        zoomInBtn.innerHTML = '+';
+        zoomInBtn.addEventListener('click', () => map.zoomIn());
+        
+        const zoomOutBtn = document.createElement('button');
+        zoomOutBtn.className = 'btn';
+        zoomOutBtn.innerHTML = '-';
+        zoomOutBtn.addEventListener('click', () => map.zoomOut());
+        
+        controls.appendChild(zoomInBtn);
+        controls.appendChild(zoomOutBtn);
+        
+        document.body.appendChild(controls);
+
+        // Add geolocation control
+        const locateBtn = document.createElement('button');
+        locateBtn.className = 'btn';
+        locateBtn.innerHTML = '📍';
+        locateBtn.addEventListener('click', () => {
+            map.locate({setView: true});
+        });
+        
+        controls.appendChild(locateBtn);
+
+        // Marker functionality
+        let markers = [];
+        
+        document.getElementById('add-marker').addEventListener('click', () => {
+            map.on('click', function(e) {
+                const marker = L.marker(e.latlng, {draggable: true}).addTo(map);
+                
+                marker.bindPopup('<input type="text" placeholder="Enter title">');
+                
+                markers.push(marker);
+                
+                updateMarkerList();
+            });
+        });
+
+        document.getElementById('clear-markers').addEventListener('click', () => {
+            map.eachLayer(function(layer) {
+                if (layer instanceof L.Marker) {
+                    map.removeLayer(layer);
+                }
+            });
+            markers = [];
+            updateMarkerList();
+        });
+
+        function updateMarkerList() {
+            const list = document.getElementById('marker-list');
+            list.innerHTML = '';
+            
+            markers.forEach((marker, index) => {
+                const li = document.createElement('div');
+                li.textContent = `Marker ${index + 1}: ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}`;
+                list.appendChild(li);
+            });
+        }
+
+        // Initialize with some basic markers
+        map.on('ready', () => {
+            const initialMarkers = [
+                [8.5, 47.3],
+                [48.8566, 2.3522]
+            ];
+
+            initialMarkers.forEach(lngLat => {
+                const marker = L.marker(lngLat).addTo(map);
+                markers.push(marker);
+            });
+
+            updateMarkerList();
+        });
+    </script>
+</body>
+</html>
