🎨 Map Marker Icon Options - Summary

The answer to your questions:

Q: Can I use any icon I want?

A: YES! Any PNG, JPG, SVG, GIF, or data URL works.

Q: Can I use a rainbow flag?

A: YES! See examples in Storybook → RainbowFlagEmoji story.

Q: Can I use a traditional red map pin?

A: YES! See examples in Storybook → GoogleMapsRedPin story.

Q: Can I use a joystick-like pin (like the screenshot)?

A: YES! See examples in Storybook → ModernCirclePin story.

Q: Are there map pin icon sets out there?

A: YES! Many free options:

• Mapbox Maki (200+ icons, FREE)
• Google Maps Pins (colored dots, FREE)
• Map Icons Collection (1000+ markers, FREE)
• Material Symbols (FREE)
• Font Awesome (FREE/Pro)
• Flaticon (FREE with attribution)

Q: Can we create composite markers like Geoapify?

A: YES! You can combine any icon with any background shape using SVG.

---

🚀 What’s Been Added

1. Documentation Files

• MAP_PIN_ICON_SETS.md - 10 icon sources with examples
• COMPOSITE_MAP_MARKERS.md - How to create Geoapify-style markers
• MARKER_ICON_QUICK_REFERENCE.md - Quick copy-paste examples

2. Storybook Examples (Pride City → LeafletMap)

Basic Pins:

1. Default - Standard Leaflet blue pin
2. WithCustomMarkers - Multiple markers with popups
3. SanFrancisco - Castro District locations
4. NewYorkCity - Stonewall area
5. CustomHeight - Taller container
6. ZoomedOut - Area overview
7. ZoomedIn - Street detail view

Pre-made Icons: 8. GoogleMapsRedPin - Classic red Google Maps pin 9. GoogleMapsPinkPin - Pink pin for Stay Match brand 10. MapboxBarIcon - Bar/nightlife icon (Mapbox Maki) 11. MapboxLodgingIcon - Accommodation icon (Mapbox Maki) 12. RainbowFlagEmoji - Pride flag 🏳️‍🌈 13. ModernCirclePin - Circular pin with stick (like screenshot)

Composite Markers (Geoapify-style): 14. CompositeHeartMarker - Heart icon on pink droplet 15. CompositeHomeMarker - Home icon on purple circle 16. CompositeBarMarker - Bar icon on pink shield

---

📦 Icon Sets Available

Free & Recommended

Source	Count	License	Best For
Mapbox Maki	200+	Public Domain	POI (bars, hotels, etc.)
Google Maps	10 colors	Free	Quick colored pins
Material Symbols	2500+	Apache 2.0	General purpose
Ionicons	1300+	MIT	Already in your repo
Lucide	1000+	ISC	Already in your repo
Font Awesome	2000+	Free/Pro	General purpose
Map Icons Collection	1000+	CC BY-SA 3.0	Categorized markers
Flaticon	Millions	Free w/ attribution	Specific needs

---

🎯 Quick Examples

Use a Pre-made Icon (Easiest)

<LeafletMap
  markerIcon="http://maps.google.com/mapfiles/ms/icons/pink-dot.png"
  markers={[[lat, lng, 'Location']]}
/>

Create a Composite Marker (Most Flexible)

const pinkHeartMarker = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="50" viewBox="0 0 40 50">
    <path d="M20 0 C10 0 2 8 2 18 C2 30 20 50 20 50 S38 30 38 18 C38 8 30 0 20 0 Z"
          fill="#FF69B4" stroke="#fff" stroke-width="2"/>
    <g transform="translate(8, 7)">
      <path d="M12 21.35l-1.45-1.32..." fill="#fff"/>
    </g>
  </svg>
`)}`;

<LeafletMap markerIcon={pinkHeartMarker} />

Use an Emoji

const flagEmoji = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38">
    <text x="19" y="30" font-size="32" text-anchor="middle">🏳️‍🌈</text>
  </svg>
`)}`;

<LeafletMap markerIcon={flagEmoji} />

---

🎨 Composite Marker Components

You can create Geoapify-style markers by combining:

Background Shapes:

• Droplet (classic pin)
• Circle with stick
• Rounded square
• Shield/badge
• Hexagon

Icon Sources:

• Material Design (2500+ icons)
• Ionicons (already in your project!)
• Lucide (already in your project!)
• Font Awesome
• Custom SVG paths

Example combining Material Design + Droplet:

const heartOnDroplet = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="50" viewBox="0 0 40 50">
    <!-- Droplet background -->
    <path d="M20 0 C10 0 2 8 2 18 C2 30 20 50 20 50 S38 30 38 18 C38 8 30 0 20 0 Z"
          fill="#FF69B4" stroke="#fff" stroke-width="2"/>
    <!-- Material heart icon -->
    <g transform="translate(8, 7)">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36..." fill="#fff"/>
    </g>
  </svg>
`)}`;

---

🚀 Next Steps (Optional)

Want me to build:

1. Marker Helper Function - createMarker({ icon, color, shape })
2. Pre-built Marker Set - Common markers (bar, hotel, restaurant) for each division
3. Brand-Themed Markers - Auto-color based on current brand
4. Icon Preset Types - markerType="bar" instead of custom icons
5. Asset Package - Downloadable PNG/SVG markers in packages/assets/icons/maps/

Just let me know! 🎉

---

📚 Full Documentation

• Icon Sets: docs/MAP_PIN_ICON_SETS.md
• Composite Markers: docs/COMPOSITE_MAP_MARKERS.md
• Quick Reference: docs/MARKER_ICON_QUICK_REFERENCE.md
• Component README: packages/ui-pride-city/src/components/LeafletMap/README.md

---

View all examples in Storybook:

yarn storybook

Navigate to: Pride City → Components → LeafletMap