Add Events as an opt-in map layer

Events can now be discovered directly on the map:
- New "Events" layer (lime #ccff00, calendar pin marker) plotting upcoming,
  geo-located events. Off by default — users opt in via the Layers control.
- Event markers show a popup with title, date/time, location, and a
  "View Event" button linking to the event detail page.
- Only future/ongoing events with a valid geohash are plotted (past events
  are filtered out to keep the map clean).
- Added to the mobile Layers popover, desktop Layers popover, and the mobile
  filter drawer's "Show on Map" grid. Layer count badge now tracks 5 layers.
- SpotMap gains `events` + `showEvents` props and a createEventIcon marker.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

src/components/SpotMap.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { MapPin } from 'lucide-react';
-import type { SkateSpot, MarketplaceItem, SkateTour } from '@/lib/types';
+import type { SkateSpot, MarketplaceItem, SkateTour, SkateEvent } from '@/lib/types';
 import { SPOT_TYPE_LABELS, formatPrice } from '@/lib/types';
 import type { SpotWeatherData } from '@/hooks/useSpotWeather';
 import type { BtcMapPlace } from '@/hooks/useBtcMapPlaces';
@@ -209,6 +209,32 @@ const createTourIcon = () => L.divIcon({
   popupAnchor: [0, -40],
 });
 
+// Custom event marker icon (lime — matches the Events section + Add Event action)
+const createEventIcon = () => L.divIcon({
+  className: 'event-marker',
+  html: `
+    <div style="
+      width: 38px;
+      height: 38px;
+      background: linear-gradient(135deg, #ccff00, #a3cc00);
+      border-radius: 50% 50% 50% 0;
+      transform: rotate(-45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(204,255,0,0.45);
+      border: 3px solid #fff;
+    ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(45deg);">
+        <path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>
+      </svg>
+    </div>
+  `,
+  iconSize: [38, 38],
+  iconAnchor: [19, 38],
+  popupAnchor: [0, -38],
+});
+
 // Custom BTC Map marker icon (for Bitcoin-accepting places)
 const createBtcMapIcon = (isBoosted?: boolean) => L.divIcon({
   className: 'btcmap-marker',
@@ -305,6 +331,7 @@ interface SpotMapProps {
   spots: SkateSpot[];
   marketplaceItems?: MarketplaceItem[];
   tours?: SkateTour[];
+  events?: SkateEvent[];
   btcMapPlaces?: BtcMapPlace[];
   center?: [number, number];
   zoom?: number;
@@ -320,6 +347,7 @@ interface SpotMapProps {
   showShops?: boolean;
   showGear?: boolean;
   showTours?: boolean;
+  showEvents?: boolean;
   showBtcMap?: boolean;
   flyTo?: { lat: number; lng: number; zoom?: number } | null;
 }
@@ -547,6 +575,7 @@ export function SpotMap({
   spots,
   marketplaceItems = [],
   tours = [],
+  events = [],
   btcMapPlaces = [],
   center = [40.7128, -74.006], // Default to NYC
   zoom = 3,
@@ -562,6 +591,7 @@ export function SpotMap({
   showShops = true,
   showGear = true,
   showTours = true,
+  showEvents = false,
   showBtcMap = false,
   flyTo = null,
 }: SpotMapProps) {
@@ -1029,7 +1059,73 @@ export function SpotMap({
         markersRef.current.push(tourMarker);
       });
     }
-  }, [locationGroups, tours, showTours, onSpotClick, handleViewDetails, weatherEnabled, weatherData, navigate]);
+
+    // Add event markers (upcoming, geo-located events — lime pins)
+    if (showEvents && events.length > 0) {
+      const nowSec = Math.floor(Date.now() / 1000);
+      events.forEach((evt) => {
+        // Only plot events with a valid geohash that haven't ended yet
+        if (!evt.geohash) return;
+        if ((evt.end ?? evt.start) < nowSec) return;
+
+        const decoded = ngeohash.decode(evt.geohash);
+        const eventMarker = L.marker([decoded.latitude, decoded.longitude], {
+          icon: createEventIcon(),
+        });
+
+        const container = document.createElement('div');
+        container.className = 'p-3 min-w-[240px] max-w-[300px]';
+
+        // Header
+        const header = document.createElement('div');
+        header.className = 'flex items-start gap-2 mb-3';
+        header.innerHTML = `
+          <div class="w-10 h-10 rounded-lg bg-[#ccff00]/20 flex items-center justify-center flex-shrink-0">
+            <span class="text-lg">📅</span>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h3 class="font-bold text-base text-white leading-tight">${evt.title}</h3>
+            <p class="text-xs text-[#a3cc00] font-medium">UPCOMING EVENT</p>
+          </div>
+        `;
+        container.appendChild(header);
+
+        // Details
+        const details = document.createElement('div');
+        details.className = 'space-y-1.5 mb-3 text-xs text-gray-300';
+        const startDate = new Date(evt.start * 1000);
+        const dateStr = startDate.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+        const timeStr = startDate.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+        details.innerHTML += `<div class="flex items-center gap-2">🗓️ ${dateStr} · ${timeStr}</div>`;
+        if (evt.location) {
+          details.innerHTML += `<div class="flex items-center gap-2">📍 ${evt.location}</div>`;
+        }
+        container.appendChild(details);
+
+        // View button
+        const button = document.createElement('button');
+        button.className = 'w-full inline-flex items-center justify-center rounded-md text-xs font-bold bg-[#ccff00] text-black hover:bg-[#ccff00]/90 h-8 px-3 transition-colors';
+        button.textContent = 'View Event →';
+        button.onclick = (e) => {
+          e.preventDefault();
+          navigate(`/event/${evt.pubkey}/${evt.identifier}`);
+        };
+        container.appendChild(button);
+
+        eventMarker.bindPopup(container, {
+          maxWidth: 320,
+          className: 'custom-popup event-popup',
+        });
+
+        if (clusterGroupRef.current) {
+          clusterGroupRef.current.addLayer(eventMarker);
+        } else {
+          eventMarker.addTo(map);
+        }
+        markersRef.current.push(eventMarker);
+      });
+    }
+  }, [locationGroups, tours, showTours, events, showEvents, onSpotClick, handleViewDetails, weatherEnabled, weatherData, navigate]);
 
   // Update BTC Map markers
   useEffect(() => {

src/pages/MapPage.tsx

@@ -25,6 +25,7 @@ import { useSkateSpots } from '@/hooks/useSkateSpots';
 import { useShops } from '@/hooks/useShops';
 import { useMarketplaceItems } from '@/hooks/useMarketplace';
 import { useTours } from '@/hooks/useTours';
+import { useUpcomingSkateEvents } from '@/hooks/useSkateEvents';
 import { useBtcMapPlaces } from '@/hooks/useBtcMapPlaces';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useFollowing } from '@/hooks/useFollowing';
@@ -544,6 +545,8 @@ export default function MapPage() {
   const { data: shops, isLoading: shopsLoading } = useShops(200);
   const { data: marketplaceItems, isLoading: marketplaceLoading } = useMarketplaceItems(200);
   const { data: tours, isLoading: toursLoading } = useTours(100);
+  // Upcoming events for the (opt-in) Events map layer
+  const { data: upcomingEvents } = useUpcomingSkateEvents(100);
 
   // Check if coming with ?view=gear to focus on marketplace
   const viewParam = searchParams.get('view');
@@ -569,6 +572,8 @@ export default function MapPage() {
   const [showShops, setShowShops] = useState(!focusGear);
   const [showGear, setShowGear] = useState(true);
   const [showTours, setShowTours] = useState(!focusGear);
+  // Events layer — off by default; users opt in via the Layers control
+  const [showEvents, setShowEvents] = useState(false);
   const [showBtcMap, setShowBtcMap] = useState(false);
   
   // Mobile filters sheet
@@ -898,8 +903,9 @@ export default function MapPage() {
 
   // Count active layer filters for mobile badge
   const activeLayerCount = [showSpots, showShops, showGear, showTours, showBtcMap].filter(Boolean).length;
-  // Count of the 4 primary layers active — shown as a badge on the mobile Layers button
+  // Count of the primary layers active — shown as a badge on the Layers button
-  const mobileLayerCount = [showSpots, showShops, showGear, showTours].filter(Boolean).length;
+  const mobileLayerCount = [showSpots, showShops, showGear, showTours, showEvents].filter(Boolean).length;
+  const totalPrimaryLayers = 5;
   const activeCategoryCount = selectedCategories.length;
   const totalActiveFilters = activeCategoryCount + (trustFilter !== 'all' ? 1 : 0) + (sortBy !== 'recent' ? 1 : 0);
 
@@ -1038,6 +1044,17 @@ export default function MapPage() {
                         >
                           🗺️ Tours
                         </Button>
+                        <Button
+                          variant={showEvents ? 'default' : 'outline'}
+                          size="sm"
+                          className={cn(
+                            'justify-center gap-1 h-9 text-xs px-2',
+                            showEvents ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90' : ''
+                          )}
+                          onClick={() => setShowEvents(!showEvents)}
+                        >
+                          📅 Events
+                        </Button>
                         <Button
                           variant={showBtcMap ? 'default' : 'outline'}
                           size="sm"
@@ -1187,10 +1204,11 @@ export default function MapPage() {
                   <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">Show on Map</p>
                   <div className="space-y-0.5">
                     {[
-                      { key: 'spots', label: 'Spots', dot: '#ff0040', active: showSpots, toggle: () => setShowSpots(v => !v) },
+                      { key: 'spots',  label: 'Spots',  dot: '#ff0040', active: showSpots,  toggle: () => setShowSpots(v => !v) },
-                      { key: 'shops', label: 'Shops', dot: '#9333ea', active: showShops, toggle: () => setShowShops(v => !v) },
+                      { key: 'shops',  label: 'Shops',  dot: '#9333ea', active: showShops,  toggle: () => setShowShops(v => !v) },
-                      { key: 'gear',  label: 'Gear',  dot: '#f97316', active: showGear,  toggle: () => setShowGear(v => !v) },
+                      { key: 'gear',   label: 'Gear',   dot: '#f97316', active: showGear,   toggle: () => setShowGear(v => !v) },
-                      { key: 'tours', label: 'Tours', dot: '#06b6d4', active: showTours, toggle: () => setShowTours(v => !v) },
+                      { key: 'tours',  label: 'Tours',  dot: '#06b6d4', active: showTours,  toggle: () => setShowTours(v => !v) },
+                      { key: 'events', label: 'Events', dot: '#ccff00', active: showEvents, toggle: () => setShowEvents(v => !v) },
                     ].map(({ key, label, dot, active, toggle }) => (
                       <button
                         key={key}
@@ -1416,10 +1434,12 @@ export default function MapPage() {
                   className="h-full"
                   weatherEnabled={weatherEnabled}
                   weatherData={weatherData}
+                  events={upcomingEvents || []}
                   showSpots={showSpots}
                   showShops={showShops}
                   showGear={showGear}
                   showTours={showTours}
+                  showEvents={showEvents}
                   showBtcMap={showBtcMap}
                   flyTo={flyTo}
                 />
@@ -1538,7 +1558,7 @@ export default function MapPage() {
                       aria-label="Map layers"
                     >
                       <Layers className={cn('h-4 w-4', layersOpen ? 'text-[#ff0040]' : 'text-gray-200')} />
-                      {mobileLayerCount < 4 && (
+                      {mobileLayerCount < totalPrimaryLayers && (
                         <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[9px] font-black bg-[#ccff00] text-black rounded-full flex items-center justify-center leading-none border-2 border-black">
                           {mobileLayerCount}
                         </span>
@@ -1553,10 +1573,11 @@ export default function MapPage() {
                     <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">Show on Map</p>
                     <div className="space-y-0.5">
                       {[
-                        { key: 'spots', label: 'Spots', dot: '#ff0040', active: showSpots, toggle: () => setShowSpots(v => !v) },
+                        { key: 'spots',  label: 'Spots',  dot: '#ff0040', active: showSpots,  toggle: () => setShowSpots(v => !v) },
-                        { key: 'shops', label: 'Shops', dot: '#9333ea', active: showShops, toggle: () => setShowShops(v => !v) },
+                        { key: 'shops',  label: 'Shops',  dot: '#9333ea', active: showShops,  toggle: () => setShowShops(v => !v) },
-                        { key: 'gear',  label: 'Gear',  dot: '#f97316', active: showGear,  toggle: () => setShowGear(v => !v) },
+                        { key: 'gear',   label: 'Gear',   dot: '#f97316', active: showGear,   toggle: () => setShowGear(v => !v) },
-                        { key: 'tours', label: 'Tours', dot: '#06b6d4', active: showTours, toggle: () => setShowTours(v => !v) },
+                        { key: 'tours',  label: 'Tours',  dot: '#06b6d4', active: showTours,  toggle: () => setShowTours(v => !v) },
+                        { key: 'events', label: 'Events', dot: '#ccff00', active: showEvents, toggle: () => setShowEvents(v => !v) },
                       ].map(({ key, label, dot, active, toggle }) => (
                         <button
                           key={key}