Fix park/art icons using canvas-rendered emoji images

MapLibre SDF fonts don't support emoji in text-field. Render emoji
to canvas and register via addImage() + icon-image instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bsigrist-tooledesign

js/map.js

@@ -51,10 +51,30 @@ export function initMap() {
 
     map.addControl(new maplibregl.NavigationControl(), 'top-left');
 
-    map.on('load', () => resolve(map));
+    map.on('load', () => {
+      // Register emoji icons rendered via canvas
+      addEmojiImage(map, 'park-icon', '🌳', 40);
+      addEmojiImage(map, 'art-icon', '🎨', 36);
+      resolve(map);
+    });
   });
 }
 
+/**
+ * Render an emoji to a canvas and add it as a map image.
+ */
+function addEmojiImage(map, id, emoji, size) {
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  ctx.font = `${size - 4}px serif`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(emoji, size / 2, size / 2);
+  map.addImage(id, { width: size, height: size, data: ctx.getImageData(0, 0, size, size).data });
+}
+
 /**
  * Add or replace the trails layer with scored data.
  */
@@ -125,13 +145,13 @@ export function setParksLayer(geojson) {
     type: 'symbol',
     source: 'parks',
     layout: {
-      'text-field': '🌳',
-      'text-size': [
+      'icon-image': 'park-icon',
+      'icon-size': [
         'interpolate', ['linear'], ['zoom'],
-        10, 12,
-        14, 20
+        10, 0.4,
+        14, 0.8
       ],
-      'text-allow-overlap': true,
+      'icon-allow-overlap': true,
     },
   });
 
@@ -170,13 +190,13 @@ export function setArtLayer(geojson) {
     type: 'symbol',
     source: 'art',
     layout: {
-      'text-field': '🎨',
-      'text-size': [
+      'icon-image': 'art-icon',
+      'icon-size': [
         'interpolate', ['linear'], ['zoom'],
-        10, 10,
-        14, 18
+        10, 0.35,
+        14, 0.7
       ],
-      'text-allow-overlap': true,
+      'icon-allow-overlap': true,
     },
   });