🎨 Marker Icon Customization - Quick Reference

1. Use Any Image URL

<LeafletMap
  markerIcon="https://example.com/my-pin.png"
  markers={[[lat, lng, 'Location']]}
/>

2. Inline SVG (Rainbow Pride Pin) 🌈

const rainbowPin = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="46">
    <defs>
      <linearGradient id="rainbow" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#E40303"/>
        <stop offset="16.66%" style="stop-color:#FF8C00"/>
        <stop offset="33.33%" style="stop-color:#FFED00"/>
        <stop offset="50%" style="stop-color:#008026"/>
        <stop offset="66.66%" style="stop-color:#24408E"/>
        <stop offset="83.33%" style="stop-color:#732982"/>
      </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"/>
  </svg>
`)}`;

<LeafletMap markerIcon={rainbowPin} />

3. Pink Heart Pin 💕

const pinkHeart = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="46">
    <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="#FF69B4" stroke="#fff" stroke-width="2"/>
    <path d="M19 20 C19 20 14 15 11 15 C8 15 7 17 7 19 C7 22 10 25 19 32 C28 25 31 22 31 19 C31 17 30 15 27 15 C24 15 19 20 19 20 Z"
          fill="white"/>
  </svg>
`)}`;

<LeafletMap markerIcon={pinkHeart} />

4. Free Icon Libraries

Mapbox Maki Icons (11px & 15px):

<LeafletMap
  markerIcon="https://labs.mapbox.com/maki-icons/latest/renders/bar-11@2x.png"
/>

Map Icons Collection:

• Visit: https://mapicons.mapsmarker.com/
• Choose icon, download, use URL

Flaticon:

• Search “map pin” at https://www.flaticon.com/
• Download PNG, host it, use URL

🎯 Current Storybook Examples

View these in Storybook → Pride City/Components/LeafletMap:

1. Default - Standard blue Leaflet pin
2. WithCustomMarkers - Multiple markers with popups
3. SanFrancisco - Castro District locations
4. NewYorkCity - Stonewall area
5. CustomHeight - Taller map container
6. ZoomedOut - Area overview
7. ZoomedIn - Street detail
8. CustomRainbowPin 🌈 - Rainbow gradient SVG pin
9. CustomPinkHeartPin 💕 - Pink heart SVG pin
10. ExternalIconURL - Mapbox Maki bar icon

📋 Icon Specifications

Current default config:

• Size: 38x38 pixels
• Anchor: Center bottom (19, 38) - the “pin point”
• Popup Anchor: (0, -38) - popup appears above
• Format: PNG or SVG (data URL)

Recommended:

• PNG with transparency
• SVG for scalability
• 38-50px width recommended
• Pin-style shape (point at bottom)

🚀 Enhancement Options

Want more? I can implement:

A. Per-Marker Icons

Different icon for each marker:

<LeafletMap
  markers={[
    { pos: [lat, lng], popup: 'Bar', icon: barIcon },
    { pos: [lat, lng], popup: 'Restaurant', icon: restaurantIcon }
  ]}
/>

B. Configurable Icon Sizes

<LeafletMap
  markerIcon={url}
  iconSize={[50, 50]}
  iconAnchor={[25, 50]}
/>

C. Pride City Icon Set

Create a collection in packages/assets/icons/maps/:

• pride-rainbow-pin.svg
• pride-trans-pin.svg
• pride-bi-pin.svg
• pride-lesbian-pin.svg
• pride-pan-pin.svg

D. Brand-Themed Auto-Coloring

Automatically color pins based on brand:

<LeafletMap
  markerIcon="auto" // uses current brand color
/>

E. Icon Type Presets

<LeafletMap
  markerType="bar" // automatically uses bar icon
  markerType="restaurant"
  markerType="event"
  markerType="community"
/>

📚 Documentation

• Full Guide: docs/LEAFLET_MARKER_ICON_OPTIONS.md
• Component README: packages/ui-pride-city/src/components/LeafletMap/README.md
• Implementation: packages/ui-pride-city/src/components/LeafletMap/LeafletMap.tsx

Quick SVG Pin Template

Here’s a customizable SVG pin shape:

💡 Pro Tips

1. Use SVG for crisp pins at any zoom level
2. Data URLs avoid external requests (faster)
3. White stroke makes pins pop on any map
4. Test on both light/dark themes
5. Match pin colors to your brand palette

---

Need help implementing any enhancements? Just ask! 🚀