feat: text labels on Leaflet.draw toolbar — Area/Box/Circle/Edit/Delete instead of bare icons; revert chip changes
This commit is contained in:
+35
-25
@@ -787,23 +787,18 @@
|
||||
border-radius: var(--radius);
|
||||
/* Map controls bar */
|
||||
.map-controls {
|
||||
display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
|
||||
display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
|
||||
}
|
||||
.map-chip {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
font-size: 11px; font-weight: 600; padding: 6px 12px;
|
||||
border-radius: 20px; border: 1px solid var(--border);
|
||||
background: var(--card2); color: var(--text2); cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
.map-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||||
.map-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.map-chip.heat-on { background: var(--amber); border-color: var(--amber); color: #000; }
|
||||
.map-chip.heat-on svg { color: #000; }
|
||||
.map-chip.park-on { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.map-chip.park-on svg { color: #fff; }
|
||||
.cat-pin-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
|
||||
.park-label-icon { pointer-events: none !important; background: transparent !important; border: none !important; }
|
||||
.leaflet-popup-content-wrapper {
|
||||
@@ -814,6 +809,22 @@
|
||||
}
|
||||
.leaflet-popup-tip { background: var(--card) !important; }
|
||||
.leaflet-popup-close-button { color: var(--text2) !important; }
|
||||
/* Leaflet.draw toolbar — add text labels to buttons */
|
||||
.leaflet-draw-toolbar a {
|
||||
width: auto !important; min-width: 30px; padding: 0 10px 0 30px !important;
|
||||
display: flex; align-items: center;
|
||||
font-size: 11px; font-weight: 600; color: var(--text) !important;
|
||||
text-decoration: none !important;
|
||||
white-space: nowrap;
|
||||
background-position: 8px center !important;
|
||||
}
|
||||
.leaflet-draw-toolbar a::after { content: attr(title); }
|
||||
.leaflet-draw-toolbar a[title="Draw a polygon"]::after { content: "Area"; }
|
||||
.leaflet-draw-toolbar a[title="Draw a rectangle"]::after { content: "Box"; }
|
||||
.leaflet-draw-toolbar a[title="Draw a circle"]::after { content: "Circle"; }
|
||||
.leaflet-draw-toolbar a[title="Edit layers"]::after { content: "Edit"; }
|
||||
.leaflet-draw-toolbar a[title="Delete layers"]::after { content: "Delete"; }
|
||||
.leaflet-draw-actions a { width: auto !important; padding: 0 10px !important; font-size: 10px; color: var(--text) !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -1325,18 +1336,9 @@
|
||||
═══════════════════════════════════════════════════════════════════════ -->
|
||||
<div id="tabMap" class="tab-panel">
|
||||
<div class="map-controls">
|
||||
<span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2c-1.5 2-3 4-3 7a3 3 0 0 0 6 0c0-3-1.5-5-3-7z"/><path d="M12 13c-1.5 2-3 4-3 7a3 3 0 0 0 6 0c0-3-1.5-5-3-7z" opacity="0.5"/><path d="M7 11c-1 2-2 4-2 6a2 2 0 0 0 4 0c0-2-1-4-2-6z" opacity="0.3"/></svg>
|
||||
<span class="chip-label">Heatmap</span>
|
||||
</span>
|
||||
<span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="10" height="10" rx="1" stroke-dasharray="2 2"/></svg>
|
||||
<span class="chip-label">Parks ON</span>
|
||||
</span>
|
||||
<span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
|
||||
<span class="chip-label">My Location</span>
|
||||
</span>
|
||||
<span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">🔥 Heatmap</span>
|
||||
<span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">🏰 Parks ON</span>
|
||||
<span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">◎ My GPS</span>
|
||||
</div>
|
||||
<div id="mapContainer"></div>
|
||||
<!-- Auto-visit status indicator -->
|
||||
@@ -1864,7 +1866,17 @@
|
||||
map.addLayer(drawnItems);
|
||||
const drawControl = new L.Control.Draw({
|
||||
edit: { featureGroup: drawnItems },
|
||||
draw: { polygon: true, polyline: false, rectangle: true, circle: true, marker: false, circlemarker: false }
|
||||
draw: {
|
||||
polygon: { shapeOptions: { color: '#c2410c' }, allowIntersection: false, showArea: false,
|
||||
tooltips: { start: 'Tap to start drawing area', cont: 'Tap to continue', end: 'Tap first point to close' } },
|
||||
polyline: false,
|
||||
rectangle: { shapeOptions: { color: '#c2410c' },
|
||||
tooltips: { start: 'Tap & drag to draw box', end: '' } },
|
||||
circle: { shapeOptions: { color: '#c2410c' },
|
||||
tooltips: { start: 'Tap & drag to draw circle', end: '' } },
|
||||
marker: false,
|
||||
circlemarker: false
|
||||
}
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
map.on(L.Draw.Event.CREATED, function(e) {
|
||||
@@ -3366,14 +3378,13 @@
|
||||
function toggleParkOutlines() {
|
||||
parkOutlinesVisible = !parkOutlinesVisible;
|
||||
const chip = document.getElementById('chipParkOutlines');
|
||||
const label = chip.querySelector('.chip-label');
|
||||
if (parkOutlinesVisible) {
|
||||
chip.classList.add('park-on');
|
||||
if (label) label.textContent = 'Parks ON';
|
||||
chip.textContent = '🏰 Parks ON';
|
||||
drawParkOutlines();
|
||||
} else {
|
||||
chip.classList.remove('park-on');
|
||||
if (label) label.textContent = 'Parks';
|
||||
chip.textContent = '🏰 Parks';
|
||||
if (parkOutlineGroup) map.removeLayer(parkOutlineGroup);
|
||||
parkOutlineGroup = null;
|
||||
}
|
||||
@@ -4432,12 +4443,11 @@
|
||||
async function toggleHeatmap() {
|
||||
if (!map) return;
|
||||
const chip = document.getElementById('chipHeat');
|
||||
const label = chip.querySelector('.chip-label');
|
||||
|
||||
if (heatVisible) {
|
||||
heatVisible = false;
|
||||
chip.classList.remove('heat-on');
|
||||
if (label) label.textContent = 'Heatmap';
|
||||
chip.textContent = '🔥 Heatmap';
|
||||
if (heatLayer) map.removeLayer(heatLayer);
|
||||
heatLayer = null;
|
||||
return;
|
||||
@@ -4445,7 +4455,7 @@
|
||||
|
||||
heatVisible = true;
|
||||
chip.classList.add('heat-on');
|
||||
if (label) label.textContent = 'Heatmap ON';
|
||||
chip.textContent = '🔥 Heatmap ON';
|
||||
await loadHeatmapData();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user