Svelte Maplibre

API / types.ts

Types

TypeScript types used by the components, and types re-exported from MapLibre.

Functions

boundsEqual function

import { boundsEqual } from 'svelte-maplibre';

function boundsEqual(param: LngLatBoundsLike, mapBounds: LngLatBounds | undefined): {
    equal: boolean;
    bounds: LngLatBounds;
};

convertBoundsToUserFormat function

import { convertBoundsToUserFormat } from 'svelte-maplibre';

function convertBoundsToUserFormat(bounds: LngLatBounds, param: LngLatBoundsLike | undefined): LngLatBoundsLike;

Interfaces

ClusterOptions interface

import type { ClusterOptions } from 'svelte-maplibre';

Members

  • minPoints number

    Default: 2

    The minimum number of points required to form a cluster. This can not be changed after the source is created.

  • maxZoom number

    Maximum zoom at which to perform clustering.

  • radius number

    Default: 50

    Radius of each cluster when clustering points.

  • properties Record<string, maplibregl.ExpressionSpecification>

    Aggregations to peform on the cluster points. This can not be changed after the source is created.

Declaration 
interface ClusterOptions {
    /** The minimum number of points required to form a cluster.
     * This can not be changed after the source is created.
     * @default 2 */
    minPoints?: number;
    /** Maximum zoom at which to perform clustering. */
    maxZoom?: number;
    /** Radius of each cluster when clustering points.
     * @default 50 */
    radius?: number;
    /** Aggregations to peform on the cluster points.
     * This can not be changed after the source is created. */
    properties?: Record<string, maplibregl.ExpressionSpecification>;
}

CustomImageUrlSpec interface

import type { CustomImageUrlSpec } from 'svelte-maplibre';

Members

  • id required string
  • url required string
  • options Partial<maplibregl.StyleImageMetadata>
Declaration 
interface CustomImageUrlSpec {
    id: string;
    url: string;
    options?: Partial<maplibregl.StyleImageMetadata>;
}

CustomImageDataSpec interface

import type { CustomImageDataSpec } from 'svelte-maplibre';

Members

  • id required string
  • data required HTMLImageElement | ImageBitmap | ImageData | { width: number; height: number; data: Uint8Array | Uint8ClampedArray; } | maplibregl.StyleImageInterface
  • options Partial<maplibregl.StyleImageMetadata>
Declaration 
interface CustomImageDataSpec {
    id: string;
    data: HTMLImageElement | ImageBitmap | ImageData | {
        width: number;
        height: number;
        data: Uint8Array | Uint8ClampedArray;
    } | maplibregl.StyleImageInterface;
    options?: Partial<maplibregl.StyleImageMetadata>;
}

LayerClickInfo interface

import type { LayerClickInfo } from 'svelte-maplibre';

Members

Declaration 
interface LayerClickInfo<FEATURE extends Feature = Feature> {
    map: maplibregl.Map;
    event: MapMouseEvent;
    clusterId: string | undefined;
    layer: string;
    source: string;
    features: FEATURE[];
}

Used in Examples

MarkerClickInfo interface

import type { MarkerClickInfo } from 'svelte-maplibre';

Members

Declaration 
interface MarkerClickInfo<FEATURE extends Feature = Feature> {
    map: maplibregl.Map;
    marker: Marker;
    lngLat: [number, number];
    features: FEATURE[];
}

Used in Examples

MarkerLayerEventInfo interface

import type { MarkerLayerEventInfo } from 'svelte-maplibre';

Members

Inherited from MarkerClickInfo

Declaration 
interface MarkerLayerEventInfo<FEATURE extends Feature = Feature> extends MarkerClickInfo<FEATURE> {
    source: string;
    feature: FEATURE;
}

CommonLayerProps interface

import type { CommonLayerProps } from 'svelte-maplibre';

Members

