Layers@knitui/map
Line Layer
LineLayer strokes LineString features. lineCap and lineJoin control end and corner shape, lineDasharray makes dashed strokes, and lineWidth (like every paint property) can be a constant or a zoom-driven expression for routes that thicken as you zoom in.
import { LineLayer } from "@knitui/map";Playground
Loading playground…
<LineLayer />Examples
Basic
A simple constant-width stroke along the route.
Loading example…
Data Driven
Data-driven: lineWidth is interpolated by zoom, so the route is a thin hairline when zoomed out and a bold stroke when zoomed in.
Loading example…
Dashed
A dashed line — good for boundaries, planned routes, or footpaths.
Loading example…
Thick Route
A thick, rounded route casing — bold cap and join for a smooth path.
Loading example…
Styling Variations
Styling variations: a soft, blurred glow stroke with a widened gap, layered to read like a highlighted corridor.
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 | LineLayerStyle | undefined | — | — |
testID | string | undefined | — | — |