Sources@knitui/map
GeoJSON Source
GeoJSONSource (exported alias of ShapeSource) feeds inline GeoJSON — or a URL — into the map. Layers nested inside it reference it via source matching the source id, so the same data can drive circles, lines, fills, and clustered symbols. Set cluster to aggregate dense point sets into count bubbles.
import { GeoJSONSource } from "@knitui/map";Playground
Loading playground…
<GeoJSONSource
data={EUROPEAN_CITIES}
/>Examples
Points
Point features rendered as circles, sized by data via a CircleLayer.
Loading example…
Route
A LineString route drawn with a styled LineLayer.
Loading example…
Polygon
A Polygon filled and outlined with a FillLayer.
Loading example…
Clustering
Clustering: 400 points aggregated into count bubbles. A CircleLayer (filtered to clusters) sizes and colors bubbles via a step expression on point_count, a SymbolLayer prints the count, and a third CircleLayer (filtered to non-clustered) draws the individual points.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data required | string | GeoJSON<Geometry, GeoJsonProperties> | — | — |
buffer | number | undefined | — | — |
children | ReactNode | — | — |
cluster | boolean | undefined | — | — |
clusterMaxZoom | number | undefined | — | — |
clusterMinPoints | number | undefined | — | — |
clusterProperties | unknown | — | — |
clusterRadius | number | undefined | — | — |
hitbox | ViewPadding | undefined | — | Overrides the default touch hitbox for the source layers. |
id | string | undefined | — | — |
lineMetrics | boolean | undefined | — | — |
maxzoom | number | undefined | — | — |
onPress | ((event: PressEventWithFeatures) => void) | undefined | — | Called when a child Layer within the hitbox has highest z-index. |
testID | string | undefined | — | — |
tolerance | number | undefined | — | — |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<GeoJSONSourceRef> | undefined |