Layers@knitui/map
Symbol Layer
SymbolLayer places text labels and/or icons at point features. textField (commonly an expression reading a feature property) supplies the label; textHaloColor/textHaloWidth keep it legible over any basemap; iconImage references a sprite registered via <Images>. Glyphs are loaded from the map style, so use a style that ships a glyphs endpoint (e.g. the Carto streets style). It must live inside a source and reference it via source.
import { SymbolLayer } from "@knitui/map";Playground
Loading playground…
<SymbolLayer />Examples
Text Labels
Plain text labels reading each city's name.
Loading example…
Halo Labels
Styled labels with a white halo for legibility over busy areas, offset upward and anchored from the top.
Loading example…
With Icon
An icon registered via <Images> placed at each city, with the name labelled beneath it. iconImage references the sprite by the key it was registered under.
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 | SymbolLayerStyle | undefined | — | |
testID | string | undefined | — |