svelte-maplibre-gl
Version:
Build interactive web maps effortlessly with MapLibre GL JS and Svelte
53 lines (52 loc) • 2.42 kB
TypeScript
import { type Snippet } from 'svelte';
import * as maplibregl from 'maplibre-gl';
type RollEvent = maplibregl.MapLibreEvent<MouseEvent | TouchEvent | undefined>;
type RollEventType = {
rollstart: RollEvent;
roll: RollEvent;
rollend: RollEvent;
};
type TileDataLoadingEvent = maplibregl.MapEventType extends {
tiledataloading: infer T;
} ? T : maplibregl.MapSourceDataEvent;
type SupportedMapEventType = maplibregl.MapEventType & RollEventType & {
tiledataloading: TileDataLoadingEvent;
};
type MapEventProps = {
[K in keyof SupportedMapEventType as `on${K}`]?: (ev: SupportedMapEventType[K]) => void;
};
interface Props extends Omit<maplibregl.MapOptions, 'container'>, MapEventProps {
/**
* You can access the internal MapLibre GL `Map` instance by binding a variable to this prop.
*
* This allows you to directly interact with the underlying Map instance, enabling imperative API calls.
*/
map?: maplibregl.Map;
class?: string;
/** Inline CSS `style` for the map container HTML element. Not to be confused with the map's style settings. */
inlineStyle?: string;
/** The padding in pixels around the viewport */
padding?: maplibregl.PaddingOptions;
/** Vertical field of view in degrees */
fov?: number;
/** Cursor style for the map canvas */
cursor?: string;
/** Loads and applies maplibre-gl.css from a CDN. Set to false if you want to include it manually. */
autoloadGlobalCss?: boolean;
/** Whether the map will render an outline around each tile and the tile ID. These tile boundaries are useful for debugging. */
showTileBoundaries?: boolean;
/** Whether the map will visualize the padding offsets. */
showPadding?: boolean;
/** Whether the map will visualize the padding offsets. */
showCollisionBoxes?: boolean;
/** Whether the map will render boxes around all symbols in the data source */
showOverdrawInspector?: boolean;
/** Whether the map will continuously repaint. This information is useful for analyzing performance. */
repaint?: boolean;
vertices?: boolean;
globalState?: Record<string, unknown>;
children?: Snippet<[maplibregl.Map]>;
}
declare const MapLibre: import("svelte").Component<Props, {}, "zoom" | "pitch" | "roll" | "map" | "center" | "bearing" | "elevation" | "padding">;
type MapLibre = ReturnType<typeof MapLibre>;
export default MapLibre;