@emuanalytics/flow-rdf-core 4.0.4 → 4.0.5

package/dist/lib/map/flow-core-map.mjs

@@ -0,0 +1,749 @@
+import maplibre from '@emuanalytics/maplibre-gl';
+import Debug from 'debug';
+import EventEmitter from 'eventemitter3';
+import { runInAction } from 'mobx';
+import { toStream } from 'mobx-utils';
+import { FlowMapError } from '../errors/flow-map-error.mjs';
+import { assert } from '../utils/assert.mjs';
+import { debounceWithArgs } from '../utils/debounce.mjs';
+import { randomId } from '../utils/random-id.mjs';
+import { throttle } from '../utils/throttle.mjs';
+import { isPlainObject, isNil, isDefined, isStringFull, isUndefined, isURL, isString } from '../utils/type-checks.mjs';
+import { PluginManager } from './plugins/plugin-manager.mjs';
+import { ImageRegistry } from './support/image-registry.mjs';
+import { MapStyleChangeEvent, MapSourceEvent, MapEvent, MapLoadingEvent, MapMouseEvent } from './support/map-events.mjs';
+import { MapFeatureStream } from './support/map-feature-stream.mjs';
+import { MapStyle } from '../map-style/map-style.mjs';
+import { MapLayer } from '../map-style/map-layer.mjs';
+import { MapDataSource } from '../map-style/map-data-source.mjs';
+import { getGlobalState } from '../context/global-state.mjs';
+import { FlowCoreError } from '../errors/flow-error.mjs';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const debug = Debug("flow:map");
+const MOUSE_MOVE_THROTTLE_DURATION = 100;
+const _FlowCoreMap = class _FlowCoreMap extends EventEmitter {
+  /**
+   * 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) {
+    super();
+    __publicField(this, "_context");
+    __publicField(this, "_initialized");
+    __publicField(this, "_loading", true);
+    __publicField(this, "_debouncedEmitSourceEvent");
+    __publicField(this, "_imageRegistry", new ImageRegistry());
+    __publicField(this, "_options");
+    __publicField(this, "_pluginManager");
+    __publicField(this, "_resolveInitialized", () => {
+    });
+    __publicField(this, "_style");
+    __publicField(this, "_styleUpdateSubscription", null);
+    __publicField(this, "_throttledMouseMove", throttle(this.handleMouseMove, MOUSE_MOVE_THROTTLE_DURATION, { context: this }));
+    __publicField(this, "_maplibreMap");
+    __publicField(this, "updateMapStyle", (style) => {
+      const oldStyle = this._maplibreMap.getStyle();
+      const beforeEvent = new MapStyleChangeEvent("beforeStyleChanged", this, oldStyle, style);
+      style = this._pluginManager.forwardStyleChangeEvent(
+        new MapStyleChangeEvent("beforeStyleChanged", this, oldStyle, style)
+      );
+      this.emit(beforeEvent.type, beforeEvent);
+      debug(`${this.formattedName}: Updating style`, style);
+      this._maplibreMap.setStyle(style);
+      this.emitEvent(new MapStyleChangeEvent("styleChanged", this, oldStyle, style));
+    });
+    this._options = {
+      id: randomId("map"),
+      ..._FlowCoreMap._defaultOptions,
+      ...options
+    };
+    this._style = new MapStyle();
+    this._debouncedEmitSourceEvent = debounceWithArgs(this.emitEvent, 20, {
+      hash: (event) => event.source,
+      context: this
+    });
+    this._initialized = new Promise((resolve) => {
+      this._resolveInitialized = resolve;
+    });
+    this._pluginManager = new PluginManager(this);
+    this.initialize();
+  }
+  /**
+   * 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() {
+    return this._maplibreMap;
+  }
+  /**
+   * Returns the {@link FlowContext} associated with this map.
+   */
+  get context() {
+    return this._context;
+  }
+  /**
+   * Returns the map's container element.
+   */
+  get container() {
+    return this._maplibreMap.getContainer();
+  }
+  /**
+   * Returns the map identifier.
+   */
+  get id() {
+    return this._options.id;
+  }
+  /**
+   * 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() {
+    return this._initialized;
+  }
+  /**
+   * 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() {
+    return this._style.styleSpecification;
+  }
+  /**
+   * @internal
+   *
+   * Used by map export to get images added to map.
+   */
+  get imageRegistry() {
+    return this._imageRegistry;
+  }
+  addLayer(layerOrOptions) {
+    const layer = isPlainObject(layerOrOptions) ? new MapLayer(layerOrOptions) : layerOrOptions;
+    this._style.addLayer(layer);
+    return layer;
+  }
+  addSource(sourceOrOptions) {
+    const source = isPlainObject(sourceOrOptions) ? new MapDataSource(sourceOrOptions) : sourceOrOptions;
+    this.emitEvent(new MapSourceEvent("beforeSourceAdded", this, source.id));
+    source.setFlowEndpoint({
+      host: this.context.flowClient.baseUrl,
+      apiKey: this.context.flowClient.apiKey || void 0
+    });
+    this._style.addSource(source);
+    this.emitEvent(new MapSourceEvent("sourceAdded", this, source.id));
+    return source;
+  }
+  /**
+   * Destroys the map instance and removes it from the DOM.
+   */
+  destroy() {
+    this._pluginManager.removeAllPlugins();
+    this._styleUpdateSubscription?.unsubscribe();
+    this._maplibreMap?.remove();
+    if (this.context) {
+      this.context.maps.unregisterMap(this);
+    }
+    this.emit("destroyed", new MapEvent("destroyed", this));
+  }
+  /**
+   * 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, originalError) {
+    const error = new FlowMapError(`${this.formattedName}: ${message}`, originalError);
+    this._pluginManager.forwardEvent("error", error);
+    if (this.listenerCount("error")) {
+      this.emit("error", error);
+    } else {
+      console.error(error);
+    }
+  }
+  /** Used internally and by plugins to emit a map event. */
+  emitEvent(event) {
+    this._pluginManager.forwardEvent(event.type, event);
+    this.emit(event.type, event);
+  }
+  /**
+   * 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) {
+    return new MapFeatureStream({ map: this, ...options });
+  }
+  /**
+   * 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) {
+    return this._maplibreMap.getFeatureState(feature);
+  }
+  /**
+   * Returns the {@link MapLayer} with the specified ID.
+   *
+   * @param id - Map layer ID
+   */
+  getLayer(id) {
+    return this._style.getLayer(id);
+  }
+  /**
+   * 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) {
+    return this._style.getLayers(filter);
+  }
+  /**
+   * 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) {
+    return this._pluginManager.getPlugin(pluginOrName);
+  }
+  /**
+   * Returns the {@link MapDataSource} with the specified ID.
+   *
+   * @param id - Data source ID
+   */
+  getSource(id) {
+    return this._style.getSource(id);
+  }
+  /**
+   * 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) {
+    return this._style.getSources(filter);
+  }
+  /**
+   * 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 [`icon-image`](/flow-rdf-core/layer-reference/symbol#icon-image) property.
+   *
+   * @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, src, width, height, pixelDensity = 2, recolor = false) {
+    debug(`${this.formattedName}: Registering image '${id}'`);
+    this._imageRegistry.registerImage(id, src, width, height, pixelDensity, recolor);
+  }
+  /**
+   * 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, key, fireEvent = true) {
+    if (isNil(feature.id) && isDefined(key)) {
+      const style = this._maplibreMap.style;
+      style._checkLoaded();
+      const sourceId = feature.source;
+      const sourceCache = style.sourceCaches[sourceId];
+      if (sourceCache === void 0) {
+        throw new FlowCoreError(`${this.formattedName}: the source '${sourceId}' does not exist in the map's style.`);
+      }
+      const sourceState = sourceCache._state;
+      const sourceType = sourceCache.getSource().type;
+      const sourceLayer = sourceType === "vector" ? feature.sourceLayer ?? "geometry" : "_geojsonTileLayer";
+      sourceState.deletedStates[sourceLayer] = sourceState.deletedStates[sourceLayer] || {};
+      const sourceLayerDeleted = sourceState.deletedStates[sourceLayer] === null;
+      if (sourceLayerDeleted) {
+        return;
+      }
+      if (sourceState.state[sourceLayer]) {
+        Object.keys(sourceState.state[sourceLayer]).forEach((feature2) => {
+          if (sourceState.deletedStates[sourceLayer][feature2] !== null) {
+            sourceState.deletedStates[sourceLayer][feature2] = sourceState.deletedStates[sourceLayer][feature2] || {};
+            sourceState.deletedStates[sourceLayer][feature2][key] = null;
+          }
+        });
+      }
+      this._maplibreMap._update();
+    } else {
+      this._maplibreMap.removeFeatureState(feature, key);
+    }
+    if (fireEvent) {
+      const sourceEvent = new MapSourceEvent("sourceFeatureState", this, feature.source);
+      this._debouncedEmitSourceEvent(sourceEvent);
+    }
+  }
+  /**
+   * Remove the specified {@link MapLayer} from the map.
+   * @param id - Map layer ID
+   */
+  removeLayer(id) {
+    this._style.removeLayer(id);
+    return this;
+  }
+  /**
+   * Remove the specified {@link MapDataSource} from the map.
+   * @param id - Map data source ID
+   */
+  removeSource(id, removeLayers = false) {
+    this.emitEvent(new MapSourceEvent("beforeSourceRemoved", this, id));
+    this._style.removeSource(id, removeLayers);
+    this.emitEvent(new MapSourceEvent("sourceRemoved", this, id));
+    return this;
+  }
+  /**
+   * Set the map's base style.
+   *
+   * ##TODO list of available base styles
+   *
+   * @param style - A style identifier or a Maplibre style specification.
+   */
+  async setBaseStyle(style) {
+    const baseStyle = await this.loadBaseStyle(style);
+    this._style.setBaseStyle(baseStyle);
+  }
+  /**
+   * Returns the map's current center, bearing, pitch, and zoom level.
+   */
+  getCenter() {
+    const lngLat = this._maplibreMap.getCenter();
+    const zoom = this._maplibreMap.getZoom();
+    const bearing = this._maplibreMap.getBearing();
+    const pitch = this._maplibreMap.getPitch();
+    return {
+      lng: lngLat.lng,
+      lat: lngLat.lat,
+      zoom,
+      bearing,
+      pitch
+    };
+  }
+  /**
+   * 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, animationOptions) {
+    const lngLat = isDefined(center.lng) && isDefined(center.lat) ? new maplibre.LngLat(center.lng, center.lat) : void 0;
+    let method = this._maplibreMap.jumpTo;
+    if (animationOptions) {
+      switch (animationOptions.mode) {
+        case "ease":
+          method = this._maplibreMap.easeTo;
+          break;
+        case "fly":
+          method = this._maplibreMap.flyTo;
+          break;
+        default:
+          method = this._maplibreMap.jumpTo;
+      }
+    }
+    const options = {
+      center: lngLat,
+      ...isDefined(center.zoom) && { zoom: center.zoom },
+      ...isDefined(center.bearing) && { bearing: center.bearing },
+      ...isDefined(center.pitch) && { pitch: center.pitch },
+      ...animationOptions
+    };
+    const promise = new Promise((resolve) => {
+      this.once("moveEnd", () => resolve());
+    });
+    method.call(this._maplibreMap, options);
+    return promise;
+  }
+  /**
+   * Returns the map's current bounds in degrees as an array of `[west, south, east, north]`.
+   *
+   * See also {@link getVisibleBounds}.
+   */
+  getBounds() {
+    const bounds = this._maplibreMap.getBounds();
+    return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
+  }
+  /**
+   * 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, options) {
+    const fitBoundsOptions = {
+      linear: !options || options.mode === "ease" || options.mode === "jump",
+      animate: !!options && options.mode !== "jump",
+      ...options
+    };
+    this._maplibreMap.fitBounds(bounds, fitBoundsOptions);
+  }
+  /**
+   * 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() {
+    const parentEl = this.container.parentElement;
+    if (!parentEl) {
+      return this.getBounds();
+    }
+    const mapRect = parentEl.getBoundingClientRect();
+    const topLeft = this._maplibreMap.unproject([mapRect.x, mapRect.y]);
+    const bottomRight = this._maplibreMap.unproject([mapRect.x + mapRect.width, mapRect.y + mapRect.height]);
+    const bounds = [topLeft.lng, bottomRight.lat, bottomRight.lng, topLeft.lat];
+    return bounds;
+  }
+  /**
+   * 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, state, fireEvent = true) {
+    const source = this.getSource(feature.source);
+    assert(
+      isDefined(source.featureId),
+      `${this.formattedName}: cannot set feature state (source '${source.id}' has not featureId specified)`
+    );
+    if (source?.type === "vector") {
+      feature.sourceLayer = feature.sourceLayer || "geometry";
+    }
+    this._maplibreMap.setFeatureState(feature, state);
+    if (fireEvent) {
+      const sourceEvent = new MapSourceEvent("sourceFeatureState", this, feature.source);
+      this._debouncedEmitSourceEvent(sourceEvent);
+    }
+  }
+  /**
+   * 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, featureState) {
+    const source = this.getSource(sourceId.source);
+    assert(isStringFull(source.featureId));
+    this._maplibreMap.style._checkLoaded();
+    const sourceCache = this._maplibreMap.style.sourceCaches[sourceId.source];
+    if (isUndefined(sourceCache)) {
+      throw new FlowCoreError(
+        `${this.formattedName}: the source '${sourceId.source}' does not exist in the map's style.`
+      );
+    }
+    const sourceLayer = sourceCache.getSource().type === "vector" ? sourceId.sourceLayer ?? "geometry" : "";
+    Object.keys(featureState).forEach((featureId) => {
+      sourceCache.setFeatureState(sourceLayer, featureId, featureState[featureId]);
+    });
+    this._maplibreMap._update();
+    const sourceEvent = new MapSourceEvent("sourceFeatureState", this, sourceId.source);
+    this._debouncedEmitSourceEvent(sourceEvent);
+  }
+  /**
+   * 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) {
+    runInAction(() => fn());
+  }
+  /**
+   * 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, options) {
+    return this._pluginManager.usePlugin(plugin, options);
+  }
+  /**
+   * 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) {
+    plugins.forEach((plugin) => this.usePlugin(plugin));
+  }
+  get formattedName() {
+    return `FlowMap<${this._options.id}>`;
+  }
+  bindMapEvents() {
+    this._maplibreMap.on("error", (e) => this.emitError(e.error.message, e.error));
+    this._maplibreMap.on("mousemove", this._throttledMouseMove);
+    this._maplibreMap.on("mouseout", this._throttledMouseMove);
+    this._maplibreMap.on("click", this.handleMouseClick("click").bind(this));
+    this._maplibreMap.on("dblclick", this.handleMouseClick("dblClick").bind(this));
+    this._maplibreMap.on("styleimagemissing", this.handleMissingImage.bind(this));
+    this._maplibreMap.on("sourcedata", this.handleLoading.bind(this));
+    this._maplibreMap.on("idle", this.handleLoading.bind(this));
+    const eventsToForward = ["moveEnd"];
+    eventsToForward.forEach((eventName) => {
+      this._maplibreMap.on(eventName.toLowerCase(), (event) => {
+        const flowEvent = MapEvent.fromMaplibreEvent(eventName, this, event);
+        this.emitEvent(flowEvent);
+      });
+    });
+  }
+  featureFromMaplibreFeature(feature) {
+    return {
+      id: feature.id,
+      geometry: feature.geometry,
+      source: feature.source,
+      sourceLayer: feature.sourceLayer,
+      layer: feature.layer.id,
+      properties: feature.properties,
+      state: feature.state
+    };
+  }
+  featureQueryBox(event) {
+    const queryBox = this._options.featureClickTolerance ? [
+      [event.point.x - this._options.featureClickTolerance, event.point.y - this._options.featureClickTolerance],
+      [event.point.x + this._options.featureClickTolerance, event.point.y + this._options.featureClickTolerance]
+    ] : event.point;
+    return queryBox;
+  }
+  async handleLoading(event) {
+    let loading = false;
+    if (event.type === "sourcedata" && event.isSourceLoaded === false) {
+      loading = true;
+    } else if (event.type === "idle") {
+      loading = false;
+    } else {
+      loading = !!Object.values(this._maplibreMap.style.sourceCaches).find((cache) => !cache.loaded());
+    }
+    if (this._loading !== loading) {
+      const loadingEvent = new MapLoadingEvent(this, loading);
+      this.emitEvent(loadingEvent);
+      this._loading = loading;
+    }
+  }
+  async handleMissingImage(event) {
+    const imageInfo = this._imageRegistry.getImage(event.id);
+    if (imageInfo === this._imageRegistry.unknownImage) {
+      console.error(`${this.formattedName}: Image '${event.id}' not registered`);
+    }
+    if (!imageInfo.image.complete) {
+      imageInfo.image.onload = () => {
+        this._maplibreMap.updateImage(event.id, imageInfo.image);
+        this._maplibreMap.redraw();
+      };
+    }
+    this._maplibreMap.addImage(event.id, imageInfo.image, {
+      pixelRatio: imageInfo.pixelDensity,
+      sdf: imageInfo.recolor
+    });
+  }
+  handleMouseClick(type) {
+    return (event) => {
+      const layerIds = this._style.getLayers((layer) => layer.interactive).map((layer) => layer.id);
+      const features = this._maplibreMap.queryRenderedFeatures(this.featureQueryBox(event), { layers: layerIds }).map(this.featureFromMaplibreFeature.bind(this));
+      if (features.length) {
+        debug(`${this.formattedName} Feature ${type}ed`, features[0]);
+      }
+      const flowEvent = MapMouseEvent.fromMaplibreMouseEvent(type, event, this, features);
+      this.emitEvent(flowEvent);
+    };
+  }
+  handleMouseMove(event) {
+    if (event.type === "mousemove") {
+      const layerIds = this._style.getLayers((layer) => layer.interactive).map((layer) => layer.id);
+      const features = this._maplibreMap.queryRenderedFeatures(this.featureQueryBox(event), { layers: layerIds }).map(this.featureFromMaplibreFeature.bind(this));
+      const flowEvent = MapMouseEvent.fromMaplibreMouseEvent("mouseMove", event, this, features);
+      this.emitEvent(flowEvent);
+    } else if (event.type === "mouseout") {
+      const flowEvent = MapMouseEvent.fromMaplibreMouseEvent("mouseOut", event, this, []);
+      this.emitEvent(flowEvent);
+    }
+  }
+  async initialize() {
+    const globalContextRegistry = getGlobalState().globalContextRegistry;
+    this._context = await globalContextRegistry.getContext(this._options.contextId);
+    this._style.bindState(this._context.state);
+    const baseStyle = await this.loadBaseStyle(this._options.baseStyle);
+    this._style.setBaseStyle(baseStyle);
+    this._maplibreMap = new maplibre.Map({
+      ...this._options,
+      transformRequest: this.transformMapRequest.bind(this),
+      style: baseStyle
+    });
+    this._maplibreMap.once("load", () => {
+      this._styleUpdateSubscription = toStream(() => this._style.styleSpecification, false).subscribe(
+        this.updateMapStyle
+      );
+      this.bindMapEvents();
+      this._resolveInitialized();
+      debug(`${this.formattedName}: initialized with options`, this._options);
+      this.context.maps.registerMap(this);
+    });
+  }
+  async loadBaseStyle(style) {
+    if (isURL(style)) {
+      return fetch(style).then((resp) => resp.json());
+    } else if (isString(style)) {
+      return this.context.flowClient.maps.get(style);
+    } else {
+      return style;
+    }
+  }
+  transformMapRequest(url, resourceType) {
+    const requestParameters = { url };
+    if (this.context.flowClient.accessToken && url.startsWith(this.context.flowClient.baseUrl)) {
+      requestParameters.headers = { Authorization: `Bearer ${this.context.flowClient.accessToken}` };
+    }
+    return requestParameters;
+  }
+};
+__publicField(_FlowCoreMap, "_defaultOptions", {
+  boxZoom: false,
+  doubleClickZoom: false,
+  featureClickTolerance: 0
+});
+let FlowCoreMap = _FlowCoreMap;
+
+export { FlowCoreMap };