dd vendored icons for the tour-map

assets/js/tour-map.js

@@ -1,20 +1,6 @@
 // Tour map shortcode: draws the tour locations and their routes from the Congress on
 // OpenStreetMap tiles with Leaflet. The data comes from the data-tour-map attribute.
 
-// Marker symbols for the icon names in the data files (uMap pictogram names).
-const ICONS = {
-  computer: '💻',
-  ferry: '⛴️',
-  'tram-stop': '🚊',
-  'railway-halt': '🚂',
-  'fire-station': '🚒',
-  garden: '🌳',
-  'mast-communications': '📡',
-  ford: '🚇',
-  viewpoint: '🔭',
-};
-
-// Google's encoded polyline algorithm, returning [lat, lon] pairs.
 const POPUP = { minWidth: 220, maxWidth: 320 };
 
 const decodePolyline = (encoded, precision = 5) => {
@@ -47,10 +33,15 @@ const legPoints = (leg) =>
     ? leg.coordinates.map(([lon, lat]) => [lat, lon])
     : decodePolyline(leg.polyline ?? '', leg.precision ?? 5);
 
+// icon is a data: URI from the vendored icon sets (see the tour-map-icon partial), or empty.
 const markerIcon = (color, icon, modifier) => {
   const symbol = document.createElement('span');
-  symbol.textContent = ICONS[icon] ?? '';
   if (color) symbol.style.setProperty('--tour-map-color', color);
+  if (icon) {
+    const image = document.createElement('i');
+    image.style.setProperty('--tour-map-icon', `url("${icon}")`);
+    symbol.append(image);
+  }
   return L.divIcon({
     className: `tour-map__marker${modifier ? ` tour-map__marker--${modifier}` : ''}`,
     html: symbol,