Add map style toggle, category icons/colors, and include all activities

- Add tile style toggle (OSM, satellite, terrain) with localStorage persistence
- Add --default-style CLI option and MapConfig.defaultStyle property
- Add CATEGORY_ICONS (Lucide SVGs) and CATEGORY_COLORS to categories.ts
- Include ALL activities in map HTML (not just geocoded)
 - List shows all activities, map pins only for geocoded ones
 - Info box shows "X activities (Y with locations)"
- Use category-colored placeholders with white icons when no images
- Rename MapPoint to MapActivity for clarity
- Add hasImages flag to MapData to explicitly control thumbnail rendering

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: ndbroadbent

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "chat-to-map",
@@ -11,6 +12,7 @@
         "i18n-iso-countries": "^7.14.0",
         "js-tiktoken": "^1.0.21",
         "jszip": "^3.10.1",
+        "lucide-static": "^0.562.0",
         "pdfkit": "^0.17.2",
         "sharp": "^0.34.5",
       },
@@ -697,6 +699,8 @@
 
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
+    "lucide-static": ["lucide-static@0.562.0", "", {}, "sha512-TM2vNVOEsO3+ijmno7n/VmxUo0Shr9OXC/UqZc5n4xEVyXX4E4NVvXoRPAZiSsIsdvlQ7alGOcIC/QGtR+OgUQ=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],

package.json

@@ -83,6 +83,7 @@
     "i18n-iso-countries": "^7.14.0",
     "js-tiktoken": "^1.0.21",
     "jszip": "^3.10.1",
+    "lucide-static": "^0.562.0",
     "pdfkit": "^0.17.2",
     "sharp": "^0.34.5"
   },

src/categories.ts

@@ -1,10 +1,36 @@
 /**
  * Activity Categories
  *
- * Source of truth for valid categories and their emoji.
+ * Source of truth for valid categories and their emoji/icons.
  * Used across classifier, images, exports, and UI.
  */
 
