Sources@knitui/map
Image Source
ImageSource pins a single static image to four geographic corners. Pair it with a RasterLayer that targets the source id to render the image — useful for floorplans, historical maps, or rendered overlays georeferenced onto the map.
WebiOSAndroidnative split5 own props1 examples
import { ImageSource } from "@knitui/map";Playground
Loading playground…
<ImageSource
url="https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif"
coordinates={[[4.85, 52.4], [4.96, 52.4], [4.96, 52.33], [4.85, 52.33]]}
/>Examples
Overlay
An image draped over a bounding box on the streets basemap.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
coordinates required | [topLeft: LngLat, topRight: LngLat, bottomRight: LngLat, bottomLeft: LngLat] | — | |
url required | string | number | https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif | |
children | ReactNode | — | |
id | string | undefined | — | |
testID | string | undefined | — |