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
Inherited from PickingInfo
- sourceLayer
Layer | null - viewport
Viewport - object
DataT - pixel
[number, number] - coordinate
number[] - devicePixel
[number, number]
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;