kohlerjoshua/FHGR_Frontend_Group_3_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create basic map page with Leaflet.js integration

Browse Source 
Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>
This commit is contained in:
Josh-Dev-Quest 2026-03-01 16:35:19 +01:00
parent 4f26bd6981
commit 25017ef0dc
No known key found for this signature in database
1 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
map.html Normal file
View File

@ -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>