Component API

`<map-circle>`

A plain circular map marker: a radial-gradient fill with a soft highlight
and a solid white outer ring, no point/tail (unlike <map-pin>) —
for markers that don't need to visually "point" at their exact
coordinate. 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: el }). It can also replace the former
<map-point> dense-layer primitive: use size="14" ring-width="3", leave
the slot empty, and rasterize one marker per color for use as a map
icon-image.

Install

import "@f-ewald/components/map-circle.js";

Usage

<map-circle color="#6b7280"></map-circle>
<map-circle color="#0099D8" size="14" ring-width="3"></map-circle>
<map-circle color="#1a73e8" size="24" ring-width="5" highlighted>1</map-circle>

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`	`18`	Diameter, in CSS pixels.
`ringWidth`	`ring-width`	`number`	`2`	White outer ring thickness, in the same viewBox units as `size` (scales with it).
`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 circle — a generic emphasis state (e.g. hover, selection).

Events

None.

Slots

Slot	Description
`(default)`	Optional badge content shown centered on the circle — a rank number, an emoji, a small icon.

CSS custom properties

Custom property
`--ui-font`
`--ui-font-weight-bold`
`--ui-line-height-glyph`