Map Pin

Design a map pin component for a location-based mobile map. The pin should be easy to spot on dense map imagery and still feel native to the map, not pasted on top of it. Show the pin in default, hover-like preview, active, and selected states, with a clear visual change in each state.

When the user selects the pin, reveal a small attached info bubble or card with the place name and one supporting detail. The bubble should anchor to the pin’s point, avoid covering the pin itself, and include a simple way to dismiss or collapse it. Keep the layout compact so the map remains visible behind it.

Treat touch as the primary interaction. Define a generous tap target around the pin, and make the selected state obvious at a glance. The component should work on both light and dark map styles, and the label should stay readable over roads, water, and satellite-like backgrounds.

Incorporate subtle animations when a user interacts with the pin — like a bounce on placement or a gentle increase in size on hover to draw attention and guide discovery.