svelte-maplibre-gl
Version:
Build interactive web maps effortlessly with MapLibre GL JS and Svelte
41 lines (40 loc) • 1.98 kB
TypeScript
import { type Snippet } from 'svelte';
import maplibregl from 'maplibre-gl';
type MapEventProps = {
[K in keyof maplibregl.MapEventType as `on${K}`]?: (ev: maplibregl.MapEventType[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, {}, "map" | "zoom" | "pitch" | "center" | "bearing" | "roll" | "elevation">;
type MapLibre = ReturnType<typeof MapLibre>;
export default MapLibre;