import EventEmitter$1, { EventEmitter } from 'eventemitter3'; import * as lit from 'lit-html'; import { Client } from '@emuanalytics/flow-engine-client'; import { ISubscription, IObservableStream, IDisposer } from 'mobx-utils'; import { MapLibreEvent, MapMouseEvent as MapMouseEvent$1, MapOptions as MapOptions$1, Map } from '@emuanalytics/maplibre-gl'; type Annotation = { annotationType: string; }; declare function traceReaction(): void; type IsStrictlyAny = (T extends never ? true : false) extends false ? false : true; type HasIndexSignature = T extends { [k in 'FlowStateStoreDummyVal']?: any; } ? true : false; type StoreKey = Exclude, keyof []> & string; type PathImpl> = Key extends string ? IsStrictlyAny extends true ? never : HasIndexSignature extends true ? never : T[Key] extends Record ? `${Key}.${StoreKey}` | `${Key}.${PathImpl>}` : never : never; type Path> = PathImpl> | StoreKey; type PathValue, TBase = Record> = P extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? Rest extends Path ? PathValue : never : never : P extends keyof T ? T[P] : never; type StoreConstructor = new () => T; /** * Store annotations are used when extending the {@link StateStore} class to mark state properties * as observable, computed, and/or serializable. * * Annotations can be applied as decorators when using TypeScript or by passing an object to * the {@link StateStore.initialize} method. * * Available annotations: * * | Annotation | Remarks | * | ------------------- | -------------------------- | * | `observable` | alias for `observable.deep` | * | `obervable.deep` | Mark property as deeply observable. Child properties of objects and array elements will be recursively marked as observable. | * | `obervable.ref` | Mark property as observable. Track changes using strict `===` equality. Use this as an optimization for immutable object properties and arrays. The _value_ of the property is ignored, only its strict identity is considered. | * | `obervable.shallow` | Mark collection as observable. The collection itself is observable (reacting to inserts, deletions etc.), but the contents of the collection are not marked as observable. | * | `obervable.struct` | Mark object or array as observable. Assigning a new value that is _structurally_ equal to the old value will not trigger a reactive update. | * | `computed` | Mark a getter as a computed property. Computed properties are lazily evaluated and memoized. | * | `serialize` | Mark a property as serializable. The property will be included in the serialized output of {@link StateStore.serialize}. | * | `action` | Mark a method as an _action_. Use this annotation for helper methods you declare on your derived {@link StateStore} class that modify state. The method will automatically be run in a transaction and can reduce the number of reactive updates triggered when modifying multiple observable properties. | * * @example * Using annotations in JavaScript: *```js * import { * observable, * serialize, * computed, * StateStore * } from '@emuanalytics/flow-rdf-core'; * * // Declare a state store using annotations * class AppState extends StateStore { * constructor() { * super(); * this.initialize({ * a: [observable, serialize], * b: [observable], * c: [computed], * d: [observable.ref], * helperMethod: [action] * }); * } * * a = 'a value'; * b = 2; * * get c() { * return `${this.a} - ${this.b}`; * } * * d = { a: 1, b: 2 }; * * // This method will be run in a transaction * helperMethod(val) { * this.a = val; * this.increment('b'); * } * } * ``` * * @example * Using TypeScript decorators: *```js * import { * observable, * serialize, * computed, * StateStore * } from '@emuanalytics/flow-rdf-core'; * * // Declare a state store using annotations * class AppState extends StateStore { * constructor() { * super(); * this.initialize(); * } * * @serialize * @observable * a = 'a value'; * * @observable * b = 2; * * @computed * get c() { * return `${this.a} - ${this.b}`; * } * * @observable.ref * d = { a: 1, b: 2 }; * * // This method will be run in a transaction * @action * helperMethod(val) { * this.a = val; * this.increment('b'); * } * } * ``` */ type StoreAnnotations = { [P in StoreKey]?: Annotation | Annotation[]; }; type SerializationFormat = 'raw' | 'json' | 'lz'; /** * State stores define reactive application state and are the basis of Flo.w RDF's reactive functionality. * * In typical usage, the {@link StateStore} class is extended to define an application-specific * state store and a singleton instance is created to manage application state. The application-specific * class defines which state properties are available, their initial values, their types (when using TypeScript), and * whether they are serialized. * * Properties of the application-specific state store can be marked as `observable` using decorators or annotations. * Reads and writes to these properties are tracked within reactive contexts and will trigger updates to any * dependent computations or side-effects. * * Getters can be marked as `computed` to define derived properties that are automatically updated when * their dependencies change. Computed properties are lazy and memoized, meaning that they are only evaluated * when an entity is observing their value and are only re-evaluated when their dependencies change. * * Observable state properties can also be marked as serializable using decorators or annotations. This allows the state store * to be serialized to a string or object and deserialized. Serialization is can be used tp persist * application state to local storage or for supporting shareable URLs with embedded state. Call {@link StateStore.serialize} * to serialize the state store and {@link StateStore.deserialize} to update its properties from a previously serialized state. * * Because application state store instances are designed to be globally-available singletons, they can be a convenient * way to expose state-related helper methods. These can be marked with the `action` annotation to automatically run * within a transaction. * * ##TODO Describe state paths * * @example * Define an application state store using TypeScript with decorators: * ```ts * import { * observable, * serialize, * computed, * StateStore * } from '@emuanalytics/flow-rdf-core'; * * class AppState extends StateStore { * constructor() { * super(); * this.initialize(); * } * * // Observable and serializable property * @serialize * @observable * a = 'a value'; * * // Observable property - not serialized * @observable b = 2; * * // Computed property * @computed * get c() { * return `${this.a} - ${this.b}`; * } * } * * // Application-wide singleton instance * export const appState = new AppState(); * ``` * * @example * Define an application state store using JavaScript with annotations: * ```js * import { * observable, * serialize, * computed, * StateStore * } from '@emuanalytics/flow-rdf-core'; * * // Declare a state store using annotations * class AppState extends StateStore { * constructor() { * super(); * this.initialize({ * a: [observable, serialize], * b: [observable], * c: [computed] * }); * } * * a = 'a value'; * b = 2; * * get c() { * return `${this.a} - ${this.b}`; * } * } * * // Application-wide singleton instance * export const appState = new AppState(); * ``` */ declare class StateStore { private get formattedName(); private serializationAnnotations; /** * Returns `true` if the store has been initialized. * * Derived state stores **must** be initialized before use by calling {@link StateStore.initialize} * in the constructor. * * @returns `true` if the store has been initialized. */ get initialized(): boolean; id: string; /** * Constructs a new `StateStore`. * * In derived classes, call `super()` in the constructor followed by `this.initialize(...)`. * * @example * ```js * constructor() { * super(); * * // Required! * this.initialize(); * } * ``` * @param id - Optional unique identifier for debugging purposes. If not supplied, a random identifier will be generated. */ constructor(id?: string); /** * Returns the value at the specified path in the state store. * * @param path - State store path to retrieve. * @typeParam TPath - Type defining possible state store paths. * @returns The value of the state store property at the specified path. */ get>(path: TPath): PathValue; /** * Sets the value at the specified path in the state store. * * @param path - State store path to set * @param val - Value to set at the specified path */ set>(path: TPath, val: PathValue): void; /** * Use this method to batch multiple state updates into a single transaction. * This can improve performance by reducing the number of reactive updates triggered by * state updates. * * @example * Set multiple state properties within a transaction: * ```js * store.transaction(() => { * store.set('a', 1); * store.set('b', 2); * store.set('c', 3); * }); * ``` * * @param fn - The function to run within the transaction. */ transaction(fn: (state: this) => void): void; /** * Toggles the value at the specified path in the state store. * This method assumes that the value at the specified path is a boolean. * * @param path - The path to the boolean value to toggle. * @returns The new value at the specified path. */ toggle

>(path: P): boolean; /** * Increments the value at the specified path in the state store. * This method assumes that the value at the specified path is a number. * * @param path - The path to the number value to increment. * @returns The new value at the specified path. */ increment

>(path: P): number; /** * Decrements the value at the specified path in the state store. * This method assumes that the value at the specified path is a number. * * @param path The path to the number value to decrement. * @returns The new value at the specified path. */ decrement

>(path: P): number; /** * Bind an HTML control element to a state store property. Two-way binding * is established between the control and the state store property. When the * control value changes, the state store property is updated. When the state * store property changes, the control value is updated. * * Supports: * - Native elements that emit an `input` event and have a `value` property. * - Flo.w RDF UI custom elements that emit `flow-ui-input` or `flow-ui-change` events and have * a value property. * * :::warning * Bindings should be disposed of when no longer needed by calling `unsubscribe()` on the returned subscription. * ::: * * :::warning * This method is provided to support reactive binding for vanilla JS and TS applications. When using * other supported frameworks (e.g. Angular) use the preferred binding method for that framework. * ::: * * @example * ```js * const subscription = store.bindControl(document.getElementById('my-input'), 'myStateProperty'); * ... * subscription.unsubscribe(); * ``` * * @param el - The HTML element to bind * @param statePath - The path to the state store property to bind * @param options - Binding options * @param options.toState - A function to convert the control value to the state store value * @param options.fromState - A function to convert the state store value to the control value * @param options.updateOn - The event type that will trigger an update of the state store property. Default is `input`. * @returns A subscription that can be used to `unsubscribe()` the binding. */ bindControl, TStateValue extends PathValue, TElementValue, TElement extends HTMLElement & { value: TElementValue; }>(el: TElement, statePath: TStatePath, options?: { toState?: (value: TElementValue) => TStateValue; fromState?: (value: TStateValue) => TElementValue; updateOn: 'input' | 'change'; }): ISubscription; /** * Bind an HTML element property to a state store property. One-way binding * is established between the element property and the state store property. * When the state store property changes, the element property is updated. * * :::warning * Bindings should be disposed of when no longer needed by calling `unsubscribe()` on the returned subscription. * ::: * * :::warning * This method is provided to support reactive binding for vanilla JS and TS applications. When using * other supported frameworks (e.g. Angular) use the preferred binding method for that framework. * ::: * * @example * ```js * const el = document.getElementById('my-span'); * const subscription = store.bindElementProp(el, 'textContent', 'myStateProperty'); * ... * subscription.unsubscribe(); * ``` * * @param el - The HTML element to bind * @param prop - The property of the element to bind * @param path - The path to the state store property to bind * @param options - Binding options * @param options.fromState - A function to convert the state store value to the element property value * @returns A subscription that can be used to `unsubscribe()` the binding. */ bindElementProp, TStateValue extends PathValue>(el: TElement, prop: TElementProp, path: TStatePath, options?: { fromState?: (value: TStateValue) => TElement[TElementProp]; }): ISubscription; /** * Bind an HTML element attribute to a state store property. One-way binding * is established between the element attribute and the state store property. * When the state store property changes, the element attribute is updated * (using `el.setAttribute(...)`). * * :::warning * Bindings should be disposed of when no longer needed by calling `unsubscribe()` on the returned subscription. * ::: * * :::warning * This method is provided to support reactive binding for vanilla JS and TS applications. When using * other supported frameworks (e.g. Angular) use the preferred binding method for that framework. * ::: * * @param el - The HTML element to bind * @param attr - The attribute of the element to bind * @param path - The path to the state store property to bind * @returns */ bindElementAttr, TStateValue extends PathValue>(el: TElement, attr: string, path: TStatePath, options?: { fromState?: (value: TStateValue) => string; }): ISubscription; /** * Create an observable stream that emits the value of the specified state store property * when it changes. The stream can be subscribed to using its `subscribe()` method. * * :::warning * Subscriptions should be disposed of when no longer required by calling their `unsubscribe()` method. * ::: * * :::danger * It is an anti-pattern to modify state store properties directly from within a stream subscription. * Use a `computed` property instead. Limit use of `toStream` to running imperative side-effects * in response to a reactive update of a state property. * ::: * * @example * ```js * const subscription = store.toStream('myStateProperty').subscribe((value) => { * console.log('myStateProperty changed:', value); * }); * ... * subscription.unsubscribe(); * ``` * * @param path - The path to the state store property to bind * @param fireImmediately - If `true`, the stream will emit the current value immediately * If `false`, the stream will only emit values when the state store property changes. * * @returns An observable stream that emits the value of the specified state property. */ toStream

>(path: P, fireImmediately?: boolean): IObservableStream>; /** * Creates a reactive context that will automatically re-run the specified function * whenever referenced reactive state changes. The supplied function is run immediately * and referenced state properties are tracked. The function will be re-run when tracked * state properties change. * * Note that referenced state properties are determined dynamically * by access. If a code branch is not taken, the referenced state properties in that branch * will not be tracked. If, on a subsequent run, the code branch is taken, the tracking * will be updated to include the newly accessed state properties. * * This method is similar to `toStream` but allows access to the complete state object rather * than a single property. * * :::warning * Autoruns should be disposed of when no longer needed by invoking the `disposer` function * returned when creating an autorun. * ::: * * :::danger * It is an anti-pattern to modify state store properties directly from within an autorun. * Use a `computed` property instead. Limit use of autoruns to running imperative side-effects * in response to a reactive update. * ::: * * @example * ```js * const disposer = store.autorun((state) => { * // Set map properties as a side effect whenever any of `state.zoom`, `state.bearing`, or `state.pitch` change * map.setCenter({zoom: state.zoom, bearing: state.bearing, pitch: state.pitch}); * }); * ... * disposer(); * ``` * * @param autorunFn - The function to run within a reactive context * @param name - Optional name for debugging purposes * @returns - A disposer function. Invoke this function to dispose of the autorun. */ autorun(autorunFn: (state: this) => void, name?: string): IDisposer; /** * This method **must** * be called in the constructor of derived classes to initialize the state store. * An exception will be thrown if this method is not called before using the state store. * * If using decorators to configure reactive properties, this method should be called without arguments. * If not using decorators, supply reactive annotations to configure reactive properties. * * See {@link StoreAnnotations} for a list of available annotations. * * :::info * If this method is called without using decorators and without supplying reactive annotations, * the state store will be configured automatically: * * - All properties will be made observable. * - All getters will converted to computed properties. * * This is only recommended for simple state stores in demos. * ::: * * @param annotations Optional annotations for configuring reactive properties. */ initialize(annotations?: StoreAnnotations): void; /** Serialize to `raw` format */ serialize(): Record; /** Serialize to `raw` format */ serialize(format: 'raw', scope?: string): Record; /** Serialize to `json` or `lz` format */ serialize(format: 'json' | 'lz', scope?: string): string; /** Deserialize `raw` format */ deserialize(value: Record): Record; /** Deserialize `raw` format */ deserialize(value: Record, format: 'raw'): Record; /** Deserialize `json` or `lz` format */ deserialize(value: string, format: 'json' | 'lz'): Record; private makeObservable; private makeAutoObservable; private checkInitialized; } /** * Flo.w context debugger. Provides debugging methods available in the browser web developer console. * * If the `enableDebug` is specified when initializing a Flo.w context a `Debugger` instance is available * as the global property `window.FDBG`. */ declare class Debugger { readonly context: FlowContext; private spyDisposer; private watchDisposers; /** * Constructs a new Flo.w debugger instance. * * A new Flo.w debugger will be created automatically if the `enableDebug` option is * specified when initializing a Flo.w context. * * @param context Flo.w context ID. */ constructor(context: FlowContext); /** * Install a 'watch' for the specified context state property path. * * @param path Context state property path. */ watch(path: string): void; /** * Remove a previously-installed 'watch' for the specified context state property path. * * @param path Context state property path. */ unwatch(path?: string): void; /** * Set a Flo.w context state property. * * @param path Context state property path * @param value New value to set */ set(path: string, value: any): void; /** * Read the value of a Flo.w context state property. * * @param keyOrPath Context state property path. * @returns The context state property value. */ get(keyOrPath?: string | string[]): any; /** * Enable verbose debugging of all reactive updates. */ spy(): void; /** * Disable verbose debugging of all reactive updates. */ unspy(): void; /** * Get a registered map instance by ID. */ maps(mapId?: string): any; /** * Get a registered reactive query by ID. */ queries(queryId?: string): any; private spyListener; private logStateValue; } declare class FlowCoreError extends Error { cause?: Error | undefined; constructor(message: string, cause?: Error | undefined); } declare class FlowCoreExpressionError extends FlowCoreError { readonly reason: 'parseError' | 'evaluationError'; readonly errors: string[]; constructor(expression: string, reason: 'parseError' | 'evaluationError', errors: string[]); } /** * A Flo.w RDF reactive expression - used internally to parse and evaluate {@link MapLayer} * style [expressions](/flow-rdf-core/expression-reference/). An expression can be evaluated * and its MapLibre-compatible representation can be generated. * * @example * ```js * const ex = new ReactiveExpression('1 + 2'); * console.log(ex.value); // 3 * console.log(ex.maplibreExpression); // ['+', 1, 2] * ``` * * */ declare class ReactiveExpression { private static parser; private static customFunctions; /** * Returns `true` if the specified custom function has been registered. * * @param fn - The custom function name */ static hasCustomFunction(fn: string): boolean; /** * Register a custom function to be used in reactive expressions. * * @param fn - The custom function to register */ static registerCustomFunction(fn: FlowCoreExpressionCustomFunction): void; private _expression; private parsedResult; private _store; /** * Parses a program string into a map of properties and their associated {@link ReactiveExpression}. * * The program string should be a series of property/expression pairs separated by semicolons as follows: * * ```js * const program = ` * prop1: 1 + 2; * prop2: 'a string'; * prop3: $stateProp * 3; * `; * * const parsedProgram = ReactiveExpression.parseProgram(program); * // { * // prop1: ReactiveExpression, * // prop2: ReactiveExpression, * // prop3: ReactiveExpression * // } * * ``` * * @param program - The program to parse * @returns A map of property names and their associated expressions. */ static parseProgram(program: string): { [key: string]: ReactiveExpression; }; /** * Generates the MapLibre-compatible representation of this expression. * * This is used internally when creating MapLibre style specifications * from Flo.w RDF {@link MapLayer} styles. * * This getter is a reactive `computed` and will re-evaluate within a * reactive context when the expression value changes. * * @computed * * @returns The MapLibre-compatible representation of this expression */ get maplibreExpression(): ParserExpression | undefined; /** * Evaluates the expression and returns the result. * * This getter is a reactive `computed` and will re-evaluate within a * reactive context when the expression value changes. * * @example * ```js * const ex = new ReactiveExpression('1 + 2'); * console.log(ex.value); // 3 * ``` * * @computed * * @returns - The result of evaluating the expression */ get value(): R; /** * Returns details of parsing errors if the expression could not be parsed. */ get parseError(): FlowCoreExpressionError | null; /** * Returns the original expression string passed to the constructor. */ get expression(): string; /** * Returns the state store bound to the expression. */ get store(): TState | null; /** * Constructs a new `ReactiveExpression`. * * @example * ```js * const ex = new ReactiveExpression('1 + 2'); * console.log(ex.value); // 3 * ``` * * @param expression - the string representation of the expression * @param parsedExpression - Used internally to bypass parsing when evaluating a program. */ constructor(expression: string, parsedExpression?: ParserExpression); /** * Binds a {@link StateStore} to the expression. The state store is used to resolve * state variables in the expression. * * Note: If no state store is bound, the expression will not be able to resolve * state variables and will return `null` when evaluated. A console warning will * be logged. * * @param store {@link StateStore} to bind to the expression * @returns */ bindState(store: TState | null): this; /** * Returns a subscribable stream, which produces the value of the expression * whenever a reactive update causes the expression to re-evaluate. * * @example * ```js * const ex = new ReactiveExpression('$val * 2'); * const subscription = ex.toStream().subscribe((value) => console.log(value)); * ... * subscription.unsubscribe(); * ``` * * @param fireImmediately - If `true`, the stream will fire immediately with the current value. * If `false` the stream will only fire when the value changes. * * @returns A subscribable stream of the expression value */ toStream(fireImmediately?: boolean): IObservableStream; private evaluateExpression; private expandCustomFunctions; private isParseError; private isFunctionExpression; private formatName; } interface FlowCoreExpressionCustomFunction { name: string; initialize?: () => void; fn: FlowCoreExpressionCustomFunctionSignature; } type FlowCoreExpressionCustomFunctionSignature = (expr: ParserFunctionExpression, parentExpression: ReactiveExpression) => ParserExpression; interface FlowCoreExpressionCustomFunctions { [name: string]: FlowCoreExpressionCustomFunction; } type ParserExpression = number | string | boolean | null | ParserFunctionExpression; type ParserFunctionExpression = [string, ...any[]]; interface ParserProgram { [key: string]: ParserExpressionWithIndex; } interface ParserExpressionWithIndex { expr: ParserExpression; start: ParserIndex; end: ParserIndex; } interface ParserIndex { offset: number; line: number; column: number; } declare class MapLayerStyleBuilder { private static _styleBuilders; static registerStyleBuilder(layerType: string, builder: typeof MapLayerStyleBuilder): void; static createStyleBuilder(layerType: string): MapLayerStyleBuilder; private _styles; /** * Whether this layer is displayed. * * @param value - visible value (default `true`) */ visibility(value: boolean | StyleExpression): this; /** * Create a style specification string. * * Call this method after setting all style properties * on the style builder. * * @returns Layer style specification string */ build(): string; /** * Format and add style property to the style builder. */ protected addStyle(property: string, value: unknown): void; private formatValue; } declare class StyleExpression { private _expr; __styleExpression: string; constructor(_expr: string); toString(): string; } declare function expr(expr: string): StyleExpression; /** * WARNING - this file is auto generated */ type MapLayerType = 'fill' | 'line' | 'symbol' | 'circle' | 'heatmap' | 'fill-extrusion' | 'raster' | 'hillshade' | 'background'; /** * Style builder for 'fill' layers. */ declare class FillLayerStyleBuilder extends MapLayerStyleBuilder { /** * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key. * * @param value - fill-sort-key value */ fillSortKey(value: number | StyleExpression): this; /** * Whether or not the fill should be antialiased. * * @param value - fill-antialias value (default `true`) */ fillAntialias(value: boolean | StyleExpression): this; /** * The opacity of the entire fill layer. In contrast to the `fill-color`, this value will also affect the 1px stroke around the fill, if the stroke is used. * * @param value - fill-opacity value (default `1`) */ fillOpacity(value: number | StyleExpression): this; /** * The color of the filled part of this layer. This color can be specified as `rgba` with an alpha component and the color's opacity will not affect the opacity of the 1px stroke, if it is used. * * @param value - fill-color value (default `#000000`) */ fillColor(value: string | StyleExpression): this; /** * The outline color of the fill. Matches the value of `fill-color` if unspecified. * * @param value - fill-outline-color value */ fillOutlineColor(value: string | StyleExpression): this; /** * The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. * * @param value - fill-translate value in pixels (default `0,0`) */ fillTranslate(value: number[] | StyleExpression): this; /** * Controls the frame of reference for `fill-translate`. * * Values: * - map: The fill is translated relative to the map. * - viewport: The fill is translated relative to the viewport. * * @param value - fill-translate-anchor value (default `map`) */ fillTranslateAnchor(value: ('map' | 'viewport') | StyleExpression): this; /** * Name of image in sprite to use for drawing image fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels. * * @param value - fill-pattern value */ fillPattern(value: string | StyleExpression): this; } /** * Style builder for 'line' layers. */ declare class LineLayerStyleBuilder extends MapLayerStyleBuilder { /** * The display of line endings. * * Values: * - butt: A cap with a squared-off end which is drawn to the exact endpoint of the line. * - round: A cap with a rounded end which is drawn beyond the endpoint of the line at a radius of one-half of the line's width and centered on the endpoint of the line. * - square: A cap with a squared-off end which is drawn beyond the endpoint of the line at a distance of one-half of the line's width. * * @param value - line-cap value (default `butt`) */ lineCap(value: ('butt' | 'round' | 'square') | StyleExpression): this; /** * The display of lines when joining. * * Values: * - bevel: A join with a squared-off end which is drawn beyond the endpoint of the line at a distance of one-half of the line's width. * - round: A join with a rounded end which is drawn beyond the endpoint of the line at a radius of one-half of the line's width and centered on the endpoint of the line. * - miter: A join with a sharp, angled corner which is drawn with the outer sides beyond the endpoint of the path until they meet. * * @param value - line-join value (default `miter`) */ lineJoin(value: ('bevel' | 'round' | 'miter') | StyleExpression): this; /** * Used to automatically convert miter joins to bevel joins for sharp angles. * * @param value - line-miter-limit value (default `2`) */ lineMiterLimit(value: number | StyleExpression): this; /** * Used to automatically convert round joins to miter joins for shallow angles. * * @param value - line-round-limit value (default `1.05`) */ lineRoundLimit(value: number | StyleExpression): this; /** * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key. * * @param value - line-sort-key value */ lineSortKey(value: number | StyleExpression): this; /** * The opacity at which the line will be drawn. * * @param value - line-opacity value (default `1`) */ lineOpacity(value: number | StyleExpression): this; /** * The color with which the line will be drawn. * * @param value - line-color value (default `#000000`) */ lineColor(value: string | StyleExpression): this; /** * The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. * * @param value - line-translate value in pixels (default `0,0`) */ lineTranslate(value: number[] | StyleExpression): this; /** * Controls the frame of reference for `line-translate`. * * Values: * - map: The line is translated relative to the map. * - viewport: The line is translated relative to the viewport. * * @param value - line-translate-anchor value (default `map`) */ lineTranslateAnchor(value: ('map' | 'viewport') | StyleExpression): this; /** * Stroke thickness. * * @param value - line-width value in pixels (default `1`) */ lineWidth(value: number | StyleExpression): this; /** * Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap. * * @param value - line-gap-width value in pixels */ lineGapWidth(value: number | StyleExpression): this; /** * The line's offset. For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left. For polygon features, a positive value results in an inset, and a negative value results in an outset. * * @param value - line-offset value in pixels */ lineOffset(value: number | StyleExpression): this; /** * Blur applied to the line, in pixels. * * @param value - line-blur value in pixels */ lineBlur(value: number | StyleExpression): this; /** * Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. Also note that zoom-dependent expressions will be evaluated only at integer zoom levels. * * @param value - line-dasharray value in line widths */ lineDasharray(value: number[] | StyleExpression): this; /** * Name of image in sprite to use for drawing image lines. For seamless patterns, image width must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels. * * @param value - line-pattern value */ linePattern(value: string | StyleExpression): this; /** * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`. * * @param value - line-gradient value */ lineGradient(value: string | StyleExpression): this; } /** * Style builder for 'symbol' layers. */ declare class SymbolLayerStyleBuilder extends MapLayerStyleBuilder { /** * Label placement relative to its geometry. * * Values: * - point: The label is placed at the point where the geometry is located. * - line: The label is placed along the line of the geometry. Can only be used on `LineString` and `Polygon` geometries. * - line-center: The label is placed at the center of the line of the geometry. Can only be used on `LineString` and `Polygon` geometries. Note that a single feature in a vector tile may contain multiple line geometries. * * @param value - symbol-placement value (default `point`) */ symbolPlacement(value: ('point' | 'line' | 'line-center') | StyleExpression): this; /** * Distance between two symbol anchors. * * @param value - symbol-spacing value in pixels (default `250`) */ symbolSpacing(value: number | StyleExpression): this; /** * If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like MapLibre GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries. * * @param value - symbol-avoid-edges value */ symbolAvoidEdges(value: boolean | StyleExpression): this; /** * Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first. When `icon-allow-overlap` or `text-allow-overlap` is `false`, features with a lower sort key will have priority during placement. When `icon-allow-overlap` or `text-allow-overlap` is set to `true`, features with a higher sort key will overlap over features with a lower sort key. * * @param value - symbol-sort-key value */ symbolSortKey(value: number | StyleExpression): this; /** * Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their y-position relative to the viewport. To control the order and prioritization of symbols otherwise, use `symbol-sort-key`. * * Values: * - auto: Sorts symbols by `symbol-sort-key` if set. Otherwise, sorts symbols by their y-position relative to the viewport if `icon-allow-overlap` or `text-allow-overlap` is set to `true` or `icon-ignore-placement` or `text-ignore-placement` is `false`. * - viewport-y: Sorts symbols by their y-position relative to the viewport if `icon-allow-overlap` or `text-allow-overlap` is set to `true` or `icon-ignore-placement` or `text-ignore-placement` is `false`. * - source: Sorts symbols by `symbol-sort-key` if set. Otherwise, no sorting is applied; symbols are rendered in the same order as the source data. * * @param value - symbol-z-order value (default `auto`) */ symbolZOrder(value: ('auto' | 'viewport-y' | 'source') | StyleExpression): this; /** * If true, the icon will be visible even if it collides with other previously drawn symbols. * * @param value - icon-allow-overlap value */ iconAllowOverlap(value: boolean | StyleExpression): this; /** * Allows for control over whether to show an icon when it overlaps other symbols on the map. If `icon-overlap` is not set, `icon-allow-overlap` is used instead. * * Values: * - never: The icon will be hidden if it collides with any other previously drawn symbol. * - always: The icon will be visible even if it collides with any other previously drawn symbol. * - cooperative: If the icon collides with another previously drawn symbol, the overlap mode for that symbol is checked. If the previous symbol was placed using `never` overlap mode, the new icon is hidden. If the previous symbol was placed using `always` or `cooperative` overlap mode, the new icon is visible. * * @param value - icon-overlap value */ iconOverlap(value: ('never' | 'always' | 'cooperative') | StyleExpression): this; /** * If true, other symbols can be visible even if they collide with the icon. * * @param value - icon-ignore-placement value */ iconIgnorePlacement(value: boolean | StyleExpression): this; /** * If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not. * * @param value - icon-optional value */ iconOptional(value: boolean | StyleExpression): this; /** * In combination with `symbol-placement`, determines the rotation behavior of icons. * * Values: * - map: When `symbol-placement` is set to `point`, aligns icons east-west. When `symbol-placement` is set to `line` or `line-center`, aligns icon x-axes with the line. * - viewport: Produces icons whose x-axes are aligned with the x-axis of the viewport, regardless of the value of `symbol-placement`. * - auto: When `symbol-placement` is set to `point`, this is equivalent to `viewport`. When `symbol-placement` is set to `line` or `line-center`, this is equivalent to `map`. * * @param value - icon-rotation-alignment value (default `auto`) */ iconRotationAlignment(value: ('map' | 'viewport' | 'auto') | StyleExpression): this; /** * Scales the original size of the icon by the provided factor. The new pixel size of the image will be the original pixel size multiplied by `icon-size`. 1 is the original size; 3 triples the size of the image. * * @param value - icon-size value in factor of the original icon size (default `1`) */ iconSize(value: number | StyleExpression): this; /** * Scales the icon to fit around the associated text. * * Values: * - none: The icon is displayed at its intrinsic aspect ratio. * - width: The icon is scaled in the x-dimension to fit the width of the text. * - height: The icon is scaled in the y-dimension to fit the height of the text. * - both: The icon is scaled in both x- and y-dimensions. * * @param value - icon-text-fit value (default `none`) */ iconTextFit(value: ('none' | 'width' | 'height' | 'both') | StyleExpression): this; /** * Size of the additional area added to dimensions determined by `icon-text-fit`, in clockwise order: top, right, bottom, left. * * @param value - icon-text-fit-padding value in pixels (default `0,0,0,0`) */ iconTextFitPadding(value: number[] | StyleExpression): this; /** * Name of image in sprite to use for drawing an image background. * * @param value - icon-image value */ iconImage(value: string | StyleExpression): this; /** * Rotates the icon clockwise. * * @param value - icon-rotate value in degrees */ iconRotate(value: number | StyleExpression): this; /** * Size of additional area round the icon bounding box used for detecting symbol collisions. Values are declared using CSS margin shorthand syntax: a single value applies to all four sides; two values apply to [top/bottom, left/right]; three values apply to [top, left/right, bottom]; four values apply to [top, right, bottom, left]. For backwards compatibility, a single bare number is accepted, and treated the same as a one-element array - padding applied to all sides. * * @param value - icon-padding value in pixels (default `2`) */ iconPadding(value: string | StyleExpression): this; /** * If true, the icon may be flipped to prevent it from being rendered upside-down. * * @param value - icon-keep-upright value */ iconKeepUpright(value: boolean | StyleExpression): this; /** * Offset distance of icon from its anchor. Positive values indicate right and down, while negative values indicate left and up. Each component is multiplied by the value of `icon-size` to obtain the final offset in pixels. When combined with `icon-rotate` the offset will be as if the rotated direction was up. * * @param value - icon-offset value (default `0,0`) */ iconOffset(value: number[] | StyleExpression): this; /** * Part of the icon placed closest to the anchor. * * Values: * - center: The center of the icon is placed closest to the anchor. * - left: The left side of the icon is placed closest to the anchor. * - right: The right side of the icon is placed closest to the anchor. * - top: The top of the icon is placed closest to the anchor. * - bottom: The bottom of the icon is placed closest to the anchor. * - top-left: The top left corner of the icon is placed closest to the anchor. * - top-right: The top right corner of the icon is placed closest to the anchor. * - bottom-left: The bottom left corner of the icon is placed closest to the anchor. * - bottom-right: The bottom right corner of the icon is placed closest to the anchor. * * @param value - icon-anchor value (default `center`) */ iconAnchor(value: ('center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') | StyleExpression): this; /** * Orientation of icon when map is pitched. * * Values: * - map: The icon is aligned to the plane of the map. * - viewport: The icon is aligned to the plane of the viewport. * - auto: Automatically matches the value of `icon-rotation-alignment`. * * @param value - icon-pitch-alignment value (default `auto`) */ iconPitchAlignment(value: ('map' | 'viewport' | 'auto') | StyleExpression): this; /** * Orientation of text when map is pitched. * * Values: * - map: The text is aligned to the plane of the map. * - viewport: The text is aligned to the plane of the viewport. * - auto: Automatically matches the value of `text-rotation-alignment`. * * @param value - text-pitch-alignment value (default `auto`) */ textPitchAlignment(value: ('map' | 'viewport' | 'auto') | StyleExpression): this; /** * In combination with `symbol-placement`, determines the rotation behavior of the individual glyphs forming the text. * * Values: * - map: When `symbol-placement` is set to `point`, aligns text east-west. When `symbol-placement` is set to `line` or `line-center`, aligns text x-axes with the line. * - viewport: Produces glyphs whose x-axes are aligned with the x-axis of the viewport, regardless of the value of `symbol-placement`. * - viewport-glyph: When `symbol-placement` is set to `point`, aligns text to the x-axis of the viewport. When `symbol-placement` is set to `line` or `line-center`, aligns glyphs to the x-axis of the viewport and places them along the line. * - auto: When `symbol-placement` is set to `point`, this is equivalent to `viewport`. When `symbol-placement` is set to `line` or `line-center`, this is equivalent to `map`. * * @param value - text-rotation-alignment value (default `auto`) */ textRotationAlignment(value: ('map' | 'viewport' | 'viewport-glyph' | 'auto') | StyleExpression): this; /** * Value to use for a text label. If a plain `string` is provided, it will be treated as a `formatted` with default/inherited formatting options. * * @param value - text-field value */ textField(value: string | StyleExpression): this; /** * Font stack to use for displaying text. * * @param value - text-font value (default `Open Sans Regular,Arial Unicode MS Regular`) */ textFont(value: string[] | StyleExpression): this; /** * Font size. * * @param value - text-size value in pixels (default `16`) */ textSize(value: number | StyleExpression): this; /** * The maximum line width for text wrapping. * * @param value - text-max-width value in ems (default `10`) */ textMaxWidth(value: number | StyleExpression): this; /** * Text leading value for multi-line text. * * @param value - text-line-height value in ems (default `1.2`) */ textLineHeight(value: number | StyleExpression): this; /** * Text tracking amount. * * @param value - text-letter-spacing value in ems */ textLetterSpacing(value: number | StyleExpression): this; /** * Text justification options. * * Values: * - auto: The text is aligned towards the anchor position. * - left: The text is aligned to the left. * - center: The text is centered. * - right: The text is aligned to the right. * * @param value - text-justify value (default `center`) */ textJustify(value: ('auto' | 'left' | 'center' | 'right') | StyleExpression): this; /** * Radial offset of text, in the direction of the symbol's anchor. Useful in combination with `text-variable-anchor`, which defaults to using the two-dimensional `text-offset` if present. * * @param value - text-radial-offset value in ems */ textRadialOffset(value: number | StyleExpression): this; /** * To increase the chance of placing high-priority labels on the map, you can provide an array of `text-anchor` locations: the renderer will attempt to place the label at each location, in order, before moving onto the next label. Use `text-justify: auto` to choose justification based on anchor position. To apply an offset, use the `text-radial-offset` or the two-dimensional `text-offset`. * * Values: * - center: The center of the text is placed closest to the anchor. * - left: The left side of the text is placed closest to the anchor. * - right: The right side of the text is placed closest to the anchor. * - top: The top of the text is placed closest to the anchor. * - bottom: The bottom of the text is placed closest to the anchor. * - top-left: The top left corner of the text is placed closest to the anchor. * - top-right: The top right corner of the text is placed closest to the anchor. * - bottom-left: The bottom left corner of the text is placed closest to the anchor. * - bottom-right: The bottom right corner of the text is placed closest to the anchor. * * @param value - text-variable-anchor value */ textVariableAnchor(value: ('center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right')[] | StyleExpression): this; /** * To increase the chance of placing high-priority labels on the map, you can provide an array of `text-anchor` locations, each paired with an offset value. The renderer will attempt to place the label at each location, in order, before moving on to the next location+offset. Use `text-justify: auto` to choose justification based on anchor position. The length of the array must be even, and must alternate between enum and point entries. i.e., each anchor location must be accompanied by a point, and that point defines the offset when the corresponding anchor location is used. Positive offset values indicate right and down, while negative values indicate left and up. Anchor locations may repeat, allowing the renderer to try multiple offsets to try and place a label using the same anchor. When present, this property takes precedence over `text-anchor`, `text-variable-anchor`, `text-offset`, and `text-radial-offset`. ```json { "text-variable-anchor-offset": ["top", [0, 4], "left", [3,0], "bottom", [1, 1]] } ``` When the renderer chooses the `top` anchor, `[0, 4]` will be used for `text-offset`; the text will be shifted down by 4 ems. When the renderer chooses the `left` anchor, `[3, 0]` will be used for `text-offset`; the text will be shifted right by 3 ems. * * @param value - text-variable-anchor-offset value */ textVariableAnchorOffset(value: string | StyleExpression): this; /** * Part of the text placed closest to the anchor. * * Values: * - center: The center of the text is placed closest to the anchor. * - left: The left side of the text is placed closest to the anchor. * - right: The right side of the text is placed closest to the anchor. * - top: The top of the text is placed closest to the anchor. * - bottom: The bottom of the text is placed closest to the anchor. * - top-left: The top left corner of the text is placed closest to the anchor. * - top-right: The top right corner of the text is placed closest to the anchor. * - bottom-left: The bottom left corner of the text is placed closest to the anchor. * - bottom-right: The bottom right corner of the text is placed closest to the anchor. * * @param value - text-anchor value (default `center`) */ textAnchor(value: ('center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') | StyleExpression): this; /** * Maximum angle change between adjacent characters. * * @param value - text-max-angle value in degrees (default `45`) */ textMaxAngle(value: number | StyleExpression): this; /** * The property allows control over a symbol's orientation. Note that the property values act as a hint, so that a symbol whose language doesn’t support the provided orientation will be laid out in its natural orientation. Example: English point symbol will be rendered horizontally even if array value contains single 'vertical' enum value. The order of elements in an array define priority order for the placement of an orientation variant. * * Values: * - horizontal: If a text's language supports horizontal writing mode, symbols with point placement would be laid out horizontally. * - vertical: If a text's language supports vertical writing mode, symbols with point placement would be laid out vertically. * * @param value - text-writing-mode value */ textWritingMode(value: ('horizontal' | 'vertical')[] | StyleExpression): this; /** * Rotates the text clockwise. * * @param value - text-rotate value in degrees */ textRotate(value: number | StyleExpression): this; /** * Size of the additional area around the text bounding box used for detecting symbol collisions. * * @param value - text-padding value in pixels (default `2`) */ textPadding(value: number | StyleExpression): this; /** * If true, the text may be flipped vertically to prevent it from being rendered upside-down. * * @param value - text-keep-upright value (default `true`) */ textKeepUpright(value: boolean | StyleExpression): this; /** * Specifies how to capitalize text, similar to the CSS `text-transform` property. * * Values: * - none: The text is not altered. * - uppercase: Forces all letters to be displayed in uppercase. * - lowercase: Forces all letters to be displayed in lowercase. * * @param value - text-transform value (default `none`) */ textTransform(value: ('none' | 'uppercase' | 'lowercase') | StyleExpression): this; /** * Offset distance of text from its anchor. Positive values indicate right and down, while negative values indicate left and up. If used with text-variable-anchor, input values will be taken as absolute values. Offsets along the x- and y-axis will be applied automatically based on the anchor position. * * @param value - text-offset value in ems (default `0,0`) */ textOffset(value: number[] | StyleExpression): this; /** * If true, the text will be visible even if it collides with other previously drawn symbols. * * @param value - text-allow-overlap value */ textAllowOverlap(value: boolean | StyleExpression): this; /** * Allows for control over whether to show symbol text when it overlaps other symbols on the map. If `text-overlap` is not set, `text-allow-overlap` is used instead * * Values: * - never: The text will be hidden if it collides with any other previously drawn symbol. * - always: The text will be visible even if it collides with any other previously drawn symbol. * - cooperative: If the text collides with another previously drawn symbol, the overlap mode for that symbol is checked. If the previous symbol was placed using `never` overlap mode, the new text is hidden. If the previous symbol was placed using `always` or `cooperative` overlap mode, the new text is visible. * * @param value - text-overlap value */ textOverlap(value: ('never' | 'always' | 'cooperative') | StyleExpression): this; /** * If true, other symbols can be visible even if they collide with the text. * * @param value - text-ignore-placement value */ textIgnorePlacement(value: boolean | StyleExpression): this; /** * If true, icons will display without their corresponding text when the text collides with other symbols and the icon does not. * * @param value - text-optional value */ textOptional(value: boolean | StyleExpression): this; /** * The opacity at which the icon will be drawn. * * @param value - icon-opacity value (default `1`) */ iconOpacity(value: number | StyleExpression): this; /** * The color of the icon. This can only be used with sdf icons. * * @param value - icon-color value (default `#000000`) */ iconColor(value: string | StyleExpression): this; /** * The color of the icon's halo. Icon halos can only be used with SDF icons. * * @param value - icon-halo-color value (default `rgba(0, 0, 0, 0)`) */ iconHaloColor(value: string | StyleExpression): this; /** * Distance of halo to the icon outline. * * @param value - icon-halo-width value in pixels */ iconHaloWidth(value: number | StyleExpression): this; /** * Fade out the halo towards the outside. * * @param value - icon-halo-blur value in pixels */ iconHaloBlur(value: number | StyleExpression): this; /** * Distance that the icon's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up. * * @param value - icon-translate value in pixels (default `0,0`) */ iconTranslate(value: number[] | StyleExpression): this; /** * Controls the frame of reference for `icon-translate`. * * Values: * - map: Icons are translated relative to the map. * - viewport: Icons are translated relative to the viewport. * * @param value - icon-translate-anchor value (default `map`) */ iconTranslateAnchor(value: ('map' | 'viewport') | StyleExpression): this; /** * The opacity at which the text will be drawn. * * @param value - text-opacity value (default `1`) */ textOpacity(value: number | StyleExpression): this; /** * The color with which the text will be drawn. * * @param value - text-color value (default `#000000`) */ textColor(value: string | StyleExpression): this; /** * The color of the text's halo, which helps it stand out from backgrounds. * * @param value - text-halo-color value (default `rgba(0, 0, 0, 0)`) */ textHaloColor(value: string | StyleExpression): this; /** * Distance of halo to the font outline. Max text halo width is 1/4 of the font-size. * * @param value - text-halo-width value in pixels */ textHaloWidth(value: number | StyleExpression): this; /** * The halo's fadeout distance towards the outside. * * @param value - text-halo-blur value in pixels */ textHaloBlur(value: number | StyleExpression): this; /** * Distance that the text's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up. * * @param value - text-translate value in pixels (default `0,0`) */ textTranslate(value: number[] | StyleExpression): this; /** * Controls the frame of reference for `text-translate`. * * Values: * - map: The text is translated relative to the map. * - viewport: The text is translated relative to the viewport. * * @param value - text-translate-anchor value (default `map`) */ textTranslateAnchor(value: ('map' | 'viewport') | StyleExpression): this; } /** * Style builder for 'circle' layers. */ declare class CircleLayerStyleBuilder extends MapLayerStyleBuilder { /** * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key. * * @param value - circle-sort-key value */ circleSortKey(value: number | StyleExpression): this; /** * Circle radius. * * @param value - circle-radius value in pixels (default `5`) */ circleRadius(value: number | StyleExpression): this; /** * The fill color of the circle. * * @param value - circle-color value (default `#000000`) */ circleColor(value: string | StyleExpression): this; /** * Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity. * * @param value - circle-blur value */ circleBlur(value: number | StyleExpression): this; /** * The opacity at which the circle will be drawn. * * @param value - circle-opacity value (default `1`) */ circleOpacity(value: number | StyleExpression): this; /** * The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. * * @param value - circle-translate value in pixels (default `0,0`) */ circleTranslate(value: number[] | StyleExpression): this; /** * Controls the frame of reference for `circle-translate`. * * Values: * - map: The circle is translated relative to the map. * - viewport: The circle is translated relative to the viewport. * * @param value - circle-translate-anchor value (default `map`) */ circleTranslateAnchor(value: ('map' | 'viewport') | StyleExpression): this; /** * Controls the scaling behavior of the circle when the map is pitched. * * Values: * - map: Circles are scaled according to their apparent distance to the camera. * - viewport: Circles are not scaled. * * @param value - circle-pitch-scale value (default `map`) */ circlePitchScale(value: ('map' | 'viewport') | StyleExpression): this; /** * Orientation of circle when map is pitched. * * Values: * - map: The circle is aligned to the plane of the map. * - viewport: The circle is aligned to the plane of the viewport. * * @param value - circle-pitch-alignment value (default `viewport`) */ circlePitchAlignment(value: ('map' | 'viewport') | StyleExpression): this; /** * The width of the circle's stroke. Strokes are placed outside of the `circle-radius`. * * @param value - circle-stroke-width value in pixels */ circleStrokeWidth(value: number | StyleExpression): this; /** * The stroke color of the circle. * * @param value - circle-stroke-color value (default `#000000`) */ circleStrokeColor(value: string | StyleExpression): this; /** * The opacity of the circle's stroke. * * @param value - circle-stroke-opacity value (default `1`) */ circleStrokeOpacity(value: number | StyleExpression): this; } /** * Style builder for 'heatmap' layers. */ declare class HeatmapLayerStyleBuilder extends MapLayerStyleBuilder { /** * Radius of influence of one heatmap point in pixels. Increasing the value makes the heatmap smoother, but less detailed. * * @param value - heatmap-radius value in pixels (default `30`) */ heatmapRadius(value: number | StyleExpression): this; /** * A measure of how much an individual point contributes to the heatmap. A value of 10 would be equivalent to having 10 points of weight 1 in the same spot. Especially useful when combined with clustering. * * @param value - heatmap-weight value (default `1`) */ heatmapWeight(value: number | StyleExpression): this; /** * Similar to `heatmap-weight` but controls the intensity of the heatmap globally. Primarily used for adjusting the heatmap based on zoom level. * * @param value - heatmap-intensity value (default `1`) */ heatmapIntensity(value: number | StyleExpression): this; /** * Defines the color of each pixel based on its density value in a heatmap. Should be an expression that uses `["heatmap-density"]` as input. * * @param value - heatmap-color value (default `interpolate,linear,heatmap-density,0,rgba(0, 0, 255, 0),0.1,royalblue,0.3,cyan,0.5,lime,0.7,yellow,1,red`) */ heatmapColor(value: string | StyleExpression): this; /** * The global opacity at which the heatmap layer will be drawn. * * @param value - heatmap-opacity value (default `1`) */ heatmapOpacity(value: number | StyleExpression): this; } /** * Style builder for 'fill-extrusion' layers. */ declare class FillExtrusionLayerStyleBuilder extends MapLayerStyleBuilder { /** * The opacity of the entire fill extrusion layer. This is rendered on a per-layer, not per-feature, basis, and data-driven styling is not available. * * @param value - fill-extrusion-opacity value (default `1`) */ fillExtrusionOpacity(value: number | StyleExpression): this; /** * The base color of the extruded fill. The extrusion's surfaces will be shaded differently based on this color in combination with the root `light` settings. If this color is specified as `rgba` with an alpha component, the alpha component will be ignored; use `fill-extrusion-opacity` to set layer opacity. * * @param value - fill-extrusion-color value (default `#000000`) */ fillExtrusionColor(value: string | StyleExpression): this; /** * The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively. * * @param value - fill-extrusion-translate value in pixels (default `0,0`) */ fillExtrusionTranslate(value: number[] | StyleExpression): this; /** * Controls the frame of reference for `fill-extrusion-translate`. * * Values: * - map: The fill extrusion is translated relative to the map. * - viewport: The fill extrusion is translated relative to the viewport. * * @param value - fill-extrusion-translate-anchor value (default `map`) */ fillExtrusionTranslateAnchor(value: ('map' | 'viewport') | StyleExpression): this; /** * Name of image in sprite to use for drawing images on extruded fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels. * * @param value - fill-extrusion-pattern value */ fillExtrusionPattern(value: string | StyleExpression): this; /** * The height with which to extrude this layer. * * @param value - fill-extrusion-height value in meters */ fillExtrusionHeight(value: number | StyleExpression): this; /** * The height with which to extrude the base of this layer. Must be less than or equal to `fill-extrusion-height`. * * @param value - fill-extrusion-base value in meters */ fillExtrusionBase(value: number | StyleExpression): this; /** * Whether to apply a vertical gradient to the sides of a fill-extrusion layer. If true, sides will be shaded slightly darker farther down. * * @param value - fill-extrusion-vertical-gradient value (default `true`) */ fillExtrusionVerticalGradient(value: boolean | StyleExpression): this; } /** * Style builder for 'raster' layers. */ declare class RasterLayerStyleBuilder extends MapLayerStyleBuilder { /** * The opacity at which the image will be drawn. * * @param value - raster-opacity value (default `1`) */ rasterOpacity(value: number | StyleExpression): this; /** * Rotates hues around the color wheel. * * @param value - raster-hue-rotate value in degrees */ rasterHueRotate(value: number | StyleExpression): this; /** * Increase or reduce the brightness of the image. The value is the minimum brightness. * * @param value - raster-brightness-min value */ rasterBrightnessMin(value: number | StyleExpression): this; /** * Increase or reduce the brightness of the image. The value is the maximum brightness. * * @param value - raster-brightness-max value (default `1`) */ rasterBrightnessMax(value: number | StyleExpression): this; /** * Increase or reduce the saturation of the image. * * @param value - raster-saturation value */ rasterSaturation(value: number | StyleExpression): this; /** * Increase or reduce the contrast of the image. * * @param value - raster-contrast value */ rasterContrast(value: number | StyleExpression): this; /** * The resampling/interpolation method to use for overscaling, also known as texture magnification filter * * Values: * - linear: (Bi)linear filtering interpolates pixel values using the weighted average of the four closest original source pixels creating a smooth but blurry look when overscaled * - nearest: Nearest neighbor filtering interpolates pixel values using the nearest original source pixel creating a sharp but pixelated look when overscaled * * @param value - raster-resampling value (default `linear`) */ rasterResampling(value: ('linear' | 'nearest') | StyleExpression): this; /** * Fade duration when a new tile is added. * * @param value - raster-fade-duration value in milliseconds (default `300`) */ rasterFadeDuration(value: number | StyleExpression): this; } /** * Style builder for 'hillshade' layers. */ declare class HillshadeLayerStyleBuilder extends MapLayerStyleBuilder { /** * The direction of the light source used to generate the hillshading with 0 as the top of the viewport if `hillshade-illumination-anchor` is set to `viewport` and due north if `hillshade-illumination-anchor` is set to `map`. * * @param value - hillshade-illumination-direction value (default `335`) */ hillshadeIlluminationDirection(value: number | StyleExpression): this; /** * Direction of light source when map is rotated. * * Values: * - map: The hillshade illumination is relative to the north direction. * - viewport: The hillshade illumination is relative to the top of the viewport. * * @param value - hillshade-illumination-anchor value (default `viewport`) */ hillshadeIlluminationAnchor(value: ('map' | 'viewport') | StyleExpression): this; /** * Intensity of the hillshade * * @param value - hillshade-exaggeration value (default `0.5`) */ hillshadeExaggeration(value: number | StyleExpression): this; /** * The shading color of areas that face away from the light source. * * @param value - hillshade-shadow-color value (default `#000000`) */ hillshadeShadowColor(value: string | StyleExpression): this; /** * The shading color of areas that faces towards the light source. * * @param value - hillshade-highlight-color value (default `#FFFFFF`) */ hillshadeHighlightColor(value: string | StyleExpression): this; /** * The shading color used to accentuate rugged terrain like sharp cliffs and gorges. * * @param value - hillshade-accent-color value (default `#000000`) */ hillshadeAccentColor(value: string | StyleExpression): this; } /** * Style builder for 'background' layers. */ declare class BackgroundLayerStyleBuilder extends MapLayerStyleBuilder { /** * The color with which the background will be drawn. * * @param value - background-color value (default `#000000`) */ backgroundColor(value: string | StyleExpression): this; /** * Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels. * * @param value - background-pattern value */ backgroundPattern(value: string | StyleExpression): this; /** * The opacity at which the background will be drawn. * * @param value - background-opacity value (default `1`) */ backgroundOpacity(value: number | StyleExpression): this; } declare function layerStyle(layerType: 'fill'): FillLayerStyleBuilder; declare function layerStyle(layerType: 'line'): LineLayerStyleBuilder; declare function layerStyle(layerType: 'symbol'): SymbolLayerStyleBuilder; declare function layerStyle(layerType: 'circle'): CircleLayerStyleBuilder; declare function layerStyle(layerType: 'heatmap'): HeatmapLayerStyleBuilder; declare function layerStyle(layerType: 'fill-extrusion'): FillExtrusionLayerStyleBuilder; declare function layerStyle(layerType: 'raster'): RasterLayerStyleBuilder; declare function layerStyle(layerType: 'hillshade'): HillshadeLayerStyleBuilder; declare function layerStyle(layerType: 'background'): BackgroundLayerStyleBuilder; interface MapLayerOptions { /** Layer ID. */ id: string; /** Layer type. */ type: MapLayerType; /** Map data source to display. */ source: string; /** Map data source layer to display. (Applicable to 'vector'-type data sources). */ sourceLayer?: string; /** Enable feature hover effect and click handling. */ interactive?: boolean; /** Minimum visible zoom level. */ minZoom?: number; /** Maximum visible zoom level. */ maxZoom?: number; above?: string; below?: string; filter?: string; style?: string; } type MapLayerExpression = ParserExpression; interface MapLayerSpecification { id: string; type: MapLayerType; metadata?: any; source: string; 'source-layer'?: string; minzoom?: number; maxzoom?: number; filter?: MapLayerExpression; layout?: Record; paint?: Record; } /** * @internal * * Map layer metadata index */ interface MapLayerPropertyMetadataIndex { [layerType: string]: { [property: string]: MapLayerPropertyMetadata; }; } /** * @internal * * Map layer style property set. */ interface MapLayerPropertyMetadata { property: string; type: 'paint' | 'layout'; definition: any; } declare class MapLayer { private static _propertyMetadataIndex; private static _defaultOptions; private _options; private _state; private _filter; private _paintProps; private _layoutProps; get layerSpecification(): MapLayerSpecification; get id(): string; get type(): string; get source(): string; get interactive(): boolean; get above(): string | undefined; get below(): string | undefined; constructor(options: MapLayerOptions); bindState(state: StateStore | null): this; setMinZoom(zoom: number): this; setMaxZoom(zoom: number): this; setInteractive(interactive: boolean): this; setAbove(layerId: string | undefined): this; setBelow(layerId: string | undefined): this; setStyle(styleProgram: string): void; /** * Set an individual style property. * * @param property Property name. * @param expression Property style expression. */ setStyleProperty(property: string, expression: string | null): void; setFilter(expression: string | null): void; private formattedName; private getPropertyMetadata; private static initializePropertyMetadataIndex; } type MapDataSourceType = 'vector' | 'geojson' | 'raster'; interface MapDataSourceOptions { /** Data source ID. */ id: string; /** Data source: dataset ID, external URL or GeoJSON FeatureCollection. */ src: MapGeojsonData | null; /** Data source type: 'vector', 'geojson', 'raster'. */ type: MapDataSourceType; /** Enable GeoJSON point clustering. */ cluster?: boolean; /** GeoJSON point clustering radius. */ clusterRadius?: number; /** GeoJSON point clustering maximum zoom level. */ clusterMaxZoom?: number; /** GeoJSON point clustering minimum points required to form a cluster. */ clusterMinPoints?: number; /** Data source limit - applied to dataset queries. */ limit?: number; /** Specify feature property to use as unique ID. */ featureId?: string; /** Set to override Flo.w host for this data source */ flowHost?: string; /** Set to override application-wide API key for this data source */ flowApiKey?: string; } interface MapDataSourceSpecification { type: MapDataSourceType; promoteId?: string; url?: string; data?: MapGeojsonData; cluster?: boolean; clusterRadius?: number; clusterMaxZoom?: number; clusterMinPoints?: number; } type MapGeojsonData = string | GeoJSON.FeatureCollection; interface MapStyleSpecification { version: 8; id: string; name?: string; metadata?: { insertionPoints: Record; }; center?: Array; zoom?: number; bearing?: number; pitch?: number; sources: { [_: string]: MapDataSourceSpecification; }; sprite?: string; glyphs?: string; transition?: { duration?: number | undefined; delay?: number | undefined; }; layers: Array; } interface FlowEngineEndpoint { host: string; apiKey?: string; } declare class MapDataSource { private static defaultOptions; private _options; private _srcExpression; private _parameters; private _state; get id(): string; get type(): MapDataSourceType; get featureId(): string | undefined; get dataSourceSpecification(): MapDataSourceSpecification; constructor(options: MapDataSourceOptions); bindState(state: StateStore | null): this; setSrc(val: MapGeojsonData): void; setParameter(name: string, expression: string | null): void; setFlowEndpoint(endpoint: FlowEngineEndpoint): void; private formattedName; private setSrcExpression; /** * Convert a src parameter to final URL * * @param src Data source url/dataset/tilesource ID * @param type Data source type * @returns URL */ private expandSrc; } /** Generates a new type by making a specified property of the original type `optional`. */ type PartialBy = Omit & Partial>; declare class FlowMapError extends FlowCoreError { constructor(message: string, originalError?: Error); } type MapFeatureId = string | number; interface MapSourceIdentifier { source: string; sourceLayer?: string; } /** * A MapFeatureIdentifier uniquely identifies a map feature by its ID and source. * * Used to uniquely identify a map feature when displaying popups or when setting/getting map feature state (see {@link FlowCoreMap.setFeatureState} and {@link FlowCoreMap.getFeatureState}). */ interface MapFeatureIdentifier { /** Unique feature ID */ id: MapFeatureId; /** ID of associated {@link MapDataSource} */ source: string; /** Map data source layer. Only required for custom vector data sources. */ sourceLayer?: string; } /** A map feature associated with a {@link MapDataSource}. */ interface MapFeature { /** Feature geometry */ geometry: GeoJSON.Geometry; /** Unique feature ID */ id?: MapFeatureId; /** ID of associated {@link MapLayer}. */ layer?: string; /** Feature properties */ properties: { [key: string]: any; }; /** ID of associated {@link MapDataSource} */ source: string; /** Map data source layer. Only required for custom vector data sources. */ sourceLayer?: string; /** Additional state associated with the feature. See {@link FlowCoreMap.setFeatureState}. */ state?: { [key: string]: any; }; } /** * Map parameters for use with the {@link FlowCoreMap.setCenter} and {@link FlowCoreMap.getCenter} methods. */ interface MapCenterOptions { /** Longitude of map center */ lng: number; /** Latitude of map center */ lat: number; /** Map zoom level */ zoom: number; /** Map bearing in degrees */ bearing: number; /** Map pitch in degrees */ pitch: number; } /** * Animation options for use with the {@link FlowCoreMap.setCenter} and {@link FlowCoreMap.setBounds} methods. */ interface MapAnimationOptions { /** Animation mode */ mode?: 'jump' | 'ease' | 'fly'; /** Animation duration in milliseconds */ duration?: number; /** Animation easing function. * * A function taking a time in the range 0..1 and returning a number where 0 is * the initial state and 1 is the final state. */ easing?: (time: number) => number; } interface MapPaddingOptions { /** * Padding in pixels from the top of the map canvas. */ top: number; /** * Padding in pixels from the bottom of the map canvas. */ bottom: number; /** * Padding in pixels from the left of the map canvas. */ right: number; /** * Padding in pixels from the right of the map canvas. */ left: number; } /** * This interface defines all event types emitted by {@link FlowCoreMap} and * the type of the corresponding event handler. * * {@link FlowCoreMap} extends [EventEmitter](https://github.com/dashed/EventEmitter3) to provide * event handling capabilities. The {@link FlowCoreMap.on} method is used to subscribe to events. * * @example * ```js * map.on('click', (event) => { * console.log('Map clicked at:', event.lngLat); * }); * ``` */ interface MapEventTypes { /** * Emitted when the map is clicked. * @group Mouse Events */ click: (event: MapMouseEvent) => void; /** * Emitted when the map is double-clicked. * @group Mouse Events */ dblClick: (event: MapMouseEvent) => void; /** * Emitted when the mouse is moved. Note that this event is throttled to 100ms. * * @group Mouse Events */ mouseMove: (event: MapMouseEvent) => void; /** * Emitted when the mouse leaves the map bounds. * @group Mouse Events */ mouseOut: (event: MapMouseEvent) => void; /** * Emitted when the map finishes panning or zooming. * * Note that this event is emitted following user interaction **and** * programmatic changes to the map. * @group Map Events */ moveEnd: (event: MapEvent) => void; /** * Emitted when the map is destroyed. * @group Map Events */ destroyed: (event: MapEvent) => void; /** * Emitted when the map has started or finished loading data. * @group Loading Events */ loading: (event: MapLoadingEvent) => void; /** * Emitted after a {@link MapDataSource} has been added to the map. * @group Source Events */ sourceAdded: (event: MapSourceEvent) => void; /** * Emitted after a {@link MapDataSource} has been removed from the map. * @group Source Events */ sourceRemoved: (event: MapSourceEvent) => void; /** * Emitted before a {@link MapDataSource} is added to the map. * @group Source Events */ beforeSourceAdded: (event: MapSourceEvent) => void; /** * Emitted before a {@link MapDataSource} is removed from the map. * @group Source Events */ beforeSourceRemoved: (event: MapSourceEvent) => void; /** * Emitted when map feature state changes following a call to {@link FlowCoreMap.setFeatureState}, * {@link FlowCoreMap.setFeatureStateBulk}, or {@link FlowCoreMap.removeFeatureState}. * @group Source Events */ sourceFeatureState: (event: MapSourceEvent) => void; /** * Emitted before the map style changes. * @group Style Events */ beforeStyleChanged: (event: MapStyleChangeEvent) => void; /** * Emitted after the map style has changed. * @group Style Events */ styleChanged: (event: MapStyleChangeEvent) => void; /** * Emitted when an error has occurred. * * If no error handler is registered, the error will be logged to the console. * * @group Error Events */ error: (event: FlowMapError) => void; } /** The set of all map event types. */ type MapEventType = keyof MapEventTypes; /** * Base class providing a common interface for all map events. * * @group Events * * @typeParam EventType The type of the event. * @typeParam TOrig The type of the original MapLibre event. */ declare class MapEvent { /** Event type */ type: EventType; /** Map instance that generated event */ map: FlowCoreMap; /** Original MapLibre event */ originalEvent?: TOrig; /** Creates an event from an original MapLibre event. */ static fromMaplibreEvent(type: string, map: FlowCoreMap, maplibreEvent: MapLibreEvent): MapEvent; /** * Constructs a map event. * * @param type Event type * @param map Map instance that generated the event * @param originalEvent Original MapLibre event that triggered the event */ constructor(type: EventType, map: FlowCoreMap, originalEvent?: TOrig); } /** Mouse event types. */ type MapMouseEventType = 'click' | 'dblClick' | 'mouseMove' | 'mouseOut'; /** * Mouse event class providing a common interface for all mouse events. * * @group Events */ declare class MapMouseEvent extends MapEvent { /** * The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner. */ point: [number, number]; /** * The geographic location on the map of the mouse cursor. */ lngLat: [number, number]; /** * Features found at the mouse coordinate. Features are ordered by map layer with features higher in the layer stack appearing first in the `features` array. * Features from non-interactive layers are excluded. */ features: MapFeature[]; static fromMaplibreMouseEvent(type: MapMouseEventType, maplibreMouseEvent: MapMouseEvent$1, map: FlowCoreMap, features: MapFeature[]): MapMouseEvent; constructor(type: MapMouseEventType, map: FlowCoreMap, point: [number, number], lngLat: [number, number], features: MapFeature[], originalEvent: MouseEvent); } /** Source event types. */ type SourceEventType = 'sourceAdded' | 'sourceRemoved' | 'beforeSourceAdded' | 'beforeSourceRemoved' | 'sourceFeatureState'; /** * Source event class providing a common interface for all source events. * * @group Events */ declare class MapSourceEvent extends MapEvent { /** Map data source ID */ source: string; constructor(type: SourceEventType, map: FlowCoreMap, source: string); } /** Loading event types. */ type LoadingEventType = 'loading'; /** * Loading event class providing a common interface for all loading events. * * @group Events */ declare class MapLoadingEvent extends MapEvent { /** Indicates whether the map is currently loading data. */ loading: boolean; constructor(map: FlowCoreMap, loading: boolean); } /** * Style change event types. * * @group Events */ type StyleChangeEventType = 'beforeStyleChanged' | 'styleChanged'; declare class MapStyleChangeEvent extends MapEvent { /** Old map style before changes. */ oldStyle: MapStyleSpecification; /** New map style after changes. */ newStyle: MapStyleSpecification; constructor(type: StyleChangeEventType, map: FlowCoreMap, oldStyle: MapStyleSpecification, newStyle: MapStyleSpecification); } interface Handler { (event: KeyboardEvent): boolean | void; } interface Bindings { [key: string]: Handler; } interface RemoveListener { (): void; } /** * The plugin manager is responsible for managing the lifecycle of map plugins and forwarding map events to plugin handlers. Each FlowCoreMap * instance has a plugin manager associated with it, which is created when the map is initialized. The map instance provides the {@link FlowCoreMap.usePlugin} * and {@link FlowCoreMap.getPlugin} for interacting with the plugin manager. * * Typically, it is not necessary to interact with the plugin manager directly unless you are implementing a custom plugin. */ declare class PluginManager { private _map; private _keyboardShortcutManager; private _plugins; private _initialized; private _exclusivePlugins; /** Returns the parent FlowCoreMap instance. */ get map(): FlowCoreMap; /** * Constructs a plugin manager for the provided FlowCoreMap instance. Note that plugin manager construction is performed automatically when a * map is created. */ constructor(map: FlowCoreMap); /** * Register a plugin for use with a map. This will create an instance of the plugin and call its `initialize` method. * * Note that this is typically called using the `usePlugin` method of a {@link FlowCoreMap} instance. * * @example * Register the HoverEffectPlugin for use with a map: ```js import { HoverEffectPlugin } from '@emuanalytics/flow-rdf-core/plugins'; map.usePlugin(HoverEffectPlugin); ``` * * @param plugin The plugin constructor to register. This must be a class that extends {@link MapPluginBase} * @param options Plugin-specific options (if any) to pass to the plugin constructor * @typeParam T Type of the plugin being registered * @returns The registered plugin instance */ usePlugin(plugin: PluginConstructor, options?: PluginOptionsType): T; /** * Retrieve a plugin previously registered with a map. This is necessary to access plugin-specific methods or properties. * * Note that this is typically called using the {@link FlowCoreMap.getPlugin} method. * * @example * Retrieve the SelectionPlugin and clear all selections for a specified map data source: ```js const selectionPlugin = map.getPlugin(SelectionPlugin); selectionPlugin.selectFeatures('data-source', []); ``` * * @param plugin The plugin to retrieve (identified by the plugin constructor or name) * @typeParam T Type of the plugin being retrieved * @returns The registered plugin instance */ getPlugin(pluginOrName: PluginConstructor | string): T; /** * Unregister the specified plugin. * * @param pluginOrName The plugin to unregister (identified by the plugin constructor or name) * @returns The plugin manager instance to allow method chaining * @typeParam T Type of the plugin being unregistered */ removePlugin(pluginOrName: PluginConstructor | string): this; /** * Unregister all plugins. * * @returns The plugin manager instance to allow method chaining */ removeAllPlugins(): this; /** * Mark the specified plugin as 'exclusive'. This disables other non-exclusive plugins until the {@link removeExclusivePlugin} method is called. * * This is used by the annotation plugin to disable map selection and hover effects when annotation features are being drawn by the user. */ setExclusivePlugin(plugin: MapPluginBase): this; /** * Remove the 'exclusive' flag from the specified plugin. This allows other non-exclusive plugins to receive events again. */ removeExclusivePlugin(plugin: MapPluginBase): this; /** * This method is called by plugins to register keyboard shortcuts with the {@link KeyboardShortcutManager}. * * @example * Register keyboard shortcuts from a map plugin: ```js // Add shortcuts this.removeShortcuts = this.pluginManager.addKeyboardShortcuts({ 'Enter,Escape': () => this.commit(), KeyP: () => this.createFeature('Polygon'), KeyL: () => this.createFeature('LineString'), KeyM: () => this.createFeature('Point'), KeyC: () => this.createFeature('Circle') }); ... // Remove shortcuts this.removeShortcuts(); ``` * * @param keyboardShortcuts Key bindings to register * @param priority Key binding priority * @returns Function that can be called to remove the keyboard shortcuts */ addKeyboardShortcuts(keyboardShortcuts: Bindings, priority?: number): RemoveListener; /** * This method is called internally to forward map events to active plugin handlers. * * @param eventName The event to forward * @param args Event arguments */ forwardEvent(eventName: T, ...args: Parameters): void; /** * This method is called internally to forward map style change events to active plugin handlers. * * @param eventName The event to forward */ forwardStyleChangeEvent(event: MapStyleChangeEvent): MapStyleSpecification; /** * This method is called internally to forward exclusivity changes to registered plugins. */ private forwardSetExclusivePlugin; } type PluginOptionsType = T extends MapPluginBase ? Options : never; type PluginEventsType = T extends MapPluginBase ? Events : never; type PluginConstructor = new (pluginManager: PluginManager, options?: PluginOptionsType) => T; type EventHandlers = { [P in keyof T as P extends string ? `handle${Capitalize

}` : never]+?: T[P]; }; interface MapPluginBase { /** Implemented by a plugin to perform initialization tasks. This method is called by the {@link PluginManager} when a plugin is created. */ initialize?(): void; /** Implemented by a plugin to perform clean-up tasks. This method is called by the {@link PluginManager} when a plugin is destroyed. */ destroy?(): void; /** Implemented by a plugin to handle map click events. */ handleClick?(event: MapMouseEvent): void; /** Implemented by a plugin to handle map double-click events. */ handleDblClick?(event: MapMouseEvent): void; /** Implemented by a plugin to handle mouse move events. */ handleMouseMove?(event: MapMouseEvent): void; /** Implemented by a plugin to handle mouse out events. */ handleMouseOut?(event: MapEvent): void; /** Implemented by a plugin to handle map move end events. */ handleMoveEnd?(event: MapEvent): void; /** Implemented by a plugin to handle source added events. */ handleSourceAdded?(event: MapSourceEvent): void; /** Implemented by a plugin to handle source removed events. */ handleSourceRemoved?(event: MapSourceEvent): void; /** Implemented by a plugin to handle before-source-added events. */ handleBeforeSourceAdded?(event: MapSourceEvent): void; /** Implemented by a plugin to handle before-source-removed events. */ handleBeforeSourceRemoved?(event: MapSourceEvent): void; /** Implemented by a plugin to handle feature state events.*/ handleSourceFeatureState?(event: MapSourceEvent): void; /** Implemented by a plugin to handle before-style-changed events. */ handleBeforeStyleChanged?(event: MapStyleChangeEvent): MapStyleSpecification | undefined; /** Implemented by a plugin to handle style changed events. */ handleStyleChanged?(event: MapStyleChangeEvent): void; /** Implemented by a plugin to handle map loading events. */ handleLoading?(event: MapLoadingEvent): void; /** Implemented by a plugin to handle map loading events. */ handleSetExclusivePlugin?(exclusivePlugins: MapPluginBase[]): void; /** Implemented by a plugin to handle map error events. */ handleError?(error: FlowMapError): void; } /** * Base class for map plugins. This provides a common interface for all map plugins and defines the available handlers that * a plugin can implement. The {@link PluginManager} is responsible for managing the lifecycle of plugins and calling the appropriate handlers when events occur. * * Flo.w RDF Core provides a number of built-in plugins that extend the functionality of the map, such as the {@link HoverEffectPlugin} and {@link PopupPlugin}. * Custom plugins can be created by extending {@link MapPluginBase} and implementing the desired handlers. * * @typeParam Options Type for plugin options. This is used to define the plugin-specific options that can be passed to the plugin when it is created. * @typeParam Events Type for plugin events. This is used to define the events that the plugin can emit. * * @noInheritDoc */ declare abstract class MapPluginBase extends EventEmitter { private _pluginManager; options: Options; /** * The map instance associated with this plugin. */ get map(): FlowCoreMap; /** The {@link PluginManager} that is managing this plugin. */ get pluginManager(): PluginManager; /** The name of this plugin. This is used as a unique identifier when registering and retrieving a plugin. */ abstract readonly name: string; /** Constructs an plugin instance. Note this this is called internally when registering a plugin. */ constructor(pluginManager: PluginManager, options?: Options); } /** * @internal */ interface ImageRegistryEntry { id: string; src: string; width?: number; height?: number; pixelDensity?: number; recolor?: boolean; image?: HTMLImageElement; } /** * * The `ImageRegistry` is a container for map icon images. * * Registered images can be used in `symbol` map layers by using the registered `is` as the `iconImage` style property. * * :::warning * To fully support recoloring and halo effects, the source image should be a SDF (signed distance field) image. * ::: * * @example * Register and use a map icon image: ```ts // Register the image map.registerImage('aircraft','https://flow-cdn.emu-analytics.net/centralised-airports/vehicles/aircraft.png', 50, 50, 2, true); // Use the image in a map layer const aircraftIcons = new MapLayer({ id: 'aircraft_icons', type: 'symbol', source: 'aircraft_source', style: layerStyle('symbol') .iconImage('aircraft') .iconColor('red') }); ``` * * * */ declare class ImageRegistry { private _registry; private _unknownImage; get unknownImage(): ImageRegistryEntry & { image: HTMLImageElement; }; /** * Register a map icon image. * * @param id Image ID. * @param src Image source URL. * @param width Image display width. * @param height Image display height. * @param pixelDensity Image pixel density. Defaults to `2` - the source image should be @2x resolution to enable better quality rendering on high-resolution displays. * @param recolor Set to `true` to allow recoloring of map icon image using map layer style properties. */ registerImage(id: string, src: string, width?: number, height?: number, pixelDensity?: number, recolor?: boolean): ImageRegistryEntry; /** * Get an image registry entry. * * @param id Image ID. * @returns The image registry entry. */ getImage(id: string): ImageRegistryEntry & { image: HTMLImageElement; }; /** * * @param src Image source URL. * @param width Image display width in pixels. * @param height Image display height in pixels. * @param pixelDensity Image pixel density. Defaults to `2` - the source image should be @2x resolution to enable better quality rendering on high-resolution displays. */ private loadImage; } /** * Options for creating a {@link MapFeatureStream}. * * See {@link FlowCoreMap.featureStream } for more information. */ interface FeatureStreamOptions { /** An array of feature IDs to track. Note that {@link MapDataSourceOptions.featureId} * must be set on the map data source to specify which feature property to use as the feature ID. */ featureIds: Array; /** Set to `true` to fire the stream immediately when subscribed. If `false`, the stream will only * emit when feature data changes. */ fireImmediately?: boolean; /** The map instance. */ map: FlowCoreMap; /** The map data source ID to track. */ source: string; /** * The map data source layer to track. This only applies to vector data sources and can be * omitted for Flo.w vector tiles. Defaults to `'geometry'`. */ sourceLayer?: string; } /** * A observable stream of map feature data. Subscribe to an instance of this class to receive * updates when map feature data changes. * * :::warning * If the map is panned or zoomed by the user, features that are no longer visible may be unloaded * from the map. If a feature that is being tracked is unloaded, it will be removed from * feature stream updates. * * If it is essential to track a feature even when it is unloaded, consider using a Flo.w reactive * query independently of map data. * * ::: * * See {@link FlowCoreMap.featureStream } for usage information. */ declare class MapFeatureStream { private _boundHandleLoading; private _boundHandleSourceFeatureState; private _options; private _sourceLoadCount; private _sourceLoaded; constructor(options: FeatureStreamOptions); /** * Returns feature data corresponding to the requested feature IDs. This is a computed property that will * automatically update when the feature data changes. Accessing this property within a reactive * context will automatically trigger a reactive update. * * :::info * This method provides an alternative to {@link subscribe} for responding to feature data updates. * ::: * * @example * ```js * const featureStream = myMap.featureStream({ * featureIds: ['feature1', 'feature2'], * source: 'my-source' * }); * * const disposer = appState.autoRun(() => { * const featureData = featureStream.featureData; * console.log('Feature data changed:', featureData); * }); * ... * disposer(); * ``` * */ get featureData(): Record; /** Returns the feature IDs being tracked. */ get featureIds(): Array; /** Update the feature IDs being tracked. */ set featureIds(featureIds: Array); /** * Subscribe to the feature stream. The supplied handler will be called whenever the feature data changes. * * :::warning * Subscriptions should be disposed of when no longer required by calling their `unsubscribe()` method. * ::: */ subscribe(handler: (featureData: Record) => void): ISubscription; private featureFromMaplibreFeature; private handleLoading; private handleSourceFeatureState; private queryFeatureData; private resume; private suspend; } /** * Map options supplied when creating a new {@link FlowCoreMap} instance. */ interface MapOptions extends Omit { /** Unique map identifier. */ id?: string; /** * Base map style. * * Specify a pre-defined base style identifier or supply a complete Maplibre style specification. * */ baseStyle?: string | MapStyleSpecification; /** Map container selector or element. This specifies where in the DOM the map will be inserted. */ container: string | HTMLElement; /** * Click tolerance in pixels. This defines a radius around the mouse position when selecting map features. * Increase this value to make clicking on line features easier. (Default: 0) */ featureClickTolerance?: number; /** * Flow context identifier. This defines the {@link FlowContext} to use for data requests and reactive * state. If not specified, the default context will be used. Note that the map initialization will * pause until the context is initialized and ready to be used. */ contextId?: string; } /** * The core map class providing a high-level declarative API for creating and updating interactive maps. * * {@link FlowCoreMap} wraps the [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) API to add reactive updating * and declarative map data sources and layers. FlowCoreMap integrates with Flo.w reactive queries and reactive state to * ensure that the map is in sync with the underlying data. * * :::info * FlowCoreMap provides basic map functionality. Other features such as popups, selection, and exporting map images are * provided by plugins. See {@link FlowCoreMap.usePlugin} for more information. * ::: * * @example * Creating a basic map: ```ts import { FlowCoreMap } from '@emuanalytics/flow-rdf-core'; // Create a new map instance const map = new FlowCoreMap({ id: 'air-quality-map', container: '#map-container', baseStyle: 'fjord', }); // Wait for the map to be initialized map.initialized.then(() => { // Create a map data source that loads geospatial data from the `airquality` Flo.w dataset. const source = new MapDataSource({ id: 'airquality-source', type: 'vector', src: 'airquality', featureId: 'label' }); // Create a map layer that uses the data source and displays circles for each feature. const circleLayer = new MapLayer({ id: 'circle-layer', type: 'circle', source: 'airquality-source', style: layerStyle('circle') .circleColor('red) .circleRadius(10) .build() }); // Add the data source and layer to the map. map.transaction(() => { map.addSource(source); map.addLayer(circleLayer); }); }); ``` */ declare class FlowCoreMap extends EventEmitter$1 { private static _defaultOptions; private _context; private _initialized; private _loading; private _debouncedEmitSourceEvent; private _imageRegistry; private _options; private _pluginManager; private _resolveInitialized; private _style; private _styleUpdateSubscription; private _throttledMouseMove; private _maplibreMap; /** * Return the underlying [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) map instance. This can be used to * access the full Maplibre API for advanced use cases. * * :::danger * Use with caution. Directly modifying the Maplibre map instance can cause unexpected behavior particularly if * the changes conflict with the {@link FlowCoreMap} state. Do not call any Maplibre methods that add or * remove map layers or data sources, or modify the map style directly. * ::: */ get maplibreMap(): Map; /** * Constructs a new `FlowCoreMap` instance. * * The map will be initialized with the specified options and base style. * When the map API is ready for use, the {@link initialized} promise will resolve. * * @example * ```js * const map = new FlowCoreMap({ * id: 'my-map', * container: '#map-container', * baseStyle: 'fjord', * }); * * map.initialized.then(() => { * console.log('Map initialized'); * // Configure map data sources and layers * ... * }); * ``` * */ constructor(options: MapOptions); /** * Returns the {@link FlowContext} associated with this map. */ get context(): FlowContext; /** * Returns the map's container element. */ get container(): HTMLElement; /** * Returns the map identifier. */ get id(): string; /** * Returns a promise that resolves when the map is fully initialized and ready for use. * * @example * ```js * map.initialized.then(() => { * console.log('Map ready fo use'); * // Configure map data sources and layers * ... * }); * ``` */ get initialized(): Promise; /** * Returns the full Maplibre style specification for this map. This is a `computed` property and will trigger * reactive updates when accessed in a reactive context. * * @example * ```js * stateStore.autorun(() => { * const style = map.styleSpecification; * console.log('Map style was updated', style); * }); * ``` */ get styleSpecification(): MapStyleSpecification; /** * @internal * * Used by map export to get images added to map. */ get imageRegistry(): ImageRegistry; /** * Adds a {@link MapLayer} to the map. * * @example * Create a new circle layer and add it to the map: * ```js * const circleLayer = new MapLayer({ * id: "circle-layer", * type: "circle", * source: "airquality", * style: layerStyle("circle") * .circleColor('red') * .build() * }); * * map.addLayer(layer); * ``` */ addLayer(layer: MapLayer): MapLayer; /** * Creates a new {@link MapLayer} instance using the provided options * and adds it to the map. * * @example * Create a new circle layer and add it to the map in a single step: * ```js * map.addLayer({ * id: "circle-layer", * type: "circle", * source: "airquality", * style: layerStyle("circle") * .circleColor('red') * .build() * }); * ``` */ addLayer(layerOptions: MapLayerOptions): MapLayer; /** * Adds a {@link MapDataSource} to the map. */ addSource(source: MapDataSource): MapDataSource; /** * Creates a new {@link MapDataSource} instance using the provided options * and adds it to the map. */ addSource(sourceOptions: MapDataSourceOptions): MapDataSource; /** * Destroys the map instance and removes it from the DOM. */ destroy(): void; /** * Called internally and by map plugins to notify an error. * * To handle errors, attach an error event listener to the map instance as follows: * * ```js * map.on('error', (error) => { * // Handle error * console.error(`A map error occurred: ${error.message}`); * }); * ``` * * If no error event listener is attached, the error will be logged to the console. */ emitError(message: string, originalError?: Error): void; /** Used internally and by plugins to emit a map event. */ emitEvent>(event: T): void; /** * Returns an observable {@link MapFeatureStream} for the specified feature identifiers. The feature stream * will emit feature data for the specified features as their properties updated. * Call the {@link MapFeatureStream.subscribe} method to receive feature data updates. * * :::warning * All subscriptions should be disposed of when no longer needed. * ::: * * This method is used internally by the map popup plugin to receive feature properties for rendering * popup content but can be used whenever you want to track feature data changes for a set of features. * * :::warning * The feature stream will only emit feature data for features that are currently visible on the map. If the * user pans the map away from the requested features, the map will eventually unload the features and will * stop providing updates. * ::: * * @example * ```js * const subscription = map.featureStream({ * source: 'my-data-source', * featureIds: ['feature-1', 'feature-2'] * }).subscribe((featureData) => { * console.log('Feature data updated', featureData); * }); * ... * subscription.unsubscribe(); * ``` * * @param options * @returns */ featureStream(options: Omit): MapFeatureStream; /** * Returns the feature state for the specified map feature. * * See ##TODO for more information about map feature state. * * @param feature - Map feature identifier */ getFeatureState(feature: MapFeatureIdentifier): Record; /** * Returns the {@link MapLayer} with the specified ID. * * @param id - Map layer ID */ getLayer(id: string): MapLayer; /** * Returns all map layers that match the specified filter function. * If no filter is specified, all layers are returned. * * @param filter - Filter function. Return `true` to include the map layer in the result. */ getLayers(filter?: (layer: MapLayer) => boolean): MapLayer[]; /** * Returns a registered map plugin. * * @example * Retrieve the popup plugin from a map: * ```js * const popupPlugin = map.getPlugin(PopupPlugin); * popupPlugin.registerPopup('my-popup', {...}); * ``` * * @param pluginOrName - Plugin constructor or name as a string. */ getPlugin(pluginOrName: PluginConstructor | string): T; /** * Returns the {@link MapDataSource} with the specified ID. * * @param id - Data source ID */ getSource(id: string): MapDataSource; /** * Returns all {@link MapDataSource} instance that match the specified filter function. * If no filter is specified, all data sources are returned. * * @param filter - Filter function. Return `true` to include the map data source in the result. */ getSources(filter?: (source: MapDataSource) => boolean): MapDataSource[]; /** * Register a map icon image. * * The image can be used on [symbol-type map layers](/flow-rdf-core/layer-reference/symbol) by specifying the image ID * as the [`iconImage`](/flow-rdf-core/layer-reference/symbol#icon-image) property. * * :::warning * To fully support recoloring and halo effects, the source image should be a SDF (signed distance field) image. * * See [MapLibre Sprite](https://maplibre.org/maplibre-style-spec/sprite/#sprite-source-format) documentation. * ::: * * @example * Register and use a map icon image: ```ts // Register the image map.registerImage('aircraft','https://flow-cdn.emu-analytics.net/centralised-airports/vehicles/aircraft.png', 50, 50, 2, true); // Use the image in a map layer const aircraftIcons = new MapLayer({ id: 'aircraft_icons', type: 'symbol', source: 'aircraft_source', style: layerStyle('symbol') .iconImage('aircraft') .iconColor('red') }); ``` * * * @param id Image ID. * @param src Image source URL. * @param width Image display width. * @param height Image display height. * @param pixelDensity Image pixel density. Defaults to `2` - the source image should be @2x resolution to enable better quality rendering on high-resolution displays. * @param recolor Set to `true` to allow recoloring of map icon image using map layer style properties. */ registerImage(id: string, src: string, width?: number, height?: number, pixelDensity?: number, recolor?: boolean): void; /** * Remove feature state properties from a map feature. * * @param feature Feature to modify. Specify `null` to modify all map features. * @param key Feature state key to remove. Specify `null` to remove all feature state for specified feature(s). */ removeFeatureState(feature: PartialBy, key?: string, fireEvent?: boolean): void; /** * Remove the specified {@link MapLayer} from the map. * @param id - Map layer ID */ removeLayer(id: string): this; /** * Remove the specified {@link MapDataSource} from the map. * @param id - Map data source ID */ removeSource(id: string, removeLayers?: boolean): this; /** * Set the map's base style. * * ##TODO list of available base styles * * @param style - A style identifier or a Maplibre style specification. */ setBaseStyle(style: string | MapStyleSpecification): Promise; /** * Returns the map's current center, bearing, pitch, and zoom level. */ getCenter(): MapCenterOptions; /** * Sets one or more of the map's center, bearing, pitch, and/or zoom level. * Animation options can be specified to animate the transition. If animation options are not specified, * the map will jump to the new view immediately. * * A promise is returned that resolves when the map has finished moving. * * @example * Zoom the map and log to console when finished: * ```js * const { zoom } = map.getCenter(); * map.setCenter({zoom: zoom + 2}, {mode: 'ease', duration: 2000}).then(() => { * console.log('Map zoomed '); * }); * ``` * * @param center * @param animationOptions * @returns A promise that resolves when the map has finished moving. */ setCenter(center: Partial, animationOptions?: MapAnimationOptions): Promise; /** * Returns the map's current bounds in degrees as an array of `[west, south, east, north]`. * * See also {@link getVisibleBounds}. */ getBounds(): [number, number, number, number]; /** * Set the map's bounds to the specified bounding box. * * Animation options can be specified to animate the transition. If animation options are not specified, * the map will jump to the new view immediately. * * Specify the `padding` option to add padding around the bounding box in pixels. * * @param bounds - Bounding box in degrees as an array of `[west, south, east, north]`. * @param options - Animation and padding options. */ setBounds(bounds: [number, number, number, number], options?: MapAnimationOptions & { padding?: number; }): void; /** * Returns the map's current visible bounds in degrees as an array of `[west, south, east, north]`. * * The visible bounds may differ from the map's full bounds if fixed positioning is used. With fixed positioning, * the map's canvas extends outside its container underneath other elements like side-bars. This allows side-bars * to be opened and closed without re-rendering the map. The visible bounds represent the region of the map that * is currently visible within the map's container. * * See also {@link getBounds}. */ getVisibleBounds(): [number, number, number, number]; /** * Set feature state properties for a map feature. * * ##TODO more info on feature state * * @param feature Feature to modify. * @param state Feature state properties to set. */ setFeatureState(feature: MapFeatureIdentifier, state: Record, fireEvent?: boolean): void; /** * Set feature state properties in bulk for multiple map features. * * ##TODO more info on feature state * * @param feature Feature to modify. * @param state Feature state properties to set. */ setFeatureStateBulk(sourceId: MapSourceIdentifier, featureState: { [featureId: MapFeatureId]: Record; }): void; /** * Run a series of map updates as a single transaction. This can be used to batch multiple updates * while only triggering a single re-render of the map. * * @example * ```js * map.transaction(() => { * map.addSource({ ... }); * map.addLayer({ ... }); * map.addLayer({ ... }); * }); * ``` * * @param fn - Function containing map updates to run as a transaction. */ transaction(fn: () => void): void; /** * Register a map plugin with the map instance. * * Some plugins may require additional options to be passed when registering the plugin. * * @example * Register the HoverEffectPlugin with the map: * ```js * map.usePlugin(HoverEffectPlugin); * ``` * * @param plugin - Plugin constructor or name * @param options - Plugin-specific options * @returns The plugin instance */ usePlugin(plugin: PluginConstructor, options?: PluginOptionsType): T; /** * Register multiple map plugins with the map instance. * * @example * Register multiple plugins with the map: * ```js * map.usePlugins([HoverEffectPlugin, PopupPlugin]); * ``` * * @param plugins - Array of plugin constructors to register */ usePlugins(plugins: PluginConstructor[]): void; private get formattedName(); private bindMapEvents; private featureFromMaplibreFeature; private featureQueryBox; private handleLoading; private handleMissingImage; private handleMouseClick; private handleMouseMove; private initialize; private loadBaseStyle; private transformMapRequest; private updateMapStyle; } /** * A template function for rendering popup content. The function receives the associated * map feature and the reactive state store as arguments. The function can reference * feature properties and reactive state properties to render the popup content. * * The function should return popup content in one of the following formats: * - An HTML string (set as the innerHTML of the popup) * - An HTML node (appended to the popup) * - A [lit-html](https://lit.dev/docs/v1/lit-html/introduction/) template * * The template function is called reactively whenever the feature or state changes to * re-render the popup content. If a lit-html template is returned, the popup will be re-rendered * efficiently using a minimal set of DOM updates. * * @param feature The map feature associated with the popup * @param state The reactive state store to access reactive properties * */ type MapPopupTemplateFn = (feature: MapFeature | null, state: TState) => string | Node | lit.TemplateResult; /** Popup events emitted by {@link MapPopup} */ interface MapPopupEvents { closed: (popup: MapPopup) => void; } /** * Creation options for a {@link MapPopup}. */ interface MapPopupOptions { /** Specify a CSS class to add to the popup. */ class?: string; /** Enable the popup's 'close' button. */ closeButton?: boolean; /** Enable closing the popup when the user clicks the map. */ closeOnClick?: boolean; /** Enable closing the popup when the map is moved. */ closeOnMove?: boolean; /** Specify the popup content as an HTML string, HTML node or a template function. */ content: string | Node | MapPopupTemplateFn; /** Maximum width of popup in CSS units. */ maxWidth?: string; /** Enable repositioning the popup when its associated map feature moves. (default true) */ trackFeature?: boolean; } /** * A {@link MapPopup} instance is used to display information about a map feature as a popup on a {@link FlowCoreMap}. The content of the popup * can be defined as static HTML or a template function that has access to the map feature's properties and the reactive state store. * * ## Rendering popup content * * Popup content can be defined at time of creation in one of the following ways: * - An HTML string * - An HTML node * - A template function that returns one of the above **or** a [lit-html](https://lit.dev/docs/v1/lit-html/introduction/) template * * If content is provided using a template function, the function is called reactively whenever the associated map feature or state changes. * The popup will be re-rended using the updated content returned from the template function. If using a lit-html template, the popup will be re-rendered * efficiently using a minimal set of DOM updates. If the template function returns a static HTML string or node, the popup content will be replaced with the * new content. * * ## Automatic feature tracking * * A popup is usually anchored to its associated map feature, which is specified when opening the popup. Following a map data source update, if the feature has * moved then the popup will be repositioned to the new location. This is enabled by default using the `trackFeature` option. Set `trackFeature` to `false` to disable * this behavior. * * :::info * It is usually more convenient to use the {@link PopupPlugin} to create and manage popups automatically when features are selected by the user. * {@link MapPopup} can be used directly for custom use cases. * ::: * * @example * Create a popup and open manually at a specific location: ```js import { MapPopup } from '@emuanalytics/flow-rdf-core'; const popup = new MapPopup(map, { content: 'Hello World', closeButton: true, maxWidth: '200px' }); popup.open([-1, 51.5]); ... popup.close(); ``` * * Create a popup following a mouse click event to track a map feature: ```js import { MapPopup, html } from '@emuanalytics/flow-rdf-core'; map.on('click', (event) => { if (event.features.length > 0) { // Feature clicked const feature = event.features[0]; const popup = new MapPopup(event.map, { // Content specified as a lit-html template function content: (feature) => html`Clicked on ${feature?.properties.name}`, closeButton: true }); // Open the popup at location of mouse click and attach it to the clicked feature popup.open(event); } }); ``` */ declare class MapPopup extends EventEmitter$1 { readonly map: FlowCoreMap; readonly options: MapPopupOptions; private _feature?; private _contentContainer; private _featureStream; private _maplibrePopup; private _featureStreamDisposer?; /** * Constructs a new {@link MapPopup} instance. * * Typically, a popup is created by interacting with the PopupPlugin or SelectionPlugin rather than instantiating a popup directly. * * @param map Parent map * @param options Popup options */ constructor(map: FlowCoreMap, options: MapPopupOptions); /** * Get the map feature associated with the popup. */ get feature(): MapFeatureIdentifier | undefined; set feature(feature: MapFeatureIdentifier | undefined); /** * Close the popup. */ close(): void; /** * Move the popup to the specified location. * * @param lngLat New location. */ moveTo(lngLat: [number, number]): void; /** * Open the popup by providing a mouse event. * * The popup position and associated map feature are determined from the event. * * @param event Mouse event triggering the popup */ open(event: MapMouseEvent): void; /** * Open the popup by providing a location and associated map feature to display in the popup. * * @param lngLat Coordinate at which to display the popup * @param feature Map feature to associate with the popup */ open(lngLat: [number, number], feature?: MapFeatureIdentifier): void; /** * Returns CSS classes to add to the popup. */ private cssClasses; /** * Update the popup in response to feature data changes. * * The popup may be moved or re-rendered depending on the nature of the * feature changes. * * @param feature Map feature associated with the popup */ private handleFeatureUpdate; /** * Called when the popup is closed to clean up resources. */ private popupCloseHandler; /** * Render the popup content. * * If the content is defined using a template function, the function is called passing * in the associated map feature and the reactive state store. * * @param feature The map feature associated with the popup. */ private renderContent; } /** * The `MapRegistry` is a container for [[FlowCoreMap]] instances. * * Maps can be registered and retrieved by ID. */ declare class MapRegistry { private _maps; /** * Register a Flo.w map. * * @param map Map to register. */ registerMap(map: FlowCoreMap): FlowCoreMap; /** * Un-register a Flo.w map. * * ```mermaid * graph TB * mermaid.js --> TypeDoc; * ``` * * @param map - the map to unregister. */ unregisterMap(map: FlowCoreMap): void; /** * Retrieve the specified map. * * This method returns a promise that resolves when the map has been initialized. * * @param id Map ID. */ getMap(id: string): Promise; } /** Result format of a [[Query]]. */ type QueryResultFormat = 'json' | 'geojson' | 'csv'; /** [[FlowQueryDefinition]] 'attributes' entry. */ type QueryAttribute = string | [any, string]; /** * [[FlowQueryDefinition]] 'where' clauses. */ interface QueryWhereClauses { [attribute: string]: any; } /** * [[FlowQueryDefinition]] extra parameters. */ interface QueryExtraParams { [key: string]: string | number; } /** * [[FlowQueryDefinition]] 'order' clause. * * A field name or [field, asc/desc] tuple. */ type QueryOrderClause = string | number | [string | number, 'asc' | 'desc']; interface QuerySampleOptions { percentage: number; method?: 'system' | 'bernoulli'; seed?: number; } /** * Definition of a Flo.w reactive dataset query. */ interface QueryDefinition { /** ID of dataset to query. */ datasetId: string; /** Attributes to return in results. */ attributes?: QueryAttribute[]; /** DISTINCT ON attributes */ distinct?: string | string[]; /** Filter results using 'where' clauses. */ where?: QueryWhereClauses; /** Sort results by attributes. */ order?: QueryOrderClause[]; /** Group results by attributes. */ group?: (string | number)[]; /** Start offset of returned results */ offset?: number; /** Limit number of returned results */ limit?: number; /** Format of returned data. */ format?: QueryResultFormat; /** Additional query parameters. */ params?: QueryExtraParams; /** Sampling options. */ sample?: QuerySampleOptions; } interface QueryOptions { id?: string; fireImmediately?: boolean; delay?: number; contextId?: string; } /** * [[FlowQuery]] query definition function. * * @typeParam TState Type of application state. */ type QueryDefinitionFn = (this: TState, store: TState) => QueryDefinition | Promise | null; /** * [[FlowQuery]] result transform function. * * @typeParam T Type of transformed query results. */ type QueryResultTransformFn = (results: any) => T | null; declare class Query { private queryFn; private static _defaultOptions; static setDefaultOptions(options: QueryOptions): void; private _options; private _committer; private _disposer; private _transformFn; private get formattedName(); get id(): string; results: TResults | null; busy: boolean; error: Error | null; constructor(queryFn: QueryDefinitionFn, transformFn?: QueryResultTransformFn, options?: QueryOptions); destroy(): void; runImmediately(): Promise; private wake; private sleep; private runQuery; } declare function query(queryFn: QueryDefinitionFn, options: QueryOptions): Query; declare function query(queryFn: QueryDefinitionFn, transformFn?: QueryResultTransformFn, options?: QueryOptions): Query; declare function queryMany(queryFn: QueryDefinitionFn, options: QueryOptions): Query; declare function queryMany(queryFn: QueryDefinitionFn, transformFn?: QueryResultTransformFn, options?: QueryOptions): Query; declare function queryOne(queryFn: QueryDefinitionFn, options: QueryOptions): Query; declare function queryOne(queryFn: QueryDefinitionFn, transformFn?: QueryResultTransformFn, options?: QueryOptions): Query; /** * The `QueryRegistry` is a container for [[Query]] instances. * * Queries can be registered and retrieved by ID. */ declare class QueryRegistry { private _queries; /** * Register a Flo.w reactive query. * * @param query Query to register. */ registerQuery(query: Query): void; /** * Un-register a Flo.w reactive query. * * @param query Query to unregister. */ unregisterQuery(query: Query): void; /** * Retrieve the specified query. * * This method returns a promise that resolves when the query has been initialized. * * @param id Map ID. */ getQuery(id: string): Promise>; } declare const DEFAULT_CONTEXT_ID = "default"; interface FlowContextOptions { id?: string; host?: string; apiKey: string; state: TState; enableDebug?: boolean; } declare class FlowContext { private static _defaultOptions; private _options; get id(): string; readonly flowClient: Client; readonly state: TState; readonly maps: MapRegistry; readonly queries: QueryRegistry; /** The Flo.w debugger. Available as `window.FDBG` in the browser's web developer console. */ readonly debugger?: Debugger; /** * Constructs a new `FlowCoreContext`. * * Use [[ContextRegistry.initializeContext]] to create an instance of `FlowCoreContext`. * * @param options - The context options. */ constructor(options: FlowContextOptions); evaluateExpression(expr: string): any; } export { type MapOptions as $, type Annotation as A, BackgroundLayerStyleBuilder as B, CircleLayerStyleBuilder as C, DEFAULT_CONTEXT_ID as D, type MapLayerExpression as E, type FlowContextOptions as F, type MapLayerSpecification as G, HeatmapLayerStyleBuilder as H, type MapLayerPropertyMetadataIndex as I, type MapDataSourceType as J, type MapDataSourceOptions as K, LineLayerStyleBuilder as L, type MapStyleSpecification as M, type MapDataSourceSpecification as N, type MapGeojsonData as O, type ParserExpression as P, QueryRegistry as Q, ReactiveExpression as R, StateStore as S, type MapAnimationOptions as T, type MapCenterOptions as U, type MapFeature as V, type MapFeatureIdentifier as W, type MapPaddingOptions as X, type MapSourceIdentifier as Y, MapFeatureStream as Z, type FeatureStreamOptions as _, MapDataSource as a, FlowCoreMap as a0, type MapEventTypes as a1, type MapEventType as a2, MapEvent as a3, MapMouseEvent as a4, MapSourceEvent as a5, MapLoadingEvent as a6, MapStyleChangeEvent as a7, type MapPopupTemplateFn as a8, type MapPopupOptions as a9, type PluginEventsType as aA, type PluginConstructor as aB, type EventHandlers as aC, MapPopup as aa, Query as ab, query as ac, queryMany as ad, queryOne as ae, type QueryResultFormat as af, type QueryAttribute as ag, type QueryWhereClauses as ah, type QueryExtraParams as ai, type QueryOrderClause as aj, type QuerySampleOptions as ak, type QueryDefinition as al, type QueryOptions as am, type QueryDefinitionFn as an, type QueryResultTransformFn as ao, traceReaction as ap, type Path as aq, type PathValue as ar, type StoreConstructor as as, type StoreAnnotations as at, type SerializationFormat as au, type MapFeatureId as av, MapPluginBase as aw, PluginManager as ax, type PartialBy as ay, type PluginOptionsType as az, MapLayer as b, FlowContext as c, FlowCoreError as d, FlowCoreExpressionError as e, FlowMapError as f, MapRegistry as g, type FlowCoreExpressionCustomFunction as h, type FlowCoreExpressionCustomFunctionSignature as i, type FlowCoreExpressionCustomFunctions as j, type ParserExpressionWithIndex as k, type ParserFunctionExpression as l, type ParserIndex as m, type ParserProgram as n, type FlowEngineEndpoint as o, type MapLayerType as p, FillLayerStyleBuilder as q, SymbolLayerStyleBuilder as r, FillExtrusionLayerStyleBuilder as s, RasterLayerStyleBuilder as t, HillshadeLayerStyleBuilder as u, layerStyle as v, MapLayerStyleBuilder as w, StyleExpression as x, expr as y, type MapLayerOptions as z };