Component API
<map-pin>
A circular "Apple Maps"-style map pin: a radial-gradient fill with a soft
highlight and a slight point at the bottom. Purely a visual primitive —
it has no mapbox-gl (or any mapping library) dependency; the consumer
positions it, e.g. via new mapboxgl.Marker({ element: pinEl }).
Install
import "@f-ewald/components/map-pin.js";Usage
<map-pin color="#1a73e8" size="30">3</map-pin>
<map-pin color="#22c55e" size="26" highlighted>🏠</map-pin>Attributes / properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
color | color | string | "#4f46e5" | Fill color; the gradient's light (highlight) and dark (edge) stops are derived from this. |
size | size | number | 32 | Diameter of the circular head, in CSS pixels. |
ringOpacity | ring-opacity | number | 1 | Outer ring opacity, 0-1 (default 1 = a solid Apple Maps-style white ring; lower for a translucent ring). |
highlighted | highlighted | boolean | false | Scales and glows the pin — a generic emphasis state (e.g. hover, selection). |
Events
None.
Slots
| Slot | Description |
|---|---|
(default) | Badge content shown centered on the pin's circular head — a rank number, an emoji, a small icon. |
CSS custom properties
| Custom property |
|---|
--ui-font |
--ui-font-weight-bold |
--ui-line-height-glyph |