randy
0b18dc018a
A park4night/OsmAnd POI export (e.g. a p4n2gpx area export) tags every waypoint with a category and a per-category color/icon in its <extensions> block, all of which was previously thrown away — every waypoint rendered as the same plain red dot, unreadable once a file has a few thousand of them. Maptool::Gpx now captures category/color/icon (waypoint_style), matched by namespace URI rather than local element name: a p4n2gpx file carries both <osmand:icon> and <locus:icon> side by side, and REXML strips prefixes from Element#name, so both report as just "icon" — matching on that alone was silently picking the (useless) Locus drawable path instead of the OsmAnd category key. Regression test added for this. On the map: waypoints are colored by category (falling back to the plain track color for anything uncategorized), a small hand-drawn icon set (public/js/icons.js's POI_ICONS, rasterized to SDF sprites at runtime) draws a glyph on top for the categories it covers, the points source is clustered so a dense export collapses into count bubbles instead of a solid blob, and a legend in the side panel lists whichever categories are currently visible. Splitting each file's GeoJSON into a lines source and a points source (rather than one mixed source with a geometry-type filter per layer) was needed for clustering, since MapLibre's cluster support only understands a source made entirely of points.
70 lines
2.4 KiB
ERB
70 lines
2.4 KiB
ERB
<div id="app">
|
|
<header class="topbar">
|
|
<span class="topbar__brand">MapTool</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">×</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">×</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">✓</span>
|
|
</button>
|
|
<button type="button" class="basemap-panel__option" data-style="offline">
|
|
<span>Offline</span>
|
|
<span class="basemap-panel__check">✓</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gpx-panel" class="gpx-panel" hidden>
|
|
<div class="gpx-panel__header">
|
|
<strong>Tracks</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 file" aria-label="Upload GPX/FIT file"></button>
|
|
<button type="button" class="gpx-panel__close" aria-label="Close">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="file" class="gpx-file-input" accept=".gpx,.fit,.zip" multiple hidden>
|
|
<p class="gpx-upload__status" hidden></p>
|
|
|
|
<div class="gpx-tree"></div>
|
|
<div class="gpx-legend" hidden></div>
|
|
</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">×</button>
|
|
</div>
|
|
<ul class="livetrack-panel__list"></ul>
|
|
</div>
|