Color-code, cluster and add icons to POI waypoints

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.

public/js/icons.js

@@ -58,6 +58,53 @@ export const ROUTE_ICON = `
   <path d="M6.5 7.5C10 11 8 13 12 13s2 5 6.5 5" stroke-dasharray="2 2.2"/>
 </svg>`;
 
+// POI category glyphs (park4night/OsmAnd exports), keyed by the OsmAnd icon
+// name a file's <osmand:icon> extension carries — a small curated set for
+// the categories park4night actually uses (see waypoint_style in
+// lib/maptool/gpx.rb), not an exhaustive OsmAnd icon set. Filled shapes
+// (not stroked outlines like the sidebar icons above) since these render at
+// ~14px on the map, where a hairline stroke disappears; solid silhouettes
+// stay legible that small. Rasterized and used as SDF map icons (see
+// gpx.js), so only the alpha shape matters — the actual `currentColor`
+// value is irrelevant.
+export const POI_ICONS = {
+  amenity_parking: `
+<svg viewBox="0 0 24 24"><text x="12" y="18" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700" text-anchor="middle" fill="currentColor">P</text></svg>`,
+
+  tourism_camp_site: `
+<svg viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3 22 20 2 20 Z M12 12 15.5 20 8.5 20 Z" fill="currentColor"/></svg>`,
+
+  leisure_picnic_table: `
+<svg viewBox="0 0 24 24">
+  <rect x="3" y="9" width="18" height="3" fill="currentColor"/>
+  <path d="M5 12 2 20 5 20 7.5 12 Z M19 12 22 20 19 20 16.5 12 Z" fill="currentColor"/>
+</svg>`,
+
+  amenity_fuel: `
+<svg viewBox="0 0 24 24"><path d="M12 2C12 2 5 11 5 15.5A7 7 0 0 0 19 15.5C19 11 12 2 12 2Z" fill="currentColor"/></svg>`,
+
+  tourism_hotel: `
+<svg viewBox="0 0 24 24">
+  <rect x="3" y="11" width="18" height="7" rx="1.5" fill="currentColor"/>
+  <rect x="4" y="8" width="6" height="4" rx="1" fill="currentColor"/>
+  <rect x="3" y="18" width="2" height="3" fill="currentColor"/>
+  <rect x="19" y="18" width="2" height="3" fill="currentColor"/>
+</svg>`,
+
+  forest: `
+<svg viewBox="0 0 24 24">
+  <path d="M12 2 18 12 15 12 19 19 5 19 9 12 6 12Z" fill="currentColor"/>
+  <rect x="10.5" y="19" width="3" height="3" fill="currentColor"/>
+</svg>`,
+
+  sport_cycling: `
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="6" cy="17" r="4"/>
+  <circle cx="18" cy="17" r="4"/>
+  <path d="M6 17 11 8H15M11 8 15 17M18 17 14 10"/>
+</svg>`,
+};
+
 export const LIVETRACK_ICON = `
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
   <path d="M12 21s7-7.58 7-12a7 7 0 0 0-14 0c0 4.42 7 12 7 12z"/>