Layers@knitui/map
Circle Layer
CircleLayer renders point features as filled circles. Each paint property — circleRadius, circleColor, circleStrokeColor, circleOpacity — accepts a constant or a data-driven expression, so circles can be styled per-feature or by zoom. It must live inside a source and reference it via source.
import { CircleLayer } from "@knitui/map";Playground
Loading playground…
<CircleLayer />Examples
Basic
A single constant style applied to every point.
Loading example…
Data Driven
Data-driven: both radius and color are interpolated from each city's population, so larger cities render as bigger, darker circles.
Loading example…
Stroked
Stroked circles: a white halo plus a colored ring around each point.
Loading example…
Styling Variations
Styling variations: a soft, blurred glow with a translucent fill and a thin tinted stroke — useful for ambient / heatmap-like point markers.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
afterId | string | undefined | — | — |
beforeId | string | undefined | — | — |
filter | FilterSpecification | undefined | — | — |
id | string | undefined | — | — |
layerIndex | number | undefined | — | — |
layout | Record<string, unknown> | undefined | — | — |
maxzoom | number | undefined | — | — |
minzoom | number | undefined | — | — |
paint | Record<string, unknown> | undefined | — | — |
source | string | undefined | — | — |
source-layer | string | undefined | — | — |
sourceLayer | string | undefined | — | — |
style | CircleLayerStyle | undefined | — | — |
testID | string | undefined | — | — |