Svelte Maplibre

API / context.svelte.ts

Context

The Svelte context that the components use to communicate. Use these to write your own components that work with the map.

Functions

getId function

import { getId } from 'svelte-maplibre';

Return an ID to use for a source or layer, in case you don't care about the name.

function getId(prefix: string): string;

setLayer function

import { setLayer } from 'svelte-maplibre';

function setLayer(value: Box<string | undefined>): void;

getLayer function

import { getLayer } from 'svelte-maplibre';

function getLayer(): Box<string> | undefined;

setSource function

import { setSource } from 'svelte-maplibre';

function setSource(value: Box<string | undefined>): void;

getSource function

import { getSource } from 'svelte-maplibre';

function getSource(): Box<string> | undefined;

Used in Examples

setPopupTarget function

import { setPopupTarget } from 'svelte-maplibre';

function setPopupTarget(value: Box<Marker | string | undefined>): void;

getPopupTarget function

import { getPopupTarget } from 'svelte-maplibre';

function getPopupTarget(): Box<Marker | string> | undefined;

setCluster function

import { setCluster } from 'svelte-maplibre';

function setCluster(value: Box<ClusterOptions | undefined>): void;

getCluster function

import { getCluster } from 'svelte-maplibre';

function getCluster(): Box<ClusterOptions | undefined> | undefined;

setZoomLimits function

import { setZoomLimits } from 'svelte-maplibre';

function setZoomLimits(min: number | undefined, max: number | undefined): ZoomRange;

getZoomLimits function

import { getZoomLimits } from 'svelte-maplibre';

function getZoomLimits(): {
    minzoom: number;
    maxzoom: number;
};

getLayerEvent function

import { getLayerEvent } from 'svelte-maplibre';

function getLayerEvent(): Box<LayerEvent | undefined>;

setLayerEvent function

import { setLayerEvent } from 'svelte-maplibre';

function setLayerEvent(value: Box<LayerEvent | undefined>): void;

setLngLatContext function

import { setLngLatContext } from 'svelte-maplibre';

function setLngLatContext(value: Box<LngLatLike | undefined>): void;

getLngLatContext function

import { getLngLatContext } from 'svelte-maplibre';

function getLngLatContext(): Box<LngLatLike | undefined> | undefined;

getMapContext function

import { getMapContext } from 'svelte-maplibre';

function getMapContext(): MapContext;

Used in Examples

createMapContext function

import { createMapContext } from 'svelte-maplibre';

function createMapContext(): MapContext;

updatedSourceContext function

import { updatedSourceContext } from 'svelte-maplibre';

function updatedSourceContext(): {
    source: Box<string | undefined>;
    cluster: Box<ClusterOptions | undefined>;
};

updatedLayerContext function

import { updatedLayerContext } from 'svelte-maplibre';

function updatedLayerContext(interactive?: boolean): {
    layer: Box<string | undefined>;
    layerEvent: Box<LayerEvent | undefined>;
};

updatedDeckGlContext function

import { updatedDeckGlContext } from 'svelte-maplibre';

function updatedDeckGlContext(): {
    layer: Box<string | undefined>;
    layerEvent: Box<LayerEvent | undefined>;
};

updatedMarkerContext function

import { updatedMarkerContext } from 'svelte-maplibre';

function updatedMarkerContext(): {
    marker: Box<Marker | undefined>;
    layerEvent: Box<LayerEvent | undefined>;
};

updatedZoomRangeContext function

import { updatedZoomRangeContext } from 'svelte-maplibre';

function updatedZoomRangeContext(minzoom: number | undefined, maxzoom: number | undefined): {
    originalMinZoom: number;
    originalMaxZoom: number;
    minzoom: number;
    maxzoom: number;
};

isDeckGlMouseEvent function

import { isDeckGlMouseEvent } from 'svelte-maplibre';

function isDeckGlMouseEvent(event: MapMouseEvent | DeckGlMouseEvent): event is DeckGlMouseEvent<unknown>;

Classes

Box class

import { Box } from 'svelte-maplibre';

class Box<T> {
    value: T;
    constructor(initialValue: T);
}

MapContext class

import { MapContext } from 'svelte-maplibre';

class MapContext {
    map: MapLibre | undefined;
    loaded: boolean;
    /** A list of images that have been successfully loaded. */
    loadedImages: SvelteSet<string>;
    minzoom: number;
    maxzoom: number;
    layerInfo: Map<string, LayerInfo>;
    private eventTracker;
    private _eventTopMost;
    eventTopMost: (event: MapMouseEvent) => string | undefined;
    /** Subscribe to marker clicks globally. Marker clicks intentionally do not propagate their events
     * to the map, but some internal components such as Popups need to know when any click happens, on the
     * map or on a marker, and MarkerClickManager facilitates that functionality. */
    markerClickManager: MarkerClickManager;
    constructor();
}

ZoomRange class

import { ZoomRange } from 'svelte-maplibre';

class ZoomRange {
    minzoomSetting: number | undefined;
    maxzoomSetting: number | undefined;
    parent: {
        minzoom: number;
        maxzoom: number;
    };
    minzoom: number;
    maxzoom: number;
    constructor(minzoom: number | undefined, maxzoom: number | undefined, parent: {
        minzoom: number;
        maxzoom: number;
    });
}

Used in Examples

Interfaces

LayerInfo interface

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

Members

Declaration
interface LayerInfo {
    interactive: boolean;
}

DeckGlMouseEvent interface

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

Members

  • layerType required 'deckgl'
  • type required 'click' | 'mouseenter' | 'mouseleave' | 'mousemove'

Inherited from PickingInfo

Declaration
interface DeckGlMouseEvent<DATA = unknown> extends PickingInfo<DATA> {
    layerType: 'deckgl';
    type: 'click' | 'mouseenter' | 'mouseleave' | 'mousemove';
}

Types

MarkerMouseEvent type

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

type MarkerMouseEvent = MarkerClickInfo & {
    layerType: 'marker';
    type: string;
};

LayerEvent type

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

type LayerEvent = DeckGlMouseEvent<unknown> | MarkerMouseEvent;

Variables

nextId variable

import { nextId } from 'svelte-maplibre';

let nextId: number;