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

fix(map): improve map display styling

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 18:15:38 +01:00
parent e8298cf88d
commit 4b51448eb4
No known key found for this signature in database
2 changed files with 167 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/map.css
View File

@ -8,20 +8,13 @@
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
} }
/* Sidebar Styles */ #map {
.sidebar { width: 100%;
width: 350px; height: 100vh;
background-color: #2c3e50;
color: #ecf0f1;
display: flex;
flex-direction: column;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
} }
/* Map Area */
.map-area { .map-area {
flex: 1; flex: 1;
position: relative;
} }
.sidebar-header { .sidebar-header {

210
map.html
View File

@ -8,55 +8,173 @@
<!-- Leaflet CSS --> <!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="css/map.css">
<style> <style>
* { /* Your existing inline styles... */
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> </style>
</head> </head>
```
map.html
```html
<<<<<<< SEARCH
<body>
<div class="sidebar">
<div class="journey-panel">
<h3><i class="fas fa-route"></i> Journey Manager</h3>
<!-- Journey Form -->
<div class="journey-form">
<div class="form-group">
<label for="journey-name"><i class="fas fa-heading"></i> Journey Name:</label>
<input type="text" id="journey-name" required>
</div>
<div class="form-group">
<label for="journey-desc"><i class="fas fa-align-left"></i> Description:</label>
<textarea id="journey-desc"></textarea>
</div>
</div>
<!-- Markers List -->
<h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
<div id="markers-list" class="markers-container">
<!-- Markers will be added here -->
</div>
<!-- Buttons -->
<div class="button-group">
<button id="add-marker" class="btn btn-primary"><i class="fas fa-plus"></i> Add Marker</button>
<button id="save-journey" class="btn btn-success"><i class="fas fa-save"></i> Save Journey</button>
<button id="clear-markers" class="btn btn-danger"><i class="fas fa-trash"></i> Clear Markers</button>
</div>
</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);
let currentJourney = {
markers: []
};
updateMarkersList(); // Call the new function to update the list
// 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 currentJourney = {
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">');
currentJourney.markers.push(marker);
updateMarkersList(); // Call the new function to update the list
});
});
document.getElementById('clear-markers').addEventListener('click', () => {
map.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
currentJourney.markers = [];
updateMarkersList(); // Call the new function to update the list
});
function updateMarkersList() {
const markersContainer = document.getElementById('markers-container');
markersContainer.innerHTML = '';
if (currentJourney.markers.length === 0) {
markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
return;
}
currentJourney.markers.forEach((marker, index) => {
const markerElement = document.createElement('div');
markerElement.className = 'marker-item';
markerElement.innerHTML = `
<strong>${index + 1}</strong>
${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}
`;
// Add click handler to zoom to marker
markerElement.addEventListener('click', () => {
map.flyTo({
center: [marker.getLatLng().lat, marker.getLatLng().lng],
zoom: 10
});
});
markersContainer.appendChild(markerElement);
});
}
// 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>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div class="journey-panel"> <div class="journey-panel">