Gallery
See what others have created
lina_son
@lina_son
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.
What to deliver
- Design a map pin in default, hover, active, and selected states.
- Show the pin anchored to a map at real-world scale.
- Add an attached info bubble or card for the selected pin.
- Include a compact close or dismiss action for the bubble.
- Define the tap target and hit area around the pin.
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.