Declaration 
interface CommonLayerProps<FEATURE extends Feature = Feature> {
    id?: any;
    /** Set the source for this layer. This can be omitted when the Layer is created in the slot
     * of a source component. */
    source?: string | undefined;
    /** When setting up a layer for a vector tile source, the source layer to which this layer corresponds. */
    sourceLayer?: string | undefined;
    /** Draw this layer under another layer. This is only evaluated when the component is created. */
    beforeId?: string | undefined;
    /** Draw this layer all layers of this type. This is only evaluated when the component is created. */
    beforeLayerType?: string | ((layer: maplibregl.LayerSpecification) => boolean) | undefined;
    filter?: maplibregl.ExpressionSpecification | undefined;
    minzoom?: number | undefined;
    maxzoom?: number | undefined;
    /** Set the cursor style to this value when the mouse is over the layer. */
    hoverCursor?: string | undefined;
    /** Enable to use hoverStateFilter or filter on `hover-state`. Features must have an `id` property for this to work. */
    manageHoverState?: boolean;
    hovered?: FEATURE & MapGeoJSONFeature;
    eventsIfTopMost?: boolean;
    /** Handle mouse events on this layer. */
    interactive?: boolean;
    children?: Snippet;
    onclick?: (e: LayerClickInfo<FEATURE>) => void;
    ondblclick?: (e: LayerClickInfo<FEATURE>) => void;
    oncontextmenu?: (e: LayerClickInfo<FEATURE>) => void;
    onmouseenter?: (e: LayerClickInfo<FEATURE>) => void;
    onmousemove?: (e: LayerClickInfo<FEATURE>) => void;
    onmouseleave?: (e: Pick<LayerClickInfo<FEATURE>, 'map' | 'layer' | 'source'>) => void;
}

Types

FeatureWithId type

import type { FeatureWithId } from 'svelte-maplibre';

type FeatureWithId<FEATURE extends Feature> = MapGeoJSONFeature & FEATURE & {
    id: string | number;
};

MarkerClickInfoFeature type

import type { MarkerClickInfoFeature } from 'svelte-maplibre';

type MarkerClickInfoFeature<FEATURE extends Feature> = Feature<Point, FEATURE['properties']>;

MapMoveEvent type

import type { MapMoveEvent } from 'svelte-maplibre';

type MapMoveEvent = MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;

CustomImageSpec type

import type { CustomImageSpec } from 'svelte-maplibre';

type CustomImageSpec = CustomImageUrlSpec | CustomImageDataSpec;

DeckGlAccessor type

import type { DeckGlAccessor } from 'svelte-maplibre';

type DeckGlAccessor<DATA, RETVAL> = RETVAL | ((data: DATA) => RETVAL);

DeckGlColorAccessor type

import type { DeckGlColorAccessor } from 'svelte-maplibre';

type DeckGlColorAccessor<DATA> = DeckGlAccessor<DATA, number[]>;

Scheme type

import type { Scheme } from 'svelte-maplibre';

type Scheme = 'xyz' | 'tms';

StyleLoadEvent type

import type { StyleLoadEvent } from 'svelte-maplibre';

type StyleLoadEvent = maplibregl.MapStyleLoadEvent;

Re-exported Types

These types come from other packages. This library re-exports them for convenience.

  • ControlPosition from .pnpm

    A position definition for the control to be placed, can be in one of the corners of the map. When two or more controls are places in the same location they are stacked toward the center of the map.

  • ExpressionSpecification from .pnpm
  • Feature from .pnpm
  • LayerSpecification from .pnpm
  • LngLatBoundsLike from .pnpm

    A {@link LngLatBounds} object, an array of {@link LngLatLike} objects in [sw, ne] order, or an array of numbers in [west, south, east, north] order.

  • LngLatLike from .pnpm

    A {@link LngLat} object, an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties.

  • Map from .pnpm

    The Map object represents the map on your page. It exposes methods and properties that enable you to programmatically change the map, and fires events as users interact with it.

  • MapGeoJSONFeature from .pnpm

    An extended geojson feature used by the events to return data to the listener

  • Offset from .pnpm

    A pixel offset specified as:

  • PointLike from .pnpm

    A [Point](https://github.com/mapbox/point-geometry) or an array of two numbers representing x and y screen coordinates in pixels.

  • PositionAnchor from .pnpm

    Where to position the anchor. Used by a popup and a marker.

  • StyleSpecification from .pnpm
  • GeolocateControlInterface from .pnpm

    A GeolocateControl control provides a button that uses the browser's geolocation API to locate the user on the map.