/** * @typedef {import("./layers").EoxLayer} EoxLayer * @typedef {import("./types").EOxAnimationOptions} EOxAnimationOptions * @typedef {import("./types").ControlDictionary} ControlDictionary * @typedef {import("./types").ConfigObject} ConfigObject * @typedef {import("./types").ProjectionLike} ProjectionLike * @typedef {import("./types").AnyLayerWithSource} AnyLayerWithSource * @typedef {import("./types").GlobeConfig} GlobeConfig * */ /** * The `eox-map` element is a powerful wrapper around [OpenLayers](https://openlayers.org/) that provides a declarative, highly configurable map element for web applications. It supports a wide range of layer types, sources, controls, and advanced features, making it suitable for interactive mapping, data visualization, and geospatial analysis. * * ## Basic usage: * * ``` * import "@eox/map" * * * ``` * * Some basic layers, sources and formats are included in the default bundle, for advanced usage it is * required to import the `advancedLayersAndSources` plugin. * * Included in the base bundle: * - Formats: `GeoJSON`, `MVT` * - Layers: `Group`, `Image`, `Tile`, `Vector`, `VectorTile` * - Sources: `ImageWMS`, `OSM`, `Tile`, `TileWMS`, `Vector`, `VectorTile`, `WMTS`, `XYZ` * * In order to use the rest of the layers and sources provided by OpenLayers, import the plugin as well: * * ``` * import "@eox/map/src/plugins/advancedLayersAndSources" * import "@eox/map" * * * ``` * Included in the advanced plugin bundle: * - Layers: * - All OpenLayers layer types * - [`STAC`](https://github.com/m-mohr/ol-stac) * - Sources: * - All OpenLayers source types * - [`WMTSCapabilities`](https://github.com/EOX-A/EOxElements/tree/main/elements/map/src/custom/sources/WMTSCapabilities.ts) * - Reprojection through [proj4](https://github.com/proj4js/proj4js) * * For usage and story examples, see the Storybook stories in `/elements/map/stories`. * * ## Features * * - **Layer Support:** Easily add and configure layers such as Tile, Vector, VectorTile, Image, Group, and advanced types like STAC, GeoTIFF, MapboxStyle, and FlatGeoBuf. Layers are passed via the `layers` property as an array of configuration objects. * - **Source Formats:** Supports GeoJSON, MVT, OSM, TileWMS, WMTS, XYZ, ImageWMS, and more. Advanced sources (e.g., WMTSCapabilities) are available via plugin import. * - **Controls:** Add built-in or custom controls (Zoom, Geolocation, LoadingIndicator, etc.) using the `controls` property. Controls can be configured and styled for various use cases. * - **Interactions:** Enable feature selection, hover, click, cluster-explode, and highlight interactions. Interactions are configured per layer and can trigger custom events. * - **Tooltips:** Built-in tooltip support via ``, with options for property transformation, custom tooltips, and pixel/band value display for raster layers. * - **Layer Groups:** Organize layers into groups for complex compositions and hierarchical management. * - **Animations:** Animate view changes (zoom, center, extent) using the `animationOptions` property. * - **Projection & Transformation:** Change map projection, register custom projections, and transform coordinates/extents using helper methods. * - **Sync & Compare:** Synchronize multiple maps using the `sync` property, and compare maps side-by-side with ``. * - **Config Object:** Pass a configuration object for advanced map setup and dynamic updates. * - **Scroll Prevention:** Prevent scroll/drag interactions for embedded maps using the `preventScroll` property. * - **Globe View:** Interactive 3D globe by using "globe" projection property. Configure via the `globeConfig` object. * * ## Events * * - `clusterSelect`: Fired when a cluster is selected. * - `loadend`: Fired when the map has finished loading. * - `mapmounted`: Fired when the map is successfully mounted. * - `select`: Fired when a feature is selected. * - `layerschanged`: Fired when the layers have been changed. * * ## Methods * * - `registerProjection`, `registerProjectionFromCode`: Register custom or EPSG projections. * - `getLayerById`, `getFlatLayersArray`: Retrieve layers by ID or as a flat array. * - `addOrUpdateLayer`, `removeInteraction`, `removeSelect`, `removeControl`: Manage layers and interactions programmatically. * - `parseFeature`: Parses a feature from the input data. * - `parseTextToFeature`: Parses text into a feature. * * Usage: `document.querySelector("eox-map").registerProjection([...]);` * * ## Additional Helper Methods * * - `buffer`: Applies a buffer around an extent * - `transform`, `transformExtent`: Transform coordinates and extents between projections. * * Usage: `import { buffer, transform, transformExtent } from "@eox/map";` * * @element eox-map * @fires {CustomEvent} clusterSelect - A cluster is selected * @fires {CustomEvent} loadend - The map has finished loading * @fires {CustomEvent} mapmounted - The map has been successfully mounted * @fires {CustomEvent} select - A feature is selected * @fires {CustomEvent} layerschanged - The layers have been changed */ export class EOxMap extends LitElement { static get properties(): { map: { attribute: boolean; state: boolean; }; config: { attribute: boolean; type: ObjectConstructor; }; center: { attribute: boolean; type: ArrayConstructor; }; layers: { attribute: boolean; type: ArrayConstructor; }; zoom: { attribute: boolean; type: NumberConstructor; }; animationOptions: { attribute: boolean; type: ObjectConstructor; }; controls: { attribute: boolean; type: ObjectConstructor; }; interactions: { attribute: boolean; type: ObjectConstructor; }; lonLatCenter: { attribute: boolean; type: ArrayConstructor; }; lonLatExtent: { attribute: boolean; type: ArrayConstructor; }; mapControls: { attribute: boolean; state: boolean; type: ObjectConstructor; }; preventScroll: { attribute: string; type: BooleanConstructor; }; projection: { attribute: string; type: StringConstructor; }; selectInteractions: { attribute: boolean; state: boolean; type: ObjectConstructor; }; sync: { attribute: string; type: StringConstructor; }; zoomExtent: { attribute: boolean; type: ArrayConstructor; }; globeConfig: { attribute: boolean; type: ObjectConstructor; }; }; /** * Stores the last 2D projection to switch back from globe view. * @type {ProjectionLike} */ last2dProjection: ProjectionLike; /** * The OpenLayers map instance. * * @type {import("ol/Map").default} */ map: import("ol/Map").default; /** * Object to store various map interactions (e.g., drag, zoom). * * @type {Object.} */ interactions: { [x: string]: import("ol/interaction").Interaction; }; /** * Object to store selection interactions for the map. * * @type {Object.} */ selectInteractions: { [x: string]: import("./helpers").EOxSelectInteraction; }; /** * Object to store map controls (e.g., custom buttons, geolocation). * * @type {Object.} */ mapControls: { [x: string]: import("ol/control").Control; }; /** * The globe instance when using globe projection. * todo: define proper type * @type {any|null} */ globe: any | null; /** * Sets the center of the map. If the new center is valid, updates the map's view. * * @param {Array} center - The new center coordinates [x, y]. */ set center(center: Array); /** * Gets the current center coordinates of the map. * * @type {Array} * @returns {Array} The current center of the map. */ get center(): Array; /** * Sets the configuration for the map. * * @param {ConfigObject} config - The configuration object. */ set config(config: ConfigObject); /** * Gets the current configuration of the map. * * @type {ConfigObject} * @returns {ConfigObject} The map's configuration object. */ get config(): ConfigObject; /** * Gets the current center of the map in longitude and latitude. * * @type {Array} * @returns {Array} The geographic center [longitude, latitude]. */ get lonLatCenter(): Array; /** * Gets the current extent of the map in longitude and latitude. * * @type {Array} * @returns {Array} The geographic extent [minLon, minLat, maxLon, maxLat]. */ get lonLatExtent(): Array; /** * Sets the zoom level of the map and animates the change. * * @param {number} zoom - The new zoom level. */ set zoom(zoom: number); /** * Gets the current zoom level of the map. * * @type {number} * @returns {number} The current zoom level. */ get zoom(): number; /** * Sets the zoom extent of the map. * * @param {import("ol/extent").Extent} extent - The new zoom extent. */ set zoomExtent(extent: import("ol/extent").Extent); /** * Gets the current extent of the map. * * @type {Array} * @returns {Array} The extent in current map projection. */ get zoomExtent(): Array; /** * Sets the controls for the map. * * @param {ControlDictionary} controls - An array of control configurations. */ set controls(controls: ControlDictionary); /** * Gets the current map controls. * * @type {ControlDictionary} * @returns {ControlDictionary} The current controls applied to the map. */ get controls(): ControlDictionary; /** * Sets the layers for the map. * * @param {Array} layers - An array of layer configurations. */ set layers(layers: Array); /** * Gets the current layers of the map * * @returns {Array} The current layers applied to the map. */ get layers(): Array; /** * Enables or disables scroll interactions on the map. * * @param {boolean} preventScroll - Whether to prevent scroll interactions. */ set preventScroll(preventScroll: boolean); /** * Gets the current scroll interaction state. * * @type {boolean} * @returns {boolean} `true` if scroll interactions are prevented, `false` otherwise. */ get preventScroll(): boolean; /** * Sets animation options for map view changes. * * @param {EOxAnimationOptions} animationOptions - The animation options. */ set animationOptions(animationOptions: EOxAnimationOptions); /** * Gets the current animation options. * * @type {EOxAnimationOptions} * @returns {EOxAnimationOptions} The current animation options for the map. */ get animationOptions(): EOxAnimationOptions; /** * Sets the map's projection. * * @param {ProjectionLike} projection - The projection code (e.g., "EPSG:3857") or "globe". */ set projection(projection: ProjectionLike); /** * Gets the current map projection. * * @type {ProjectionLike} * @returns {ProjectionLike} The map's projection code or "globe" if globe is enabled. */ get projection(): ProjectionLike; /** * Gets the openlayer map projection. * * @type {ProjectionLike} * @returns {ProjectionLike} The map's openlayer code */ get OLprojection(): ProjectionLike; /** * Sets the Whether the globe is enabled. * * @type {boolean} * @returns {boolean} Whether the globe is enabled. */ set globeEnabled(globeEnabled: boolean); /** * Gets the Whether the globe is enabled. * * @type {boolean} * @returns {boolean} Whether the globe is enabled. */ get globeEnabled(): boolean; /** * Sets the sync state for the map. * * @param {string} sync - The ID of the map to sync with. */ set sync(sync: string); /** * Gets the current sync state of the map. * * @type {string} * @returns {string} The ID of the map that this map is synced with. */ get sync(): string; /** * Sets the properties of the globe such as the terrain. * * @param {GlobeConfig} globeConfig - The globe configuration which contains the terrain boolean. */ set globeConfig(globeConfig: GlobeConfig); /** * Gets the current globe configuration properties. * @returns {GlobeConfig} */ get globeConfig(): GlobeConfig; /** * Adds or updates a layer on the map. * * @param {EoxLayer} json - The layer configuration in JSON format. * @returns {Object} The added or updated layer. */ addOrUpdateLayer(json: EoxLayer): any; /** * Removes an interaction from the map by its ID. * * @param {string | number} id - The ID of the interaction to remove. */ removeInteraction(id: string | number): void; /** * Removes a select interaction from the map by its ID. * * @param {string | number} id - The ID of the select interaction to remove. */ removeSelect(id: string | number): void; /** * Removes a control from the map by its ID. * * @param {string} id - The ID of the control to remove. */ removeControl(id: string): void; /** * Retrieves a layer from the map by its ID. * * @param {string} layerId - The ID of the layer to retrieve. * @returns {import("./types").AnyLayerWithSource} The layer object. */ getLayerById(layerId: string): import("./types").AnyLayerWithSource; /** * Lifecycle method called after the component's first update. * Sets up initial configurations like zoom extent. */ firstUpdated(): void; /** * Converts an array of OpenLayers features into a GeoJSON object. * * @param {Array} features - An array of OpenLayers features to be converted. * @returns {Object} - A GeoJSON object representing the provided features. */ parseFeature(features: Array): any; /** * This function reads text and attempts to parse it as GeoJSON, KML, or TopoJSON. * If successful, it adds the parsed features to the map. * * @param {string} text - The string containing the geographic data to be parsed. * @param {import("ol/layer").Vector} vectorLayer - The vector layer to which the parsed features will be added. * @param {EOxMap} EOxMap - An instance of EOxMap, used here for context and potentially for further operations like event dispatching. * @param {boolean} replaceFeatures - Optional boolean flag indicating whether to replace the existing features with the new ones. * @param {boolean} animate - Optional boolean flag indicating whether to animate the map on feature change. * @return {void} */ parseTextToFeature(text: string, vectorLayer: import("ol/layer").Vector, EOxMap: EOxMap, replaceFeatures: boolean, animate: boolean): void; /** * Fetches the projection definition for a given EPSG code from epsg.io and registers the projection using proj4. * * @param {string | number} code - The EPSG code (e.g., 4326 or 'EPSG:4326'). * @returns {Promise} - A promise that resolves to the registered projection. */ registerProjectionFromCode(code: string | number): Promise; /** * Registers a projection under a given name using a proj4 definition. * This allows OpenLayers to recognize and work with custom or predefined projections. * * @param {string} name - The name of the projection (e.g., "EPSG:4326"). * @param {string | proj4.ProjectionDefinition} projection - The proj4 projection definition string or object. * @param {import("ol/extent").Extent} [extent=undefined] - Optional extent for the projection. Defines the coordinate system's valid area. */ registerProjection(name: string, projection: string | proj4.ProjectionDefinition, extent?: import("ol/extent").Extent): void; /** * Returns a flat array of all map layers, including nested layers within groups. * * Note: If you want to get all layers without groups, use the native OpenLayers `getAllLayers` method: * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getAllLayers * * @param {Array} layers - Array of OpenLayers layers, possibly containing groups. * @returns {Array} layers - Flattened array of input layers */ getFlatLayersArray(layers: Array): Array; render(): import("lit-html").TemplateResult<1>; #private; } export type EoxLayer = import("./layers").EoxLayer; export type EOxAnimationOptions = import("./types").EOxAnimationOptions; export type ControlDictionary = import("./types").ControlDictionary; export type ConfigObject = import("./types").ConfigObject; export type ProjectionLike = import("./types").ProjectionLike; export type AnyLayerWithSource = import("./types").AnyLayerWithSource; export type GlobeConfig = import("./types").GlobeConfig; import { LitElement } from "lit"; import { buffer } from "ol/extent"; import { transform } from "./helpers"; import { transformExtent } from "./helpers"; export { buffer, transform, transformExtent }; //# sourceMappingURL=main.d.ts.map