diff --git a/static/index.html b/static/index.html index b3e1c94..78ecdd9 100644 --- a/static/index.html +++ b/static/index.html @@ -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; } @@ -1325,18 +1336,9 @@ ═══════════════════════════════════════════════════════════════════════ -->
- - - Heatmap - - - - Parks ON - - - - My Location - + 🔥 Heatmap + 🏰 Parks ON + ◎ My GPS
@@ -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(); }