Files
maptool/views/index.erb
T
randy c5b4a9ffb2 Move the Wikipedia layer into its own "Overlays" panel
Wikipedia doesn't belong inside "Tracks & Points" — that panel is for
files you add/remove/reorder, while Wikipedia is a live layer with
nothing to manage, just on/off. Gave it its own sidebar panel
(#overlays-panel, same shell as LiveTrackPanelControl) instead, sized
to hold more such checklist-only layers later without a redesign.

Moved all the wiki layer logic out of GpxPanelControl into a new
OverlaysControl (public/js/overlays.js). svgToImageData/badgeImageId/
escapeHtml are now exported from gpx.js so it doesn't have to
reimplement them — the same three helpers a second overlay would also
need.
2026-09-10 20:54:40 +02:00

91 lines
3.2 KiB
ERB

<div id="app">
<header class="topbar">
<span class="topbar__brand" title="rev <%= revision %>">MapTool</span>
<span class="topbar__coords"></span>
<span class="topbar__offline-status" hidden></span>
<div class="topbar__auth">
<% if logged_in %>
<span><%= user %></span>
<a href="/logout">Log out</a>
<% else %>
<a href="/login">Log in</a>
<% end %>
</div>
</header>
<div class="app-body">
<nav id="sidebar" class="sidebar"></nav>
<div id="map"></div>
</div>
</div>
<div id="profile-panel" class="profile-panel" hidden>
<div class="profile-panel__header">
<strong class="profile-panel__title"></strong>
<span class="profile-panel__stats"></span>
<button type="button" class="profile-panel__close" aria-label="Close">&times;</button>
</div>
<div class="profile-panel__charts"></div>
</div>
<div id="basemap-panel" class="basemap-panel" hidden>
<div class="basemap-panel__header">
<strong>Base map</strong>
<button type="button" class="basemap-panel__close" aria-label="Close">&times;</button>
</div>
<div class="basemap-panel__list">
<button type="button" class="basemap-panel__option" data-style="online">
<span>Online</span>
<span class="basemap-panel__check">&check;</span>
</button>
<button type="button" class="basemap-panel__option" data-style="offline">
<span>Offline</span>
<span class="basemap-panel__check">&check;</span>
</button>
</div>
</div>
<div id="gpx-panel" class="gpx-panel" hidden>
<div class="gpx-panel__header">
<strong>Tracks &amp; Points</strong>
<div class="gpx-panel__actions">
<button type="button" class="gpx-panel__action" data-action="new-folder" title="New folder" aria-label="New folder"></button>
<button type="button" class="gpx-panel__action" data-action="upload" title="Upload GPX/FIT/GeoJSON file" aria-label="Upload GPX/FIT/GeoJSON file"></button>
<button type="button" class="gpx-panel__close" aria-label="Close">&times;</button>
</div>
</div>
<input type="file" class="gpx-file-input" accept=".gpx,.fit,.geojson,.zip" multiple hidden>
<p class="gpx-upload__status" hidden></p>
<div class="gpx-tree"></div>
<div class="gpx-legend" hidden></div>
</div>
<div id="overlays-panel" class="basemap-panel" hidden>
<div class="basemap-panel__header">
<strong>Overlays</strong>
<button type="button" class="basemap-panel__close" aria-label="Close">&times;</button>
</div>
<!-- Each item is a live layer refetched from its own source as the map
moves, not a file to add/remove/reorder — a plain on/off list, no
upload/new-folder actions the way Tracks & Points has. Wikipedia is
the first; see public/js/overlays.js for how one of these works. -->
<ul class="overlays-panel__list">
<li class="overlays-panel__item">
<label>
<input type="checkbox" class="overlays-panel__wiki-toggle">
<span>Wikipedia</span>
</label>
</li>
</ul>
</div>
<div id="livetrack-panel" class="basemap-panel" hidden>
<div class="basemap-panel__header">
<strong>LiveTrack sessions</strong>
<button type="button" class="basemap-panel__close" aria-label="Close">&times;</button>
</div>
<ul class="livetrack-panel__list"></ul>
</div>