+import {
+  Baby,
+  BookOpen,
+  Briefcase,
+  Dumbbell,
+  Film,
+  Gamepad2,
+  Heart,
+  Home,
+  Landmark,
+  MapPin,
+  Music,
+  Palette,
+  PartyPopper,
+  PawPrint,
+  Plane,
+  Puzzle,
+  ShoppingBag,
+  Sparkles,
+  Trees,
+  Trophy,
+  Users,
+  Utensils,
+  Wine
+} from 'lucide-static'
+
 export const VALID_CATEGORIES = [
   'food',
   'nightlife',
@@ -59,3 +85,57 @@ export const CATEGORY_EMOJI: Record<ActivityCategory, string> = {
   pets: '🐾',
   other: '📍'
 }
+
+/** Lucide SVG icon for each activity category */
+export const CATEGORY_ICONS: Record<ActivityCategory, string> = {
+  food: Utensils,
+  nightlife: Wine,
+  nature: Trees,
+  arts: Palette,
+  culture: Landmark,
+  music: Music,
+  entertainment: Film,
+  events: PartyPopper,
+  sports: Trophy,
+  fitness: Dumbbell,
+  wellness: Heart,
+  shopping: ShoppingBag,
+  travel: Plane,
+  experiences: Sparkles,
+  hobbies: Puzzle,
+  gaming: Gamepad2,
+  learning: BookOpen,
+  home: Home,
+  work: Briefcase,
+  social: Users,
+  family: Baby,
+  pets: PawPrint,
+  other: MapPin
+}
+
+/** Background color for each activity category (Tailwind CSS 500-600 shades) */
+export const CATEGORY_COLORS: Record<ActivityCategory, string> = {
+  food: '#ef4444', // red-500
+  nightlife: '#8b5cf6', // violet-500
+  nature: '#22c55e', // green-500
+  arts: '#f26b1f', // orange-550 (between 500 and 600)
+  culture: '#6366f1', // indigo-500
+  music: '#ec4899', // pink-500
+  entertainment: '#ca8a04', // yellow-600
+  events: '#14b8a6', // teal-500
+  sports: '#3b82f6', // blue-500
+  fitness: '#f43f5e', // rose-500
+  wellness: '#d946ef', // fuchsia-500
+  shopping: '#a855f7', // purple-500
+  travel: '#0ea5e9', // sky-500
+  experiences: '#d97706', // amber-600
+  hobbies: '#65a30d', // lime-600
+  gaming: '#7c3aed', // violet-600
+  learning: '#0284c7', // sky-600
+  home: '#78716c', // stone-500
+  work: '#64748b', // slate-500
+  social: '#06b6d4', // cyan-500
+  family: '#fb7185', // rose-400
+  pets: '#65a30d', // lime-600
+  other: '#6b7280' // gray-500
+}

src/cli/commands/export.ts

@@ -16,7 +16,7 @@ import {
   filterActivitiesForExport,
   VERSION
 } from '../../index'
-import type { GeocodedActivity } from '../../types'
+import type { GeocodedActivity, MapStyle } from '../../types'
 import type { CLIArgs } from '../args'
 import { buildFilterOptions } from '../filter-options'
 import { initCommandContext } from '../helpers'
@@ -127,7 +127,11 @@ export async function cmdExport(args: CLIArgs, logger: Logger): Promise<void> {
     }
 
     case 'map': {
-      const html = exportToMapHTML(filtered, { title: 'Things To Do' })
+      const defaultStyle = parseMapStyle(args.mapDefaultStyle ?? config?.mapDefaultStyle)
+      const html = exportToMapHTML(filtered, {
+        title: 'Things To Do',
+        ...(defaultStyle && { defaultStyle })
+      })
       await writeFile(outputPath, html)
       logger.success(`Exported ${filtered.length} activities to ${outputPath}`)
       break
@@ -138,3 +142,11 @@ export async function cmdExport(args: CLIArgs, logger: Logger): Promise<void> {
       process.exit(1)
   }
 }
+
+/** Parse map style string to MapStyle type */
+function parseMapStyle(style: string | undefined): MapStyle | undefined {
+  if (style === 'osm' || style === 'satellite' || style === 'terrain') {
+    return style
+  }
+  return undefined
+}

src/cli/steps/export.ts

@@ -15,7 +15,7 @@ import {
   filterActivitiesForExport,
   VERSION
 } from '../../index'
-import type { GeocodedActivity, PDFConfig } from '../../types'
+import type { GeocodedActivity, MapStyle, PDFConfig } from '../../types'
 import type { CLIArgs } from '../args'
 import type { Config } from '../config'
 import { buildFilterOptions } from '../filter-options'
@@ -112,12 +112,23 @@ export async function stepExport(
   // Build PDF config once (only used if PDF format requested)
   const pdfConfig = buildPdfConfig(args, config, inputFile, thumbnails)
 
+  // Get map default style from args → config
+  const mapDefaultStyle = parseMapStyle(args.mapDefaultStyle ?? config?.mapDefaultStyle)
+
   for (const format of formats) {
     // Build filter options for this specific format (PDF can have different filters than others)
     const filter = buildFilterOptions(format, args, config)
     const filtered = filterActivitiesForExport(activities, filter)
 
-    const path = await exportFormat(format, filtered, outputDir, inputFile, thumbnails, pdfConfig)
+    const path = await exportFormat(
+      format,
+      filtered,
+      outputDir,
+      inputFile,
+      thumbnails,
+      pdfConfig,
+      mapDefaultStyle
+    )
     if (path) {
       exportedFiles.set(format, path)
     }
@@ -126,13 +137,22 @@ export async function stepExport(
   return { exportedFiles }
 }
 
+/** Parse map style string to MapStyle type */
+function parseMapStyle(style: string | undefined): MapStyle | undefined {
+  if (style === 'osm' || style === 'satellite' || style === 'terrain') {
+    return style
+  }
+  return undefined
+}
+
 async function exportFormat(
   format: ExportFormat,
   activities: readonly GeocodedActivity[],
   outputDir: string,
   inputFile: string,
   thumbnails: Map<string, Buffer> | undefined,
-  pdfConfig: PDFConfig
+  pdfConfig: PDFConfig,
+  mapDefaultStyle: MapStyle | undefined
 ): Promise<string | null> {
   switch (format) {
     case 'csv': {
@@ -163,7 +183,11 @@ async function exportFormat(
         }
       }
 
-      const html = exportToMapHTML(activities, { title: 'Things To Do', imagePaths })
+      const html = exportToMapHTML(activities, {
+        title: 'Things To Do',
+        imagePaths,
+        ...(mapDefaultStyle && { defaultStyle: mapDefaultStyle })
+      })
       const mapPath = join(outputDir, 'map.html')
       await writeFile(mapPath, html)
       return mapPath

src/export/map/app.js.template

@@ -68,13 +68,92 @@
     floatingTooltip.style.display = 'none'
   }
 
+  // Tile layer styles
+  var tileStyles = {
+    osm: {
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      attribution: '© OpenStreetMap contributors',
+      label: 'Street'
+    },
+    satellite: {
+      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      attribution: '© Esri',
+      label: 'Satellite'
+    },
+    terrain: {
+      url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+      attribution: '© OpenTopoMap',
+      label: 'Terrain'
+    }
+  }
+
+  // Get saved style from localStorage, or use default from mapData
+  var STORAGE_KEY = 'chattomap-style'
+  var savedStyle = null
+  try {
+    savedStyle = localStorage.getItem(STORAGE_KEY)
+  } catch (e) {
+    // localStorage not available
+  }
+  var currentStyle = savedStyle && tileStyles[savedStyle] ? savedStyle : (mapData.defaultStyle || 'osm')
+
   // Initialize map
   var map = L.map('map').setView([mapData.center.lat, mapData.center.lng], mapData.zoom)
 
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '© OpenStreetMap contributors'
+  var currentTileLayer = L.tileLayer(tileStyles[currentStyle].url, {
+    attribution: tileStyles[currentStyle].attribution
   }).addTo(map)
 
+  // Style toggle control
+  function setMapStyle(style) {
+    if (!tileStyles[style] || style === currentStyle) return
+    map.removeLayer(currentTileLayer)
+    currentTileLayer = L.tileLayer(tileStyles[style].url, {
+      attribution: tileStyles[style].attribution
+    }).addTo(map)
+    currentStyle = style
+    try {
+      localStorage.setItem(STORAGE_KEY, style)
+    } catch (e) {
+      // localStorage not available
+    }
+    updateStyleButtons()
+  }
+
+  function updateStyleButtons() {
+    var buttons = document.querySelectorAll('.style-btn')
+    buttons.forEach(function (btn) {
+      var style = btn.getAttribute('data-style')
+      btn.classList.toggle('active', style === currentStyle)
+    })
+  }
+
+  // Create style toggle control
+  var styleControl = document.getElementById('styleControl')
+  if (styleControl) {
+    var styleHtml = Object.keys(tileStyles)
+      .map(function (style) {
+        var isActive = style === currentStyle ? ' active' : ''
+        return (
+          '<button class="style-btn' +
+          isActive +
+          '" data-style="' +
+          style +
+          '">' +
+          tileStyles[style].label +
+          '</button>'
+        )
+      })
+      .join('')
+    styleControl.innerHTML = styleHtml
+    styleControl.addEventListener('click', function (e) {
+      var btn = e.target.closest('.style-btn')
+      if (btn) {
+        setMapStyle(btn.getAttribute('data-style'))
+      }
+    })
+  }
+
   var markersLayer = mapData.clusterMarkers
     ? L.markerClusterGroup({
         maxClusterRadius: 50,
@@ -83,8 +162,12 @@
       })
     : L.layerGroup()
 
-  // Add markers
-  mapData.points.forEach(function (p) {
+  // Add markers (only for geocoded activities)
+  var geocodedPoints = mapData.activities.filter(function (p) {
+    return p.lat !== null && p.lng !== null
+  })
+
+  geocodedPoints.forEach(function (p) {
     var messagesEncoded = encodeURIComponent(JSON.stringify(p.messages)).replace(/'/g, '%27')
     var senderDisplay = formatSenders(p.messages)
     var mentionCount = p.messages.length
@@ -190,7 +273,8 @@
 
   // Render info box
   document.getElementById('infoTitle').textContent = mapData.title
-  document.getElementById('infoCount').textContent = mapData.points.length
+  document.getElementById('infoCount').textContent = mapData.activities.length
+  document.getElementById('infoWithLocations').textContent = '(' + geocodedPoints.length + ' with locations)'
 
   // Render legend
   var legendHtml = Object.entries(mapData.senderColors)
@@ -214,10 +298,11 @@
   document.getElementById('legend').innerHTML = legendHtml
 
   // Activity list
-  var activities = mapData.points.map(function (p) {
+  var activities = mapData.activities.map(function (p) {
     return {
       id: p.activityId,
       activity: p.activity,
+      category: p.category,
       sender: p.sender.split(' ')[0],
       location: p.location,
       date: p.date,
@@ -238,9 +323,23 @@
             '&query_place_id=' +
             a.placeId
           : null
-        var thumb = a.imagePath
-          ? '<img src="' + a.imagePath + '" class="activity-thumb" alt="" />'
-          : '<div class="activity-thumb-placeholder"></div>'
+        var mentionCount = a.messages.length
+        var badge = mentionCount > 1 ? '<span class="mention-badge">' + mentionCount + '</span>' : ''
+
+        var thumbContent
+        if (mapData.hasImages && a.imagePath) {
+          thumbContent = '<img src="' + a.imagePath + '" class="activity-thumb" alt="" />'
+        } else {
+          var icon = mapData.categoryIcons[a.category] || mapData.categoryIcons.other
+          var color = mapData.categoryColors[a.category] || mapData.categoryColors.other
+          thumbContent =
+            '<div class="activity-thumb-placeholder" style="background-color:' +
+            color +
+            ';">' +
+            icon +
+            '</div>'
+        }
+        var thumb = '<div class="activity-thumb-wrapper">' + thumbContent + badge + '</div>'
         var links =
           (mapsUrl ? '<a href="' + mapsUrl + '" target="_blank">Google Maps</a>' : '') +
           (a.url ? '<a href="' + a.url + '" target="_blank">Source</a>' : '')