admin/map.viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed the color legend; seemed not needed and cluttered view

Browse Source
This commit is contained in:
admin 2025-06-22 19:31:44 -06:00
parent 5e2a6320ff
commit 91c651da48
3 changed files with 26 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
nocodb-map-viewer/app/public/css/style.css
View File

@ -534,42 +534,6 @@ body {
border-top: 1px solid #eee;
}
/* Map legend */
.map-legend {
background-color: white;
padding: 10px 15px;
border-radius: var(--border-radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
font-size: 13px;
}
.map-legend h4 {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: 600;
color: var(--dark-color);
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.legend-item:last-child {
margin-bottom: 0;
}
.legend-color {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 8px;
border: 1px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Responsive design */
@media (max-width: 768px) {
.header h1 {
@ -586,6 +550,18 @@ body {
font-size: 13px;
}
/* Hide button text on mobile, show only icons */
.btn span.btn-text {
display: none;
}
.btn {
padding: 10px;
min-width: 40px;
min-height: 40px;
justify-content: center;
}
.modal-content {
width: 95%;
margin: 10px;
@ -596,6 +572,13 @@ body {
}
}
/* Add text spans for desktop that can be hidden on mobile */
@media (min-width: 769px) {
.btn span.btn-icon {
margin-right: 5px;
}
}
/* Fullscreen styles */
.fullscreen #map-container {
position: fixed;

6
nocodb-map-viewer/app/public/index.html
View File

@ -34,13 +34,13 @@
<!-- Map Controls -->
<div class="map-controls">
<button id="geolocate-btn" class="btn btn-primary" title="Find my location">
📍 My Location
<span class="btn-icon">📍</span><span class="btn-text">My Location</span>
</button>
<button id="add-location-btn" class="btn btn-success" title="Add location at map center">
➕ Add Location Here
<span class="btn-icon">➕</span><span class="btn-text">Add Location Here</span>
</button>
<button id="fullscreen-btn" class="btn btn-secondary" title="Toggle fullscreen">
⛶ Fullscreen
<span class="btn-icon">⛶</span><span class="btn-text">Fullscreen</span>
</button>
</div>

46
nocodb-map-viewer/app/public/js/map.js
View File

@ -59,9 +59,6 @@ function initializeMap() {
imperial: false
}).addTo(map);
// Add legend
addLegend();
// Hide loading overlay
document.getElementById('loading').classList.add('hidden');
}
@ -128,41 +125,6 @@ function getSupportLevelText(level) {
}
}
// Add legend to the map
function addLegend() {
const legend = L.control({ position: 'bottomright' });
legend.onAdd = function(map) {
const div = L.DomUtil.create('div', 'map-legend');
div.innerHTML = `
<h4>Support Levels</h4>
<div class="legend-item">
<span class="legend-color" style="background-color: #27ae60;"></span>
<span>1 - Strong Support</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background-color: #f1c40f;"></span>
<span>2 - Moderate Support</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background-color: #e67e22;"></span>
<span>3 - Low Support</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background-color: #e74c3c;"></span>
<span>4 - No Support</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background-color: #95a5a6;"></span>
<span>Not Specified</span>
</div>
`;
return div;
};
legend.addTo(map);
}
// Set up geo field synchronization
function setupGeoFieldSync() {
const latInput = document.getElementById('location-lat');
@ -516,13 +478,13 @@ function toggleAddLocation() {
const crosshair = document.getElementById('crosshair');
if (isAddingLocation) {
btn.textContent = '✕ Cancel';
btn.innerHTML = '<span class="btn-icon">✕</span><span class="btn-text">Cancel</span>';
btn.classList.remove('btn-success');
btn.classList.add('btn-secondary');
crosshair.classList.remove('hidden');
map.getContainer().style.cursor = 'crosshair';
} else {
btn.textContent = '➕ Add Location Here';
btn.innerHTML = '<span class="btn-icon">➕</span><span class="btn-text">Add Location Here</span>';
btn.classList.remove('btn-secondary');
btn.classList.add('btn-success');
crosshair.classList.add('hidden');
@ -866,7 +828,7 @@ function toggleFullscreen() {
if (!document.fullscreenElement) {
app.requestFullscreen().then(() => {
app.classList.add('fullscreen');
btn.textContent = '✕ Exit Fullscreen';
btn.innerHTML = '<span class="btn-icon">✕</span><span class="btn-text">Exit Fullscreen</span>';
// Invalidate map size after transition
setTimeout(() => map.invalidateSize(), 300);
@ -876,7 +838,7 @@ function toggleFullscreen() {
} else {
document.exitFullscreen().then(() => {
app.classList.remove('fullscreen');
btn.textContent = '⛶ Fullscreen';
btn.innerHTML = '<span class="btn-icon">⛶</span><span class="btn-text">Fullscreen</span>';
// Invalidate map size after transition
setTimeout(() => map.invalidateSize(), 300);