Leaflet Map Marker Icon Customization Guide

The LeafletMap component already supports custom marker icons via the markerIcon prop. Here are all your options:

Option 1: Custom Image URLs 🖼️

Pass any image URL directly:

<LeafletMap
  center={[37.7749, -122.4194]}
  zoom={13}
  markerIcon="https://cdn.example.com/pride-flag-pin.png"
  markers={[[37.7749, -122.4194, 'Castro District']]}
/>

Recommended Image Specs:

Size: 38x38 pixels (configurable)
Format: PNG with transparency
Anchor: Bottom center (pin point)

Option 2: Local Assets 📦

Use images from your assets package:

import pridePinUrl from '@cloudalt-frontend/assets/icons/pride-pin.png';

<LeafletMap
  markerIcon={pridePinUrl}
  markers={[[37.7749, -122.4194, 'Pride Location']]}
/>

Option 3: Data URLs / SVG

Use inline SVG or data URLs:

const rainbowPin = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
    <circle cx="19" cy="19" r="15" fill="#E40303"/>
    <path d="M19 34 L19 19 L4 19" fill="#FF8C00"/>
    <path d="M19 19 L34 19 L19 34" fill="#FFED00"/>
  </svg>
`)}`;

<LeafletMap
  markerIcon={rainbowPin}
  markers={[[37.7749, -122.4194, 'Pride Location']]}
/>

Option 4: Different Icons Per Marker 🎯

Current Limitation: All markers share the same icon.

Enhancement Needed: To have different icons per marker, we’d need to update the component:

// Proposed API:
<LeafletMap
  markers={[
    {
      position: [37.7749, -122.4194],
      popup: 'Bar',
      icon: 'https://example.com/bar-icon.png'
    },
    {
      position: [37.7699, -122.4353],
      popup: 'Restaurant',
      icon: 'https://example.com/restaurant-icon.png'
    },
  ]}
/>

Option 5: Pre-built Icon Libraries 📚

A. Leaflet.awesome-markers

Add colorful, icon-font based markers:

npm install leaflet.awesome-markers

import 'leaflet.awesome-markers/dist/leaflet.awesome-markers.css';
import L from 'leaflet';
import 'leaflet.awesome-markers';

// In component:
const icon = L.AwesomeMarkers.icon({
  icon: 'heart',
  markerColor: 'red',
  prefix: 'fa'
});

B. Leaflet.extra-markers

Similar to awesome-markers with more shapes:

npm install leaflet-extra-markers

C. Custom Pride-Themed Markers

Create Pride City-specific marker designs:

Rainbow Pin:

Base: Traditional map pin shape
Fill: Rainbow gradient
Size: 38x38px
Format: PNG or SVG

Pride Flag Pin:

Traditional pin with pride flag colors
Different variants: Trans, Bi, Pan, Lesbian, etc.

Location Type Icons:

Bar/Club: Cocktail glass icon
Restaurant: Fork/knife icon
Community Center: Rainbow hands icon
Event Space: Calendar icon

Option 6: Icon Configuration Objects

Instead of passing icon URLs directly, you can use Leaflet’s L.Icon configuration:

Current Icon Configuration

In LeafletMap.tsx, the icon is configured as:

const customIcon = markerIcon
  ? L.icon({
      iconUrl: markerIcon,
      iconSize: [38, 38],        // Fixed at 38x38
      iconAnchor: [19, 38],       // Center bottom (pin point)
      popupAnchor: [0, -38],      // Popup appears above icon
    })
  : undefined;

Recommended Pride City Markers

1. Simple Colored Pins

Use Leaflet’s default pin recolored:

Pink (#FF69B4) for stay-match apps
Purple (#9B59B6) for roommate apps
Rainbow gradient for pride_city apps

2. Icon Fonts (Ionicons/Lucide)

Since you already use Ionicons and Lucide in the project:

// Convert icon to marker image:
import { createIconDataUrl } from './utils';

const heartPin = createIconDataUrl('heart', '#FF69B4', 38);

<LeafletMap markerIcon={heartPin} />

3. Custom SVG Pins

Create brand-specific SVG markers that match your design system:

const createBrandPin = (brandColor: string) => `
  data:image/svg+xml,${encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38">
      <path d="M19 2 C10 2 3 9 3 18 C3 28 19 36 19 36 S35 28 35 18 C35 9 28 2 19 2 Z"
            fill="${brandColor}"
            stroke="#fff"
            stroke-width="2"/>
    </svg>
  `)}
`;

<LeafletMap
  markerIcon={createBrandPin('var(--brand-primary)')}
/>

Recommended Next Steps

Quick Win (No Code Changes)

Use any of these free icon sources:

Mapbox Maki Icons: https://labs.mapbox.com/maki-icons/
Map Icons Collection: https://mapicons.mapsmarker.com/
Flaticon Map Pins: https://www.flaticon.com/search?word=map%20pin

Medium Enhancement (Component Update)

Support iconSize and iconAnchor props
Add shadowUrl support for realistic pins
Allow marker-specific icons (not just global)

Full Enhancement (New Features)

Create Pride City icon set in packages/assets/icons/maps/
Add icon presets: type="bar" | "restaurant" | "event"
Integrate with brand theming (auto-color based on brand)
Add marker clustering for dense areas

Example: Pride City Themed Markers

// Rainbow gradient pin
const rainbowPin = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="46" viewBox="0 0 38 46">
    <defs>
      <linearGradient id="rainbow" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#E40303;stop-opacity:1" />
        <stop offset="16.66%" style="stop-color:#FF8C00;stop-opacity:1" />
        <stop offset="33.33%" style="stop-color:#FFED00;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#008026;stop-opacity:1" />
        <stop offset="66.66%" style="stop-color:#24408E;stop-opacity:1" />
        <stop offset="83.33%" style="stop-color:#732982;stop-opacity:1" />
      </linearGradient>
    </defs>
    <path d="M19 0 C10 0 3 7 3 16 C3 26 19 46 19 46 S35 26 35 16 C35 7 28 0 19 0 Z"
          fill="url(#rainbow)"
          stroke="#fff"
          stroke-width="2"/>
    <circle cx="19" cy="16" r="8" fill="white" opacity="0.3"/>
  </svg>
`)}`;

<LeafletMap
  center={[37.7749, -122.4194]}
  zoom={13}
  markerIcon={rainbowPin}
  markers={[
    [37.7749, -122.4194, 'Castro District'],
    [37.7699, -122.4353, 'Twin Peaks'],
  ]}
/>

Want Me To Implement Any Of These?

I can:

✅ Create a set of Pride City-themed SVG markers
✅ Add support for per-marker icons
✅ Add configurable icon sizes and anchors
✅ Create a helper to convert Ionicons to marker images
✅ Set up brand-themed auto-coloring

Just let me know which direction you’d like to go!